inert-in-shadow-dom.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
</head>
<body>

  <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>
    setup({single_test: true});

    const shadowHost = document.getElementById('shadow-host');
    const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
    const inertDiv = document.createElement('div');
    inertDiv.inert = true;
    shadowRoot.appendChild(inertDiv);
    const slot1 = document.createElement('slot');
    slot1.name = 'slot-1';
    inertDiv.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();
      if (canFocus)
        assert_true(focusedElement === element);
      else
        assert_false(focusedElement === element);
    }

    testCanFocus('#button-1', false);
    testCanFocus('#button-2', true);
    done();
  </script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/dom/inert/inert-in-shadow-dom.html
