reverse-transition-with-easing.html

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
#box {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: blue;
  transition-delay: 0s;
  transition-duration: 1s;
  transition-property: width;
  transition-timing-function: ease;
}

#box.target, #box:hover {
  width: 200px;
}
</style>
<div id="box"></div>
<script>
function assert_px_approx_equals(actual, expected, epsilon, description) {
  var match = /^([\d.]+)px$/.exec(actual);
  assert_not_equals(match, null);
  assert_approx_equals(Number(match[1]), expected, epsilon, description);
}

test(function() {
  var box = document.getElementById('box');

  assert_equals(getComputedStyle(box).width, '100px', 'initial width');

  // Start the animation.
  box.className = 'target';
  getComputedStyle(box).width;  // Force the transition.
  var animation = box.getAnimations()[0];
  animation.pause();

  animation.currentTime = 0;
  assert_equals(getComputedStyle(box).width, '100px', 'width at transition start');
  animation.currentTime = 400;
  // cubicBezier(0.25, 0.1, 0.25, 1)(0.4) = 0.68254
  assert_px_approx_equals(getComputedStyle(box).width, 168.254, 0.01, 'width mid-forward');

  // Reverse the animation.
  box.className = '';
  getComputedStyle(box).width;  // Force the transition.
  animation = box.getAnimations()[0];
  animation.pause();  // The animation is replaced, so pause it again.

  animation.currentTime = 0;
  assert_px_approx_equals(getComputedStyle(box).width, 168.254, 0.01, 'width after className');

  // https://drafts.csswg.org/css-transitions-1/#reversing
  // Reversing an animation.
  // reverse shortening factor = output of timing function = 0.68254
  // start time = (now)
  // end time = (now) + duration * shortening factor = (now) + 682.54ms
  // start value = 168.254
  // end value = 100
  // progress = 200 / (end time - start time) = 0.2930
  // timing output = cubicBezier(0.25, 0.1, 0.25, 1)(0.2930) = 0.49939
  // Expected position = (end value - start value) * timing output + start value = 134.165.
  animation.currentTime = 200;
  assert_px_approx_equals(getComputedStyle(box).width, 134.165, 0.01, 'width mid-reverse');

  // Go forward again.  This tests the reversingAdjustedStartValue is set
  // properly the first time it's reversed.
  box.className = 'target';
  getComputedStyle(box).width;  // Force the transition.
  animation = box.getAnimations()[0];
  animation.pause();  // The animation is replaced, so pause it again.

  animation.currentTime = 0;
  assert_px_approx_equals(getComputedStyle(box).width, 134.165, 0.01, 'width after second reverse');

  // reverse shortening factor
  //    = (output of timing function) * (old shortening factor) +
  //      (1 - old shortening factor) = 0.65831
  // start time = (now)
  // end time = (now) + duration * shortening factor = (now) + 658.31ms
  // start value = 134.168
  // end value = 200
  // progress = 400 / (end time - start time) = 0.60761
  // timing output = cubicBezier(0.25, 0.1, 0.25, 1)(0.6076) = 0.89032
  // Expected position = (end value - start value) * timing output + start value = 192.779
  // Accumulated a bit of round off error at this stage of the calculation. Relaxing the tolerance.
  animation.currentTime = 400;
  assert_px_approx_equals(getComputedStyle(box).width, 192.779, 0.02, 'width mid-second-reverse');

  animation.currentTime = 800;
  assert_equals(getComputedStyle(box).width, '200px', 'width at end');

  assert_equals(box.getAnimations().length, 0, 'animation ended');

}, "Check that reversing a transition (with ease timing function) mid-way adjusts the duration");
</script>
chromium/third_party/blink/web_tests/animations/reverse-transition-with-easing.html
