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