From 90d75d1cf11c1f34997ce3d85475aa6aac49a3e3 Mon Sep 17 00:00:00 2001
From: Rakina Zata Amni <rakina@chromium.org>
Date: Wed, 25 Sep 2019 16:56:11 +0000
Subject: [PATCH] Bug 1561290 [wpt PR 17493] - CSS: :focus selector effects on
 shadow hosts, a=testonly

Automatic update from web-platform-tests
CSS: :focus selector effects on shadow hosts

Follows https://github.com/whatwg/html/pull/4731.
--

wpt-commits: 0693b81665fcc5a7258535e4403b748a810730ae
wpt-pr: 17493
---
 .../focus/focus-selector-delegatesFocus.html  | 72 +++++++++++++++++++
 .../focus/resources/shadow-utils.js           |  5 +-
 2 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 testing/web-platform/tests/shadow-dom/focus/focus-selector-delegatesFocus.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 0000000000000..386045258e043
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-selector-delegatesFocus.html
@@ -0,0 +1,72 @@
+<!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/testdriver.js"></script>
+  <script src="/resources/testdriver-vendor.js"></script>
+  <script src="resources/shadow-utils.js"></script>
+</head>
+
+<body>
+<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_true(host.matches(":focus"), "host matches :focus");
+  }, `:focus applies 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`);
+  }
+}
+</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
index 6ea372afdf180..8033ce0169f4a 100644
--- a/testing/web-platform/tests/shadow-dom/focus/resources/shadow-utils.js
+++ b/testing/web-platform/tests/shadow-dom/focus/resources/shadow-utils.js
@@ -60,8 +60,9 @@ function removeTabIndex(elements) {
   }
 }
 
-function resetFocus() {
-  document.body.focus();
+function resetFocus(root = document) {
+  if (root.activeElement)
+    root.activeElement.blur();
 }
 
 function navigateFocusForward() {
