continue-css-animation-transform.html (1229B)
1 <!DOCTYPE html> 2 <title>Node.moveBefore should preserve CSS animation 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 @keyframes anim { 14 from { 15 transform: translateX(100px); 16 } 17 18 to { 19 transform: translateX(400px); 20 } 21 } 22 23 #item { 24 position: relative; 25 width: 100px; 26 height: 100px; 27 background: green; 28 animation: 1s linear infinite alternate anim; 29 animation-delay: 100ms; 30 } 31 </style> 32 <script> 33 promise_test(async t => { 34 const item = document.querySelector("#item"); 35 let num_events = 0; 36 await new Promise(resolve => addEventListener("animationstart", () => { 37 num_events++; 38 resolve(); 39 })); 40 41 // Reparent item 42 document.body.querySelector("#new-parent").moveBefore(item, null); 43 await new Promise(resolve => requestAnimationFrame(() => resolve())); 44 assert_equals(num_events, 1); 45 assert_not_equals(getComputedStyle(item).transform, "none"); 46 }); 47 </script> 48 </body>