layer-splitting-7.html (1411B)
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 relatively-positioned layer</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 .relative { 34 position: relative; 35 } 36 37 body { 38 margin: 0; 39 padding: 20px; 40 height: 3000px; 41 } 42 43 44 </style> 45 46 <div class="fixed reftest-no-paint content"> 47 <!-- 48 This fixed layer gets its own PaintedLayer above the page. 49 50 It shouldn't attempt to pull up an opaque background color from the page, 51 because the page can move under it. 52 --> 53 </div> 54 55 <div class="distanceFromTop relative reftest-no-paint content"> 56 <!-- 57 This item is above .fixed in z-order, but it starts out not intersecting 58 .fixed. It should still get its own layer from the start, because it can 59 get scrolled on top of .fixed. 60 --> 61 </div> 62 63 <script> 64 65 function doTest() { 66 document.documentElement.scrollTop = 100; 67 document.documentElement.removeAttribute("class"); 68 } 69 document.documentElement.scrollTop = 0; 70 document.addEventListener("MozReftestInvalidate", doTest); 71 72 </script>