dir-pseudo-in-has.html (1115B)
1 <!DOCTYPE html> 2 <html> 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 class="ltr"><span></span></div></section> 12 <section><div dir="ltr" class="ltr"><span></span></div></section> 13 <section dir="ltr"><div class="ltr"><span></span></div></section> 14 <section><div dir="rtl" class="rtl"><span></span></div></section> 15 <section dir="rtl"><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 </body> 25 </html>