animation-direction-reverse-non-hardware.html

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
    .box {
      animation-duration: 2s;
      animation-iteration-count: 8;
      animation-timing-function: linear;
      animation-play-state: paused;
      height: 50px;
      left: 20px;
      margin-bottom: 10px;
      position: relative;
      top: 10px;
      width: 250px;
    }
    
    .move1 {
      animation-name: move1;
      background-color: blue;
      color: white;
    }

    .move2 {
      animation-name: move2;
      background-color: orange;
    }

    .normal {
      animation-direction: normal;
    }

    .alternate {
      animation-direction: alternate;
    }

    .reverse {
      animation-direction: reverse;
    }

    .alternate-reverse {
      animation-direction: alternate-reverse;
    }
    
    @keyframes move1 {
      from { left: 0px; }
      to { left: 200px; }
    }

    @keyframes move2 {
      0% { left: 0px; }
      40% { left: 160px; }
      60% { left: 120px; }
      100% { left: 200px; }
    }
</style>
<div id="box1" class="box move1 normal">2 keyframes: normal</div>
<div id="box2" class="box move1 alternate">2 keyframes: alternate</div>
<div id="box3" class="box move1 reverse">2 keyframes: reverse</div>
<div id="box4" class="box move1 alternate-reverse">2 keyframes: alternate-reverse</div>
<div id="box5" class="box move2 normal">4 keyframes: normal</div>
<div id="box6" class="box move2 alternate">4 keyframes: alternate</div>
<div id="box7" class="box move2 reverse">4 keyframes: reverse</div>
<div id="box8" class="box move2 alternate-reverse">4 keyframes: alternate-reverse</div>
<script>
  'use strict';
  test(function() {
    box1.style.animationDelay = '-0.2s';
    assert_equals(getComputedStyle(box1).left, '20px');

    box2.style.animationDelay = '-0.2s';
    assert_equals(getComputedStyle(box2).left, '20px');

    box3.style.animationDelay = '-0.2s';
    assert_equals(getComputedStyle(box3).left, '180px');

    box4.style.animationDelay = '-0.2s';
    assert_equals(getComputedStyle(box4).left, '180px');


    box1.style.animationDelay = '-2.2s';
    assert_equals(getComputedStyle(box1).left, '20px');

    box2.style.animationDelay = '-2.2s';
    assert_equals(getComputedStyle(box2).left, '180px');

    box3.style.animationDelay = '-2.2s';
    assert_equals(getComputedStyle(box3).left, '180px');

    box4.style.animationDelay = '-2.2s';
    assert_equals(getComputedStyle(box4).left, '20px');


    box5.style.animationDelay = '-0.2s';
    assert_equals(getComputedStyle(box5).left, '40px');

    box6.style.animationDelay = '-0.2s';
    assert_equals(getComputedStyle(box6).left, '40px');

    box7.style.animationDelay = '-0.2s';
    assert_equals(getComputedStyle(box7).left, '180px');

    box8.style.animationDelay = '-0.2s';
    assert_equals(getComputedStyle(box8).left, '180px');


    box5.style.animationDelay = '-2.2s';
    assert_equals(getComputedStyle(box5).left, '40px');

    box6.style.animationDelay = '-2.2s';
    assert_equals(getComputedStyle(box6).left, '180px');

    box7.style.animationDelay = '-2.2s';
    assert_equals(getComputedStyle(box7).left, '180px');

    box8.style.animationDelay = '-2.2s';
    assert_equals(getComputedStyle(box8).left, '40px');
  }, "animation-direction works with multiple keyframes");
</script>
chromium/third_party/blink/web_tests/animations/direction-and-fill/animation-direction-reverse-non-hardware.html
