From 7f64dda138e85e6549541d70a3072c8e7309824e Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Mon, 31 Jan 2022 11:14:28 -0500
Subject: [PATCH] Expand and change dialog focus delegation tests

Follows https://github.com/whatwg/html/pull/7361.
---
 ...=> dialog-focus-shadow-double-nested.html} |   4 +-
 .../dialog-focus-shadow.html                  | 197 ++++++++++++++++--
 2 files changed, 185 insertions(+), 16 deletions(-)
 rename html/semantics/interactive-elements/the-dialog-element/{dialog-focus-shadow-delegatesfocus.html => dialog-focus-shadow-double-nested.html} (92%)
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-double-nested.html
similarity index 92%
rename from html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow-delegatesfocus.html
rename to html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow-double-nested.html
index 0263e5632f9156d..2cd63eb796b38f6 100644
--- a/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow-delegatesfocus.html
+++ b/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow-double-nested.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<title>dialog focusing delegation with autofocus plus delegatesFocus inside the dialog</title>
+<title>dialog focusing delegation: with two nested shadow trees</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <body>
 
 <dialog>
-  <template class="turn-into-shadow-tree">
+  <template class="turn-into-shadow-tree delegates-focus">
     <button disabled>Non-focusable</button>
     <template class="turn-into-shadow-tree delegates-focus">
       <button tabindex="-1">Focusable</button>
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
index 7f52189d9ff1924..9cdad92d80f575f 100644
--- a/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html
+++ b/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html
@@ -1,47 +1,204 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
+<title>dialog focus delegation</title>
 <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">
+<!--
+  We focus this one between each test, to ensure that for non-modal dialogs,
+  if there is no focus delegate, it stays focused (instead of causing focus to reset to the body).
+-->
+<button tabindex="-1" id="focus-between-tests">Focus between tests</button>
+
+<dialog data-description="No autofocus, no delegatesFocus, no siblings">
+  <template class="turn-into-shadow-tree">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="No autofocus, no delegatesFocus, sibling before">
+  <button tabindex="-1" class="focus-me">Focusable</button>
+  <template class="turn-into-shadow-tree">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="No autofocus, no delegatesFocus, sibling after">
   <template class="turn-into-shadow-tree">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+  <button tabindex="-1" class="focus-me">Focusable</button>
+</dialog>
+
+<dialog data-description="No autofocus, yes delegatesFocus, no siblings">
+  <template class="turn-into-shadow-tree delegates-focus">
     <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>
+<dialog data-description="No autofocus, yes delegatesFocus, sibling before">
+  <button tabindex="-1" class="focus-me">Focusable</button>
+  <template class="turn-into-shadow-tree delegates-focus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="No autofocus, yes delegatesFocus, sibling after">
+  <template class="turn-into-shadow-tree delegates-focus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1" class="focus-me">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+  <button tabindex="-1">Focusable</button>
+</dialog>
+
+<dialog data-description="Autofocus before, no delegatesFocus">
+  <button tabindex="-1" autofocus class="focus-me">Focusable</button>
   <template class="turn-into-shadow-tree">
+    <button disabled>Non-focusable</button>
     <button tabindex="-1">Focusable</button>
+    <button disabled>Non-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">
+<dialog data-description="Autofocus before, yes delegatesFocus">
+  <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+  <template class="turn-into-shadow-tree delegates-focus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="Autofocus after, no delegatesFocus">
   <template class="turn-into-shadow-tree">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+  <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+</dialog>
+
+<dialog data-description="Autofocus after, yes delegatesFocus">
+  <template class="turn-into-shadow-tree delegates-focus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+  <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+</dialog>
+
+<dialog data-description="Autofocus on shadow host, yes delegatesFocus, no siblings">
+  <template class="turn-into-shadow-tree delegates-focus autofocus">
+    <button disabled>Non-focusable</button>
     <button tabindex="-1" class="focus-me">Focusable</button>
-    <button tabindex="-1" autofocus>Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="Autofocus on shadow host, yes delegatesFocus, sibling before">
+  <button tabindex="-1">Focusable</button>
+  <template class="turn-into-shadow-tree delegates-focus autofocus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1" class="focus-me">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="Autofocus on shadow host, yes delegatesFocus, sibling after">
+  <template class="turn-into-shadow-tree delegates-focus autofocus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1" class="focus-me">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+  <button tabindex="-1">Focusable</button>
+</dialog>
+
+<dialog data-description="Autofocus on shadow host, no delegatesFocus, no siblings">
+  <template class="turn-into-shadow-tree autofocus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="Autofocus on shadow host, no delegatesFocus, sibling before">
+  <button tabindex="-1" class="focus-me">Focusable</button>
+  <template class="turn-into-shadow-tree autofocus">
+    <button disabled>Non-focusable</button>
     <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
   </template>
 </dialog>
 
-<dialog data-description="autofocus inside a shadow tree must be ignored: focusable element before the shadow tree">
+<dialog data-description="Autofocus on shadow host, no delegatesFocus, sibling after">
+  <template class="turn-into-shadow-tree autofocus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
   <button tabindex="-1" class="focus-me">Focusable</button>
-  <template class="turn-into-shadow-tree">
+</dialog>
+
+<dialog data-description="Autofocus inside shadow tree, yes delegatesFocus, no siblings">
+  <template class="turn-into-shadow-tree delegates-focus">
+    <button tabindex="-1">Focusable</button>
+    <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="Autofocus inside shadow tree, yes delegatesFocus, sibling before">
+  <button tabindex="-1" class="focus-me">Focusable</button>
+  <template class="turn-into-shadow-tree delegates-focus">
     <button tabindex="-1">Focusable</button>
     <button tabindex="-1" autofocus>Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="Autofocus inside shadow tree, yes delegatesFocus, sibling after">
+  <template class="turn-into-shadow-tree delegates-focus">
+    <button tabindex="-1">Focusable</button>
+    <button tabindex="-1" autofocus>Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+  <button tabindex="-1" class="focus-me">Focusable</button>
+</dialog>
+
+<dialog data-description="Autofocus inside shadow tree, no delegatesFocus, no siblings">
+  <template class="turn-into-shadow-tree">
     <button tabindex="-1">Focusable</button>
+    <button tabindex="-1" autofocus>Focusable</button>
+    <button disabled>Non-focusable</button>
   </template>
 </dialog>
 
-<dialog data-description="autofocus inside a shadow tree must be ignored: focusable element after the shadow tree">
+<dialog data-description="Autofocus inside shadow tree, no delegatesFocus, sibling before">
+  <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 disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="Autofocus inside shadow tree, no delegatesFocus, sibling after">
+  <template class="turn-into-shadow-tree">
     <button tabindex="-1">Focusable</button>
+    <button tabindex="-1" autofocus>Focusable</button>
+    <button disabled>Non-focusable</button>
   </template>
   <button tabindex="-1" class="focus-me">Focusable</button>
 </dialog>
@@ -49,14 +206,19 @@
 <script>
 for (const template of document.querySelectorAll(".turn-into-shadow-tree")) {
   const div = document.createElement("div");
-  div.attachShadow({ mode: "open" });
+  div.attachShadow({ mode: "open", delegatesFocus: template.classList.contains("delegates-focus")  });
+  div.autofocus = template.classList.contains("autofocus");
   div.shadowRoot.append(template.content);
   template.replaceWith(div);
 }
 
+const focusBetweenTests = document.querySelector("#focus-between-tests");
+
 for (const dialog of document.querySelectorAll("dialog")) {
   for (const method of ["show", "showModal"]) {
     test(t => {
+      focusBetweenTests.focus();
+
       dialog[method]();
       t.add_cleanup(() => dialog.close());
 
@@ -66,10 +228,17 @@
       } 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);
+        if (expectedFocusInsideShadowTree) {
+          assert_equals(document.activeElement, shadowHost);
+          assert_equals(shadowHost.shadowRoot.activeElement, expectedFocusInsideShadowTree);
+        } else {
+          // There is no focus delegate. Expected result depends on show() vs. showModal().
+          if (method === "show") {
+            assert_equals(document.activeElement, focusBetweenTests);
+          } else {
+            assert_equals(document.activeElement, document.body);
+          }
+        }
       }
     }, `${method}: ${dialog.dataset.description}`);
   }
