DocumentOrShadowRoot-activeElement.html

Enable keyboard shortcuts

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

<!DOCTYPE html>

<meta charset="utf-8">

<title>HTML Test: DocumentOrShadowRoot.activeElement</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/testdriver.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

<body>

<script>

function createChildAndFocus(focusParent) {

  const focused = document.createElement("div");

  focused.tabIndex = 0;

  focusParent.appendChild(focused);

  focused.focus();

  return focused;

test(() => {

  const host = document.createElement("div");

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

  document.body.appendChild(host);

  const focused = createChildAndFocus(shadowRoot);

  assert_equals(document.activeElement, host);

  assert_equals(shadowRoot.activeElement, focused);

}, "activeElement on document & shadow root when focused element is in the shadow tree");

test(() => {

  const host = document.createElement("div");

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

  document.body.appendChild(host);

  const focused = createChildAndFocus(document.body);

  assert_equals(document.activeElement, focused);

  assert_equals(shadowRoot.activeElement, null);

}, "activeElement on document & shadow root when focused element is in the document");

test(() => {

  const host = document.createElement("div");

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

  shadowRoot.appendChild(document.createElement("slot"));

  document.body.appendChild(host);

  // Child of |host|, will be slotted to the slot in |shadowRoot|.

  const focused = createChildAndFocus(host);

  assert_equals(document.activeElement, focused);

  assert_equals(shadowRoot.activeElement, null);

}, "activeElement on document & shadow root when focused element is slotted");

test(() => {

  const host = document.createElement("div");

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

  document.body.appendChild(host);

  const neighborHost = document.createElement("div");

  const neighborShadowRoot = neighborHost.attachShadow({ mode: "open" });

  document.body.appendChild(neighborHost);

  const focused = createChildAndFocus(shadowRoot);

  assert_equals(document.activeElement, host);

  assert_equals(shadowRoot.activeElement, focused);

  assert_equals(neighborShadowRoot.activeElement, null);

}, "activeElement on a neighboring host when focused element is in another shadow tree");

test(() => {

  const host = document.createElement("div");

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

  document.body.appendChild(host);

  const nestedHost = document.createElement("div");

  const nestedShadowRoot = nestedHost.attachShadow({ mode: "open" });

  shadowRoot.appendChild(nestedHost);

  const focused = createChildAndFocus(nestedShadowRoot);

  assert_equals(document.activeElement, host);

  assert_equals(shadowRoot.activeElement, nestedHost);

  assert_equals(nestedShadowRoot.activeElement, focused);

}, "activeElement when focused element is in a nested shadow tree");

test(() => {

  const host = document.createElement("div");

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

  document.body.appendChild(host);

  const nestedHost = document.createElement("div");

  const nestedShadowRoot = nestedHost.attachShadow({ mode: "open" });

  shadowRoot.appendChild(nestedHost);

  const focused = createChildAndFocus(shadowRoot);

  assert_equals(document.activeElement, host);

  assert_equals(shadowRoot.activeElement, focused);

  assert_equals(nestedShadowRoot.activeElement, null);

}, "activeElement when focused element is in a parent shadow tree");

</script>

</body>