fixed-pos-scrolled-clip-layerize.html (1164B)
1 <!DOCTYPE html> 2 <html reftest-async-scroll 3 reftest-displayport-x="0" reftest-displayport-y="0" 4 reftest-displayport-w="800" reftest-displayport-h="2000" 5 reftest-async-scroll-x="0" reftest-async-scroll-y="200"> 6 7 <title>position:fixed with scrolled clip should prerender everything and correctly move the clip</title> 8 9 <style> 10 11 body { 12 margin: 0; 13 height: 4000px; 14 } 15 16 .blueBox { 17 margin: 10px; 18 width: 200px; 19 height: 200px; 20 box-sizing: border-box; 21 border: 1px solid blue; 22 } 23 24 .absoluteClip { 25 position: absolute; 26 top: 300px; 27 left: 100px; 28 width: 200px; 29 height: 200px; 30 background: red; 31 clip: rect(auto auto auto auto); 32 } 33 34 .fixed { 35 position: fixed; 36 top: 0; 37 right: 0; 38 bottom: 0; 39 left: 0; 40 background: linear-gradient(lime 300px, black 0); 41 } 42 43 .absoluteCyanBox { 44 position: absolute; 45 top: 200px; 46 left: 400px; 47 width: 200px; 48 height: 200px; 49 box-sizing: border-box; 50 border: 1px solid cyan; 51 } 52 53 54 </style> 55 56 <div class="blueBox" reftest-assigned-layer="page-background"></div> 57 58 <div class="absoluteClip"> 59 <div class="fixed"></div> 60 </div> 61 62 <div class="absoluteCyanBox" reftest-assigned-layer="page-background"></div>