dir-style-03b.html (1225B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS Test: :dir() selector</title> 6 <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> 7 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 8 <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo"> 9 <meta name="assert" content="Test checks if :dir() can work with other selectors correctly after a dynamic directionality change on specified divs."> 10 <link rel="match" href="dir-style-03-ref.html"> 11 <style> 12 div { color: lime; text-align: left; } 13 :not(:dir(ltr)) + div { color: blue } 14 </style> 15 <script> 16 function switchDir() 17 { 18 theDiv = document.getElementById("div"); 19 theDiv.offsetWidth; // ensure it's a dynamic change 20 if (theDiv.dir == "ltr") { 21 theDiv.dir = "rtl"; 22 } else if (theDiv.dir == "rtl") { 23 theDiv.dir = "ltr"; 24 } 25 26 document.documentElement.removeAttribute("class"); 27 } 28 </script> 29 </head> 30 <body onload="switchDir()"> 31 <div id="div" dir="ltr">This element is rtl.</div> 32 <div>This element has default direction.</div> 33 </body> 34 </html>