<!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;
  assert_px_approx_equals(getComputedStyle(box).width, 168.531, 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.531, 0.01, 'width after className');
  animation.currentTime = 200;
  assert_px_approx_equals(getComputedStyle(box).width, 113.312, 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, 113.312, 0.01, 'width after second reverse');
  animation.currentTime = 400;
  assert_px_approx_equals(getComputedStyle(box).width, 183.141, 0.01, '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>