Make delegatesFocus to loop through descendents of slotted elements

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

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1735667
gecko-commit: e35a8f30c4f22fbfda2e886ae8571eb894351087
gecko-reviewers: emilio

shadow-dom/focus/focus-method-delegatesFocus.html

@@ -283,5 +283,28 @@
   assert_equals(dom.outerShadow.activeElement, dom.innerHost);
   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>
+  const host = document.createElement("div");
+  const slotted = document.createElement("div");
+  const firstFocusable = document.createElement("input");
+  slotted.appendChild(firstFocusable);
+  host.appendChild(slotted);
+
+  const root = host.attachShadow({mode: "open", delegatesFocus: true});
+  root.innerHTML = "<slot>";
+  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");
 </script>