focus-within-shadow-003.html (1425B)
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 the parent of a shadow host containing a focused element."> 11 <style> 12 #target: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="target"> 19 <div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div> 20 </div> 21 22 <template id="shadow-template"> 23 <style> 24 /* Suppress things that cannot be reproduced in the reference file */ 25 :focus { 26 outline: none; 27 } 28 </style> 29 <div id="focusme" tabindex="1"></div> 30 </template> 31 32 <script> 33 var shadow = document.getElementById('shadow-host').attachShadow({mode: 'open'}); 34 var template = document.getElementById('shadow-template'); 35 var instance = document.importNode(template.content, true); 36 shadow.appendChild(instance); 37 var focusme = shadow.getElementById('focusme'); 38 focusme.focus(); 39 document.documentElement.classList.remove('reftest-wait'); 40 </script> 41 </body> 42 </html>