inert-in-shadow-dom.html (1769B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>inert on Shadow host affects content in shadow</title> 6 <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 </head> 10 <body> 11 <div>Buttons 1 and 2 should be inert.</div> 12 <div id="shadow-host" inert> 13 <button id="button-1">Button 1 (inert)</button> 14 </div> 15 <script> 16 /* 17 Eventual flattened tree structure: 18 19 <div id="shadow-host" inert> 20 #shadow-root (open) 21 | <slot> 22 : <button id="button-1">Button 1 (inert)</button> <!-- slotted --> 23 | </slot> 24 | <button id="button-2">Button 2 (inert)</button> <!-- in shadow --> 25 </div> 26 */ 27 28 const shadowHost = document.getElementById("shadow-host"); 29 const shadowRoot = shadowHost.attachShadow({ mode: "open" }); 30 31 // Button 1 will be slotted 32 const slot = document.createElement("slot"); 33 shadowRoot.appendChild(slot); 34 35 const button2 = document.createElement("button"); 36 button2.id = "button-2"; 37 button2.textContent = "Button 2 (inert)"; 38 shadowRoot.appendChild(button2); 39 40 function testCanFocus(selector, canFocus, opt_context) { 41 let context = opt_context || document; 42 const element = context.querySelector(selector); 43 let focusedElement = null; 44 element.addEventListener("focus", function() { focusedElement = element; }, false); 45 element.focus(); 46 assert_equals((focusedElement === element), canFocus); 47 } 48 49 test(() => { 50 testCanFocus("#button-1", false); 51 testCanFocus("#button-2", false, shadowRoot); 52 }, "inert on Shadow host affects content in shadow"); 53 </script> 54 </body> 55 </html>