| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8" /> |
| <title>inert inside ShadowRoot affects slotted content</title> |
| <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <div>Button 1 should be inert, and Button 2 should not be inert.</div> |
| <div id="shadow-host"> |
| <button slot="slot-1" id="button-1">Button 1 (inert)</button> |
| <button slot="slot-2" id="button-2">Button 2 (not inert)</button> |
| </div> |
| <script> |
| /* |
| Eventual flattened tree structure: |
| |
| <div id="shadow-host"> |
| #shadow-root (open) |
| | <slot id="slot-1" inert> |
| : <button id="button-1">Button 1</button> <!-- slotted --> |
| | </slot> |
| | <slot id="slot-2"> |
| : <button id="button-2">Button 2</button> <!-- slotted --> |
| | </slot> |
| </div> |
| */ |
| |
| const shadowHost = document.getElementById("shadow-host"); |
| const shadowRoot = shadowHost.attachShadow({ mode: "open" }); |
| |
| const slot1 = document.createElement("slot"); |
| slot1.name = "slot-1"; |
| slot1.inert = true; |
| shadowRoot.appendChild(slot1); |
| |
| const slot2 = document.createElement("slot"); |
| slot2.name = "slot-2"; |
| shadowRoot.appendChild(slot2); |
| |
| function testCanFocus(selector, canFocus) { |
| const element = document.querySelector(selector); |
| let focusedElement = null; |
| element.addEventListener("focus", function() { focusedElement = element; }, false); |
| element.focus(); |
| assert_equals((focusedElement === element), canFocus); |
| } |
| |
| test(() => { |
| testCanFocus("#button-1", false); |
| testCanFocus("#button-2", true); |
| }, "inert inside ShadowRoot affects slotted content"); |
| </script> |
| </body> |
| </html> |
