animation-direction-normal.html | Explore in Territory

<!DOCTYPE html>
<title>Test of animation-direction</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
    #target {
      animation-direction: normal;
      animation-duration: 2s;
      animation-iteration-count: 2;
      animation-name: move1;
      animation-play-state: paused;
      animation-timing-function: linear;
      background-color: red;
      height: 100px;
      left: 0px;
      margin: 0;
      position: absolute;
      top: 100px;
      width: 100px;
    }
    @keyframes move1 {
      from { left: 0px; }
      to   { left: 200px; }
    }

</style>
<div id="target"></div>
<script>
  test(function() {
    target.style.animationDelay = '-0.5s';
    assert_equals(getComputedStyle(target).left, '50px');

    target.style.animationDelay = '-1s';
    assert_equals(getComputedStyle(target).left, '100px');

    target.style.animationDelay = '-2.5s';
    assert_equals(getComputedStyle(target).left, '50px');
  }, "animation-direction normal plays forwards");
</script>

chromium/third_party/blink/web_tests/animations/direction-and-fill/animation-direction-normal.html