moveBefore-shadow-inside.html (1210B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <body> 5 <style> 6 section { 7 position: relative; 8 } 9 #item { 10 position: absolute; 11 inset: 0; 12 } 13 #section1 { 14 width: 200px; 15 height: 200px; 16 } 17 18 #section2 { 19 width: 300px; 20 height: 300px; 21 } 22 </style> 23 <section id="section1"> 24 <div id="item"> 25 <template shadowRootMode="open"> 26 <style> 27 div { 28 position: absolute; 29 inset: 0; 30 background-color: var(--color, red); 31 } 32 </style> 33 <div></div> 34 </template> 35 </div> 36 </section> 37 <section id="section2"> 38 39 </section> 40 <script> 41 promise_test(async () => { 42 const item = document.querySelector("#item"); 43 document.querySelector("#section2").moveBefore(item, null); 44 await new Promise(resolve => requestAnimationFrame(() => resolve())); 45 assert_equals(item.shadowRoot.querySelector("div").getBoundingClientRect().width, 300); 46 }); 47 </script>