1 files changed, 76 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_keyframes-rule-shadowdom.js b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule-shadowdom.js
new file mode 100644
index 0000000000..1200fa3ab0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule-shadowdom.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that keyframes are displayed for elements nested under a shadow-root.
+
+const TEST_URI = `data:text/html;charset=utf-8,
+  <div></div>
+  <script>
+    document.querySelector('div').attachShadow({mode: 'open'}).innerHTML = \`
+      <span>text</span>
+      <style>
+        @keyframes blink {
+          0% {
+            border: rgba(255,0,0,1) 2px dashed;
+          }
+          100% {
+            border: rgba(255,0,0,0) 2px dashed;
+          }
+        }
+        span {
+          animation: blink .5s 0s infinite;
+        }
+      </style>\`;
+  </script>`;
+
+add_task(async function () {
+  await addTab(TEST_URI);
+
+  const { inspector, view } = await openRuleView();
+
+  info("Expand the shadow-root parent");
+  const divFront = await getNodeFront("div", inspector);
+  await inspector.markup.expandNode(divFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  const { markup } = inspector;
+  const divContainer = markup.getContainer(divFront);
+
+  info("Expand the shadow-root");
+  const shadowRootContainer = divContainer.getChildContainers()[0];
+  await expandContainer(inspector, shadowRootContainer);
+
+  info("Retrieve the rules displayed for the span under the shadow root");
+  const spanContainer = shadowRootContainer.getChildContainers()[0];
+  const rules = await getKeyframeRules(spanContainer.node, inspector, view);
+
+  is(
+    convertTextPropsToString(rules.keyframeRules[0].textProps),
+    "border: rgba(255,0,0,1) 2px dashed",
+    "Keyframe blink (0%) property is correct"
+  );
+
+  is(
+    convertTextPropsToString(rules.keyframeRules[1].textProps),
+    "border: rgba(255,0,0,0) 2px dashed",
+    "Keyframe blink (100%) property is correct"
+  );
+});
+
+function convertTextPropsToString(textProps) {
+  return textProps.map(t => t.name + ": " + t.value).join("; ");
+}
+
+async function getKeyframeRules(selector, inspector, view) {
+  await selectNode(selector, inspector);
+  const elementStyle = view._elementStyle;
+
+  const rules = {
+    elementRules: elementStyle.rules.filter(rule => !rule.keyframes),
+    keyframeRules: elementStyle.rules.filter(rule => rule.keyframes),
+  };
+
+  return rules;
+}