| <!DOCTYPE html> |
| <body> |
| <style> |
| div { |
| width: 100px; |
| height: 100px; |
| background-color: black; |
| will-change: transform; |
| } |
| </style> |
| <script> |
| |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| const div = document.body.appendChild(document.createElement("div")); |
| |
| // Wait for a transition to start and abort it. |
| div.addEventListener("transitionstart", event => { |
| div.style.transition = "none"; |
| }); |
| |
| // When notified the transition was aborted, finish the test once we've ensured that animations |
| // have been updated (one rAF) and that accelerated animations will have been committed (two rAFs). |
| div.addEventListener("transitioncancel", event => { |
| if (window.testRunner) { |
| requestAnimationFrame(() => { |
| requestAnimationFrame(() => testRunner.notifyDone()); |
| }); |
| } |
| }); |
| |
| |
| // Initiate a transform transition. |
| setTimeout(() => { |
| div.style.transition = "transform 2s"; |
| div.style.transform = "translateX(100px)"; |
| }); |
| |
| </script> |
| </body> |
