css/css-transitions/animations/transition-timing-function.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>transition timing function</title>
  <link rel="help" href="https://drafts.csswg.org/css-transitions-1/#transition-timing-function-property">
  <style>
    .box {
      position: relative;
      left: 0;
      height: 100px;
      width: 100px;
      margin: 10px;
      background-color: blue;
      transition: left 1s linear;
    }
    .animating > .box {
      left: 400px;
    }
  </style>
</head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-transitions/support/helper.js"></script>
<script src="/css/css-easing/testcommon.js"></script>
<script>
  window.onload = () => {
    function verifyPosition(element_id, expected) {
      const element = document.getElementById(element_id);
      const actual = Math.round(parseFloat(getComputedStyle(element).left));
      assert_equals(actual, expected, `verify ${element_id} left`);
    }

    function easing(x1, y1, x2, y2) {
      return Math.round(400 * cubicBezier(x1, y1, x2, y2)(0.5));
    }

    function ease() {
      return easing(0.25, 0.1, 0.25, 1); // 321
    }

    function easeIn() {
      return easing(0.42, 0, 1, 1); // 126
    }

    function easeOut() {
      return easing(0.0, 0.0, 0.58, 1.0); // 274
    }

    function easeInOut() {
      return easing(0.42, 0.0, 0.58, 1.0); // 200
    }

    promise_test(async t => {
      // Make sure we have rendered the page before making the style change
      // to ensure we get transitions.
      await waitForAnimationFrames(2);
      promises = [];
      document.getElementById('container').className = 'animating';
      document.getAnimations().forEach(anim => {
        anim.pause();
        anim.currentTime = 500;
        promises.push(anim.ready);
      });
      Promise.all(promises).then(() => {
        assert_equals(promises.length, 5, 'Unexpected animation count');
        verifyPosition('box1', 200);  // linear easing
        verifyPosition('box2', ease());
        verifyPosition('box3', easeIn());
        verifyPosition('box4', easeOut());
        verifyPosition('box5', easeInOut());
      });
    }, 'Ensure that transition easing functions are properly applied.');
  };
</script>
<body>
<div id="container">
  <div id="box1" class="box" style="transition-timing-function: linear;"></div>
  <div id="box2" class="box" style="transition-timing-function: ease;"></div>
  <div id="box3" class="box" style="transition-timing-function: ease-in;"></div>
  <div id="box4" class="box" style="transition-timing-function: ease-out;"></div>
  <div id="box5" class="box" style="transition-timing-function: ease-in-out;"></div>
</div>
</body>
</html>