1 files changed, 138 insertions, 0 deletions
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>