lang-pseudo-class-in-has-multiple-document-elements.html (1175B)
1 <!DOCTYPE html> 2 <html lang="fr" class="reftest-wait"> 3 <link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/> 4 <link rel="help" href="https://drafts.csswg.org/selectors/#relational"> 5 <link rel="help" href="https://drafts.csswg.org/selectors/#lang-pseudo"> 6 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 7 <body> 8 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 9 <div><span></span></div> 10 <script> 11 const test = document.querySelector('div').matches('*:has(:lang(fr))') ? 'PASS' : 'FAIL'; 12 13 const newDocumentElement = document.createElement('html'); 14 newDocumentElement.lang = 'en'; 15 document.replaceChild(newDocumentElement, document.documentElement); 16 document.documentElement.innerHTML = ` 17 <head> 18 <style> 19 div { width: 100px; height: 100px; } 20 div:has(*:lang(fr)) { background: red; } 21 div:has(*:lang(en)) { background: green; } 22 span.pass { color: green; } 23 span.fail { color: red; } 24 </style> 25 </head> 26 <body> 27 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 28 <div><span class="${test.toLowerCase()}">${test}</span></div> 29 </body>`; 30 </script> 31 </body> 32 </html>