<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
  @keyframes anim {
    from { background-color: blue; }
    to { background-color: red; }
  }

  #target {
    animation: anim 20s -10s infinite linear paused;
    width: 100px;
    height: 100px;
    position: relative;
    background-color: green;
  }
</style>
<div id="target"></div>
<script>
  var test1 = async_test("Changing animation duration to current elapsed time should trigger an AnimationIteration event");
  target.addEventListener('animationend', function(event) {
    assert_equals(event.elapsedTime, 1, 'elapsed time');
    test1.done();
  });

  test(function() {
    target.offsetTop;
    target.style.animationIterationCount = 'infinite';
    target.style.animationDuration = '4s';
    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(128, 0, 128)', 'background color');

    target.style.animationDirection = 'alternate';
    target.style.animationDuration = '10s';
    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(255, 0, 0)', 'background color');

    target.style.animationIterationCount = '2';
    target.style.animationPlayState = 'running';
    assert_not_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)', 'background color');

    target.style.animationPlayState = 'paused';
    target.style.animationIterationCount = '1';
    target.style.animationDuration = '1s';
    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)', 'background color');

  }, "Check that changes in the animation timing properties are reflected immediately");
</script>