css-transition-cross-document.html (1810B)
1 <!DOCTYPE html> 2 <title>Node.moveBefore should not preserve CSS transition state when crossing document boundaries</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 6 <body> 7 <script> 8 let iframeLoadResolve; 9 let iframeLoadPromise = new Promise((r) => { iframeLoadResolve = r; }); 10 </script> 11 <iframe id="iframe" onload="iframeLoadResolve()"> 12 </iframe> 13 <section id="new-parent"> 14 </section> 15 <style id="style"> 16 #item { 17 width: 100px; 18 height: 100px; 19 background: green; 20 transition: left 10s; 21 position: absolute; 22 left: 0; 23 } 24 25 section { 26 position: relative; 27 } 28 29 body { 30 margin-left: 0; 31 } 32 </style> 33 <script> 34 promise_test(async t => { 35 await iframeLoadPromise; 36 const iframe = document.querySelector("#iframe"); 37 const style = document.querySelector("#style"); 38 iframe.contentDocument.head.append(style.cloneNode(true)); 39 const item = iframe.contentDocument.createElement("div"); 40 item.id = "item"; 41 iframe.contentDocument.body.append(item); 42 assert_equals(item.getBoundingClientRect().x, 0); 43 item.style.left = "400px"; 44 await new Promise(resolve => item.addEventListener("transitionstart", resolve)); 45 46 // Calling `moveBefore()` on a cross-document element undergoing a 47 // transition does not move the element, nor alter the transition. 48 assert_throws_dom("HIERARCHY_REQUEST_ERR", () => { 49 document.querySelector("#new-parent").moveBefore(item, null); 50 }); 51 52 await new Promise(resolve => requestAnimationFrame(() => resolve())); 53 assert_less_than(item.getBoundingClientRect().x, 20); 54 }, "Moving a transition across documents should reset its state"); 55 </script> 56 </body>