shadow-directionality-001.tentative.html (1265B)
1 <!doctype html> 2 <title>CSS Test: directionality propagation in Shadow DOM.</title> 3 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 4 <link rel="help" href="https://html.spec.whatwg.org/#the-dir-attribute"> 5 <link rel="help" href="https://github.com/whatwg/html/issues/3699"> 6 <link rel="match" href="reference/green-box.html"> 7 <style> 8 div { width: 100px; } 9 </style> 10 <p>Test passes if you see a single 100px by 100px green box below.</p> 11 <div id="host1"></div> 12 <div id="host2" dir="rtl"></div> 13 <div id="host3"></div> 14 <div id="host4" dir="rtl"></div> 15 <script> 16 host1.attachShadow({ mode: "open" }).innerHTML = ` 17 <style>:dir(ltr) { background: green; height: 25px; }</style> 18 <div></div> 19 `; 20 host2.attachShadow({ mode: "open" }).innerHTML = ` 21 <style>:dir(rtl) { background: green; height: 25px; }</style> 22 <div></div> 23 `; 24 host3.attachShadow({ mode: "open" }).innerHTML = ` 25 <style>:dir(rtl) { background: green; height: 25px; }</style> 26 <div></div> 27 `; 28 host4.attachShadow({ mode: "open" }).innerHTML = ` 29 <style>span:dir(ltr) { display: block; background: green; height: 25px; }</style> 30 <div dir="ltr"><span></span></div> 31 `; 32 document.body.offsetTop; 33 host3.setAttribute("dir", "rtl"); 34 </script>