dir-pseudo-class-in-has.html (1498B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/> 5 <link rel="help" href="https://drafts.csswg.org/selectors/#relational"/> 6 <link rel="help" href="https://drafts.csswg.org/selectors/#dir-pseudo"/> 7 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"/> 8 </head> 9 <body> 10 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 11 <section><div id="ltr1" class="ltr"></div></section> 12 <section id="ltr2" dir="rtl"><div class="ltr"><span></span></div></section> 13 <section dir="ltr"><div class="ltr"><span></span></div></section> 14 <section><div id="rtl1" class="rtl"><span></span></div></section> 15 <section id="rtl2"><div class="rtl"><span></span></div></section> 16 <style> 17 div, section { width: 100px; height: 20px; } 18 section { background: red; } 19 .ltr:has(*:dir(ltr)) { background: green; } 20 .ltr:has(*:dir(rtl)) { background: red; } 21 .rtl:has(*:dir(rtl)) { background: green; } 22 .rtl:has(*:dir(ltr)) { background: red; } 23 </style> 24 <script> 25 requestAnimationFrame(() => { 26 setTimeout(() => { 27 ltr1.appendChild(document.createElement('span')); 28 ltr2.dir = 'ltr'; 29 rtl1.dir = 'rtl'; 30 rtl2.dir = 'rtl'; 31 document.documentElement.className = ''; 32 }, 0); 33 }); 34 </script> 35 </body> 36 </html>