inert-on-slots.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /inert/inert-on-slots.html - WPT Dashboard Interop Dashboard

<!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>