reverse-transition-with-negative-delay.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: -0.3s;
  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, '130px', 'width at transition start');
  animation.currentTime = 200;
  assert_equals(getComputedStyle(box).width, '150px', '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, '135px', 'width after className');
  animation.currentTime = 200;
  assert_equals(getComputedStyle(box).width, '115px', '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, '140.5px', 'width after second reverse');
  animation.currentTime = 425;
  assert_equals(getComputedStyle(box).width, '183px', 'width mid-second-reverse');
  animation.currentTime = 850;
  assert_equals(getComputedStyle(box).width, '200px', 'width at end');

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

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