focus-within-shadow-001.html (1361B)
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 focused element inside the shadow DOM."> 11 <body> 12 <p>Test passes if there is a green rectangle below.</p> 13 <div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div> 14 15 <template id="shadow-template"> 16 <style> 17 /* Suppress things that cannot be reproduced in the reference file */ 18 :focus { 19 outline: none; 20 } 21 22 div:focus-within { 23 border: solid 15px green; 24 } 25 </style> 26 <div id="focusme" tabindex="1"></div> 27 </template> 28 29 <script> 30 var shadow = document.getElementById('shadow-host').attachShadow({mode: 'open'}); 31 var template = document.getElementById('shadow-template'); 32 var instance = document.importNode(template.content, true); 33 shadow.appendChild(instance); 34 var focusme = shadow.getElementById('focusme'); 35 focusme.focus(); 36 document.documentElement.classList.remove('reftest-wait'); 37 </script> 38 </body> 39 </html>