| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| #container { |
| width: 700px; |
| background-color: #fcc; |
| } |
| |
| #container div { |
| position: relative; |
| background-color: #933; |
| width: 200px; |
| height: 50px; |
| left: 50px; |
| margin-top: 10px; |
| } |
| #container.run #left { |
| left: 450px; |
| transition-property: left; |
| transition-duration: 4s; |
| transition-timing-function: linear; |
| } |
| #container.run #translate { |
| transform: translate(400px, 0px); |
| transition-property: transform; |
| transition-duration: 4s; |
| transition-delay: -1s; |
| transition-timing-function: linear; |
| } |
| </style> |
| </head> |
| <body> |
| <!-- |
| Test removes the transition properties while the transition is running, then adds them back in. |
| If working properly the transitions should start from the beginning. But there was a bug that |
| would cause the transition to continue to run (although with no visible effect). So when you |
| restarted, it would pick up where it left off. |
| https://bugs.webkit.org/show_bug.cgi?id=26163 |
| --> |
| <div id="container"> |
| <div id="left">left</div> |
| <div id="translate">translate</div> |
| </div> |
| <script> |
| 'use strict'; |
| |
| function waitForProgress() { |
| var initialLeft = getComputedStyle(left).left; |
| return new Promise(resolve => { |
| function poll() { |
| var currentLeft = getComputedStyle(left).left; |
| if (currentLeft === initialLeft) { |
| requestAnimationFrame(poll); |
| } else { |
| resolve(); |
| } |
| } |
| requestAnimationFrame(poll); |
| }); |
| } |
| |
| async_test(t => { |
| getComputedStyle(container).height; // force style recalc |
| container.className = 'run'; |
| getComputedStyle(container).height; // force style recalc - transition will start |
| waitForProgress().then(t.step_func_done(() => { |
| assert_greater_than(parseFloat(getComputedStyle(left).left), 50); |
| container.className = ''; |
| getComputedStyle(container).height; // force style recalc - transition will cancel |
| |
| container.className = 'run'; // restart transition |
| assert_equals(getComputedStyle(left).left, '50px'); |
| assert_equals(getComputedStyle(translate).transform, 'matrix(1, 0, 0, 1, 100, 0)'); |
| })); |
| }, 'Transition restarts from the beginning'); |
| </script> |
| </body> |
| </html> |
