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 whatwg/html#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

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() {

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>