animation-direction-alternate-reverse.html

<!DOCTYPE html>
<title>Test of animation-direction</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
    #target {
      animation-direction: alternate-reverse;
      animation-duration: 2s;
      animation-iteration-count: 2;
      animation-name: move;
      animation-play-state: paused;
      animation-timing-function: linear;
      animation-fill-mode: both;


      background-color: red;
      height: 100px;
      left: 500px;
      position: absolute;
      width: 100px;
    }
    @keyframes move {
      from { left: 0px; }
      to   { left: 400px; }
    }

</style>
<div id="target"></div>
<script>
  'use strict';
  test(function() {
    target.style.animationDelay = '1s';
    assert_equals(getComputedStyle(target).left, '400px');

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

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

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

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

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

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

    target.style.animationDelay = '-5s';
    assert_equals(getComputedStyle(target).left, '400px');
  }, "animation-direction alternate-reverse plays backwards, then forwards");
</script>
chromium/third_party/blink/web_tests/animations/direction-and-fill/animation-direction-alternate-reverse.html
