timing-functions-update-animation.html

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
  @keyframes anim {
    from { left: 0px; }
    50% { left: 400px; animation-timing-function: ease-in; }
    to { left: 500px; }
  }

  #target {
    animation: anim 10s paused;
    position: absolute;
  }
</style>
<div id="target"></div>
<script>
  test(function() {
    target.offsetTop;
    assert_equals(parseInt(getComputedStyle(target).left), 0, 'left offset');
    target.style.animationTimingFunction = 'ease-out'; // Should not change anything as we're on the first frame
    assert_equals(parseInt(getComputedStyle(target).left), 0, 'left offset');

    target.style.animationDelay = '-1s';
    assert_equals(parseInt(getComputedStyle(target).left), 123, 'left offset');
    target.style.animationTimingFunction = 'linear';
    assert_equals(parseInt(getComputedStyle(target).left), 80, 'left offset');
    target.style.animationTimingFunction = 'cubic-bezier(0, 0.5, 0.2, 1)';
    assert_equals(parseInt(getComputedStyle(target).left), 275, 'left offset');
    target.style.animationTimingFunction = 'ease-out';
    assert_equals(parseInt(getComputedStyle(target).left), 123, 'left offset');

    target.style.animationDelay = '-4s';
    assert_equals(parseInt(getComputedStyle(target).left), 375, 'left offset');
    target.style.animationTimingFunction = 'linear';
    assert_equals(parseInt(getComputedStyle(target).left), 320, 'left offset');
    target.style.animationTimingFunction = 'cubic-bezier(0, 0.5, 0.2, 1)';
    assert_equals(parseInt(getComputedStyle(target).left), 395, 'left offset');
    target.style.animationTimingFunction = 'ease-out';
    assert_equals(parseInt(getComputedStyle(target).left), 375, 'left offset');

    target.style.animationDelay = '-6s'; // Transitioning between 50% and 100%, but timing functions on 100% are ignored
    assert_equals(parseInt(getComputedStyle(target).left), 406, 'left offset');
    target.style.animationTimingFunction = 'linear';
    assert_equals(parseInt(getComputedStyle(target).left), 406, 'left offset');
    target.style.animationTimingFunction = 'cubic-bezier(0, 0.5, 0.2, 1)';
    assert_equals(parseInt(getComputedStyle(target).left), 406, 'left offset');

  }, "Check that changes in the animation timing function are reflected immediately");
</script>
chromium/third_party/blink/web_tests/animations/timing/timing-functions-update-animation.html
