css-transition-cross-shadow.html (1712B)
1 <!DOCTYPE html> 2 <title>Node.moveBefore should not preserve CSS transition state when crossing shadow boundaries</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 <div id="shadow-container"> 11 <template shadowrootmode="open"> 12 <style> 13 #item { 14 width: 100px; 15 height: 100px; 16 background: green; 17 transition: left 10s; 18 position: absolute; 19 left: 0; 20 } 21 22 section { 23 position: relative; 24 } 25 26 body { 27 margin-left: 0; 28 } 29 </style> 30 <section id="new-parent"> 31 </section> 32 </template> 33 </div> 34 <style> 35 #item { 36 width: 100px; 37 height: 100px; 38 background: green; 39 transition: left 10s; 40 position: absolute; 41 left: 0; 42 } 43 44 section { 45 position: relative; 46 } 47 48 body { 49 margin-left: 0; 50 } 51 </style> 52 <script> 53 promise_test(async t => { 54 const item = document.querySelector("#item"); 55 assert_equals(item.getBoundingClientRect().x, 0); 56 item.style.left = "400px"; 57 await new Promise(resolve => item.addEventListener("transitionstart", resolve)); 58 const shadowContainer = document.querySelector("#shadow-container"); 59 shadowContainer.shadowRoot.querySelector("#new-parent").moveBefore(item, null); 60 await new Promise(resolve => requestAnimationFrame(() => resolve())); 61 assert_less_than(item.getBoundingClientRect().x, 400); 62 }, "Moving an element with a transition across shadow boundaries preserves the transition"); 63 </script> 64 </body>