reverse-transition.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: 0s;
  transition-duration: 1s;
  transition-property: width;
  transition-timing-function: linear;
}

#box.target, #box:hover {
  width: 200px;
}
</style>
<div id="box"></div>
<script>
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;
  assert_equals(getComputedStyle(box).width, '140px', '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_equals(getComputedStyle(box).width, '140px', 'width after className');
  animation.currentTime = 200;
  assert_equals(getComputedStyle(box).width, '120px', '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_equals(getComputedStyle(box).width, '120px', 'width after second reverse');
  animation.currentTime = 400;
  assert_equals(getComputedStyle(box).width, '160px', '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 mid-way adjusts the duration");
</script>
chromium/third_party/blink/web_tests/animations/reverse-transition.html
