focus-within-shadow-002.html (1380B)
1 <!DOCTYPE html> 2 <html lang=en class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>Selectors Level 4: focus-within with shadow DOM</title> 5 <link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> 6 <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> 7 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> 8 <link rel="match" href="focus-within-shadow-001-ref.html"> 9 <meta name="flags" content="dom"> 10 <meta name="assert" content="Test that :focus-within applies to a shadow host containing a focused element."> 11 <style> 12 div:focus-within { 13 border: solid 15px green; 14 } 15 </style> 16 <body> 17 <p>Test passes if there is a green rectangle below.</p> 18 <div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div> 19 20 <template id="shadow-template"> 21 <style> 22 /* Suppress things that cannot be reproduced in the reference file */ 23 :focus { 24 outline: none; 25 } 26 </style> 27 <div id="focusme" tabindex="1"></div> 28 </template> 29 30 <script> 31 var shadow = document.getElementById('shadow-host').attachShadow({mode: 'open'}); 32 var template = document.getElementById('shadow-template'); 33 var instance = document.importNode(template.content, true); 34 shadow.appendChild(instance); 35 var focusme = shadow.getElementById('focusme'); 36 focusme.focus(); 37 document.documentElement.classList.remove('reftest-wait'); 38 </script> 39 </body> 40 </html>