transition-events-with-document-change.html (1494B)
1 <!DOCTYPE html> 2 <title>CSS Transitions: transition events for an element changing document</title> 3 <link rel="help" href="https://drafts.csswg.org/css-transitions"> 4 <script src="/resources/testharness.js" type="text/javascript"></script> 5 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 6 <div id="target"></div> 7 <iframe src="about:blank"></iframe> 8 <script> 9 promise_test(async () => { 10 await new Promise(r => window.addEventListener("load", r)); 11 12 const target = document.getElementById("target"); 13 target.style.transition = "margin-left 100ms"; 14 15 const transitionMarginLeft = async value => { 16 getComputedStyle(target).marginLeft; 17 target.style.marginLeft = value; 18 await target.getAnimations()[0].ready; 19 } 20 21 // start an initial transition. 22 await transitionMarginLeft("100px"); 23 24 // move the target to new frame, this should cancel the transition. 25 const transitionWasCanceled = new Promise(resolve => target.addEventListener("transitioncancel", resolve, { once: true })); 26 document.querySelector("iframe").contentDocument.body.appendChild(target); 27 await transitionWasCanceled; 28 29 // Start a new transition and ensure it triggers a transitionend event. 30 const transitionEnded = new Promise(resolve => target.addEventListener("transitionend", resolve, { once: true })); 31 await transitionMarginLeft("0px"); 32 await transitionEnded; 33 }, "transition events for an element changing document"); 34 </script>