1 files changed, 76 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_host.js b/devtools/client/inspector/rules/test/browser_rules_variables_host.js
new file mode 100644
index 0000000000..a8fe04d7b6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_host.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test matched selectors and variables defined for a :host selector.
+
+const SHADOW_DOM = `<style>
+  :host {
+    --test-color: red;
+  }
+
+  span {
+    color: var(--test-color);
+  }
+</style>
+<span class="test-span">test</span>`;
+
+const TEST_PAGE = `
+  <div id="host"></div>
+  <script>
+    const div = document.querySelector("div");
+    div.attachShadow({ mode: "open" }).innerHTML = \`${SHADOW_DOM}\`;
+  </script>`;
+
+const TEST_URI = `https://example.com/document-builder.sjs?html=${encodeURIComponent(
+  TEST_PAGE
+)}`;
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  info("Select the host and check that :host is matching");
+  await selectNode("#host", inspector);
+  let selector = getRuleViewRuleEditor(view, 1).selectorText;
+  is(
+    selector.querySelector(".matched").textContent,
+    ":host",
+    ":host should be matched."
+  );
+
+  info("Select a shadow dom element and check that :host is matching");
+  const nodeFront = await getNodeFrontInShadowDom(
+    ".test-span",
+    "#host",
+    inspector
+  );
+  await selectNode(nodeFront, inspector);
+
+  selector = getRuleViewRuleEditor(view, 3).selectorText;
+  is(
+    selector.querySelector(".matched").textContent,
+    ":host",
+    ":host should be matched."
+  );
+
+  info("Check that the variable from :host is correctly applied");
+  const setColor = getRuleViewProperty(
+    view,
+    "span",
+    "color"
+  ).valueSpan.querySelector(".ruleview-variable");
+  is(setColor.textContent, "--test-color", "--test-color is set correctly");
+  is(
+    setColor.dataset.variable,
+    "--test-color = red",
+    "--test-color's dataset.variable is set correctly"
+  );
+  const previewTooltip = await assertShowPreviewTooltip(view, setColor);
+  ok(
+    previewTooltip.panel.textContent.includes("--test-color = red"),
+    "CSS variable preview tooltip shows the expected CSS variable"
+  );
+  await assertTooltipHiddenOnMouseOut(previewTooltip, setColor);
+});