1 files changed, 84 insertions, 0 deletions
diff --git a/browser/components/preferences/tests/browser_search_within_preferences_2.js b/browser/components/preferences/tests/browser_search_within_preferences_2.js
index 6de068fbe4..5fcb445adc 100644
--- a/browser/components/preferences/tests/browser_search_within_preferences_2.js
+++ b/browser/components/preferences/tests/browser_search_within_preferences_2.js
@@ -178,3 +178,87 @@ add_task(async function () {
 
   await BrowserTestUtils.removeTab(gBrowser.selectedTab);
 });
+
+/**
+ * Test that search works as expected for custom elements that utilize both
+ * slots and shadow DOM. We should be able to find text the shadow DOM.
+ */
+add_task(async function testSearchShadowDOM() {
+  await openPreferencesViaOpenPreferencesAPI("paneGeneral", {
+    leaveOpen: true,
+  });
+
+  // Create the toggle.
+  let { toggle, SHADOW_DOM_TEXT } = createToggle(gBrowser);
+
+  ok(
+    !BrowserTestUtils.isVisible(toggle),
+    "Toggle is not visible prior to search."
+  );
+
+  // Perform search with text found in moz-toggle's shadow DOM.
+  let query = SHADOW_DOM_TEXT;
+  let searchCompletedPromise = BrowserTestUtils.waitForEvent(
+    gBrowser.contentWindow,
+    "PreferencesSearchCompleted",
+    evt => evt.detail == query
+  );
+  EventUtils.sendString(query);
+  await searchCompletedPromise;
+  ok(
+    BrowserTestUtils.isVisible(toggle),
+    "Toggle is visible after searching for string in the shadow DOM."
+  );
+
+  BrowserTestUtils.removeTab(gBrowser.selectedTab);
+});
+
+/**
+ * Test that search works as expected for custom elements that utilize both
+ * slots and shadow DOM. We should be able to find text the light DOM.
+ */
+add_task(async function testSearchLightDOM() {
+  await openPreferencesViaOpenPreferencesAPI("paneGeneral", {
+    leaveOpen: true,
+  });
+
+  // Create the toggle.
+  let { toggle, LIGHT_DOM_TEXT } = createToggle(gBrowser);
+
+  // Perform search with text found in moz-toggle's slotted content.
+  let query = LIGHT_DOM_TEXT;
+  let searchCompletedPromise = BrowserTestUtils.waitForEvent(
+    gBrowser.contentWindow,
+    "PreferencesSearchCompleted",
+    evt => evt.detail == query
+  );
+  EventUtils.sendString(query);
+  await searchCompletedPromise;
+  ok(
+    BrowserTestUtils.isVisible(toggle),
+    "Toggle is visible again after searching for text found in slotted content."
+  );
+
+  BrowserTestUtils.removeTab(gBrowser.selectedTab);
+});
+
+// Create a toggle with a slotted link element.
+function createToggle(gBrowser) {
+  const SHADOW_DOM_TEXT = "This text lives in the shadow DOM";
+  const LIGHT_DOM_TEXT = "This text lives in the light DOM";
+
+  let doc = gBrowser.contentDocument;
+  let toggle = doc.createElement("moz-toggle");
+  toggle.label = SHADOW_DOM_TEXT;
+
+  let link = doc.createElement("a");
+  link.href = "https://mozilla.org/";
+  link.textContent = LIGHT_DOM_TEXT;
+  toggle.append(link);
+  link.slot = "support-link";
+
+  let protectionsGroup = doc.getElementById("trackingGroup");
+  protectionsGroup.append(toggle);
+
+  return { SHADOW_DOM_TEXT, LIGHT_DOM_TEXT, toggle };
+}