lang-pseudo-class-in-has.html (1614B)
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/#lang-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 class="lang"><div lang="en"></div></section> 12 <section class="lang" id="fr" lang="fr"><div></div></section> 13 <section class="lang" id="ja" lang="ja" style="-webkit-locale: 'en'"><div></div></section> 14 <div><section class="lang" id="zh" lang="zh" style="-webkit-locale: 'en'"><span></span></section></div> 15 <div id="kr" class="lang" lang="kr"></div> 16 <style> 17 div { width: 100px; height: 20px; } 18 .lang div:lang(en) { background: green; } 19 .lang div:lang(fr) { background: red; } 20 .lang div:lang(ja) { background: red; } 21 div:has(.lang :lang(zh)) { background: red; } 22 div:has(.lang :lang(en)) { background: green; } 23 .lang:lang(kr) { background: red; } 24 .lang div:lang(kr) { background: green; } 25 </style> 26 <script> 27 requestAnimationFrame(() => { 28 setTimeout(() => { 29 fr.lang = 'en'; 30 ja.lang = 'en'; 31 zh.lang = 'en'; 32 kr.appendChild(document.createElement('div')); 33 document.documentElement.className = ''; 34 }, 0); 35 }); 36 </script> 37 </body> 38 </html>