composite-change-after-scroll-preserves-stacking-order.html (1192B)
1 <!doctype HTML> 2 <link rel="author" title="Chris Harrelson" href="chrishtr@chromium.org"> 3 <link rel="match" href="composite-change-after-scroll-preserves-stacking-order-ref.html"> 4 <link rel="help" href="https://www.w3.org/TR/CSS2/zindex.html"/> 5 <script src="/common/reftest-wait.js"></script> 6 <script src="/web-animations/testcommon.js"></script> 7 <style> 8 #one, #two { 9 width: 200px; height: 200px; background: lightblue; position: relative 10 } 11 #one { 12 background: lightblue 13 } 14 #two { 15 background: lightgray; 16 margin-top: -200px; 17 } 18 </style> 19 <html class=reftest-wait> 20 <div id=scroller style="overflow: scroll; width: 300px; height: 300px; will-change: transform"> 21 <div id=one></div> 22 <div id=two></div> 23 <div id=spacer style="width: 50px; height: 5000px"></div> 24 </div> 25 </html> 26 <script> 27 onload = () => { 28 waitForAnimationFrames(2).then(() => { 29 scroller.scrollBy(0, 1000); 30 waitForAnimationFrames(2).then(() => { 31 one.style = 'will-change: transform'; 32 waitForAnimationFrames(2).then(() => { 33 scroller.scrollBy(0, -1000); 34 takeScreenshot(); 35 }); 36 }); 37 }); 38 }; 39 </script>