animation-delay-updates-animation.html

<!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 paused linear;
    width: 100px;
    height: 100px;
    position: relative;
    background-color: green;
  }
</style>
<div id="target"></div>
<script>
  test(function() {
    target.offsetTop;
    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)', 'background color');
    target.style.animationDelay = '0s'; // Animation should start
    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 0, 255)', 'background color');

    target.style.animationDelay = '-10s'; // Animation should be halfway between blue and red
    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(128, 0, 128)', 'background color');

  }, "Check that changes to animation delay only applies before the animation has started");
</script>

chromium/third_party/blink/web_tests/animations/animation-delay-updates-animation.html