1 files changed, 169 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/doc_multi_timings.html b/devtools/client/inspector/animation/test/doc_multi_timings.html
new file mode 100644
index 0000000000..a999431917
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_multi_timings.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    div {
+      background-color: lime;
+      height: 100px;
+      width: 100px;
+    }
+
+    .cssanimation-normal {
+      animation: cssanimation 1000s;
+    }
+
+    .cssanimation-linear {
+      animation: cssanimation 1000s linear;
+    }
+
+    @keyframes cssanimation {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+    </style>
+  </head>
+  <body>
+    <div class="cssanimation-normal"></div>
+    <div class="cssanimation-linear"></div>
+    <script>
+    "use strict";
+
+    const duration = 1000000;
+
+    function createAnimation(keyframes, effect, className) {
+      const div = document.createElement("div");
+      div.classList.add(className);
+      document.body.appendChild(div);
+      effect.duration = duration;
+      div.animate(keyframes, effect);
+    }
+
+    createAnimation({ opacity: [0, 1] },
+                    { delay: 500000, id: "test-delay-animation" },
+                    "delay-positive");
+
+    createAnimation({ opacity: [0, 1] },
+                    { delay: -500000, id: "test-negative-delay-animation" },
+                    "delay-negative");
+
+    createAnimation({ opacity: [0, 1] },
+                    { easing: "steps(2)" },
+                    "easing-step");
+
+    createAnimation({ opacity: [0, 1] },
+                    { endDelay: 500000 },
+                    "enddelay-positive");
+
+    createAnimation({ opacity: [0, 1] },
+                    { endDelay: -500000 },
+                    "enddelay-negative");
+
+    createAnimation({ opacity: [0, 1] },
+                    { endDelay: 500000, fill: "forwards" },
+                    "enddelay-with-fill-forwards");
+
+    createAnimation({ opacity: [0, 1] },
+                    { endDelay: 500000, iterations: Infinity },
+                    "enddelay-with-iterations-infinity");
+
+    createAnimation({ opacity: [0, 1] },
+                    { direction: "alternate", iterations: Infinity },
+                    "direction-alternate-with-iterations-infinity");
+
+    createAnimation({ opacity: [0, 1] },
+                    { direction: "alternate-reverse", iterations: Infinity },
+                    "direction-alternate-reverse-with-iterations-infinity");
+
+    createAnimation({ opacity: [0, 1] },
+                    { direction: "reverse", iterations: Infinity },
+                    "direction-reverse-with-iterations-infinity");
+
+    createAnimation({ opacity: [0, 1] },
+                    { fill: "backwards" },
+                    "fill-backwards");
+
+    createAnimation({ opacity: [0, 1] },
+                    { fill: "backwards", delay: 500000, iterationStart: 0.5 },
+                     "fill-backwards-with-delay-iterationstart");
+
+    createAnimation({ opacity: [0, 1] },
+                    { fill: "both" },
+                    "fill-both");
+
+    createAnimation({ opacity: [0, 1] },
+                    { fill: "both", delay: 500000, iterationStart: 0.5 },
+                    "fill-both-width-delay-iterationstart");
+
+    createAnimation({ opacity: [0, 1] },
+                    { fill: "forwards" },
+                    "fill-forwards");
+
+    createAnimation({ opacity: [0, 1] },
+                    { iterationStart: 0.5 },
+                    "iterationstart");
+
+    createAnimation({ width: ["100px", "150px"] },
+                    {},
+                    "no-compositor");
+
+    createAnimation([{ opacity: 0, easing: "steps(2)" }, { opacity: 1 }],
+                    {},
+                    "keyframes-easing-step");
+
+    createAnimation(
+      [
+        {
+          opacity: 0,
+          offset: 0,
+        },
+        {
+          opacity: 1,
+          offset: 0.1,
+          easing: "steps(1)",
+        },
+        {
+          opacity: 0,
+          offset: 0.13,
+        },
+      ],
+      {},
+      "narrow-keyframes");
+
+    createAnimation(
+      [
+        {
+          offset: 0,
+          opacity: 1,
+        },
+        {
+          offset: 0.5,
+          opacity: 1,
+        },
+        {
+          offset: 0.5,
+          easing: "steps(1)",
+          opacity: 0,
+        },
+        {
+          offset: 1,
+          opacity: 1,
+        },
+      ],
+      {},
+      "duplicate-offsets");
+
+    createAnimation({ opacity: [0, 1] },
+                    { delay: -250000 },
+                    "delay-negative-25");
+
+    createAnimation({ opacity: [0, 1] },
+                    { delay: -750000 },
+                    "delay-negative-75");
+    </script>
+  </body>
+</html>