layer-splitting-4.html (1608B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="utf-8"> 4 <title>The two items in the scroll box should share a layer, despite all the other stuff that's going on around them</title> 5 6 <style> 7 8 .content { 9 box-sizing: border-box; 10 width: 200px; 11 height: 200px; 12 border: 1px solid blue; 13 background: white; 14 } 15 16 body { 17 margin: 0; 18 padding: 20px; 19 height: 3000px; 20 } 21 22 .opacity { 23 opacity: 0.9; 24 width: 200px; 25 height: 200px; 26 background-color: yellow; 27 will-change: opacity; 28 } 29 30 .overlap { 31 margin-top: -100px; 32 } 33 34 .scrollable { 35 position: absolute; 36 top: 20px; 37 left: 240px; 38 width: 400px; 39 height: 400px; 40 border: 1px solid black; 41 overflow: auto; 42 } 43 44 .scrollarea { 45 height: 800px; 46 padding: 40px; 47 } 48 49 .low-z, .mid-z, .high-z { 50 position: relative; 51 } 52 53 .low-z { z-index: 1; } 54 .mid-z { z-index: 2; } 55 .high-z { z-index: 3; } 56 57 </style> 58 59 <div class="content" reftest-assigned-layer="page-background"></div> 60 <div class="overlap opacity"></div> 61 <div class="overlap mid-z content" reftest-assigned-layer="on-top-of-opacity"> 62 <!-- 63 This item cannot merge into the page background layer because there's an 64 active container layer for the opacity in between. 65 --> 66 </div> 67 68 <div class="scrollable"> 69 <div class="scrollarea"> 70 <div class="low-z content" reftest-assigned-layer="scrolled-content"></div> 71 <div class="high-z overlap content" reftest-assigned-layer="scrolled-content"></div> 72 </div> 73 </div> 74 <script> 75 76 var scrollable = document.querySelector(".scrollable"); 77 78 // Make .scrollable start out with active scrolling. 79 scrollable.scrollTop = 0; 80 scrollable.scrollTop = 20; 81 82 </script>