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