1 files changed, 40 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_special-colors.js b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_special-colors.js
new file mode 100644
index 0000000000..6f46b44332
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_special-colors.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_DATA = [
+  {
+    propertyName: "caret-color",
+    expectedMarkers: ["auto", "rgb(0, 255, 0)"],
+  },
+  {
+    propertyName: "scrollbar-color",
+    expectedMarkers: ["rgb(0, 255, 0) rgb(255, 0, 0)", "auto"],
+  },
+];
+
+// Test for animatable property which can specify the non standard CSS color value.
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_special_colors.html");
+  const { panel } = await openAnimationInspector();
+
+  for (const { propertyName, expectedMarkers } of TEST_DATA) {
+    const animatedPropertyEl = panel.querySelector(`.${propertyName}`);
+    ok(animatedPropertyEl, `Animated property ${propertyName} exists`);
+
+    const markerEls = animatedPropertyEl.querySelectorAll(
+      ".keyframe-marker-item"
+    );
+    is(
+      markerEls.length,
+      expectedMarkers.length,
+      `The length of keyframe markers should ${expectedMarkers.length}`
+    );
+    for (let i = 0; i < expectedMarkers.length; i++) {
+      const actualTitle = markerEls[i].title;
+      const expectedTitle = expectedMarkers[i];
+      is(actualTitle, expectedTitle, `Value of keyframes[${i}] is correct`);
+    }
+  }
+});