fixed-z-index-blend.html (1453B)
1 <!DOCTYPE html> 2 <html class="reftest-wait" style="overflow-x:hidden;"> 3 <title>fixed position, z-index, and mix-blend-mode</title> 4 <link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#fixed-positioning"> 5 <link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#propdef-z-index"> 6 <link rel="help" href="https://www.w3.org/TR/compositing-1/#mix-blend-mode"> 7 <meta name="assert" content="Tests fixed, z-index, and mix-blend-mode. 8 Passes if there is a green box when the page is scrolled to the bottom."> 9 <link rel="author" href="mailto:masonf@chromium.org"> 10 <link rel="match" href="fixed-z-index-blend-ref.html"> 11 12 <div class="blend"></div> 13 <div class="background"></div> 14 <div class="text"> 15 <div style="width: 100px; height:4000px;"></div> 16 <div style="background: green; width: 100px; height:100px;"></div> 17 </div> 18 19 <style> 20 .blend { 21 display: block; 22 position: fixed; 23 z-index: 2; 24 top: 0; 25 left: 0; 26 bottom: 0; 27 right: 0; 28 mix-blend-mode: overlay; 29 } 30 31 .background { 32 pointer-events: none; 33 position: fixed; 34 z-index: 1; 35 top: 0; 36 left: 0; 37 bottom: 0; 38 right: 0; 39 opacity: 1; 40 } 41 42 .text { 43 position: relative; 44 z-index: 3; 45 overflow: hidden; 46 width: 100vw; 47 min-height: 100vh; 48 font-size: 50px; 49 line-height: 2; 50 } 51 </style> 52 53 <script src="/common/reftest-wait.js"></script> 54 <script> 55 requestAnimationFrame(()=>{ 56 requestAnimationFrame(()=>{ 57 window.scrollBy(0, 4000); 58 takeScreenshot(); 59 }); 60 }); 61 </script> 62 </html>