1 files changed, 135 insertions, 0 deletions
diff --git a/browser/components/extensions/test/browser/browser_ext_contentscript_animate.js b/browser/components/extensions/test/browser/browser_ext_contentscript_animate.js
new file mode 100644
index 0000000000..bbe90207a4
--- /dev/null
+++ b/browser/components/extensions/test/browser/browser_ext_contentscript_animate.js
@@ -0,0 +1,135 @@
+/* -*- Mode: indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set sts=2 sw=2 et tw=80: */
+"use strict";
+
+add_task(async function test_animate() {
+  let tab = await BrowserTestUtils.openNewForegroundTab(
+    gBrowser,
+    "http://mochi.test:8888/"
+  );
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      content_scripts: [
+        {
+          matches: ["http://mochi.test/*"],
+          js: ["content-script.js"],
+        },
+      ],
+    },
+
+    files: {
+      "content-script.js": function () {
+        let elem = document.getElementsByTagName("body")[0];
+        elem.style.border = "2px solid red";
+
+        let anim = elem.animate({ opacity: [1, 0] }, 2000);
+        let frames = anim.effect.getKeyframes();
+        browser.test.assertEq(
+          frames.length,
+          2,
+          "frames for Element.animate should be non-zero"
+        );
+        browser.test.assertEq(
+          frames[0].opacity,
+          "1",
+          "first frame opacity for Element.animate should be specified value"
+        );
+        browser.test.assertEq(
+          frames[0].computedOffset,
+          0,
+          "first frame offset for Element.animate should be 0"
+        );
+        browser.test.assertEq(
+          frames[1].opacity,
+          "0",
+          "last frame opacity for Element.animate should be specified value"
+        );
+        browser.test.assertEq(
+          frames[1].computedOffset,
+          1,
+          "last frame offset for Element.animate should be 1"
+        );
+
+        browser.test.notifyPass("contentScriptAnimate");
+      },
+    },
+  });
+
+  await extension.startup();
+  await extension.awaitFinish("contentScriptAnimate");
+  await extension.unload();
+
+  BrowserTestUtils.removeTab(tab);
+});
+
+add_task(async function test_KeyframeEffect() {
+  let tab = await BrowserTestUtils.openNewForegroundTab(
+    gBrowser,
+    "http://mochi.test:8888/"
+  );
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      content_scripts: [
+        {
+          matches: ["http://mochi.test/*"],
+          js: ["content-script.js"],
+        },
+      ],
+    },
+
+    files: {
+      "content-script.js": function () {
+        let elem = document.getElementsByTagName("body")[0];
+        elem.style.border = "2px solid red";
+
+        let effect = new KeyframeEffect(
+          elem,
+          [
+            { opacity: 1, offset: 0 },
+            { opacity: 0, offset: 1 },
+          ],
+          { duration: 1000, fill: "forwards" }
+        );
+        let frames = effect.getKeyframes();
+        browser.test.assertEq(
+          frames.length,
+          2,
+          "frames for KeyframeEffect ctor should be non-zero"
+        );
+        browser.test.assertEq(
+          frames[0].opacity,
+          "1",
+          "first frame opacity for KeyframeEffect ctor should be specified value"
+        );
+        browser.test.assertEq(
+          frames[0].computedOffset,
+          0,
+          "first frame offset for KeyframeEffect ctor should be 0"
+        );
+        browser.test.assertEq(
+          frames[1].opacity,
+          "0",
+          "last frame opacity for KeyframeEffect ctor should be specified value"
+        );
+        browser.test.assertEq(
+          frames[1].computedOffset,
+          1,
+          "last frame offset for KeyframeEffect ctor should be 1"
+        );
+
+        let animation = new Animation(effect, document.timeline);
+        animation.play();
+
+        browser.test.notifyPass("contentScriptKeyframeEffect");
+      },
+    },
+  });
+
+  await extension.startup();
+  await extension.awaitFinish("contentScriptKeyframeEffect");
+  await extension.unload();
+
+  BrowserTestUtils.removeTab(tab);
+});