1 files changed, 69 insertions, 0 deletions
diff --git a/devtools/client/animationinspector/test/doc_end_delay.html b/devtools/client/animationinspector/test/doc_end_delay.html
new file mode 100644
index 000000000..02018bc8a
--- /dev/null
+++ b/devtools/client/animationinspector/test/doc_end_delay.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <style>
+  .target {
+    width: 50px;
+    height: 50px;
+    background: blue;
+  }
+  </style>
+</head>
+<body>
+  <div id="target1" class="target"></div>
+  <div id="target2" class="target"></div>
+  <div id="target3" class="target"></div>
+  <div id="target4" class="target"></div>
+  <script>
+    /* globals KeyframeEffect, Animation */
+    "use strict";
+
+    let animations = [{
+      id: "target1",
+      frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
+      timing: {
+        id: "endDelay_animation1",
+        duration: 1000000,
+        endDelay: 500000,
+        fill: "none"
+      }
+    }, {
+      id: "target2",
+      frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
+      timing: {
+        id: "endDelay_animation2",
+        duration: 1000000,
+        endDelay: -500000,
+        fill: "none"
+      }
+    }, {
+      id: "target3",
+      frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
+      timing: {
+        id: "endDelay_animation3",
+        duration: 1000000,
+        endDelay: -1500000,
+        fill: "forwards"
+      }
+    }, {
+      id: "target4",
+      frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
+      timing: {
+        id: "endDelay_animation4",
+        duration: 100000,
+        delay: 100000,
+        endDelay: -1500000,
+        fill: "forwards"
+      }
+    }];
+
+    for (let {id, frames, timing} of animations) {
+      let effect = new KeyframeEffect(document.getElementById(id),
+                                      frames, timing);
+      let animation = new Animation(effect, document.timeline);
+      animation.play();
+    }
+  </script>
+</body>
+</html>