reverse-transition-with-delay.html | Explore in Territory

<!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: 0.3s;
  transition-duration: 0.7s;
  transition-property: width;
  transition-timing-function: linear;
}

#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 = 300;
  assert_equals(getComputedStyle(box).width, '100px', 'width after delay');
  animation.currentTime = 700;
  assert_px_approx_equals(getComputedStyle(box).width, 157.141, 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, 157.141, 0.01, 'width after className');
  animation.currentTime = 300;
  assert_px_approx_equals(getComputedStyle(box).width, 157.141, 0.01, 'width after second delay');
  animation.currentTime = 500;
  assert_px_approx_equals(getComputedStyle(box).width, 128.562, 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, 128.562, 0.01, 'width after second reverse');
  animation.currentTime = 300;
  assert_px_approx_equals(getComputedStyle(box).width, 128.562, 0.01, 'width at transition start');
  animation.currentTime = 700;
  assert_px_approx_equals(getComputedStyle(box).width, 185.703, 0.01, 'width mid-second-reverse');
  animation.currentTime = 1100;
  assert_equals(getComputedStyle(box).width, '200px', 'width at end');

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

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