From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../focus/DocumentOrShadowRoot-activeElement.html  |  92 ++++++
 .../focus/ShadowRoot-delegatesFocus.html           |  27 ++
 .../focus/blur-on-shadow-host-delegatesFocus.html  |  38 +++
 .../focus/click-focus-delegatesFocus-click.html    | 138 +++++++++
 ...click-focus-delegatesFocus-tabindex-varies.html |  68 +++++
 .../click-focus-delegatesFocus-tabindex-zero.html  |  68 +++++
 .../focus/delegatesFocus-tabindex-change.html      |  23 ++
 .../tests/shadow-dom/focus/focus-autofocus.html    | 338 +++++++++++++++++++++
 .../focus/focus-click-on-shadow-host.html          |  40 +++
 ...hod-delegatesFocus-nested-browsing-context.html |  36 +++
 .../focus/focus-method-delegatesFocus.html         | 312 +++++++++++++++++++
 .../focus/focus-method-with-delegatesFocus.html    | 101 ++++++
 .../focus/focus-pseudo-matches-on-shadow-host.html | 122 ++++++++
 .../focus/focus-pseudo-on-shadow-host-1.html       |  25 ++
 .../focus/focus-pseudo-on-shadow-host-2.html       |  27 ++
 .../focus/focus-pseudo-on-shadow-host-3.html       |  26 ++
 .../focus/focus-selector-delegatesFocus.html       |  92 ++++++
 .../focus/focus-shadowhost-display-none.html       |  68 +++++
 .../shadow-dom/focus/focus-tab-on-shadow-host.html |  31 ++
 ...index-order-shadow-negative-delegatesFocus.html |  34 +++
 .../focus-tabindex-order-shadow-negative.html      |  34 +++
 .../focus-tabindex-order-shadow-slot-one.html      |  37 +++
 ...bindex-order-shadow-varying-delegatesFocus.html |  36 +++
 ...s-tabindex-order-shadow-varying-tabindex-2.html |  66 ++++
 ...s-tabindex-order-shadow-varying-tabindex-3.html |  80 +++++
 ...cus-tabindex-order-shadow-varying-tabindex.html |  36 +++
 ...-tabindex-order-shadow-zero-delegatesFocus.html |  34 +++
 ...s-tabindex-order-shadow-zero-host-negative.html |  35 +++
 ...-order-shadow-zero-host-not-set-scrollable.html |  38 +++
 ...us-tabindex-order-shadow-zero-host-not-set.html |  37 +++
 .../focus-tabindex-order-shadow-zero-host-one.html |  37 +++
 ...tabindex-order-shadow-zero-host-scrollable.html |  36 +++
 .../focus/focus-tabindex-order-shadow-zero.html    |  35 +++
 .../shadow-dom/focus/resources/shadow-utils.js     |  80 +++++
 34 files changed, 2327 insertions(+)
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/DocumentOrShadowRoot-activeElement.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/ShadowRoot-delegatesFocus.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/blur-on-shadow-host-delegatesFocus.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/click-focus-delegatesFocus-click.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/click-focus-delegatesFocus-tabindex-varies.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/click-focus-delegatesFocus-tabindex-zero.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/delegatesFocus-tabindex-change.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-autofocus.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-click-on-shadow-host.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-method-delegatesFocus-nested-browsing-context.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-method-delegatesFocus.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-method-with-delegatesFocus.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-pseudo-matches-on-shadow-host.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-pseudo-on-shadow-host-1.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-pseudo-on-shadow-host-2.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-pseudo-on-shadow-host-3.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-selector-delegatesFocus.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-shadowhost-display-none.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-tab-on-shadow-host.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-negative-delegatesFocus.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-negative.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-slot-one.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-varying-delegatesFocus.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-varying-tabindex-2.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-varying-tabindex-3.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-varying-tabindex.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-delegatesFocus.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-negative.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-not-set-scrollable.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-not-set.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-one.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-scrollable.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero.html
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/resources/shadow-utils.js

(limited to 'testing/web-platform/tests/shadow-dom/focus')

diff --git a/testing/web-platform/tests/shadow-dom/focus/DocumentOrShadowRoot-activeElement.html b/testing/web-platform/tests/shadow-dom/focus/DocumentOrShadowRoot-activeElement.html
new file mode 100644
index 0000000000..20456b057e
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/DocumentOrShadowRoot-activeElement.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: DocumentOrShadowRoot.activeElement</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<body>
+<script>
+function createChildAndFocus(focusParent) {
+  const focused = document.createElement("div");
+  focused.tabIndex = 0;
+  focusParent.appendChild(focused);
+  focused.focus();
+  return focused;
+}
+
+test(() => {
+  const host = document.createElement("div");
+  const shadowRoot = host.attachShadow({ mode: "open" });
+  document.body.appendChild(host);
+
+  const focused = createChildAndFocus(shadowRoot);
+  assert_equals(document.activeElement, host);
+  assert_equals(shadowRoot.activeElement, focused);
+}, "activeElement on document & shadow root when focused element is in the shadow tree");
+
+test(() => {
+  const host = document.createElement("div");
+  const shadowRoot = host.attachShadow({ mode: "open" });
+  document.body.appendChild(host);
+
+  const focused = createChildAndFocus(document.body);
+  assert_equals(document.activeElement, focused);
+  assert_equals(shadowRoot.activeElement, null);
+}, "activeElement on document & shadow root when focused element is in the document");
+
+test(() => {
+  const host = document.createElement("div");
+  const shadowRoot = host.attachShadow({ mode: "open" });
+  shadowRoot.appendChild(document.createElement("slot"));
+  document.body.appendChild(host);
+
+  // Child of |host|, will be slotted to the slot in |shadowRoot|.
+  const focused = createChildAndFocus(host);
+  assert_equals(document.activeElement, focused);
+  assert_equals(shadowRoot.activeElement, null);
+}, "activeElement on document & shadow root when focused element is slotted");
+
+test(() => {
+  const host = document.createElement("div");
+  const shadowRoot = host.attachShadow({ mode: "open" });
+  document.body.appendChild(host);
+  const neighborHost = document.createElement("div");
+  const neighborShadowRoot = neighborHost.attachShadow({ mode: "open" });
+  document.body.appendChild(neighborHost);
+
+  const focused = createChildAndFocus(shadowRoot);
+  assert_equals(document.activeElement, host);
+  assert_equals(shadowRoot.activeElement, focused);
+  assert_equals(neighborShadowRoot.activeElement, null);
+}, "activeElement on a neighboring host when focused element is in another shadow tree");
+
+test(() => {
+  const host = document.createElement("div");
+  const shadowRoot = host.attachShadow({ mode: "open" });
+  document.body.appendChild(host);
+  const nestedHost = document.createElement("div");
+  const nestedShadowRoot = nestedHost.attachShadow({ mode: "open" });
+  shadowRoot.appendChild(nestedHost);
+
+  const focused = createChildAndFocus(nestedShadowRoot);
+  assert_equals(document.activeElement, host);
+  assert_equals(shadowRoot.activeElement, nestedHost);
+  assert_equals(nestedShadowRoot.activeElement, focused);
+}, "activeElement when focused element is in a nested shadow tree");
+
+test(() => {
+  const host = document.createElement("div");
+  const shadowRoot = host.attachShadow({ mode: "open" });
+  document.body.appendChild(host);
+  const nestedHost = document.createElement("div");
+  const nestedShadowRoot = nestedHost.attachShadow({ mode: "open" });
+  shadowRoot.appendChild(nestedHost);
+
+  const focused = createChildAndFocus(shadowRoot);
+  assert_equals(document.activeElement, host);
+  assert_equals(shadowRoot.activeElement, focused);
+  assert_equals(nestedShadowRoot.activeElement, null);
+}, "activeElement when focused element is in a parent shadow tree");
+</script>
+</body>
diff --git a/testing/web-platform/tests/shadow-dom/focus/ShadowRoot-delegatesFocus.html b/testing/web-platform/tests/shadow-dom/focus/ShadowRoot-delegatesFocus.html
new file mode 100644
index 0000000000..4b7fe4e50e
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/ShadowRoot-delegatesFocus.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>ShadowRoot's  delegatesFocus attribute</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="host1"></div>
+<div id="host2"></div>
+<div id="host3"></div>
+<script>
+test(t => {
+  const host = document.getElementById("host1");
+  const shadowRoot = host.attachShadow({mode: "closed"});
+  assert_equals(shadowRoot.delegatesFocus, false);
+}, "default delegatesFocus value");
+
+test(t => {
+  const host = document.getElementById("host2");
+  const shadowRoot = host.attachShadow({mode: "closed", delegatesFocus: false});
+  assert_equals(shadowRoot.delegatesFocus, false);
+}, "delegatesFocus set to false in init dict");
+
+test(t => {
+  const host = document.getElementById("host3");
+  const shadowRoot = host.attachShadow({mode: "closed", delegatesFocus: true});
+  assert_equals(shadowRoot.delegatesFocus, true);
+}, "delegatesFocus set to true in init dict");
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus/blur-on-shadow-host-delegatesFocus.html b/testing/web-platform/tests/shadow-dom/focus/blur-on-shadow-host-delegatesFocus.html
new file mode 100644
index 0000000000..289b554372
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/blur-on-shadow-host-delegatesFocus.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: Blur on shadow host</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<div id="host">
+  <input id="slotted">
+</div>
+
+<script>
+const host = document.getElementById("host");
+
+const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: true });
+
+shadowRoot.innerHTML = "<input><slot>"
+
+test(function() {
+  host.focus();
+  assert_equals(document.activeElement, host);
+  assert_equals(shadowRoot.activeElement, shadowRoot.querySelector("input"));
+  host.blur();
+  assert_equals(document.activeElement, document.body);
+  assert_equals(shadowRoot.activeElement, null);
+}, "Calling blur() on shadow host with delegatesFocus should remove the focus.");
+
+test(function() {
+  const slotted = document.getElementById("slotted");
+  slotted.focus();
+  assert_equals(document.activeElement, slotted);
+  assert_equals(shadowRoot.activeElement, null)
+  host.blur();
+  assert_equals(document.activeElement, slotted);
+  assert_equals(shadowRoot.activeElement, null)
+}, "Calling blur() on shadow host with delegatesFocus when the focus is on a slotted element should not remove the focus.");
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus/click-focus-delegatesFocus-click.html b/testing/web-platform/tests/shadow-dom/focus/click-focus-delegatesFocus-click.html
new file mode 100644
index 0000000000..0578c15582
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/click-focus-delegatesFocus-click.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: click on shadow host with delegatesFocus</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+
+<body>
+<div id="host">
+  <div id="slotted">slotted</div>
+</div>
+<div id="outside">outside</div>
+</body>
+
+<script>
+const host = document.getElementById("host");
+const slotted = document.getElementById("slotted");
+
+const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: true });
+const aboveSlot = document.createElement("div");
+aboveSlot.innerText = "aboveSlot";
+const slot = document.createElement("slot");
+shadowRoot.appendChild(aboveSlot);
+shadowRoot.appendChild(slot);
+
+const elementsInFlatTreeOrder = [host, aboveSlot, slot, slotted, outside];
+
+// Final structure:
+// <div #host> (delegatesFocus=true)
+//    #shadowRoot
+//      <div #aboveSlot>
+//      <slot #slot>
+//        (slotted) <div #slotted>
+// <div #outside>
+
+function setAllTabIndex(value) {
+  setTabIndex(elementsInFlatTreeOrder, value);
+}
+
+function removeAllTabIndex() {
+  removeTabIndex(elementsInFlatTreeOrder);
+}
+
+function resetTabIndexAndFocus() {
+  removeAllTabIndex();
+  resetFocus(document);
+  resetFocus(shadowRoot);
+}
+
+test(() => {
+  resetTabIndexAndFocus();
+  setAllTabIndex(0);
+  host.click();
+  assert_equals(shadowRoot.activeElement, null);
+  assert_equals(document.activeElement, document.body);
+}, "call click() on host with delegatesFocus, all tabindex=0");
+
+test(() => {
+  resetTabIndexAndFocus();
+  setAllTabIndex(0);
+  slotted.click();
+  assert_equals(shadowRoot.activeElement, null);
+  assert_equals(document.activeElement, document.body);
+}, "call click() on slotted element in delegatesFocus shadow tree, all tabindex=0");
+
+function createNestedHosts(outerDelegatesFocus, innerDelegatesFocus) {
+  // Structure:
+  // <div> outerHost
+  //   <input> outerLightChild
+  //   #shadowRoot outerShadow delegatesFocus=true
+  //     <div> spacer
+  //     <span> innerHost
+  //       #shadowRoot innerShadow delegatesFocus=true/false
+  //         <input> innerShadowChild
+  //     <input> outerShadowChild
+  const outerHost = document.createElement('div');
+  const outerLightChild = document.createElement('input');
+  outerHost.appendChild(outerLightChild);
+  const innerHost = document.createElement('span');
+  const outerShadow = outerHost.attachShadow({mode: 'closed', delegatesFocus:outerDelegatesFocus});
+
+  const spacer = document.createElement("div");
+  spacer.style = "height: 1000px;";
+  outerShadow.appendChild(spacer);
+
+  outerShadow.appendChild(innerHost);
+  const outerShadowChild = document.createElement('input');
+  outerShadow.appendChild(outerShadowChild);
+
+  const innerShadow = innerHost.attachShadow({mode: 'closed', delegatesFocus:innerDelegatesFocus});
+  const innerShadowChild = document.createElement('input');
+  innerShadow.appendChild(innerShadowChild);
+
+  document.body.insertBefore(outerHost, document.body.firstChild);
+  return {outerHost: outerHost,
+      outerLightChild: outerLightChild,
+      outerShadow: outerShadow,
+      outerShadowChild: outerShadowChild,
+      innerHost: innerHost,
+      innerShadow: innerShadow,
+      innerShadowChild: innerShadowChild};
+}
+
+promise_test(async function() {
+  const dom = createNestedHosts(true, true);
+  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);
+}, "click on the host with delegatesFocus with another host with delegatesFocus and a focusable child");
+
+promise_test(async function() {
+  const dom = createNestedHosts(true, false);
+  await test_driver.click(dom.outerHost);
+  assert_equals(document.activeElement, dom.outerHost);
+  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() {
+  const dom = createNestedHosts(false, true);
+  await test_driver.click(dom.outerHost);
+  assert_equals(document.activeElement, document.body);
+  assert_equals(dom.outerShadow.activeElement, null);
+  assert_equals(dom.innerShadow.activeElement, null);
+}, "click on the host with no delegatesFocus with another host with delegatesFocus and a focusable child");
+
+promise_test(async function() {
+  const dom = createNestedHosts(false, false);
+  await test_driver.click(dom.outerHost);
+  assert_equals(document.activeElement, document.body);
+  assert_equals(dom.outerShadow.activeElement, null);
+  assert_equals(dom.innerShadow.activeElement, null);
+}, "click on the host with no delegatesFocus with another host with no delegatesFocus and a focusable child");
+
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus/click-focus-delegatesFocus-tabindex-varies.html b/testing/web-platform/tests/shadow-dom/focus/click-focus-delegatesFocus-tabindex-varies.html
new file mode 100644
index 0000000000..4051db128a
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/click-focus-delegatesFocus-tabindex-varies.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: click on shadow host with delegatesFocus</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+
+<body>
+<div id="host">
+  <div id="slotted">slotted</div>
+</div>
+<div id="outside">outside</div>
+</body>
+
+<script>
+const host = document.getElementById("host");
+const slotted = document.getElementById("slotted");
+
+const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: true });
+const aboveSlot = document.createElement("div");
+aboveSlot.innerText = "aboveSlot";
+const slot = document.createElement("slot");
+// Add an unfocusable spacer, because test_driver.click will click on the
+// center point of #host, and we don't want the click to land on #aboveSlot
+// or #slot.
+const spacer = document.createElement("div");
+spacer.style = "height: 1000px;";
+shadowRoot.appendChild(spacer);
+shadowRoot.appendChild(aboveSlot);
+shadowRoot.appendChild(slot);
+
+const elementsInFlatTreeOrder = [host, aboveSlot, spacer, slot, slotted, outside];
+
+// Final structure:
+// <div #host> (delegatesFocus=true)
+//    #shadowRoot
+//      <div #spacer>
+//      <div #aboveSlot>
+//      <slot #slot>
+//        (slotted) <div #slotted>
+// <div #outside>
+
+function setAllTabIndex(value) {
+  setTabIndex(elementsInFlatTreeOrder, value);
+}
+
+function removeAllTabIndex() {
+  removeTabIndex(elementsInFlatTreeOrder);
+}
+
+function resetTabIndexAndFocus() {
+  removeAllTabIndex();
+  resetFocus(document);
+  resetFocus(shadowRoot);
+}
+
+promise_test(async () => {
+  resetTabIndexAndFocus();
+  setTabIndex([aboveSlot], 2);
+  setTabIndex([slot, slotted], 1);
+  await test_driver.click(host);
+  assert_equals(shadowRoot.activeElement, aboveSlot);
+  assert_equals(document.activeElement, host);
+}, "click on host with delegatesFocus, #aboveSlot tabindex = 2, #slot and #slotted tabindex = 1");
+
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus/click-focus-delegatesFocus-tabindex-zero.html b/testing/web-platform/tests/shadow-dom/focus/click-focus-delegatesFocus-tabindex-zero.html
new file mode 100644
index 0000000000..5f7914f2a4
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/click-focus-delegatesFocus-tabindex-zero.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: click on shadow host with delegatesFocus</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+
+<body>
+<div id="host">
+  <div id="slotted">slotted</div>
+</div>
+<div id="outside">outside</div>
+</body>
+
+<script>
+const host = document.getElementById("host");
+const slotted = document.getElementById("slotted");
+
+const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: true });
+const aboveSlot = document.createElement("div");
+aboveSlot.innerText = "aboveSlot";
+const slot = document.createElement("slot");
+// Add an unfocusable spacer, because test_driver.click will click on the
+// center point of #host, and we don't want the click to land on #aboveSlot
+// or #slot.
+const spacer = document.createElement("div");
+spacer.style = "height: 1000px;";
+shadowRoot.appendChild(spacer);
+shadowRoot.appendChild(aboveSlot);
+shadowRoot.appendChild(slot);
+
+const elementsInFlatTreeOrder = [host, aboveSlot, spacer, slot, slotted, outside];
+
+// Final structure:
+// <div #host> (delegatesFocus=true)
+//    #shadowRoot
+//      <div #spacer>
+//      <div #aboveSlot>
+//      <slot #slot>
+//        (slotted) <div #slotted>
+// <div #outside>
+
+function setAllTabIndex(value) {
+  setTabIndex(elementsInFlatTreeOrder, value);
+}
+
+function removeAllTabIndex() {
+  removeTabIndex(elementsInFlatTreeOrder);
+}
+
+function resetTabIndexAndFocus() {
+  removeAllTabIndex();
+  resetFocus(document);
+  resetFocus(shadowRoot);
+}
+
+promise_test(async () => {
+  resetTabIndexAndFocus();
+  setAllTabIndex(0);
+  removeTabIndex([spacer]);
+  await test_driver.click(host);
+  assert_equals(shadowRoot.activeElement, aboveSlot);
+  assert_equals(document.activeElement, host);
+}, "click on host with delegatesFocus, all tabindex=0 except spacer");
+
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus/delegatesFocus-tabindex-change.html b/testing/web-platform/tests/shadow-dom/focus/delegatesFocus-tabindex-change.html
new file mode 100644
index 0000000000..f159c22164
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/delegatesFocus-tabindex-change.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<body>
+<script>
+test(() => {
+  const host = document.createElement('div');
+  document.body.appendChild(host);
+
+  const shadowRoot = host.attachShadow({mode: 'open', delegatesFocus: true});
+
+  const shadowInput = document.createElement('input');
+  shadowRoot.appendChild(shadowInput);
+
+  host.focus();
+  assert_equals(document.activeElement, host, 'The shadow host should be focused.');
+
+  host.setAttribute('tabindex', '0');
+  assert_equals(document.activeElement, host, 'The shadow host should remain focused after changing tabindex.');
+}, 'Setting tabindex on the shadow host of a focused element with delegatesFocus should not change focus.');
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-autofocus.html b/testing/web-platform/tests/shadow-dom/focus/focus-autofocus.html
new file mode 100644
index 0000000000..75a50b84c6
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-autofocus.html
@@ -0,0 +1,338 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="author" title="Sean Feng" href="mailto:sefeng@mozilla.com">
+<meta name="assert" content="Elements with autofocus should have high precedence over other elements for delegates focus">
+<link rel="help" href="https://github.com/whatwg/html/pull/6990">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+</head>
+
+<body>
+  <script>
+  function createShadowDOMTree() {
+    // <div #host> (delegatesFocus = true)
+    //   #shadowRoot
+    //     <div #firstOuterDiv>
+    //     <div #innertHost>
+    //       #shadowRoot
+    //         <div #firstInnerDiv>
+    //         <div #secondInnerDiv>
+    //     <div #secondOuterDiv>
+    const host = document.createElement("div");
+    host.setAttribute("id", "host");
+    const outerRoot = host.attachShadow({mode: "open", delegatesFocus: true});
+
+    const firstOuterDiv = document.createElement("div");
+
+    const innerHost = document.createElement("div");
+    const innerRoot = innerHost.attachShadow({mode: "open"});
+    const firstInnerDiv = document.createElement("div");
+    const secondInnerDiv = document.createElement("div");
+    innerRoot.appendChild(firstInnerDiv);
+    innerRoot.appendChild(secondInnerDiv);
+
+    const secondOuterDiv = document.createElement("div");
+
+    outerRoot.appendChild(firstOuterDiv);
+    outerRoot.appendChild(innerHost);
+    outerRoot.appendChild(secondOuterDiv);
+    document.body.appendChild(host);
+    return [
+      host,
+      outerRoot,
+      firstOuterDiv,
+      secondOuterDiv,
+      innerHost,
+      innerRoot,
+      firstInnerDiv,
+      secondInnerDiv
+    ]
+  }
+
+  function resetShadowDOMTree() {
+    const host = document.getElementById("host");
+    if (host) {
+      host.remove();
+    }
+    return createShadowDOMTree();
+  }
+
+  function resetTabIndexAndFocus(
+    firstOuterDiv,
+    secondOuterDiv,
+    firstInnerDiv,
+    secondInnerDiv,
+    outerRoot,
+    innerRoot
+  ) {
+    firstOuterDiv.removeAttribute("tabindex");
+    firstOuterDiv.removeAttribute("autofocus");
+
+    secondOuterDiv.removeAttribute("tabindex");
+    secondOuterDiv.removeAttribute("autofocus");
+
+    firstInnerDiv.removeAttribute("tabindex");
+    firstInnerDiv.removeAttribute("autofocus");
+
+    secondInnerDiv.removeAttribute("tabindex");
+    secondInnerDiv.removeAttribute("autofocus");
+
+    resetFocus(document);
+    resetFocus(outerRoot);
+    resetFocus(innerRoot);
+  }
+
+  function setAllTabIndexTo(
+    firstOuterDiv,
+    secondOuterDiv,
+    firstInnerDiv,
+    secondInnerDiv,
+    tabIndex
+  ) {
+    firstOuterDiv.tabIndex = tabIndex;
+    secondOuterDiv.tabIndex = tabIndex;
+    firstInnerDiv.tabIndex = tabIndex;
+    secondInnerDiv.tabIndex = tabIndex;
+  }
+
+  test(function() {
+    const [
+      host,
+      outerRoot,
+      firstOuterDiv,
+      secondOuterDiv,
+      innerHost,
+      innerRoot,
+      firstInnerDiv,
+      secondInnerDiv
+    ] = resetShadowDOMTree();
+
+    resetTabIndexAndFocus(
+      firstOuterDiv,
+      secondOuterDiv,
+      firstInnerDiv,
+      secondInnerDiv,
+      outerRoot,
+      innerRoot
+    );
+
+    setAllTabIndexTo(
+      firstOuterDiv,
+      secondOuterDiv,
+      firstInnerDiv,
+      secondInnerDiv,
+      0
+    );
+
+    // <div #host> (delegatesFocus = true)
+    //   #shadowRoot
+    //     <div tabIndex=0 #firstOuterDiv>
+    //     <div #innertHost>
+    //       #shadowRoot
+    //         <div tabIndex=0 #firstInnerDiv>
+    //         <div tabIndex=0 #secondInnerDiv>
+    //     <div tabIndex=0 autofocus #secondOuterDiv>
+    secondOuterDiv.autofocus = true;
+    secondOuterDiv.setAttribute("autofocus", true);
+
+    host.focus();
+
+    assert_equals(document.activeElement, host);
+    assert_equals(outerRoot.activeElement, secondOuterDiv);
+  }, "The second input should be focused since it has autofocus");
+
+  test(function() {
+    const [
+      host,
+      outerRoot,
+      firstOuterDiv,
+      secondOuterDiv,
+      innerHost,
+      innerRoot,
+      firstInnerDiv,
+      secondInnerDiv
+    ] = resetShadowDOMTree();
+
+    resetTabIndexAndFocus(
+      firstOuterDiv,
+      secondOuterDiv,
+      firstInnerDiv,
+      secondInnerDiv,
+      outerRoot,
+      innerRoot
+    );
+
+    // <div #host> (delegatesFocus = true)
+    //   #shadowRoot
+    //     <div #firstOuterDiv>
+    //     <div #innertHost>
+    //       #shadowRoot
+    //         <div tabIndex=0 #firstInnerDiv>
+    //         <div tabIndex=0 autofocus #secondInnerDiv>
+    //     <div #secondOuterDiv>
+    firstInnerDiv.tabIndex = 0;
+    secondInnerDiv.tabIndex = 0;
+    secondInnerDiv.setAttribute("autofocus", true);
+
+    host.focus();
+    assert_equals(document.activeElement, document.body);
+    assert_equals(outerRoot.activeElement, null);
+  }, "Focus should not be delegated to the autofocus element because the inner host doesn't have delegates focus");
+
+  test(function() {
+    const [
+      host,
+      outerRoot,
+      firstOuterDiv,
+      secondOuterDiv,
+      innerHost,
+      innerRoot,
+      firstInnerDiv,
+      secondInnerDiv
+    ] = resetShadowDOMTree();
+
+    resetTabIndexAndFocus(
+      firstOuterDiv,
+      secondOuterDiv,
+      firstInnerDiv,
+      secondInnerDiv,
+      outerRoot,
+      innerRoot
+    );
+
+    const newInnerHost = document.createElement("div");
+    const newInnerRoot = newInnerHost.attachShadow({mode: "open", delegatesFocus: true});
+    const newFirstInnerDiv = document.createElement("div");
+    const newSecondInnerDiv = document.createElement("div");
+    newFirstInnerDiv.setAttribute("tabIndex", 0);
+    newSecondInnerDiv.setAttribute("tabIndex", 0);
+
+    newSecondInnerDiv.setAttribute("autofocus", true);
+    newInnerRoot.appendChild(newFirstInnerDiv);
+    newInnerRoot.appendChild(newSecondInnerDiv);
+
+    // <div #host> (delegatesFocus = true)
+    //   #shadowRoot
+    //     <div #firstOuterDiv>
+    //     <div #innertHost> (delegatesFocus = true)
+    //       #shadowRoot
+    //         <div tabIndex=0 #newFirstInnerDiv>
+    //         <div tabIndex=0 autofocus #newSecondInnerDiv>
+    //     <div #secondOuterDiv>
+    outerRoot.replaceChild(newInnerHost, innerHost);
+
+    host.focus();
+
+    assert_equals(document.activeElement, host);
+    assert_equals(outerRoot.activeElement, newInnerHost);
+    assert_equals(newInnerRoot.activeElement, newSecondInnerDiv);
+  }, "Focus should be delegated to the autofocus element when the inner host has delegates focus");
+
+  test(function() {
+    const [
+      host,
+      outerRoot,
+      firstOuterDiv,
+      secondOuterDiv,
+      innerHost,
+      innerRoot,
+      firstInnerDiv,
+      secondInnerDiv
+    ] = resetShadowDOMTree();
+
+    resetTabIndexAndFocus(
+      firstOuterDiv,
+      secondOuterDiv,
+      firstInnerDiv,
+      secondInnerDiv,
+      outerRoot,
+      innerRoot
+    );
+
+    // <div #host> (delegatesFocus = true)
+    //   #shadowRoot
+    //     <slot>
+    //       (slotted) <div autofocus tabIndex=0 #slottedAutofocus></div>
+    //     <div tabIndex=0 #firstOuterDiv>
+    //     <div #innertHost>
+    //       #shadowRoot
+    //         <div tabIndex=0 #firstInnerDiv>
+    //         <div tabIndex=0 autofocus #secondInnerDiv>
+    //     <div #secondOuterDiv>
+
+    const slottedAutofocus = document.createElement("div");
+    slottedAutofocus.tabIndex = 0;
+    slottedAutofocus.setAttribute("autofocus", true);
+    host.appendChild(slottedAutofocus);
+
+    const slot = document.createElement("slot");
+    outerRoot.insertBefore(slot, firstOuterDiv);
+
+    firstOuterDiv.tabIndex = 0;
+
+    host.focus();
+    assert_equals(document.activeElement, host);
+    assert_equals(outerRoot.activeElement, firstOuterDiv);
+  }, "Focus should not be delegated to the slotted elements");
+
+  test(function() {
+    const [
+      host,
+      outerRoot,
+      firstOuterDiv,
+      secondOuterDiv,
+      innerHost,
+      innerRoot,
+      firstInnerDiv,
+      secondInnerDiv
+    ] = resetShadowDOMTree();
+
+    resetTabIndexAndFocus(
+      firstOuterDiv,
+      secondOuterDiv,
+      firstInnerDiv,
+      secondInnerDiv,
+      outerRoot,
+      innerRoot
+    );
+
+    // <div #host> (delegatesFocus = true)
+    //   #shadowRoot
+    //     <div #firstOuterDiv>
+    //       <div tabIndex=0 #firstNestedDiv>
+    //         <div tabIndex=0 #secondNestedDiv>
+    //           <div tabIndex=0 autofocus #thirdNestedDiv>
+    //     <div #innertHost>
+    //       #shadowRoot
+    //         <div #firstInnerDiv>
+    //         <div #secondInnerDiv>
+    //     <div autofocus tabIndex=0 #secondOuterDiv>
+
+    secondInnerDiv.tabIndex = 0;
+    secondInnerDiv.setAttribute("autofocus", true);
+
+    const firstNestedDiv = document.createElement("div");
+    const secondNestedDiv = document.createElement("div");
+    const thirdNestedDiv = document.createElement("div");
+
+    firstNestedDiv.tabIndex = 0;
+    secondNestedDiv.tabIndex = 0;
+    thirdNestedDiv.tabIndex = 0;
+    thirdNestedDiv.setAttribute("autofocus", true);
+
+    firstOuterDiv.appendChild(firstNestedDiv);
+    firstNestedDiv.appendChild(secondNestedDiv);
+    secondNestedDiv.appendChild(thirdNestedDiv);
+
+    host.focus();
+
+    assert_equals(document.activeElement, host);
+    assert_equals(outerRoot.activeElement, thirdNestedDiv);
+  }, "Focus should be delegated to the nested div which has autofocus based on the tree order");
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-click-on-shadow-host.html b/testing/web-platform/tests/shadow-dom/focus/focus-click-on-shadow-host.html
new file mode 100644
index 0000000000..7a318a0200
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-click-on-shadow-host.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: click on shadow host with delegatesFocus</title>
+<link rel="author" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1327136">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<body>
+  <div id="host"></div>
+</body>
+
+<script>
+const host = document.getElementById("host");
+
+const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: true });
+// Add an unfocusable spacer, because test_driver.click will click on the
+// center point of #host, and we don't want the click to land on focusableDiv
+const spacer = document.createElement("div");
+spacer.style = "height: 1000px;";
+shadowRoot.appendChild(spacer);
+
+const focusableDiv = document.createElement("div");
+focusableDiv.tabIndex = 0;
+shadowRoot.appendChild(focusableDiv);
+
+promise_test(async () => {
+  assert_equals(document.activeElement, document.body);
+  // Mouse click
+  await test_driver.click(host);
+  assert_equals(document.activeElement, host);
+  assert_equals(shadowRoot.activeElement, focusableDiv);
+  assert_true(host.matches(':focus'));
+  assert_true(focusableDiv.matches(':focus'));
+  assert_false(focusableDiv.matches(':focus-visible'));
+}, ":focus should be applied to the host and the child node when the focus is moved by mouse click");
+
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-method-delegatesFocus-nested-browsing-context.html b/testing/web-platform/tests/shadow-dom/focus/focus-method-delegatesFocus-nested-browsing-context.html
new file mode 100644
index 0000000000..d2724f17d5
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-method-delegatesFocus-nested-browsing-context.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focus() on shadow host within an iframe with delegatesFocus</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<body>
+<script>
+test(() => {
+  const iframe = document.createElement("iframe");
+  document.body.appendChild(iframe);
+  iframe.addEventListener("load", () => {
+    iframe.contentDocument.body.innerHTML =
+            `<div id="host"></div>`;
+    const host = iframe.contentDocument.getElementById("host");
+    const firstInput = iframe.contentDocument.createElement("input");
+    const secondInput = iframe.contentDocument.createElement("input");
+
+    host.attachShadow({mode: 'open', delegatesFocus: true});
+    host.shadowRoot.appendChild(firstInput);
+    host.shadowRoot.appendChild(secondInput);
+
+    iframe.contentDocument.body.appendChild(host);
+
+    secondInput.focus();
+    assert_equals(host.shadowRoot.activeElement, secondInput);
+
+    // host is a shadow-including-ancestor of secondInput, so
+    // the focus should remain secondInput.
+    host.focus();
+    assert_equals(host.shadowRoot.activeElement, secondInput);
+  });
+}, "focus delegate step should not be run when the focus target is a shadow-including inclusive ancestor of the current focus.");
+</script>
+</body>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-method-delegatesFocus.html b/testing/web-platform/tests/shadow-dom/focus/focus-method-delegatesFocus.html
new file mode 100644
index 0000000000..99667029ad
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-method-delegatesFocus.html
@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focus() on shadow host with delegatesFocus</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+
+<body>
+<div id="host">
+  <div id="slottedToSecondSlot" slot="secondSlot">slottedToSecondSlot</div>
+  <div id="slottedToFirstSlot" slot="firstSlot">slottedToFirstSlot</div>
+</div>
+<div id="outside">outside</div>
+</body>
+
+<script>
+const host = document.getElementById("host");
+const slottedToSecondSlot = document.getElementById("slottedToSecondSlot");
+const slottedToFirstSlot = document.getElementById("slottedToFirstSlot");
+const outside = document.getElementById("outside");
+
+const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: true });
+const aboveSlots = document.createElement("div");
+aboveSlots.innerText = "aboveSlots";
+const firstSlot = document.createElement("slot");
+firstSlot.name = "firstSlot";
+const secondSlot = document.createElement("slot");
+secondSlot.name = "secondSlot";
+const belowSlots = document.createElement("div");
+belowSlots.innerText = "belowSlots";
+shadowRoot.appendChild(aboveSlots);
+shadowRoot.appendChild(firstSlot);
+shadowRoot.appendChild(secondSlot);
+shadowRoot.appendChild(belowSlots);
+
+const elementsInFlatTreeOrder = [host, aboveSlots, firstSlot,
+  slottedToFirstSlot, secondSlot, slottedToSecondSlot, belowSlots, outside];
+
+// Final structure:
+// <div #host> (delegatesFocus=true)
+//    #shadowRoot
+//      <div #aboveSlots>
+//      <slot #firstSlot>
+//        (slotted) <div #slottedToFirstSlot>
+//      <slot #secondSlot>
+//        (slotted) <div #slottedToSecondSlot>
+//      <div #belowSlots>
+// <div #outside>
+
+
+function setAllTabIndex(value) {
+  setTabIndex(elementsInFlatTreeOrder, value);
+}
+
+function removeAllTabIndex() {
+  removeTabIndex(elementsInFlatTreeOrder);
+}
+
+function resetTabIndexAndFocus() {
+  removeAllTabIndex();
+  resetFocus(document);
+  resetFocus(shadowRoot);
+}
+
+test(() => {
+  resetTabIndexAndFocus();
+  setAllTabIndex(0);
+  // Structure:
+  // <div #host> (delegatesFocus=true) tabindex=0
+  //    #shadowRoot
+  //      <div #aboveSlots> tabindex=0
+  //      <slot #firstSlot> tabindex=0
+  //        (slotted) <div #slottedToFirstSlot> tabindex=0
+  //      <slot #secondSlot> tabindex=0
+  //        (slotted) <div #slottedToSecondSlot> tabindex=0
+  //      <div #belowSlots> tabindex=0
+  // <div #outside> tabindex=0
+  // First focusable = #aboveSlots
+  host.focus();
+  assert_equals(shadowRoot.activeElement, aboveSlots);
+  assert_equals(document.activeElement, host);
+}, "focus() on host with delegatesFocus, all tabindex=0");
+
+test(() => {
+  resetTabIndexAndFocus();
+  setAllTabIndex(0);
+  setTabIndex([host], -1);
+  // First focusable = #aboveSlots
+  host.focus();
+  assert_equals(shadowRoot.activeElement, aboveSlots);
+  assert_equals(document.activeElement, host);
+}, "focus() on host with delegatesFocus & tabindex =-1, all other tabindex=0");
+
+test(() => {
+  resetTabIndexAndFocus();
+  setTabIndex([aboveSlots, slottedToFirstSlot, slottedToSecondSlot, belowSlots], 0);
+  // First focusable = #aboveSlots
+  host.focus();
+  assert_equals(shadowRoot.activeElement, aboveSlots);
+  assert_equals(document.activeElement, host);
+}, "focus() on host with delegatesFocus & no tabindex, all other tabindex=0");
+
+test(() => {
+  resetTabIndexAndFocus();
+  setAllTabIndex(-1);
+  setTabIndex([host], 0);
+  // First focusable = #aboveSlots
+  host.focus();
+  assert_equals(shadowRoot.activeElement, aboveSlots);
+  assert_equals(document.activeElement, host);
+}, "focus() on host with delegatesFocus & tabindex = 0, all other tabindex=-1");
+
+test(() => {
+  resetTabIndexAndFocus();
+  removeAllTabIndex();
+  // No focusable element under #host in the flat tree.
+  host.focus();
+  assert_equals(shadowRoot.activeElement, null);
+  assert_equals(document.activeElement, document.body);
+}, "focus() on host with delegatesFocus, all without tabindex");
+
+test(() => {
+  resetTabIndexAndFocus();
+  // First focusable = #aboveSlots
+  setAllTabIndex(-1);
+  host.focus();
+  assert_equals(shadowRoot.activeElement, aboveSlots);
+  assert_equals(document.activeElement, host);
+}, "focus() on host with delegatesFocus, all tabindex=-1");
+
+test(() => {
+  resetTabIndexAndFocus();
+  removeAllTabIndex();
+  setTabIndex([host, belowSlots], 0);
+  // Structure:
+  // <div #host> (delegatesFocus=true) tabindex=0
+  //    #shadowRoot
+  //      <div #aboveSlots>
+  //      <slot #firstSlot>
+  //        (slotted) <div #slottedToFirstSlot>
+  //      <slot #secondSlot>
+  //        (slotted) <div #slottedToSecondSlot>
+  //      <div #belowSlots> tabindex=0
+  // <div #outside>
+  // First focusable = #belowSlots
+  host.focus();
+  assert_equals(shadowRoot.activeElement, belowSlots);
+  assert_equals(document.activeElement, host);
+}, "focus() on host with delegatesFocus & tabindex=0, #belowSlots with tabindex=0");
+
+test(() => {
+  resetTabIndexAndFocus();
+  removeAllTabIndex();
+  setTabIndex([host, outside], 0);
+  // Structure:
+  // <div #host> (delegatesFocus=true) tabindex=0
+  //    #shadowRoot
+  //      <div #aboveSlots>
+  //      <slot #firstSlot>
+  //        (slotted) <div #slottedToFirstSlot>
+  //      <slot #secondSlot>
+  //        (slotted) <div #slottedToSecondSlot>
+  //      <div #belowSlots>
+  // <div #outside> tabindex=0
+  // No focusable element under #host in the flat tree.
+  host.focus();
+  assert_equals(shadowRoot.activeElement, null);
+  assert_equals(document.activeElement, document.body);
+}, "focus() on host with delegatesFocus & tabindex=0, #outside with tabindex=0");
+
+test(() => {
+  resetTabIndexAndFocus();
+  setTabIndex([host, aboveSlots, belowSlots], 0);
+  // Structure:
+  // <div #host> (delegatesFocus=true) tabindex=0
+  //    #shadowRoot
+  //      <div #aboveSlots> tabindex=0
+  //      <slot #firstSlot>
+  //        (slotted) <div #slottedToFirstSlot>
+  //      <slot #secondSlot>
+  //        (slotted) <div #slottedToSecondSlot>
+  //      <div #belowSlots> tabindex=0
+  // <div #outside>
+  // First focusable = #aboveSlots
+  host.focus();
+  assert_equals(shadowRoot.activeElement, aboveSlots);
+  assert_equals(document.activeElement, host);
+}, "focus() on host with delegatesFocus & tabindex=0, #aboveSlots and #belowSlots with tabindex=0");
+
+test(() => {
+  resetTabIndexAndFocus();
+  setTabIndex([host, aboveSlots], 0);
+  setTabIndex([belowSlots], 1);
+  // Structure:
+  // <div #host> (delegatesFocus=true) tabindex=0
+  //    #shadowRoot
+  //      <div #aboveSlots> tabindex=0
+  //      <slot #firstSlot>
+  //        (slotted) <div #slottedToFirstSlot>
+  //      <slot #secondSlot>
+  //        (slotted) <div #slottedToSecondSlot>
+  //      <div #belowSlots> tabindex=1
+  // <div #outside>
+  // First focusable = #aboveSlots
+  host.focus();
+  assert_equals(shadowRoot.activeElement, aboveSlots);
+  assert_equals(document.activeElement, host);
+}, "focus() on host with delegatesFocus & tabindex=0, #aboveSlots with tabindex=0 and #belowSlots with tabindex=1");
+
+test(() => {
+  resetTabIndexAndFocus();
+  setTabIndex([host, slottedToFirstSlot, slottedToSecondSlot, belowSlots], 0);
+  // Structure:
+  // <div #host> (delegatesFocus=true) tabindex=0
+  //    #shadowRoot
+  //      <div #aboveSlots>
+  //      <slot #firstSlot>
+  //        (slotted) <div #slottedToFirstSlot> tabindex=0
+  //      <slot #secondSlot>
+  //        (slotted) <div #slottedToSecondSlot> tabindex=0
+  //      <div #belowSlots> tabindex=0
+  // <div #outside>
+  // First focusable = #slottedToFirstSlot
+  host.focus();
+  assert_equals(shadowRoot.activeElement, belowSlots);
+  assert_equals(document.activeElement, host);
+}, "focus() on host with delegatesFocus & tabindex=0, #slottedToFirstSlot, #slottedToSecondSlot, #belowSlots  with tabindex=0");
+
+test(() => {
+  resetTabIndexAndFocus();
+  setTabIndex([aboveSlots, belowSlots], 0);
+  belowSlots.focus();
+  host.focus();
+  assert_equals(shadowRoot.activeElement, belowSlots);
+}, "focus() on host with delegatesFocus and already-focused non-first shadow descendant");
+
+function createNestedHosts(innerDelegatesFocus) {
+  // Structure:
+  // <div> outerHost
+  //   <input> outerLightChild
+  //   #shadowRoot outerShadow delegatesFocus=true
+  //     <span> innerHost
+  //       #shadowRoot inneShadow delegatesFocus=true/false
+  //         <input> innerShadowChild
+  //     <input> outerShadowChild
+  const outerHost = document.createElement('div');
+  const outerLightChild = document.createElement('input');
+  outerHost.appendChild(outerLightChild);
+  const innerHost = document.createElement('span');
+  const outerShadow = outerHost.attachShadow({mode: 'closed', delegatesFocus:true});
+  outerShadow.appendChild(innerHost);
+  const outerShadowChild = document.createElement('input');
+  outerShadow.appendChild(outerShadowChild);
+
+  const innerShadow = innerHost.attachShadow({mode: 'closed', delegatesFocus:innerDelegatesFocus});
+  const innerShadowChild = document.createElement('input');
+  innerShadow.appendChild(innerShadowChild);
+
+  document.body.insertBefore(outerHost, document.body.firstChild);
+  return {outerHost: outerHost,
+      outerLightChild: outerLightChild,
+      outerShadow: outerShadow,
+      outerShadowChild: outerShadowChild,
+      innerHost: innerHost,
+      innerShadow: innerShadow,
+      innerShadowChild: innerShadowChild};
+}
+
+test(() => {
+  const dom = createNestedHosts(false);
+  dom.outerHost.focus();
+  assert_equals(document.activeElement, dom.outerHost);
+  assert_equals(dom.outerShadow.activeElement, dom.outerShadowChild);
+}, 'focus() on host with delegatesFocus with another host with no delegatesFocus and a focusable child');
+
+test(() => {
+  const dom = createNestedHosts(true);
+  dom.outerHost.focus();
+  assert_equals(document.activeElement, dom.outerHost);
+  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');
+
+test(() => {
+  // Structure:
+  // <div> host
+  //   #shadowRoot root delegatesFocus=true
+  //    <slot>
+  //      (slotted) <div>
+  //        <input>
+  //    <input #firstFocusable>
+  const host = document.createElement("div");
+  const slotted = document.createElement("div");
+  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, host);
+  assert_equals(root.activeElement, firstFocusable);
+}, "focus() on host with delegatesFocus and slotted focusable children");
+</script>
+
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-method-with-delegatesFocus.html b/testing/web-platform/tests/shadow-dom/focus/focus-method-with-delegatesFocus.html
new file mode 100644
index 0000000000..8caea8ccda
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-method-with-delegatesFocus.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-dom.js"></script>
+
+<template id='ShadowTemplate'>
+  <ul>
+    <li tabindex='0' id='one'>One</li>
+    <li tabindex='0' id='two'>Two</li>
+    <li id='three'>Three</li>
+  </ul>
+</template>
+<template id='NoFocusableShadowTemplate'>
+  <ul>
+    <li id='one'>One</li>
+    <li id='two'>Two</li>
+    <li id='three'>Three</li>
+  </ul>
+</template>
+<body>
+<input id='input0'>
+<x-shadow id='xshadow0'></x-shadow>
+<x-shadow id='xshadow1' tabindex='0'></x-shadow>
+<x-shadow id='xshadow2' tabindex='0' delegatesFocus></x-shadow>
+<x-shadow-nofocus id='xshadow3'></x-shadow-nofocus>
+<x-shadow-nofocus id='xshadow4' tabindex='0'></x-shadow-nofocus>
+<x-shadow-nofocus id='xshadow5' tabindex='0' delegatesFocus></x-shadow-nofocus>
+</body>
+<script>
+'use strict';
+
+function registerShadow(templateId, tagName) {
+    const template = document.getElementById(templateId);
+
+    customElements.define(tagName, class extends HTMLElement {
+        connectedCallback() {
+            const delegatesFocus = this.hasAttribute('delegatesFocus');
+            this.attachShadow({mode: 'open', delegatesFocus: delegatesFocus})
+                .appendChild(document.importNode(template.content, true));
+        }
+    });
+}
+
+registerShadow('ShadowTemplate', 'x-shadow');
+registerShadow('NoFocusableShadowTemplate', 'x-shadow-nofocus');
+
+test(() => {
+    xshadow0.focus();
+    assert_equals(document.activeElement.tagName, 'BODY');
+    assert_equals(xshadow0.shadowRoot.activeElement, null);
+}, 'xshadow0 is not focusable without tabindex.');
+
+test(() => {
+    xshadow1.focus();
+    assert_equals(document.activeElement.id, 'xshadow1');
+    assert_equals(xshadow1.shadowRoot.activeElement, null);
+}, 'xshadow1 becomes focusable with tabindex.');
+
+test(() => {
+    xshadow2.focus();
+    assert_equals(document.activeElement.id, 'xshadow2');
+    assert_equals(xshadow2.shadowRoot.activeElement.id, 'one');
+}, 'on focus(), focusable xshadow2 with delegatesFocus=true delegates focus into its inner element.');
+
+test(() => {
+    xshadow2.shadowRoot.querySelector('#two').focus();
+    assert_equals(document.activeElement.id, 'xshadow2');
+    assert_equals(xshadow2.shadowRoot.activeElement.id, 'two');
+}, 'if an element within shadow is focused, focusing on shadow host should not slide focus to its inner element.');
+
+test(() => {
+    xshadow2.focus();
+    assert_equals(document.activeElement.id, 'xshadow2');
+    assert_equals(xshadow2.shadowRoot.activeElement.id, 'two');
+}, 'xshadow2.focus() shouldn\'t move focus to #one when its inner element is already focused.');
+
+test(() => {
+    // Focus outside shadow DOMs.
+    input0.focus();
+
+    // within shadow root.  This is different from mouse click behavior.
+    xshadow1.shadowRoot.querySelector('#three').focus();
+    assert_equals(document.activeElement.id, 'input0');
+    xshadow2.shadowRoot.querySelector('#three').focus();
+    assert_equals(document.activeElement.id, 'input0');
+}, 'focus() inside shadow DOM should not focus its shadow host, nor focusable siblings.');
+
+test(() => {
+    xshadow3.focus();
+    assert_equals(document.activeElement.id, 'input0');
+}, 'If any element including shadow host is not focusable, focus doesn\'t change.');
+
+test(() => {
+    xshadow4.focus();
+    assert_equals(document.activeElement.id, 'xshadow4');
+    xshadow5.focus();
+    assert_equals(document.activeElement.id, 'xshadow4');
+}, 'If no element is focusable within a delegatesFocus shadow root, the host can\'t get focus regardless of host\'s tabIndex.');
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-pseudo-matches-on-shadow-host.html b/testing/web-platform/tests/shadow-dom/focus/focus-pseudo-matches-on-shadow-host.html
new file mode 100644
index 0000000000..34f8c01294
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-pseudo-matches-on-shadow-host.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
+<meta name="assert" content=":focus should match a shadow host which contains the focused element">
+<link rel="help" href="https://html.spec.whatwg.org/#element-has-the-focus">
+<link rel="help=" href="https://bugs.webkit.org/show_bug.cgi?id=202432">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<input id="defaultFocus" autofocus>
+<div id="log"></div>
+<div id="container"></div>
+<script>
+
+let focusedDefault = false;
+function didFocusDefault() { }
+function handleFocus() {
+    if (!focusedDefault) {
+        // Use step_timeout here to avoid nested focusing steps.
+        // For example, <input id="defaultFocus" autofocus> could run scripts
+        // while it's autofocusing which may run the tests, so that the
+        // focus() usage in the tests becomes nested focusing steps.
+        step_timeout(function() {
+          testInMode('open', false);
+          testInMode('open', true);
+          testInMode('closed', false);
+          testInMode('closed', true);
+        }, 0);
+    }
+    focusedDefault = true;
+    didFocusDefault();
+}
+defaultFocus.addEventListener('focus', handleFocus);
+
+function prepare(test)
+{
+    test.add_cleanup(() => {
+        defaultFocus.focus();
+        container.textContent = '';
+    });
+    return new Promise((resolve) => {
+        if (focusedDefault)
+            resolve();
+        else
+            didFocusDefault = resolve;
+    });
+}
+
+function testInMode(mode, delegatesFocus) {
+    const modeString = `{mode:${mode}, delegatesFocus:${delegatesFocus}}`;
+    promise_test(async function () {
+        await prepare(this);
+        const host = document.createElement('div');
+        container.appendChild(host);
+        const shadowRoot = host.attachShadow({mode, delegatesFocus});
+        shadowRoot.innerHTML = '<input>';
+        assert_equals(document.activeElement, defaultFocus);
+        assert_equals(shadowRoot.activeElement, null);
+        assert_false(host.matches(':focus'));
+    }, `:focus must not match a shadow host with ${modeString} shadow root that does not contain the focused element`);
+
+    promise_test(async function () {
+        await prepare(this);
+        const host = document.createElement('div');
+        document.body.appendChild(host);
+        const shadowRoot = host.attachShadow({mode, delegatesFocus});
+        shadowRoot.innerHTML = '<input>';
+        shadowRoot.firstChild.focus();
+        assert_equals(document.activeElement, host);
+        assert_equals(shadowRoot.activeElement, shadowRoot.firstChild);
+        assert_true(host.matches(':focus'));
+    }, `:focus must match a shadow host with ${modeString} shadow root that contains the focused element`);
+
+    promise_test(async function () {
+        await prepare(this);
+        const host = document.createElement('div');
+        container.appendChild(host);
+        const shadowRoot = host.attachShadow({mode, delegatesFocus});
+        shadowRoot.innerHTML = '<slot>';
+        host.innerHTML = '<input>';
+        host.firstChild.focus();
+        assert_equals(document.activeElement, host.firstChild);
+        assert_equals(shadowRoot.activeElement, null);
+        assert_false(host.matches(':focus'));
+    }, `:focus must not match a shadow host with ${modeString} shadow root contains the focused element assigned to a slot`);
+
+    promise_test(async function() {
+        await prepare(this);
+        const host1 = document.body.appendChild(document.createElement('div'));
+        const shadowRoot1 = host1.attachShadow({mode, delegatesFocus});
+        const host2 = shadowRoot1.appendChild(document.createElement('div'));
+        const shadowRoot2 = host2.attachShadow({mode, delegatesFocus});
+        shadowRoot2.innerHTML = '<input>';
+        shadowRoot2.firstChild.focus();
+        assert_equals(document.activeElement, host1);
+        assert_equals(shadowRoot1.activeElement, host2);
+        assert_equals(shadowRoot2.activeElement, shadowRoot2.firstChild);
+        assert_true(host1.matches(':focus'));
+        assert_true(host2.matches(':focus'));
+    }, `:focus must match all shadow hosts which are ancestors of a foccused element; ${modeString}`);
+
+    promise_test(async function() {
+        await prepare(this);
+        const host = document.body.appendChild(document.createElement('div'));
+        const shadowRoot = host.attachShadow({mode, delegatesFocus});
+        shadowRoot.innerHTML = '<input>';
+        const input = shadowRoot.firstChild;
+        const outer = document.body.appendChild(document.createElement('div'));
+
+        assert_false(host.matches(':focus'));
+        input.focus();
+        assert_true(host.matches(':focus'));
+        outer.appendChild(input);
+        assert_false(host.matches(':focus'));
+    }, `:focus behavior on tree structure changes; ${modeString}`);
+}
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-pseudo-on-shadow-host-1.html b/testing/web-platform/tests/shadow-dom/focus/focus-pseudo-on-shadow-host-1.html
new file mode 100644
index 0000000000..ba900d6a6d
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-pseudo-on-shadow-host-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
+<meta name="assert" content=":focus should match a shadow host which contains the focused element">
+<link rel="help" href="https://html.spec.whatwg.org/#element-has-the-focus">
+<link rel="help=" href="https://bugs.webkit.org/show_bug.cgi?id=202432">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
+</head>
+<body>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="host"></div>
+<style>
+#host { background: red; width: 100px; height: 100px; }
+#host:focus { background: green; }
+</style>
+<script>
+
+const shadowRoot = host.attachShadow({mode: 'closed'});
+shadowRoot.innerHTML = '<div tabindex="0" style="outline: none;"></div>';
+shadowRoot.firstChild.focus();
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-pseudo-on-shadow-host-2.html b/testing/web-platform/tests/shadow-dom/focus/focus-pseudo-on-shadow-host-2.html
new file mode 100644
index 0000000000..f119008ee3
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-pseudo-on-shadow-host-2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
+<meta name="assert" content=":focus should match a shadow host which contains the focused element">
+<link rel="help" href="https://html.spec.whatwg.org/#element-has-the-focus">
+<link rel="help=" href="https://bugs.webkit.org/show_bug.cgi?id=202432">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+</head>
+<body>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="host"><span>FAIL</span></div>
+<style>
+#host { background: green; width: 100px; height: 100px; }
+#host span { background: red; font: 10px/1 Ahem; }
+#host:focus span { background: green; color: green; }
+</style>
+<script>
+
+const shadowRoot = host.attachShadow({mode: 'closed'});
+shadowRoot.innerHTML = '<div tabindex="0" style="outline: none;"><slot></slot></div>';
+shadowRoot.firstChild.focus();
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-pseudo-on-shadow-host-3.html b/testing/web-platform/tests/shadow-dom/focus/focus-pseudo-on-shadow-host-3.html
new file mode 100644
index 0000000000..e72d1b39d4
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-pseudo-on-shadow-host-3.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
+<meta name="assert" content=":focus should not match a shadow host if the focused element is a slotted content">
+<link rel="help" href="https://html.spec.whatwg.org/#element-has-the-focus">
+<link rel="help=" href="https://bugs.webkit.org/show_bug.cgi?id=202432">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
+</head>
+<body>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="host"><div id="target" tabindex="0"></div></div>
+<style>
+#host { background: green; width: 100px; height: 100px; }
+#host:focus #target { background: red; width: 100px; height: 100px; }
+#target { outline: none; }
+</style>
+<script>
+
+const shadowRoot = host.attachShadow({mode: 'closed'});
+shadowRoot.innerHTML = '<slot></slot>';
+target.focus();
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-selector-delegatesFocus.html b/testing/web-platform/tests/shadow-dom/focus/focus-selector-delegatesFocus.html
new file mode 100644
index 0000000000..bbc1346a46
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-selector-delegatesFocus.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>CSS Test (Selectors): :focus behavior with shadow hosts & delegatesFocus </title>
+  <link rel="author" title="Rakina Zata Amni" href="rakina@chromium.org" />
+  <link rel="help" href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-focus" />
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <script src="resources/shadow-utils.js"></script>
+</head>
+
+<body>
+<input>
+
+<script>
+function createFocusableDiv() {
+  const div = document.createElement("div");
+  div.innerText = "foo";
+  div.tabIndex = 0;
+  return div;
+}
+
+function createShadowHost(delegatesFocus, container) {
+  const host = document.createElement("div");
+  host.attachShadow({ mode: "open", delegatesFocus: delegatesFocus });
+  container.appendChild(host);
+  return host;
+}
+
+const delegatesFocusValues = [true, false];
+
+for (const delegatesFocus of delegatesFocusValues) {
+  test(() => {
+    resetFocus();
+    const host = createShadowHost(delegatesFocus, document.body);
+    const shadowChild = createFocusableDiv();
+    host.shadowRoot.appendChild(shadowChild);
+
+    shadowChild.focus();
+    assert_true(shadowChild.matches(":focus"), "element in shadow tree matches :focus");
+    assert_true(host.matches(":focus"), "host matches :focus");
+  }, `:focus applies to host with delegatesFocus=${delegatesFocus} when the shadow root's descendant has focus`);
+
+  test(() => {
+    resetFocus();
+    const host = createShadowHost(delegatesFocus, document.body);
+    const slotted = createFocusableDiv();
+    host.shadowRoot.appendChild(document.createElement("slot"));
+    host.appendChild(slotted);
+
+    slotted.focus();
+    assert_true(slotted.matches(":focus"), "slotted element matches :focus");
+    assert_false(host.matches(":focus"), "host matches :focus");
+  }, `:focus does not apply to host with delegatesFocus=${delegatesFocus} when slotted element has focus`);
+
+  for (const nestedDelegatesFocus of delegatesFocusValues) {
+    test(() => {
+      resetFocus();
+      const host = createShadowHost(delegatesFocus, document.body);
+      const nestedHost = createShadowHost(nestedDelegatesFocus, host.shadowRoot);
+      const nestedShadowChild = createFocusableDiv();
+      nestedHost.shadowRoot.appendChild(nestedShadowChild);
+      nestedShadowChild.focus();
+      assert_true(nestedShadowChild.matches(":focus"), "element in nested shadow tree matches :focus");
+      assert_true(nestedHost.matches(":focus"), "host of nested shadow tree matches focus");
+      assert_true(host.matches(":focus"), "topmost host matches focus");
+    }, `:focus applies to host with delegatesFocus=${delegatesFocus} when an element in a nested shadow tree with delegatesFocus=${nestedDelegatesFocus} is focused`);
+
+    test(() => {
+      resetFocus();
+      const host = createShadowHost(delegatesFocus, document.body);
+      const nestedHost = createShadowHost(nestedDelegatesFocus, host.shadowRoot);
+      const nestedShadowChild = createFocusableDiv();
+      nestedHost.shadowRoot.appendChild(nestedShadowChild);
+      // All nested shadow hosts should has :focus applied
+      nestedShadowChild.focus();
+
+      const elementOutsideOfShadowDOM = document.querySelector("input");
+      // Move the focus to an element which is outside of the nested
+      // shadow DOM trees
+      elementOutsideOfShadowDOM.focus();
+
+      assert_false(nestedShadowChild.matches(":focus"), "element in nested shadow tree doesn't matche :focus");
+      assert_false(nestedHost.matches(":focus"), "host of nested shadow tree doesn't match focus");
+      assert_false(host.matches(":focus"), "topmost host matches focus");
+      assert_true(elementOutsideOfShadowDOM.matches(":focus"), "The element outside of shadow dom matches :focus");
+    }, `:focus should be removed from hosts with delegatesFocus=${delegatesFocus} when none of the elements in a nested shadow tree with delegatesFocus=${nestedDelegatesFocus} is focused`);
+  }
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-shadowhost-display-none.html b/testing/web-platform/tests/shadow-dom/focus/focus-shadowhost-display-none.html
new file mode 100644
index 0000000000..40f1b01f66
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-shadowhost-display-none.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#host:focus { display: none; }
+</style>
+<div id='sandbox'></div>
+<script>
+'use strict';
+
+// Check if shadow host with display:none CSS rule for :focus works.  crbug.com/482830
+
+var host;
+var root;
+var input;
+
+function setupShadowDOM(delegatesFocus) {
+    sandbox.innerHTML = '';
+    host = sandbox.appendChild(document.createElement('div'));
+    host.id = 'host';
+
+    root = host.attachShadow({mode: 'open', delegatesFocus: delegatesFocus});
+    input = document.createElement('input');
+    root.appendChild(input);
+
+    host.tabIndex = 0;
+}
+
+promise_test(() => {
+    setupShadowDOM(false);
+    return new Promise(
+        function(resolve) {
+            host.focus();
+            assert_equals(window.getComputedStyle(host).display, 'none');
+            assert_equals(document.activeElement, host);
+            assert_equals(root.activeElement, null);
+
+            function onBlur() {
+                assert_equals(window.getComputedStyle(host).display, 'block');
+                assert_equals(document.activeElement, document.body);
+                assert_equals(root.activeElement, null);
+                host.removeEventListener('blur', onBlur);
+                resolve();
+            }
+            host.addEventListener('blur', onBlur);
+        });
+}, 'when shadow host itself is focused, it should match display:none, lose focus then becomes display:block again.');
+
+promise_test(() => {
+    setupShadowDOM(true);
+    return new Promise(
+        function(resolve) {
+            input.focus();
+            assert_equals(window.getComputedStyle(host).display, 'none');
+            assert_equals(document.activeElement, host);
+            assert_equals(root.activeElement, input);
+
+            function onBlur() {
+                assert_equals(window.getComputedStyle(host).display, 'block');
+                assert_equals(document.activeElement, document.body);
+                assert_equals(root.activeElement, null);
+                input.removeEventListener('blur', onBlur);
+                resolve();
+            }
+            input.addEventListener('blur', onBlur);
+        });
+}, 'when shadow host with delegatesFocus=true has focused element inside the shadow, it should also match display:none, then lose focus and become display:block again.');
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-tab-on-shadow-host.html b/testing/web-platform/tests/shadow-dom/focus/focus-tab-on-shadow-host.html
new file mode 100644
index 0000000000..0dffc0157f
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-tab-on-shadow-host.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: Use tab to navigate the focus to an element inside shadow host with delegatesFocus</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+
+<body>
+  <div id="host"></div>
+</body>
+
+<script>
+const host = document.getElementById("host");
+
+const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: true });
+const input = document.createElement("input");
+shadowRoot.appendChild(input);
+
+promise_test(async function() {
+  assert_equals(document.activeElement, document.body);
+  // Press <tab>
+  await navigateFocusForward();
+  assert_equals(document.activeElement, host);
+  assert_equals(shadowRoot.activeElement, input);
+  assert_true(host.matches(':focus'));
+  assert_true(input.matches(':focus'));
+  assert_true(input.matches(':focus-visible'));
+}, ":focus should be applied to the host and :focus-visible should be applied to the child node when the focus is moved by <tab>");
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-negative-delegatesFocus.html b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-negative-delegatesFocus.html
new file mode 100644
index 0000000000..356b0bb329
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-negative-delegatesFocus.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focus - the sequential focus navigation order with shadow dom that delegates focus and all tabindex=-1 in shadow tree</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+<body>
+<script>
+// Structure:
+// <div #aboveHost tabindex=0>
+// <div #host tabindex=0>
+//    #shadowRoot (delegatesFocus)
+//      <div #aboveSlot tabindex=-1>
+//      <slot #slotAbove tabindex=-1>
+//        (slotted) <div #slottedAbove tabindex=-1>
+//      <slot #slotBelow tabindex=-1>
+//        (slotted) <div #slottedBelow tabindex=-1>
+//      <div #belowSlot tabindex=-1>
+// <div #belowHost tabindex=0>
+
+promise_test(() => {
+  let elementsInFlatTreeOrder;
+  let [aboveHost, host, aboveSlot, slotAbove, slottedAbove, slotBelow, slottedBelow, belowSlot, belowHost] = elementsInFlatTreeOrder = prepareDOM(document.body, true);
+  setTabIndex(elementsInFlatTreeOrder, -1);
+  setTabIndex([aboveHost, host, belowHost], 0);
+  resetFocus();
+  // Focus should only land on #aboveHost and #belowHost (all others are non-sequentially focusable).
+  return assertFocusOrder([aboveHost, belowHost]);
+}, "Order when all tabindex=-1 is and delegatesFocus = true");
+</script>
+</body>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-negative.html b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-negative.html
new file mode 100644
index 0000000000..ab25ea829b
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-negative.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focus - the sequential focus navigation order with shadow dom and negative tabindex in shadow scope</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+<body>
+<script>
+// Structure:
+// <div #aboveHost tabindex=0>
+// <div #host tabindex=0>
+//    #shadowRoot
+//      <div #aboveSlot tabindex=-1>
+//      <slot #slotAbove tabindex=-1>
+//        (slotted) <div #slottedAbove tabindex=-1>
+//      <slot #slotBelow tabindex=-1>
+//        (slotted) <div #slottedBelow tabindex=-1>
+//      <div #belowSlot tabindex=-1>
+// <div #belowHost tabindex=0>
+
+promise_test(() => {
+  let elementsInFlatTreeOrder;
+  let [aboveHost, host, aboveSlot, slotAbove, slottedAbove, slotBelow, slottedBelow, belowSlot, belowHost] =
+    elementsInFlatTreeOrder = prepareDOM(document.body, false);
+  setTabIndex(elementsInFlatTreeOrder, -1);
+  setTabIndex([aboveHost, host, belowHost], 0);
+  resetFocus();
+  return assertFocusOrder([aboveHost, host, belowHost]);
+}, "Order when all elements in shadow tree has negative tabindex");
+</script>
+</body>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-slot-one.html b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-slot-one.html
new file mode 100644
index 0000000000..3c9e70867c
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-slot-one.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focus - the sequential focus navigation order with shadow dom and all tabindex=0 except for one of the slot</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+<body>
+<script>
+// Structure:
+// <div #aboveHost tabindex=0>
+// <div #host tabindex=0>
+//    #shadowRoot
+//      <div #aboveSlot tabindex=0>
+//      <slot #slotAbove tabindex=0>
+//        (slotted) <div #slottedAbove tabindex=0>
+//      <slot #slotBelow tabindex=1>
+//        (slotted) <div #slottedBelow tabindex=0>
+//      <div #belowSlot tabindex=0>
+// <div #belowHost tabindex=0>
+
+promise_test(() => {
+  let elementsInFlatTreeOrder;
+  let [aboveHost, host, aboveSlot, slotAbove, slottedAbove, slotBelow, slottedBelow, belowSlot, belowHost] =
+    elementsInFlatTreeOrder = prepareDOM(document.body, false);
+  setTabIndex(elementsInFlatTreeOrder, 0);
+  slotBelow.tabIndex = 1;
+  resetFocus();
+  // Focus should move first according to flat tree order to #aboveHost and #host, then into #host's focus scope.
+  // It will then move to #slottedBelow because #slotBelow has tabindex=1 (though we actually won't focus on the slot),
+  // and then back to #host's focus scope again, finally getting out to the document focus scope.
+  return assertFocusOrder([aboveHost, host, slottedBelow, aboveSlot, slottedAbove, belowSlot, belowHost]);
+}, "Order when all tabindex=0, except for one slot that has tabindex=1");
+</script>
+</body>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-varying-delegatesFocus.html b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-varying-delegatesFocus.html
new file mode 100644
index 0000000000..67899cff4a
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-varying-delegatesFocus.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focus - the sequential focus navigation order with shadow dom that delegates focus and tabindex in shadow tree varies</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+<body>
+<script>
+// Structure:
+// <div #aboveHost tabindex=0>
+// <div #host tabindex=0>
+//    #shadowRoot (delegatesFocus)
+//      <div #aboveSlot tabindex=0>
+//      <slot #slotAbove tabindex=1>
+//        (slotted) <div #slottedAbove tabindex=3>
+//      <slot #slotBelow tabindex=2>
+//        (slotted) <div #slottedBelow tabindex=1>
+//      <div #belowSlot tabindex=-1>
+// <div #belowHost tabindex=0>
+
+promise_test(() => {
+  let elementsInFlatTreeOrder;
+  let [aboveHost, host, aboveSlot, slotAbove, slottedAbove, slotBelow, slottedBelow, belowSlot, belowHost] = elementsInFlatTreeOrder = prepareDOM(document.body, true);
+  setTabIndex(elementsInFlatTreeOrder, -1);
+  setTabIndex([aboveHost, host, aboveSlot, belowHost], 0);
+  setTabIndex([slotAbove, slottedBelow], 1);
+  setTabIndex([slotBelow], 2);
+  setTabIndex([slottedAbove], 3);
+  resetFocus();
+  return assertFocusOrder([aboveHost, slottedAbove, slottedBelow, aboveSlot, belowHost]);
+}, "Order when tabindex varies and delegatesFocus = true");
+</script>
+</body>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-varying-tabindex-2.html b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-varying-tabindex-2.html
new file mode 100644
index 0000000000..1755aaf442
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-varying-tabindex-2.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focus - the sequential focus navigation order with shadow dom with varying tabindex values</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+<body>
+<script>
+promise_test(async () => {
+  function createButtonInShadowDOM(host) {
+    const root = host.attachShadow({mode: "open"});
+    root.innerHTML = "<input>";
+    document.body.appendChild(host);
+    return root;
+  }
+  const host1 = document.createElement("div");
+  const root1 = createButtonInShadowDOM(host1);
+
+  const forwarder = document.createElement("div");
+  forwarder.setAttribute("tabindex", 0);
+  document.body.appendChild(forwarder);
+
+  const host2 = document.createElement("div");
+  host2.setAttribute("tabindex", -1);
+  const root2 = createButtonInShadowDOM(host2);
+
+  const host3 = document.createElement("div");
+  const root3 = createButtonInShadowDOM(host3);
+
+  root1.querySelector("input").focus();
+
+  let forwarderFocused = false;
+  forwarder.addEventListener("focus", () => {
+    forwarderFocused = true;
+    root2.querySelector("input").focus();
+  });
+
+  // Structure:
+  // <div #host1></div>
+  //   #ShadowRoot
+  //     <button>Button</button>
+  // <div #forwarder tabindex=0></div>
+  // <div #host2 tabindex=-1></div>
+  //   #ShadowRoot
+  //     <button>Button</button>
+  // <div #host3></div>
+  //   #ShadowRoot
+  //     <button>Button</button>
+  assert_equals(document.activeElement, host1);
+  assert_equals(root1.activeElement, root1.querySelector("input"));
+
+  await navigateFocusForward();
+  assert_true(forwarderFocused);
+  assert_equals(document.activeElement, host2);
+  assert_equals(root2.activeElement, root2.querySelector("input"));
+
+  // In buggy Firefox build, the following focus navigation will
+  // move the focus back to #host1's button.
+  await navigateFocusForward();
+  assert_equals(document.activeElement, host3);
+  assert_equals(root3.activeElement, root3.querySelector("input"));
+}, "Order with different tabindex on host")
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-varying-tabindex-3.html b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-varying-tabindex-3.html
new file mode 100644
index 0000000000..e0570395ec
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-varying-tabindex-3.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focus - the sequential focus navigation order with nested shadow dom with varying tabindex values</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+<body>
+<script>
+promise_test(async () => {
+  function createButtonInShadowDOM(host, parent) {
+    const root = host.attachShadow({mode: "open"});
+    root.innerHTML = "<input>";
+    parent.appendChild(host);
+    return root;
+  }
+
+  const host1 = document.createElement("div");
+  const root1 = createButtonInShadowDOM(host1, document.body);
+
+  const forwarder = document.createElement("div");
+  forwarder.setAttribute("tabindex", 0);
+  document.body.appendChild(forwarder);
+
+  const host2 = document.createElement("div");
+  host2.setAttribute("tabindex", -1);
+  const root2 = host2.attachShadow({mode: "open"});
+  document.body.appendChild(host2);
+
+  const host2_1 = document.createElement("div");
+  const root2_1 = createButtonInShadowDOM(host2_1, root2);
+
+  const host2_2 = document.createElement("div");
+  host2_2.setAttribute("tabindex", -1);
+  const root2_2 = createButtonInShadowDOM(host2_2, root2);
+
+  const host2_3 = document.createElement("div");
+  const root2_3 = createButtonInShadowDOM(host2_3, root2);
+
+  root1.querySelector("input").focus();
+
+  let forwarderFocused = false;
+  forwarder.addEventListener("focus", () => {
+    forwarderFocused = true;
+    root2_2.querySelector("input").focus();
+  });
+
+  // Structure:
+  // <div #host1></div>
+  //   #ShadowRoot
+  //     <button>Button</button>
+  // <div #forwarder tabindex=0></div>
+  // <div #host2 tabindex=-1></div>
+  //   #ShadowRoot
+  //     <div #host2_1></div>
+  //       #ShadowRoot
+  //         <button>Button</button>
+  //     <div #host2_2 tabindex=-1></div>
+  //       #ShadowRoot
+  //         <button>Button</button>
+  //     <div #host2_3></div>
+  //       #ShadowRoot
+  //         <button>Button</button>
+  assert_equals(document.activeElement, host1);
+  assert_equals(root1.activeElement, root1.querySelector("input"));
+
+  await navigateFocusForward();
+  assert_true(forwarderFocused);
+  assert_equals(document.activeElement, host2);
+  assert_equals(root2_2.activeElement, root2_2.querySelector("input"));
+
+  // In buggy Firefox build, the following focus navigation will
+  // move the focus back to #host1_1's button.
+  await navigateFocusForward();
+  assert_equals(document.activeElement, host2);
+  assert_equals(root2_3.activeElement, root2_3.querySelector("input"));
+}, "Order with different tabindex on host")
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-varying-tabindex.html b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-varying-tabindex.html
new file mode 100644
index 0000000000..875e5b6814
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-varying-tabindex.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focus - the sequential focus navigation order with shadow dom with varying tabindex values</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+<body>
+<script>
+// Structure:
+// <div #aboveHost tabindex=3>
+// <div #host tabindex=3>
+//    #shadowRoot
+//      <div #aboveSlot tabindex=2>
+//      <slot #slotAbove tabindex=1>
+//        (slotted) <div #slottedAbove tabindex=4>
+//      <slot #slotBelow tabindex=1>
+//        (slotted) <div #slottedBelow tabindex=4>
+//      <div #belowSlot tabindex=2>
+// <div #belowHost tabindex=3>
+
+promise_test(() => {
+  let elementsInFlatTreeOrder;
+  let [aboveHost, host, aboveSlot, slotAbove, slottedAbove, slotBelow, slottedBelow, belowSlot, belowHost] =
+    elementsInFlatTreeOrder = prepareDOM(document.body, false);
+  setTabIndex([slotAbove, slotBelow], 1);
+  setTabIndex([aboveSlot, belowSlot], 2);
+  setTabIndex([aboveHost, host, belowHost], 3);
+  setTabIndex([slottedAbove, slottedBelow], 4);
+  resetFocus();
+  return assertFocusOrder([aboveHost, host, slottedAbove, slottedBelow, aboveSlot, belowSlot, belowHost]);
+}, "Order with various tabindex values");
+</script>
+</body>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-delegatesFocus.html b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-delegatesFocus.html
new file mode 100644
index 0000000000..5e6ab3a90f
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-delegatesFocus.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focus - the sequential focus navigation order with shadow dom that delegates focus and all tabindex=0</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+<body>
+<script>
+// Structure:
+// <div #aboveHost tabindex=0>
+// <div #host tabindex=0>
+//    #shadowRoot (delegatesFocus)
+//      <div #aboveSlot tabindex=0>
+//      <slot #slotAbove tabindex=0>
+//        (slotted) <div #slottedAbove tabindex=0>
+//      <slot #slotBelow tabindex=0>
+//        (slotted) <div #slottedBelow tabindex=0>
+//      <div #belowSlot tabindex=0>
+// <div #belowHost tabindex=0>
+
+promise_test(() => {
+  let elementsInFlatTreeOrder;
+  let [aboveHost, host, aboveSlot, slotAbove, slottedAbove, slotBelow, slottedBelow, belowSlot, belowHost] = elementsInFlatTreeOrder = prepareDOM(document.body, true);
+  setTabIndex(elementsInFlatTreeOrder, 0);
+  resetFocus();
+  // Focus should move in flat tree order since every one of them has tabindex ==0,
+  // but doesn't include slots and #host.
+  return assertFocusOrder([aboveHost, aboveSlot, slottedAbove, slottedBelow, belowSlot, belowHost]);
+}, "Order when all tabindex=0 is and delegatesFocus = true");
+</script>
+</body>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-negative.html b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-negative.html
new file mode 100644
index 0000000000..b491c7d237
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-negative.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focus - the sequential focus navigation order with shadow dom and negative host tabindex</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+<body>
+<script>
+// Structure:
+// <div #aboveHost tabindex=0>
+// <div #host tabindex=-1>
+//    #shadowRoot
+//      <div #aboveSlot tabindex=0>
+//      <slot #slotAbove tabindex=0>
+//        (slotted) <div #slottedAbove tabindex=0>
+//      <slot #slotBelow tabindex=0>
+//        (slotted) <div #slottedBelow tabindex=0>
+//      <div #belowSlot tabindex=0>
+// <div #belowHost tabindex=0>
+
+promise_test(() => {
+  let elementsInFlatTreeOrder;
+  let [aboveHost, host, aboveSlot, slotAbove, slottedAbove, slotBelow, slottedBelow, belowSlot, belowHost] =
+    elementsInFlatTreeOrder = prepareDOM(document.body, false);
+  setTabIndex(elementsInFlatTreeOrder, 0);
+  host.tabIndex = -1;
+  resetFocus();
+  // Focus willl only move within the focus navigation scope of the document (not going to get into #host).
+  return assertFocusOrder([aboveHost, belowHost]);
+}, "Order when all tabindex=0 except for host, which has tabindex=-1");
+</script>
+</body>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-not-set-scrollable.html b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-not-set-scrollable.html
new file mode 100644
index 0000000000..9a12d8b8f4
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-not-set-scrollable.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focus - the sequential focus navigation order with shadow dom and scrollable/non-focusable host</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+<body>
+<script>
+// Structure:
+// <div #aboveHost tabindex=0>
+// <div #host style="overflow: scroll">
+//    #shadowRoot
+//      <div #aboveSlot tabindex=0>
+//      <slot #slotAbove tabindex=0>
+//        (slotted) <div #slottedAbove tabindex=0>
+//      <slot #slotBelow tabindex=0>
+//        (slotted) <div #slottedBelow tabindex=0>
+//      <div #belowSlot tabindex=0>
+// <div #belowHost tabindex=0>
+
+promise_test(() => {
+  let elementsInFlatTreeOrder;
+  let [aboveHost, host, aboveSlot, slotAbove, slottedAbove, slotBelow, slottedBelow, belowSlot, belowHost] =
+    elementsInFlatTreeOrder = prepareDOM(document.body, false);
+  setTabIndex(elementsInFlatTreeOrder, 0);
+  removeTabIndex([host]);
+  host.style = "overflow: scroll";
+  resetFocus();
+  // Focus should move in flat tree order since every one of them has tabindex ==0,
+  // but doesn't include #slot since it's not rendered and #host since its tabindex is not set
+  // (but #host is considered as 0 in focus scope navigation, keeping the flat tree order for the shadow root's descendants).
+  return assertFocusOrder(elementsInFlatTreeOrder.filter(el => (el !== slotAbove && el !== slotBelow && el !== host)));
+}, "Order when all tabindex=0 except scrollable host (tabindex not set)");
+</script>
+</body>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-not-set.html b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-not-set.html
new file mode 100644
index 0000000000..f257261477
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-not-set.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focus - the sequential focus navigation order with shadow dom and non-focusable host</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+<body>
+<script>
+// Structure:
+// <div #aboveHost tabindex=0>
+// <div #host>
+//    #shadowRoot
+//      <div #aboveSlot tabindex=0>
+//      <slot #slotAbove tabindex=0>
+//        (slotted) <div #slottedAbove tabindex=0>
+//      <slot #slotBelow tabindex=0>
+//        (slotted) <div #slottedBelow tabindex=0>
+//      <div #belowSlot tabindex=0>
+// <div #belowHost tabindex=0>
+
+promise_test(() => {
+  let elementsInFlatTreeOrder;
+  let [aboveHost, host, aboveSlot, slotAbove, slottedAbove, slotBelow, slottedBelow, belowSlot, belowHost] =
+    elementsInFlatTreeOrder = prepareDOM(document.body, false);
+  setTabIndex(elementsInFlatTreeOrder, 0);
+  removeTabIndex([host]);
+  resetFocus();
+  // Focus should move in flat tree order since every one of them has tabindex ==0,
+  // but doesn't include #slot since it's not rendered and #host since its tabindex is not set
+  // (but #host is considered as 0 in focus scope navigation, keeping the flat tree order for the shadow root's descendants).
+  return assertFocusOrder(elementsInFlatTreeOrder.filter(el => (el !== slotAbove && el !== slotBelow && el !== host)));
+}, "Order when all tabindex=0 except host (tabindex not set)");
+</script>
+</body>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-one.html b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-one.html
new file mode 100644
index 0000000000..1aa5292997
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-one.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focus - the sequential focus navigation order with shadow dom and all tabindex=0 except host (tabindex=1)</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+<body>
+<script>
+// Structure:
+// <div #aboveHost tabindex=0>
+// <div #host tabindex=1>
+//    #shadowRoot
+//      <div #aboveSlot tabindex=0>
+//      <slot #slotAbove tabindex=0>
+//        (slotted) <div #slottedAbove tabindex=0>
+//      <slot #slotBelow tabindex=0>
+//        (slotted) <div #slottedBelow tabindex=0>
+//      <div #belowSlot tabindex=0>
+// <div #belowHost tabindex=0>
+
+promise_test(() => {
+  let elementsInFlatTreeOrder;
+  let [aboveHost, host, aboveSlot, slotAbove, slottedAbove, slotBelow, slottedBelow, belowSlot, belowHost] =
+    elementsInFlatTreeOrder = prepareDOM(document.body, false);
+  setTabIndex(elementsInFlatTreeOrder, 0);
+  host.tabIndex = 1;
+  resetFocus();
+  // Focus should move first to #host because it has tabindex=1, and then to the contents of its scope
+  // (e.g. the contents of its shadow tree) in flat tree order, and then outside to the document scope
+  // again (aboveHost & belowHost).
+  return assertFocusOrder([host, aboveSlot, slottedAbove, slottedBelow, belowSlot, aboveHost, belowHost]);
+}, "Order when all tabindex=0 except for host, which has tabindex=1");
+</script>
+</body>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-scrollable.html b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-scrollable.html
new file mode 100644
index 0000000000..fa8090ca97
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero-host-scrollable.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focus - the sequential focus navigation order with shadow dom and host is scrollable</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+<body>
+<script>
+// Structure:
+// <div #aboveHost tabindex=0>
+// <div #host tabindex=0 style="overflow: scroll">
+//    #shadowRoot
+//      <div #aboveSlot tabindex=0>
+//      <slot #slotAbove tabindex=0>
+//        (slotted) <div #slottedAbove tabindex=0>
+//      <slot #slotBelow tabindex=0>
+//        (slotted) <div #slottedBelow tabindex=0>
+//      <div #belowSlot tabindex=0>
+// <div #belowHost tabindex=0>
+
+promise_test(() => {
+  let elementsInFlatTreeOrder;
+  let [aboveHost, host, aboveSlot, slotAbove, slottedAbove, slotBelow, slottedBelow, belowSlot, belowHost] =
+    elementsInFlatTreeOrder = prepareDOM(document.body, false);
+  setTabIndex(elementsInFlatTreeOrder, 0);
+  host.style = "overflow: scroll";
+  resetFocus();
+  // Focus should move in flat tree order since every one of them has tabindex==0,
+  // but doesn't include slots.
+  return assertFocusOrder(elementsInFlatTreeOrder.filter(el => (el !== slotAbove && el !== slotBelow)));
+}, "Order when all tabindex=0 and host is scrollable");
+</script>
+</body>
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero.html b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero.html
new file mode 100644
index 0000000000..d8b12ed8ac
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-tabindex-order-shadow-zero.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focus - the sequential focus navigation order with shadow dom and all tabindex=0</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+<body>
+<script>
+// Structure:
+// <div #aboveHost tabindex=0>
+// <div #host tabindex=0>
+//    #shadowRoot
+//      <div #aboveSlot tabindex=0>
+//      <slot #slotAbove tabindex=0>
+//        (slotted) <div #slottedAbove tabindex=0>
+//      <slot #slotBelow tabindex=0>
+//        (slotted) <div #slottedBelow tabindex=0>
+//      <div #belowSlot tabindex=0>
+// <div #belowHost tabindex=0>
+
+promise_test(() => {
+  let elementsInFlatTreeOrder;
+  let [aboveHost, host, aboveSlot, slotAbove, slottedAbove, slotBelow, slottedBelow, belowSlot, belowHost] =
+    elementsInFlatTreeOrder = prepareDOM(document.body, false);
+  setTabIndex(elementsInFlatTreeOrder, 0);
+  resetFocus();
+  // Focus should move in flat tree order since every one of them has tabindex==0,
+  // but doesn't include slots.
+  return assertFocusOrder(elementsInFlatTreeOrder.filter(el => (el !== slotAbove && el !== slotBelow)));
+}, "Order when all tabindex=0 is and delegatesFocus = false");
+</script>
+</body>
diff --git a/testing/web-platform/tests/shadow-dom/focus/resources/shadow-utils.js b/testing/web-platform/tests/shadow-dom/focus/resources/shadow-utils.js
new file mode 100644
index 0000000000..8033ce0169
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/resources/shadow-utils.js
@@ -0,0 +1,80 @@
+// Structure:
+// <div #aboveHost>
+// <div #host>
+//    #shadowRoot
+//      <div #aboveSlot>
+//      <slot #slotAbove>
+//        (slotted) <div #slottedAbove>
+//      <slot #slotBelow>
+//        (slotted) <div #slottedBelow>
+//      <div #belowSlot>
+// <div #belowHost>
+function prepareDOM(container, delegatesFocus) {
+
+  const aboveHost = document.createElement("div");
+  aboveHost.innerText = "aboveHost";
+  const host = document.createElement("div");
+  host.id = "host";
+  const slottedBelow = document.createElement("div");
+  slottedBelow.innerText = "slotted below";
+  slottedBelow.slot = "below";
+  const slottedAbove = document.createElement("div");
+  slottedAbove.innerText = "slotted above";
+  slottedAbove.slot = "above";
+
+  const belowHost = document.createElement("div");
+  belowHost.innerText = "belowHost";
+  container.appendChild(aboveHost);
+  container.appendChild(host);
+  container.appendChild(belowHost);
+  host.appendChild(slottedBelow);
+  host.appendChild(slottedAbove);
+  const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: delegatesFocus});
+  const aboveSlot = document.createElement("div");
+  aboveSlot.innerText = "aboveSlot";
+
+  const slotAbove = document.createElement("slot");
+  slotAbove.name = "above";
+  const slotBelow = document.createElement("slot");
+  slotBelow.name = "below";
+
+  const belowSlot = document.createElement("div");
+  belowSlot.innerText = "belowSlot";
+  shadowRoot.appendChild(aboveSlot);
+  shadowRoot.appendChild(slotAbove);
+  shadowRoot.appendChild(slotBelow);
+  shadowRoot.appendChild(belowSlot);
+
+  return [aboveHost, host, aboveSlot, slotAbove, slottedAbove, slotBelow, slottedBelow, belowSlot, belowHost];
+}
+
+function setTabIndex(elements, value) {
+  for (const el of elements) {
+    el.tabIndex = value;
+  }
+}
+
+function removeTabIndex(elements) {
+  for (const el of elements) {
+    el.removeAttribute("tabindex");
+  }
+}
+
+function resetFocus(root = document) {
+  if (root.activeElement)
+    root.activeElement.blur();
+}
+
+function navigateFocusForward() {
+  // TAB = '\ue004'
+  return test_driver.send_keys(document.body, "\ue004");
+}
+
+async function assertFocusOrder(expectedOrder) {
+  const shadowRoot = document.getElementById("host").shadowRoot;
+  for (const el of expectedOrder) {
+    await navigateFocusForward();
+    const focused = shadowRoot.activeElement ? shadowRoot.activeElement : document.activeElement;
+    assert_equals(focused, el);
+  }
+}
-- 
cgit v1.2.3