1 files changed, 88 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_inherited-custom-properties.js b/devtools/client/inspector/rules/test/browser_rules_inherited-custom-properties.js
new file mode 100644
index 0000000000..498b3185c9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inherited-custom-properties.js
@@ -0,0 +1,88 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that custom properties are only displayed when they are unregistered,
+// or when their property definition indicate that they should inherit.
+
+const TEST_URI = `
+  <style>
+    @property --inherit {
+      syntax: "<color>";
+      inherits: true;
+      initial-value: gold;
+    }
+
+    @property --no-inherit {
+      syntax: "<color>";
+      inherits: false;
+      initial-value: tomato;
+    }
+
+    main, [test="no-inherit"] {
+      --no-inherit: blue;
+    }
+
+    main, [test="inherit"] {
+      --inherit: red;
+    }
+
+    main, [test="unregistered"] {
+      --myvar: brown;
+    }
+
+    h1 {
+      background-color: var(--no-inherit);
+      color: var(--inherit);
+      outline-color: var(--myvar);
+    }
+  </style>
+  <main>
+    <h1>Hello world</h1>
+  </main>
+`;
+
+add_task(async function () {
+  await pushPref("layout.css.properties-and-values.enabled", true);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("h1", inspector);
+
+  const inheritedHeaders = view.element.querySelectorAll(
+    ".ruleview-header-inherited"
+  );
+  is(inheritedHeaders.length, 1, "There's one inherited section header");
+  is(
+    inheritedHeaders[0].textContent,
+    "Inherited from main",
+    "The header is the expected inherited one"
+  );
+
+  const inheritedRules = view.element.querySelectorAll(
+    ".ruleview-header ~ .ruleview-rule"
+  );
+  is(inheritedRules.length, 2, "There are 2 inherited rules displayed");
+
+  info("Check that registered inherits property is visible");
+  is(
+    getRuleViewPropertyValue(view, `main, [test="inherit"]`, "--inherit"),
+    "red",
+    "--inherit definition on main is visible"
+  );
+
+  info("Check that unregistered property is visible");
+  is(
+    getRuleViewPropertyValue(view, `main, [test="unregistered"]`, "--myvar"),
+    "brown",
+    "--myvar definition on main is displayed"
+  );
+
+  info("Check that registered non-inherits property is not visible");
+  // The no-inherit rule only has 1 definition that should be hidden, which means
+  // that the whole rule should be hidden
+  ok(
+    !getRuleViewRule(view, `main, [test="no-inherit"]`),
+    "The rule with the not inherited registered property is not displayed"
+  );
+});