inert-in-shadow-dom.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /inert/inert-in-shadow-dom.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>inert on Shadow host affects content in shadow</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>Buttons 1 and 2 should be inert.</div>

  <div id="shadow-host" inert>

    <button id="button-1">Button 1 (inert)</button>

  </div>

  <script>

/*

    Eventual flattened tree structure:

    <div id="shadow-host" inert>

      #shadow-root (open)

      | <slot>

      :   <button id="button-1">Button 1 (inert)</button> <!-- slotted -->

      | </slot>

      | <button id="button-2">Button 2 (inert)</button>   <!-- in shadow -->

    </div>

*/

    const shadowHost = document.getElementById("shadow-host");

    const shadowRoot = shadowHost.attachShadow({ mode: "open" });

    // Button 1 will be slotted

    const slot = document.createElement("slot");

    shadowRoot.appendChild(slot);

    const button2 = document.createElement("button");

    button2.id = "button-2";

    button2.textContent = "Button 2 (inert)";

    shadowRoot.appendChild(button2);

    function testCanFocus(selector, canFocus, opt_context) {

      let context = opt_context || document;

      const element = context.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", false, shadowRoot);

    }, "inert on Shadow host affects content in shadow");

  </script>

</body>

</html>