Bug 1730566 - Make blur() works on shadow host with delegatesFocus r=…

…emilio This intends to address: whatwg/html#7070 Differential Revision: https://phabricator.services.mozilla.com/D125477
mozilla · Sep 14, 2021 · 4013998 · 4013998
1 parent dea4bb4
commit 4013998
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/dom/base/Element.cpp b/dom/base/Element.cpp
@@ -2096,8 +2096,18 @@ bool Element::ShouldBlur(nsIContent* aContent) {
   nsCOMPtr<nsPIDOMWindowOuter> focusedFrame;
   nsIContent* contentToBlur = nsFocusManager::GetFocusedDescendant(
       window, nsFocusManager::eOnlyCurrentWindow, getter_AddRefs(focusedFrame));
+
+  if (!contentToBlur) {
+    return false;
+  }
+
   if (contentToBlur == aContent) return true;
 
+  ShadowRoot* root = aContent->GetShadowRoot();
+  if (root && root->DelegatesFocus() &&
+      contentToBlur->IsShadowIncludingInclusiveDescendantOf(root)) {
+    return true;
+  }
   // if focus on this element would get redirected, then check the redirected
   // content as well when blurring.
   return (contentToBlur &&

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
@@ -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>