Test <dialog> + shadow DOM focus
Follows https://github.com/whatwg/html/pull/7285.
diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow-delegatesfocus.html b/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow-delegatesfocus.html
new file mode 100644
index 0000000..0263e56
--- /dev/null
+++ b/html/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
new file mode 100644
index 0000000..7f52189
--- /dev/null
+++ 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>
