inert/inert-in-shadow-dom.tentative.html

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