1 files changed, 71 insertions, 0 deletions
diff --git a/devtools/client/animationinspector/test/doc_script_animation.html b/devtools/client/animationinspector/test/doc_script_animation.html
new file mode 100644
index 000000000..b7839622e
--- /dev/null
+++ b/devtools/client/animationinspector/test/doc_script_animation.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <style>
+  #target1 {
+    width: 50px;
+    height: 50px;
+    background: red;
+  }
+
+  #target2 {
+    width: 50px;
+    height: 50px;
+    background: green;
+  }
+
+  #target3 {
+    width: 50px;
+    height: 50px;
+    background: blue;
+  }
+  </style>
+</head>
+<body>
+  <div id="target1"></div>
+  <div id="target2"></div>
+  <div id="target3"></div>
+
+  <script>
+    /* globals KeyframeEffect, Animation */
+    "use strict";
+
+    let animations = [{
+      id: "target1",
+      frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
+      timing: {
+        duration: 100,
+        iterations: 2,
+        iterationStart: 0.25,
+        fill: "both"
+      }
+    }, {
+      id: "target2",
+      frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
+      timing: {
+        duration: 100,
+        iterations: 1,
+        iterationStart: 0.25,
+        fill: "both"
+      }
+    }, {
+      id: "target3",
+      frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
+      timing: {
+        duration: 100,
+        iterations: 1.5,
+        iterationStart: 2.5,
+        fill: "both"
+      }
+    }];
+
+    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>