css-transition-trigger.html (1043B)
1 <!DOCTYPE html> 2 <title>Node.moveBefore should trigger CSS transition state (left) if needed</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 steps(1, jump-both); 18 position: absolute; 19 left: 0; 20 } 21 22 #new-parent #item { 23 left: 400px; 24 } 25 26 section { 27 position: relative; 28 } 29 30 body { 31 margin-left: 0; 32 } 33 </style> 34 <script> 35 promise_test(async t => { 36 const item = document.querySelector("#item"); 37 assert_equals(item.getBoundingClientRect().x, 0); 38 document.querySelector("#new-parent").moveBefore(item, null); 39 await new Promise(resolve => item.addEventListener("transitionstart", resolve)); 40 assert_equals(item.getBoundingClientRect().x, 200); 41 }); 42 </script> 43 </body>