1 files changed, 107 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_layer.js b/devtools/client/inspector/rules/test/browser_rules_layer.js
new file mode 100644
index 0000000000..9db3577f20
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_layer.js
@@ -0,0 +1,107 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view content is correct when the page defines layers.
+
+const TEST_URI = `
+  <style type="text/css">
+    @import url(${URL_ROOT_COM_SSL}doc_imported_anonymous_layer.css) layer;
+    @import url(${URL_ROOT_COM_SSL}doc_imported_named_layer.css) layer(importedLayer);
+    @import url(${URL_ROOT_COM_SSL}doc_imported_no_layer.css);
+
+    @layer myLayer {
+      h1, [test-hint=named-layer] {
+        background-color: tomato;
+        color: lightgreen;
+      }
+    }
+
+    @layer {
+      h1, [test-hint=anonymous-layer] {
+        color: green;
+        font-variant: small-caps
+      }
+    }
+
+    h1, [test-hint=no-rule-layer] {
+      color: pink;
+    }
+  </style>
+  <h1>Hello @layer!</h1>
+`;
+
+add_task(async function () {
+  await addTab(
+    "https://example.com/document-builder.sjs?html=" +
+      encodeURIComponent(TEST_URI)
+  );
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("h1", inspector);
+
+  const expectedRules = [
+    { selector: "element", ancestorRulesData: null },
+    { selector: `h1, [test-hint="no-rule-layer"]`, ancestorRulesData: null },
+    {
+      selector: `h1, [test-hint="imported-no-layer--no-rule-layer"]`,
+      ancestorRulesData: null,
+    },
+    {
+      selector: `h1, [test-hint="anonymous-layer"]`,
+      ancestorRulesData: ["@layer"],
+    },
+    {
+      selector: `h1, [test-hint="named-layer"]`,
+      ancestorRulesData: ["@layer myLayer"],
+    },
+    {
+      selector: `h1, [test-hint="imported-named-layer--no-rule-layer"]`,
+      ancestorRulesData: ["@layer importedLayer", "@media screen"],
+    },
+    {
+      selector: `h1, [test-hint="imported-named-layer--named-layer"]`,
+      ancestorRulesData: [
+        "@layer importedLayer",
+        "@media screen",
+        "@layer in-imported-stylesheet",
+      ],
+    },
+    {
+      selector: `h1, [test-hint="imported-anonymous-layer--no-rule-layer"]`,
+      ancestorRulesData: ["@layer"],
+    },
+  ];
+
+  const rulesInView = Array.from(view.element.children);
+  is(
+    rulesInView.length,
+    expectedRules.length,
+    "All expected rules are displayed"
+  );
+
+  for (let i = 0; i < expectedRules.length; i++) {
+    const expectedRule = expectedRules[i];
+    info(`Checking rule #${i}: ${expectedRule.selector}`);
+
+    const selector = rulesInView[i].querySelector(
+      ".ruleview-selectorcontainer"
+    ).innerText;
+    is(selector, expectedRule.selector, `Expected selector for ${selector}`);
+
+    if (expectedRule.ancestorRulesData == null) {
+      is(
+        getRuleViewAncestorRulesDataElementByIndex(view, i),
+        null,
+        `No ancestor rules data displayed for ${selector}`
+      );
+    } else {
+      is(
+        getRuleViewAncestorRulesDataTextByIndex(view, i),
+        expectedRule.ancestorRulesData.join("\n"),
+        `Expected ancestor rules data displayed for ${selector}`
+      );
+    }
+  }
+});