css-transition-to-disconnected-document.html (1464B)
1 <!DOCTYPE html> 2 <title>Node.moveBefore should act like insertBefore when moving to a disconnected document</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 6 <body> 7 <section id="old-parent"> 8 <div id="item"></div> 9 </section> 10 <section id="new-parent"> 11 </section> 12 <style> 13 #item { 14 width: 100px; 15 height: 100px; 16 background: green; 17 transition: left 10s; 18 position: absolute; 19 left: 0; 20 } 21 22 section { 23 position: relative; 24 } 25 26 body { 27 margin-left: 0; 28 } 29 </style> 30 31 <script> 32 promise_test(async t => { 33 const item = document.querySelector("#item"); 34 assert_equals(item.getBoundingClientRect().x, 0); 35 item.style.left = "400px"; 36 await new Promise(resolve => item.addEventListener("transitionstart", resolve)); 37 const doc = document.implementation.createHTMLDocument(); 38 39 // Calling `moveBefore()` on a cross-document element undergoing a 40 // transition does not move the element, nor alter the transition. 41 assert_throws_dom("HIERARCHY_REQUEST_ERR", () => { 42 doc.body.moveBefore(item, null); 43 }); 44 45 await new Promise(resolve => requestAnimationFrame(() => resolve())); 46 assert_between_inclusive(item.getBoundingClientRect().x, 0, 20); 47 }, "Moving an element with a transition to a disconnected document should reset the transitionm state"); 48 </script> 49 </body>