| <!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> |