reverse-transition-cross-browser.html

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>

<!-- Comment out the next line to run this test in Firefox. -->
<script src="../resources/testharnessreport.js"></script>

<style>
.box {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: blue;
  transition-delay: -0.5s;
  transition-duration: 1s;
  transition-property: width;
}

#linear {
  transition-timing-function: linear;
}

#non-linear {
  transition-timing-function: steps(6, start);
}
</style>
<div class="box" id="linear"></div>
<div class="box" id="non-linear"></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('linear');

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

  box.style.width = '200px';
  assert_equals(getComputedStyle(box).width, '150px');

  box.style.width = '100px';
  assert_equals(getComputedStyle(box).width, '125px');

  box.style.width = '200px';
  assert_equals(getComputedStyle(box).width, '162.5px');
}, "Cross-browser check that reversing a transition mid-way adjusts the duration");

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

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

  box.style.width = '200px';
  assert_px_approx_equals(getComputedStyle(box).width, 166.656, 0.01);

  box.style.width = '100px';
  assert_px_approx_equals(getComputedStyle(box).width, 122.219, 0.01);

  box.style.width = '200px';
  assert_px_approx_equals(getComputedStyle(box).width, 174.062, 0.01);
}, "Cross-browser check that reversing a transition with a non linear timing function mid-way adjusts the duration");
</script>
chromium/third_party/blink/web_tests/animations/reverse-transition-cross-browser.html
