dir-style-04.html (1478B)
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 :dir() basic functions on runtime added elements."> 10 <link rel="match" href="dir-style-04-ref.html"> 11 <meta name="fuzzy" content="maxDifference=0-70; totalPixels=0-180"> 12 <style> 13 :dir(ltr) { color: blue } 14 :dir(rtl) { color: lime } 15 div { text-align: left; } 16 </style> 17 <script> 18 function appendChildren(e) 19 { 20 // ensure it's a dynamic change 21 document.documentElement.getBoundingClientRect(); 22 23 var x = document.createElement("span"); 24 x.innerHTML = "This span should inherit dir from the parent. "; 25 26 var y = document.createElement("span"); 27 y.innerHTML = "This span should inherit dir from the grandparent."; 28 29 var div = document.getElementById(e); 30 31 x.appendChild(y); 32 div.appendChild(x); 33 34 document.documentElement.removeAttribute("class"); 35 } 36 </script> 37 </head> 38 <body onload="appendChildren('d1');appendChildren('d2');"> 39 <div id="d1" dir="ltr">This element is ltr. </div> 40 <div id="d2" dir="rtl">This element is rtl. </div> 41 </body> 42 </html>