| <!DOCTYPE html> |
| <title>CSS Transitions: transition events for an element changing document</title> |
| <link rel="help" href="https://drafts.csswg.org/css-transitions"> |
| <script src="/resources/testharness.js" type="text/javascript"></script> |
| <script src="/resources/testharnessreport.js" type="text/javascript"></script> |
| <div id="target"></div> |
| <iframe src="about:blank"></iframe> |
| <script> |
| promise_test(async () => { |
| await new Promise(r => window.addEventListener("load", r)); |
| |
| const target = document.getElementById("target"); |
| target.style.transition = "margin-left 100ms"; |
| |
| const transitionMarginLeft = async value => { |
| getComputedStyle(target).marginLeft; |
| target.style.marginLeft = value; |
| await target.getAnimations()[0].ready; |
| } |
| |
| // start an initial transition. |
| await transitionMarginLeft("100px"); |
| |
| // move the target to new frame, this should cancel the transition. |
| const transitionWasCanceled = new Promise(resolve => target.addEventListener("transitioncancel", resolve, { once: true })); |
| document.querySelector("iframe").contentDocument.body.appendChild(target); |
| await transitionWasCanceled; |
| |
| // Start a new transition and ensure it triggers a transitionend event. |
| const transitionEnded = new Promise(resolve => target.addEventListener("transitionend", resolve, { once: true })); |
| await transitionMarginLeft("0px"); |
| await transitionEnded; |
| }, "transition events for an element changing document"); |
| </script> |
