z-index-blend-will-change-overlapping-layers.html (1130B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>z-index, will-change, mix-blend-mode on overlapping layers</title> 4 <link rel="match" href="z-index-blend-will-change-overlapping-layers-ref.html"> 5 <link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#propdef-z-index"> 6 <link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> 7 <link rel="help" href="https://www.w3.org/TR/compositing-1/#mix-blend-mode"> 8 <meta name="assert" content="Tests z-index, will-change and mix-blend-mode on overlapping layers. 9 Passes if there is a green bar when the page is scrolled to the bottom."> 10 <script src="/common/reftest-wait.js"></script> 11 <div style="z-index: 1; position: relative; height: 100vh"> 12 <div style="mix-blend-mode: multiply"></div> 13 <div style="will-change: transform; position: absolute; bottom: -100px; width: 100px; height: 100px; background: red"> 14 </div> 15 </div> 16 <div style="z-index: 1; position: relative; background: green; height: 100px"></div> 17 <script> 18 requestAnimationFrame(()=>{ 19 requestAnimationFrame(()=>{ 20 window.scrollBy(0, 100); 21 takeScreenshot(); 22 }); 23 }); 24 </script> 25 </html>