/* -*- 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);
});