continue-css-transition-left-pseudo.html (1333B)
1 <!DOCTYPE html> 2 <title>Node.moveBefore should preserve CSS transition state on pseudo-elements (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 position: absolute; 18 left: 0; 19 } 20 21 #item::before { 22 content: "Foo"; 23 width: 100px; 24 height: 100px; 25 background: green; 26 transition: left 60s steps(1, jump-both); 27 left: 0px; 28 position: absolute; 29 } 30 31 #item.big::before { 32 left: 400px; 33 } 34 35 section { 36 position: relative; 37 } 38 39 body { 40 margin-left: 0; 41 } 42 </style> 43 <script> 44 promise_test(async t => { 45 const item = document.querySelector("#item"); 46 assert_equals(item.getBoundingClientRect().x, 0); 47 item.classList.add("big"); 48 await new Promise(resolve => item.addEventListener("transitionstart", resolve)); 49 document.querySelector("#new-parent").moveBefore(item, null); 50 await new Promise(resolve => requestAnimationFrame(() => resolve())); 51 assert_equals(getComputedStyle(item, "::before").left, "200px"); 52 }); 53 </script> 54 </body>