continue-css-transition-left.html (1076B)
1 <!DOCTYPE html> 2 <title>Node.moveBefore should preserve CSS transition state (left)</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 <script> 31 promise_test(async t => { 32 const item = document.querySelector("#item"); 33 assert_equals(item.getBoundingClientRect().x, 0); 34 item.style.left = "400px"; 35 await new Promise(resolve => item.addEventListener("transitionstart", resolve)); 36 document.querySelector("#new-parent").moveBefore(item, null); 37 await new Promise(resolve => requestAnimationFrame(() => resolve())); 38 assert_less_than(item.getBoundingClientRect().x, 399); 39 }); 40 </script> 41 </body>