blob: 12136b046338032e6b51db6c5f85642b10b43970 [file] [log] [blame]
<!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>