layer-splitting-3.html (1985B)
1 <!DOCTYPE html> 2 <html lang="en" class="reftest-wait" 3 reftest-displayport-x="0" 4 reftest-displayport-y="0" 5 reftest-displayport-w="800" 6 reftest-displayport-h="1000"> 7 <meta charset="utf-8"> 8 <title>Scrolling shouldn't invalidate the fixed items</title> 9 10 <style> 11 12 .content { 13 box-sizing: border-box; 14 width: 200px; 15 height: 200px; 16 border: 1px solid black; 17 } 18 19 .fixed { 20 position: fixed; 21 top: 20px; 22 left: 20px; 23 } 24 25 .reftest-no-paint { 26 border-color: lime; 27 } 28 29 .distanceFromTop { 30 margin-top: 240px; 31 } 32 33 .clip { 34 width: 200px; 35 height: 200px; 36 overflow: hidden; 37 } 38 39 .transform { 40 position: relative; 41 will-change: transform; 42 } 43 44 body { 45 margin: 0; 46 padding: 20px; 47 height: 3000px; 48 } 49 50 51 </style> 52 53 <div class="fixed reftest-no-paint content"> 54 <!-- 55 This fixed layer gets its own PaintedLayer above the page. 56 --> 57 </div> 58 59 <div class="distanceFromTop clip"> 60 <!-- 61 This clip determines the potential pixels that can be affected by the 62 animated transform, *in relation to the scrolled page*. If the page 63 is scrolled, the clip moves relative to the fixed items, so the fixed 64 items need to anticipate the transform getting between them. 65 --> 66 67 <div class="transform content"> 68 <!-- 69 This is an animated transform item. It can move freely but will be 70 clipped by the .clip element. 71 --> 72 </div> 73 74 </div> 75 76 <div class="fixed reftest-no-paint content"> 77 <!-- 78 This fixed layer is above the animated transform, in z-order. The 79 transform is clipped in such a way that initially, the clip doesn't 80 intersect the fixed items, but once the page is scrolled, it does. 81 So this fixed item must not share a layer with the lower fixed item. 82 --> 83 </div> 84 85 <script> 86 87 function doTest() { 88 document.documentElement.scrollTop = 100; 89 document.documentElement.removeAttribute("class"); 90 } 91 document.documentElement.scrollTop = 0; 92 document.addEventListener("MozReftestInvalidate", doTest); 93 // setTimeout(doTest, 500); 94 95 </script>