continue-css-transition-transform.html (1085B)
1 <!DOCTYPE html> 2 <title>Node.moveBefore should preserve CSS transition state (transform)</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: transform 60s steps(1, jump-both); 18 } 19 20 body { 21 margin-left: 0; 22 } 23 </style> 24 <script> 25 promise_test(async t => { 26 const item = document.querySelector("#item"); 27 assert_equals(item.getBoundingClientRect().x, 0); 28 item.style.transform = "translateX(400px)"; 29 await new Promise(resolve => item.addEventListener("transitionstart", resolve)); 30 document.querySelector("#new-parent").moveBefore(item, null); 31 await new Promise(resolve => requestAnimationFrame(() => resolve())); 32 assert_equals(item.getBoundingClientRect().x, 200); 33 assert_equals(item.getAnimations().length, 1); 34 }); 35 </script> 36 </body>