Test <dialog> + shadow DOM focus

Follows whatwg/html#7285.
web-platform-tests · Nov 18, 2021 · 628af0f · 628af0f
1 parent 30fb55c
commit 628af0f
Show file tree

Hide file tree

Showing 2 changed files with 130 additions and 0 deletions.
diff --git a/...semantics/interactive-elements/the-dialog-element/dialog-focus-shadow-delegatesfocus.html b/...semantics/interactive-elements/the-dialog-element/dialog-focus-shadow-delegatesfocus.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>dialog focusing delegation with autofocus plus delegatesFocus inside the dialog</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+
+<dialog>
+  <template class="turn-into-shadow-tree">
+    <button disabled>Non-focusable</button>
+    <template class="turn-into-shadow-tree delegates-focus">
+      <button tabindex="-1">Focusable</button>
+      <button tabindex="-1" autofocus>Focusable</button>
+      <button tabindex="-1">Focusable</button>
+    </template>
+    <button tabindex="-1">Focusable</button>
+  </template>
+  <button tabindex="-1">Focusable</button>
+</dialog>
+
+<script>
+function turnIntoShadowTree(template) {
+  for (const subTemplate of template.content.querySelectorAll(".turn-into-shadow-tree")) {
+    turnIntoShadowTree(subTemplate);
+  }
+
+  const div = document.createElement("div");
+  div.attachShadow({ mode: "open", delegatesFocus: template.classList.contains("delegates-focus") });
+  div.shadowRoot.append(template.content);
+  template.replaceWith(div);
+}
+
+for (const template of document.querySelectorAll(".turn-into-shadow-tree")) {
+  turnIntoShadowTree(template);
+}
+
+for (const method of ["show", "showModal"]) {
+  test(t => {
+    const dialog = document.querySelector("dialog");
+    dialog[method]();
+    t.add_cleanup(() => dialog.close());
+
+    const shadowHostOuter = dialog.querySelector("div");
+    assert_equals(document.activeElement, shadowHostOuter, "document.activeElement");
+
+    const shadowHostInner = shadowHostOuter.shadowRoot.querySelector("div");
+    assert_equals(shadowHostOuter.shadowRoot.activeElement, shadowHostInner, "shadowHostOuter.shadowRoot.activeElement");
+
+    const button = shadowHostInner.shadowRoot.querySelector("[autofocus]");
+    assert_equals(shadowHostInner.shadowRoot.activeElement, button, "shadowHostInner.shadowRoot.activeElement");
+  }, `${method}()`);
+}
+</script>
diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html b/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+
+<dialog data-description="When autofocus is not present, the first focusable shadow-including descendant must be focused">
+  <template class="turn-into-shadow-tree">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1" class="focus-me">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="autofocus outside a shadow tree must take precedence over earlier in-shadow-tree focusable elements">
+  <button disabled>Non-focusable</button>
+  <template class="turn-into-shadow-tree">
+    <button tabindex="-1">Focusable</button>
+  </template>
+  <button tabindex="-1" autofocus>Focusable</button>
+</dialog>
+
+<dialog data-description="autofocus inside a shadow tree must be ignored: no focusable elements outside the shadow tree">
+  <template class="turn-into-shadow-tree">
+    <button tabindex="-1" class="focus-me">Focusable</button>
+    <button tabindex="-1" autofocus>Focusable</button>
+    <button tabindex="-1">Focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="autofocus inside a shadow tree must be ignored: focusable element before the shadow tree">
+  <button tabindex="-1" class="focus-me">Focusable</button>
+  <template class="turn-into-shadow-tree">
+    <button tabindex="-1">Focusable</button>
+    <button tabindex="-1" autofocus>Focusable</button>
+    <button tabindex="-1">Focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="autofocus inside a shadow tree must be ignored: focusable element after the shadow tree">
+  <template class="turn-into-shadow-tree">
+    <button tabindex="-1">Focusable</button>
+    <button tabindex="-1" autofocus>Focusable</button>
+    <button tabindex="-1">Focusable</button>
+  </template>
+  <button tabindex="-1" class="focus-me">Focusable</button>
+</dialog>
+
+<script>
+for (const template of document.querySelectorAll(".turn-into-shadow-tree")) {
+  const div = document.createElement("div");
+  div.attachShadow({ mode: "open" });
+  div.shadowRoot.append(template.content);
+  template.replaceWith(div);
+}
+
+for (const dialog of document.querySelectorAll("dialog")) {
+  for (const method of ["show", "showModal"]) {
+    test(t => {
+      dialog[method]();
+      t.add_cleanup(() => dialog.close());
+
+      const expectedFocusOutsideShadowTree = dialog.querySelector(".focus-me");
+      if (expectedFocusOutsideShadowTree) {
+        assert_equals(document.activeElement, expectedFocusOutsideShadowTree);
+      } else {
+        const shadowHost = dialog.querySelector("div");
+        const expectedFocusInsideShadowTree = shadowHost.shadowRoot.querySelector(".focus-me");
+        assert_not_equals(expectedFocusInsideShadowTree, "Precondition check: the test was set up to expect a focused element, either outside the shadow tree or inside");
+
+        assert_equals(document.activeElement, shadowHost);
+        assert_equals(shadowHost.shadowRoot.activeElement, expectedFocusInsideShadowTree);
+      }
+    }, `${method}: ${dialog.dataset.description}`);
+  }
+}
+</script>