focus-within-shadow-006.html (1523B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>Selectors Level 4: focus-within with shadow DOM</title> 5 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 6 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> 7 <link rel="help" href="https://dom.spec.whatwg.org/#shadow-trees"> 8 <link rel="match" href="focus-within-shadow-001-ref.html"> 9 <meta name="flags" content="dom"> 10 <meta name="assert" content="Checks that ':focus-within' is propagated to the flat tree ancestors, even if it comes from a slotted element."> 11 <style> 12 /* Suppress things that cannot be reproduced in the reference file */ 13 :focus { 14 outline: none; 15 } 16 :focus-within { 17 border-color: green; 18 } 19 </style> 20 <p>Test passes if there is a green rectangle below.</p> 21 22 <div id="log"></div> 23 <script> 24 if (!document.body.attachShadow) 25 document.getElementById("log").innerHTML = "<strong>Skip this test, shadow DOM is not supported.</strong>"; 26 </script> 27 28 <div id="shadow-host"> 29 <div id="focusme" tabindex="1"></div> 30 </div> 31 32 <script> 33 var shadowHost = document.getElementById("shadow-host"); 34 shadowHost.attachShadow({ mode: "open"}).innerHTML = 35 "<style>" + 36 " #shadow-div:focus-within { border: solid 15px green; }" + 37 "</style>" + 38 "<div id='shadow-div'>" + 39 " <slot></slot>" + 40 "</div>"; 41 var focusme = document.getElementById("focusme"); 42 focusme.focus(); 43 document.documentElement.classList.remove("reftest-wait"); 44 </script> 45 </html>