timing-properties-update-running-animation.html

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
  @keyframes anim {
    from { left: 0px; }
    to { left: 300px; }
  }

  #target {
    animation: anim 10s -5s paused linear;
    width: 100px;
    height: 100px;
    left: -1px;
    position: relative;
    background-color: green;
  }
</style>
<div id="target"></div>
<script>
  test(function() {
    target.style.animationPlayState = 'running';
    target.offsetTop; // Force style recalc
    target.style.animationPlayState = 'paused';

    target.style.animationDuration = '3s'; // Animation ends
    assert_equals(parseInt(getComputedStyle(target).left), -1, 'left offset');

    target.style.animationIterationCount = 2; // Box should be 2/3 of the way across
    assert_equals(parseInt(getComputedStyle(target).left), 200, 'left offset');

    target.style.animationDirection = 'reverse'; // Box should be 1/3 of the way across
    assert_equals(parseInt(getComputedStyle(target).left), 100, 'left offset');

    target.style.animationDelay = '-4s'; // Box should be 2/3 of the way across
    assert_equals(parseInt(getComputedStyle(target).left), 200, 'left offset');

    target.style.animationIterationCount = 1; // Animation ends
    target.style.animationFillMode = 'forwards';
    assert_equals(parseInt(getComputedStyle(target).left), 0, 'left offset');

  }, "Changes to animation properties should be reflected immediately");
</script>
chromium/third_party/blink/web_tests/animations/timing/timing-properties-update-running-animation.html
