1 files changed, 89 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_keyframes-rule-nested.js b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule-nested.js
new file mode 100644
index 0000000000..97b4b21a65
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule-nested.js
@@ -0,0 +1,89 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that nested @keyframes rules are displayed correctly in the rule view
+
+const TEST_URI = `data:text/html,${encodeURIComponent(`
+  <style>
+    body {
+      animation-name: in-layer,
+                      in-starting-style,
+                      in-media,
+                      in-container;
+      animation-duration: 1s, 2s, 3s, 4s;
+      border: 4px solid;
+      outline: 4px solid;
+    }
+
+    @layer {
+      @keyframes in-layer {
+        from { color: red; }
+        to   { color: blue; }
+      }
+    }
+
+    @starting-style {
+      /* keyframes is considered as being outside of @starting-style */
+      @keyframes in-starting-style {
+        from { border-color: tomato; }
+        to   { border-color: gold; }
+      }
+    }
+
+    @media screen {
+      @keyframes in-media {
+        from { outline-color: purple; }
+        to   { outline-color: pink; }
+      }
+    }
+
+    @container (width > 0px) {
+      /* keyframes is considered as being outside of @container */
+      @keyframes in-container {
+        from { background-color: green; }
+        to   { background-color: lime; }
+      }
+    }
+  </style>
+  <h1>Nested <code>@keyframes</code></h1>
+`)}`;
+
+add_task(async function () {
+  await pushPref("layout.css.starting-style-at-rules.enabled", true);
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("body", inspector);
+  const headers = Array.from(view.element.querySelectorAll(".ruleview-header"));
+  Assert.deepEqual(
+    headers.map(el => el.textContent),
+    [
+      "Keyframes in-layer",
+      "Keyframes in-starting-style",
+      "Keyframes in-media",
+      "Keyframes in-container",
+    ],
+    "Got expected keyframes sections"
+  );
+
+  info("Check that keyframes' keyframe ancestor rules are not displayed");
+  for (const headerEl of headers) {
+    const keyframeContainerId = headerEl
+      .querySelector("button")
+      .getAttribute("aria-controls");
+    const keyframeContainer = view.element.querySelector(
+      `#${keyframeContainerId}`
+    );
+    ok(
+      !!keyframeContainer,
+      `Got keyframe container for "${headerEl.textContent}"`
+    );
+    is(
+      keyframeContainer.querySelector(".ruleview-rule-ancestor"),
+      null,
+      `ancestor data are not displayed for "${headerEl.textContent}" keyframe rules`
+    );
+  }
+});