focus-within-shadow-005.html (1809B)
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="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> 7 <link rel="match" href="focus-within-shadow-001-ref.html"> 8 <meta name="flags" content="dom"> 9 <meta name="assert" content="Test that :focus-within propagates through nested shadow DOMs containing a focused element."> 10 <style> 11 #target:focus-within { 12 border: solid 15px green; 13 } 14 </style> 15 <body> 16 <p>Test passes if there is a green rectangle below.</p> 17 <div id="target"> 18 <div> 19 <div> 20 <div> 21 <div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div> 22 </div> 23 </div> 24 </div> 25 </div> 26 27 <template id="shadow-template"> 28 <div id="nested-shadow-host"><strong>Skip this test, nested shadow hosts are not supported.</strong></div> 29 </template> 30 31 <template id="nested-shadow-template"> 32 <style> 33 /* Suppress things that cannot be reproduced in the reference file */ 34 :focus { 35 outline: none; 36 } 37 </style> 38 <div id="focusme" tabindex="1"></div> 39 </template> 40 41 <script> 42 var shadow = document.getElementById('shadow-host').attachShadow({mode: 'open'}); 43 var template = document.getElementById('shadow-template'); 44 var instance = document.importNode(template.content, true); 45 shadow.appendChild(instance); 46 47 shadow = shadow.getElementById('nested-shadow-host').attachShadow({mode: 'open'}); 48 template = document.getElementById('nested-shadow-template'); 49 instance = document.importNode(template.content, true); 50 shadow.appendChild(instance); 51 52 var focusme = shadow.getElementById('focusme'); 53 focusme.focus(); 54 document.documentElement.classList.remove('reftest-wait'); 55 </script> 56 </body> 57 </html>