| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <body> |
| <section><div id="ltr1" class="ltr"></div></section> |
| <section id="ltr2" dir="rtl"><div class="ltr"><span></span></div></section> |
| <section dir="ltr"><div class="ltr"><span></span></div></section> |
| <section><div id="rtl1" class="rtl"><span></span></div></section> |
| <section id="rtl2"><div class="rtl"><span></span></div></section> |
| <style> |
| div, section { width: 100px; height: 20px; } |
| section { background: red; } |
| .ltr:has(*:dir(ltr)) { background: green; } |
| .ltr:has(*:dir(rtl)) { background: red; } |
| .rtl:has(*:dir(rtl)) { background: green; } |
| .rtl:has(*:dir(ltr)) { background: red; } |
| </style> |
| <script> |
| requestAnimationFrame(() => { |
| setTimeout(() => { |
| ltr1.appendChild(document.createElement('span')); |
| ltr2.dir = 'ltr'; |
| rtl1.dir = 'rtl'; |
| rtl2.dir = 'rtl'; |
| document.documentElement.className = ''; |
| }, 0); |
| }); |
| </script> |
| </body> |
| </html> |
