animation-direction-reverse-timing-functions.html

<!DOCTYPE html>
<title>Test of animation-direction timing functions</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
    .box {
      animation-duration: 2s;
      animation-iteration-count: 4;
      animation-name: move1;
      /* ease is good for testing because it is not symmetric */
      animation-timing-function: ease;
      animation-play-state:  paused;
      background-color: blue;
      color: white;
      height: 50px;
      left: 20px;
      margin-bottom: 10px;
      position: relative;
      top: 10px;
      width: 250px;
    }

    .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; }
    }
</style>
<div id="box1" class="box normal">normal</div>
<div id="box2" class="box alternate">alternate</div>
<div id="box3" class="box reverse">reverse</div>
<div id="box4" class="box alternate-reverse">alternate-reverse</div>
<script>
  'use strict';

  function computedLeft(element) {
    return Number(getComputedStyle(element).left.slice(0, -2));
  }

  test(function() {
    const epsilon = 0.002;

    // ease = cubicBezier(0.25, 0.1, 0.25, 1)
    // ease(0.1) = 0.0947963055884654 ==> position = 18.9593
    // ease(0.9) = 0.9943164775463438 ==> position = 198.863

    box1.style.animationDelay = '-0.2s';
    assert_approx_equals(computedLeft(box1), 18.9593, epsilon, 'early box1');

    box2.style.animationDelay = '-0.2s';
    assert_approx_equals(computedLeft(box2), 18.9593, epsilon, 'early box2');

    box3.style.animationDelay = '-0.2s';
    assert_approx_equals(computedLeft(box3), 198.863, epsilon, 'early box3');

    box4.style.animationDelay = '-0.2s';
    assert_approx_equals(computedLeft(box4), 198.863, epsilon, 'early box4');


    box1.style.animationDelay = '-2.2s';
    assert_approx_equals(computedLeft(box1), 18.9593, epsilon, 'late box1');

    box2.style.animationDelay = '-2.2s';
    assert_approx_equals(computedLeft(box2), 198.863, epsilon, 'late box2');

    box3.style.animationDelay = '-2.2s';
    assert_approx_equals(computedLeft(box3), 198.863, epsilon, 'late box3');

    box4.style.animationDelay = '-2.2s';
    assert_approx_equals(computedLeft(box4), 18.9593, epsilon, 'late box4');
  }, "animation-direction works with timing functions");
</script>
chromium/third_party/blink/web_tests/animations/direction-and-fill/animation-direction-reverse-timing-functions.html
