<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=975261
-->
<head>
  <meta charset="utf-8">
  <title>Test OMTA animations start correctly (Bug 975261)</title>
  <script type="application/javascript"
    src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="application/javascript"
    src="/tests/SimpleTest/paint_listener.js"></script>
  <script type="application/javascript" src="animation_utils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  <style type="text/css">
    @keyframes anim-opacity {
       0% { opacity: 0.5 }
       100% { opacity: 0.5 }
    }
    @keyframes anim-opacity-2 {
       0% { opacity: 0.0 }
       100% { opacity: 1.0 }
    }
    @keyframes anim-transform {
       0% { transform: translate(50px); }
       100% { transform: translate(50px); }
    }
    @keyframes anim-transform-2 {
       0% { transform: translate(0px); }
       100% { transform: translate(100px); }
    }
    .target {
      /* These two lines are needed so that an opacity/transform layer
       * already exists when the animation is applied. */
      opacity: 0.99;
      transform: translate(99px);

      /* Element needs geometry in order to be animated on the
       * compositor. */
      width: 100px;
      height: 100px;
      background-color: white;
    }
  </style>
</head>
<body>
<a target="_blank"
  href="https://bugzilla.mozilla.org/show_bug.cgi?id=975261">Mozilla Bug
  975261</a>
<div id="display"></div>
<pre id="test">
<script type="application/javascript">
"use strict";

var gUtils = SpecialPowers.DOMWindowUtils;

SimpleTest.waitForExplicitFinish();
runOMTATest(testDelay, SimpleTest.finish);

function newTarget() {
  var target = document.createElement("div");
  target.classList.add("target");
  document.getElementById("display").appendChild(target);
  return target;
}

function testDelay() {
  gUtils.advanceTimeAndRefresh(0);

  var target = newTarget();
  target.setAttribute("style", "animation: 10s 10s anim-opacity linear");
  gUtils.advanceTimeAndRefresh(0);

  waitForAllPaints(function() {
    gUtils.advanceTimeAndRefresh(10100);
    waitForAllPaints(function() {
      var opacity = gUtils.getOMTAStyle(target, "opacity");
      is(opacity, "0.5",
         "opacity is set on compositor thread after delayed start");
      target.removeAttribute("style");
      gUtils.restoreNormalRefresh();
      testTransform();
    });
  });
}

function testTransform() {
  gUtils.advanceTimeAndRefresh(0);

  var target = newTarget();
  target.setAttribute("style", "animation: 10s 10s anim-transform linear");
  gUtils.advanceTimeAndRefresh(0);

  waitForAllPaints(function() {
    gUtils.advanceTimeAndRefresh(10100);
    waitForAllPaints(function() {
      var transform = gUtils.getOMTAStyle(target, "transform");
      ok(matricesRoughlyEqual(convertTo3dMatrix(transform),
                              convertTo3dMatrix("matrix(1, 0, 0, 1, 50, 0)")),
         "transform is set on compositor thread after delayed start");
      target.remove();
      gUtils.restoreNormalRefresh();
      testBackwardsFill();
    });
  });
}

function testBackwardsFill() {
  gUtils.advanceTimeAndRefresh(0);

  var target = newTarget();
  target.setAttribute("style",
    "transform: translate(30px); " +
    "animation: 10s 10s anim-transform-2 linear backwards");

  gUtils.advanceTimeAndRefresh(0);
  waitForAllPaints(function() {
    gUtils.advanceTimeAndRefresh(10000);
    waitForAllPaints(function() {
      gUtils.advanceTimeAndRefresh(100);
      waitForAllPaints(function() {
        var transform = gUtils.getOMTAStyle(target, "transform");
        ok(matricesRoughlyEqual(convertTo3dMatrix(transform),
                                convertTo3dMatrix("matrix(1, 0, 0, 1, 1, 0)")),
           "transform is set on compositor thread after delayed start " +
           "with backwards fill");
        target.remove();
        gUtils.restoreNormalRefresh();
        testTransitionTakingOver();
      });
    });
  });
}

function testTransitionTakingOver() {
  gUtils.advanceTimeAndRefresh(0);

  var parent = newTarget();
  var child = newTarget();
  parent.appendChild(child);
  parent.style.opacity = "0.0";
  parent.style.animation = "10s anim-opacity-2 linear";
  child.style.opacity = "inherit";
  child.style.transition = "10s opacity linear";

  var childCS = getComputedStyle(child, "");

  gUtils.advanceTimeAndRefresh(0);
  waitForAllPaints(function() {
    gUtils.advanceTimeAndRefresh(4000);
    waitForAllPaints(function() {
      child.style.opacity = "1.0";
      var opacity = gUtils.getOMTAStyle(child, "opacity");
      // FIXME Bug 1039799 (or lower priority followup): Animations
      // inherited from an animating parent element don't get shipped to
      // the compositor thread.
      todo_is(opacity, "0.4",
         "transition that interrupted animation is correct");

      // Trigger to start the transition, without this the transition will
      // be pending in advanceTimeAndRefresh(0) so the transition will not
      // be sent to the compositor until we call advanceTimeAndRefresh with
      // a positive time value.
      getComputedStyle(child).opacity;
      gUtils.advanceTimeAndRefresh(0);
      waitForAllPaints(function() {
        var opacity = gUtils.getOMTAStyle(child, "opacity");
        is(opacity, "0.4",
           "transition that interrupted animation is correct");
        gUtils.advanceTimeAndRefresh(5000);
        waitForAllPaints(function() {
          opacity = gUtils.getOMTAStyle(child, "opacity");
          is(opacity, "0.7",
             "transition that interrupted animation is correct");
          is(childCS.opacity, "0.7",
             "transition that interrupted animation is correct");
          parent.remove();
          gUtils.restoreNormalRefresh();
          SimpleTest.finish();
        });
      });
    });
  });
}

</script>
</pre>
</body>
</html>