continue-css-animation-left.html (1230B)
1 <!DOCTYPE html> 2 <title>Node.moveBefore should preserve CSS animation state (left)</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <body> 6 <section id="old-parent"> 7 <div id="item"></div> 8 </section> 9 <section id="new-parent"> 10 </section> 11 <style> 12 @keyframes anim { 13 from { 14 left: 100px; 15 } 16 17 to { 18 left: 400px; 19 } 20 } 21 22 section { 23 position: absolute; 24 } 25 26 #item { 27 position: relative; 28 width: 100px; 29 height: 100px; 30 background: green; 31 animation: 1s linear infinite alternate anim; 32 animation-delay: 100ms; 33 } 34 </style> 35 <script> 36 promise_test(async t => { 37 const item = document.querySelector("#item"); 38 let num_events = 0; 39 await new Promise(resolve => addEventListener("animationstart", () => { 40 num_events++; 41 resolve(); 42 })); 43 44 // Reparent item 45 document.body.querySelector("#new-parent").moveBefore(item, null); 46 await new Promise(resolve => requestAnimationFrame(() => resolve())); 47 assert_equals(num_events, 1); 48 assert_not_equals(getComputedStyle(item).left, "0px"); 49 }); 50 </script> 51 </body>