From 510283b93c85dcb56e179f75d50828c2b9cc975a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= <emilio@crisal.io>
Date: Thu, 21 Oct 2021 16:13:20 +0000
Subject: [PATCH] Update delegatesFocus to use its shadow tree rather than the
 flat tree.

This behavior is much more reasonable and aligns with developers
expectations better, see https://github.com/whatwg/html/issues/7207.

Differential Revision: https://phabricator.services.mozilla.com/D129146

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1737020
gecko-commit: e41c536602c68eb6ad42e53e0d2a7f7a4209931e
gecko-reviewers: smaug, sefeng
---
 .../click-focus-delegatesFocus-click.html     |  4 ++--
 .../focus/focus-method-delegatesFocus.html    | 24 ++++++++++---------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/shadow-dom/focus/click-focus-delegatesFocus-click.html b/shadow-dom/focus/click-focus-delegatesFocus-click.html
index 8b5fb843a2dcca..0578c15582a5cd 100644
--- a/shadow-dom/focus/click-focus-delegatesFocus-click.html
+++ b/shadow-dom/focus/click-focus-delegatesFocus-click.html
@@ -115,8 +115,8 @@
   const dom = createNestedHosts(true, false);
   await test_driver.click(dom.outerHost);
   assert_equals(document.activeElement, dom.outerHost);
-  assert_equals(dom.outerShadow.activeElement, dom.innerHost);
-  assert_equals(dom.innerShadow.activeElement, dom.innerShadowChild);
+  assert_equals(dom.outerShadow.activeElement, dom.outerShadowChild);
+  assert_equals(dom.innerShadow.activeElement, null);
 }, "click on the host with delegatesFocus with another host with no delegatesFocus and a focusable child");
 
 promise_test(async function() {
diff --git a/shadow-dom/focus/focus-method-delegatesFocus.html b/shadow-dom/focus/focus-method-delegatesFocus.html
index de0b6bf70f8083..99667029ad866a 100644
--- a/shadow-dom/focus/focus-method-delegatesFocus.html
+++ b/shadow-dom/focus/focus-method-delegatesFocus.html
@@ -224,8 +224,8 @@
   // <div #outside>
   // First focusable = #slottedToFirstSlot
   host.focus();
-  assert_equals(shadowRoot.activeElement, null);
-  assert_equals(document.activeElement, slottedToFirstSlot);
+  assert_equals(shadowRoot.activeElement, belowSlots);
+  assert_equals(document.activeElement, host);
 }, "focus() on host with delegatesFocus & tabindex=0, #slottedToFirstSlot, #slottedToSecondSlot, #belowSlots  with tabindex=0");
 
 test(() => {
@@ -272,8 +272,7 @@
   const dom = createNestedHosts(false);
   dom.outerHost.focus();
   assert_equals(document.activeElement, dom.outerHost);
-  assert_equals(dom.outerShadow.activeElement, dom.innerHost);
-  assert_equals(dom.innerShadow.activeElement, dom.innerShadowChild);
+  assert_equals(dom.outerShadow.activeElement, dom.outerShadowChild);
 }, 'focus() on host with delegatesFocus with another host with no delegatesFocus and a focusable child');
 
 test(() => {
@@ -284,27 +283,30 @@
   assert_equals(dom.innerShadow.activeElement, dom.innerShadowChild);
 }, 'focus() on host with delegatesFocus with another host with delegatesFocus and a focusable child');
 
-// Note that we use flat tree here however it might not be the behavior we end up
-// wanting, per https://github.com/whatwg/html/issues/7207
 test(() => {
   // Structure:
   // <div> host
   //   #shadowRoot root delegatesFocus=true
   //    <slot>
   //      (slotted) <div>
-  //        <input #firstFocusable>
+  //        <input>
+  //    <input #firstFocusable>
   const host = document.createElement("div");
   const slotted = document.createElement("div");
-  const firstFocusable = document.createElement("input");
-  slotted.appendChild(firstFocusable);
+  slotted.appendChild(document.createElement("input"));
   host.appendChild(slotted);
 
   const root = host.attachShadow({mode: "open", delegatesFocus: true});
+
+  const firstFocusable = document.createElement("input");
   root.innerHTML = "<slot>";
+  root.appendChild(firstFocusable);
+
   document.body.appendChild(host);
 
   host.focus();
-  assert_equals(document.activeElement, firstFocusable);
-}, "Focus() on host with delegatesFocus should focus the focusable child when it is a descendant of the slotted element");
+  assert_equals(document.activeElement, host);
+  assert_equals(root.activeElement, firstFocusable);
+}, "focus() on host with delegatesFocus and slotted focusable children");
 </script>