1 files changed, 38 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/doc_negative_playback_rate.html b/devtools/client/inspector/animation/test/doc_negative_playback_rate.html
new file mode 100644
index 0000000000..a98700712d
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_negative_playback_rate.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    div {
+      background-color: lime;
+      height: 100px;
+    }
+    </style>
+  </head>
+  <body>
+    <script>
+    "use strict";
+
+    const DURATION = 100000;
+    const KEYFRAMES = { backgroundColor: ["lime", "red"] };
+
+    function createAnimation(effect, className, playbackRate = -1) {
+      const div = document.createElement("div");
+      div.classList.add(className);
+      document.body.appendChild(div);
+      effect.duration = DURATION;
+      effect.fill = "forwards";
+      const animation = div.animate(KEYFRAMES, effect);
+      animation.updatePlaybackRate(playbackRate);
+      animation.play();
+    }
+
+    createAnimation({}, "normal");
+    createAnimation({}, "normal-playbackrate-2", -2);
+    createAnimation({ delay: 50000 }, "positive-delay");
+    createAnimation({ delay: -50000 }, "negative-delay");
+    createAnimation({ endDelay: 50000 }, "positive-end-delay");
+    createAnimation({ endDelay: -50000 }, "negative-end-delay");
+    </script>
+  </body>
+</html>