| <html> |
| <head> |
| <style> |
| #box { |
| position: relative; |
| width: 10px; |
| height: 10px; |
| background-color: green; |
| -webkit-transform: translate3d(0, 0, 0); |
| -webkit-transition: -webkit-transform 200ms linear; |
| } |
| </style> |
| <script> |
| |
| if (window.testRunner) { |
| window.testRunner.dumpAsText(); |
| window.testRunner.waitUntilDone(); |
| } |
| |
| var NUMBER_OF_INTERRUPTIONS = 30; |
| var interruptionCount = 0; |
| var box; |
| |
| function interruptTransition() { |
| if (interruptionCount <= NUMBER_OF_INTERRUPTIONS) { |
| interruptionCount++; |
| box.style.webkitTransform = 'translate3d(' + (interruptionCount * 5) + "px, 0, 0)"; |
| // call the function again, before the transition can complete |
| setTimeout(interruptTransition, 0); |
| } |
| } |
| |
| function finishTest() { |
| var results = document.getElementById("results"); |
| results.innerText = "The transition completed successfully."; |
| |
| if (window.testRunner) |
| window.testRunner.notifyDone(); |
| } |
| |
| window.addEventListener("load", function () { |
| box = document.getElementById("box"); |
| box.addEventListener("webkitTransitionEnd", finishTest, false); |
| // start the rush of interruptions |
| setTimeout(interruptTransition, 10); |
| }, false); |
| |
| </script> |
| </head> |
| <body> |
| <div id="box"></div> |
| <p>This test should not crash</p> |
| <p id="results"></p> |
| </body> |
| </html> |
