<!doctype html>
<meta charset=utf-8>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../resources/testcommon.js"></script>
<style>

.animated-div {
  margin-left: 100px;
  transition: margin-left 1000s linear 1000s;
}

</style>
<body>
<div id="log"></div>
<script>

'use strict';

const ANIM_DELAY_MS = 1000000; // 1000s
const ANIM_DUR_MS = 1000000; // 1000s

async_test(function(t) {
  var div = addDiv(t, {'class': 'animated-div'});
  flushComputedStyle(div);
  div.style.marginLeft = '200px'; // initiate transition

  var animation = div.getAnimations()[0];

  animation.finish();

  animation.finished.then(t.step_func(function() {
    animation.play();
    assert_equals(animation.currentTime, 0,
                  'Replaying a finished transition should reset its ' +
                  'currentTime');
    t.done();
  }));
}, 'Test restarting a finished transition');

async_test(function(t) {
  var div = addDiv(t, {'class': 'animated-div'});
  flushComputedStyle(div);
  div.style.marginLeft = '200px'; // initiate transition

  var animation = div.getAnimations()[0];

  animation.ready.then(function() {
    animation.playbackRate = -1;
    return animation.finished;
  }).then(t.step_func(function() {
    animation.play();
    // FIXME: once animation.effect.computedTiming.endTime is available (bug
    // 1108055) we should use that here.
    assert_equals(animation.currentTime, ANIM_DELAY_MS + ANIM_DUR_MS,
                  'Replaying a finished reversed transition should reset ' +
                  'its currentTime to the end of the effect');
    t.done();
  }));
}, 'Test restarting a reversed finished transition');

</script>
</body>