animation-direction-reverse-fill-mode.html

<!DOCTYPE html>
<title>Test of animation-direction</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
    .running .box {
      animation-delay: 1s;
      animation-direction: reverse;
      animation-duration: 1s;
      animation-name: anim;
      animation-timing-function: linear;
      height: 100px;
      left: 100px;
      position: relative;
      width: 100px;
    }
    @keyframes anim {
        from { left: 200px; }
        to   { left: 300px; }
    }
    #none {
      animation-fill-mode: none;
      background-color: blue;
    }
    #backwards {
      animation-fill-mode: backwards;
      background-color: red;
    }
    #forwards {
      animation-fill-mode: forwards;
      background-color: green;
    }
    #both {
      animation-fill-mode: both;
      background-color: yellow;
    }
</style>
<div id="container">
  <div id="none" class="box">
    None
  </div>
  <div id="backwards" class="box">
    Backwards
  </div>
  <div id="forwards" class="box">
    Forwards
  </div>
  <div id="both" class="box">
    Both
  </div>
</div>
<script>
  'use strict';
  test(function() {
    container.offsetTop; // Force recalc
    container.classList += 'running';

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

    backwards.style.animationDelay = '1s';
    assert_equals(getComputedStyle(backwards).left, '300px');

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

    both.style.animationDelay = '1s';
    assert_equals(getComputedStyle(both).left, '300px');


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

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

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

    both.style.animationDelay = '-5s';
    assert_equals(getComputedStyle(both).left, '200px');
  }, "animation directions work with fill modes");
</script>
chromium/third_party/blink/web_tests/animations/direction-and-fill/animation-direction-reverse-fill-mode.html
