1 files changed, 121 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/doc_multi_easings.html b/devtools/client/inspector/animation/test/doc_multi_easings.html
new file mode 100644
index 0000000000..cedcb027fe
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_multi_easings.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    div {
+      background-color: lime;
+      height: 50px;
+    }
+    </style>
+  </head>
+  <body>
+    <script>
+    "use strict";
+
+    function createAnimation(name, keyframes, effectEasing) {
+      const div = document.createElement("div");
+      div.classList.add(name);
+      document.body.appendChild(div);
+
+      const effect = {
+        duration: 100000,
+        fill: "forwards",
+      };
+
+      if (effectEasing) {
+        effect.easing = effectEasing;
+      }
+
+      div.animate(keyframes, effect);
+    }
+
+    createAnimation(
+      "no-easing",
+      [
+        { opacity: 1 },
+        { opacity: 0 },
+      ]
+    );
+
+    createAnimation(
+      "effect-easing",
+      [
+        { opacity: 1 },
+        { opacity: 0 },
+      ],
+      "steps(5, jump-none)"
+    );
+
+    createAnimation(
+      "keyframe-easing",
+      [
+        { opacity: 1, easing: "steps(2)" },
+        { opacity: 0 },
+      ]
+    );
+
+    createAnimation(
+      "both-easing",
+      [
+        { offset: 0, opacity: 1, easing: "steps(2)" },
+        { offset: 0, marginLeft: "0px", easing: "steps(1)" },
+        { marginLeft: "100px", opacity: 0 },
+      ],
+      "steps(10)"
+    );
+
+    createAnimation(
+      "narrow-keyframes",
+      [
+        { opacity: 0 },
+        { offset: 0.1, opacity: 1, easing: "steps(1)" },
+        { offset: 0.13, opacity: 0 },
+      ]
+    );
+
+    createAnimation(
+      "duplicate-keyframes",
+      [
+        { opacity: 0 },
+        { offset: 0.5, opacity: 1 },
+        { offset: 0.5, opacity: 0, easing: "steps(1)" },
+        { opacity: 1 },
+      ]
+    );
+
+    createAnimation(
+      "color-keyframes",
+      [
+        { color: "red", easing: "ease-in" },
+        { offset: 0.4, color: "blue", easing: "ease-out" },
+        { color: "lime" },
+      ]
+    );
+
+    createAnimation(
+      "jump-start",
+      [
+        { opacity: 1, easing: "steps(2, jump-start)" },
+        { opacity: 0 },
+      ],
+    );
+
+    createAnimation(
+      "jump-end",
+      [
+        { opacity: 1, easing: "steps(2, jump-end)" },
+        { opacity: 0 },
+      ],
+    );
+
+    createAnimation(
+      "jump-both",
+      [
+        { opacity: 1, easing: "steps(3, jump-both)" },
+        { opacity: 0 },
+      ],
+    );
+    </script>
+  </body>
+</html>