fixed-pos-scrolled-clip-opacity-layerize.html (1229B)
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 .opacity { 25 opacity: 0.8; 26 } 27 28 .absoluteClip { 29 position: absolute; 30 top: 300px; 31 left: 100px; 32 width: 200px; 33 height: 200px; 34 background: red; 35 clip: rect(auto auto auto auto); 36 } 37 38 .fixed { 39 position: fixed; 40 top: 0; 41 right: 0; 42 bottom: 0; 43 left: 0; 44 background: linear-gradient(lime 300px, black 0); 45 } 46 47 .absoluteCyanBox { 48 position: absolute; 49 top: 200px; 50 left: 400px; 51 width: 200px; 52 height: 200px; 53 box-sizing: border-box; 54 border: 1px solid cyan; 55 } 56 57 58 </style> 59 60 <div class="blueBox" reftest-assigned-layer="page-background"></div> 61 62 <div class="opacity"> 63 <div class="absoluteClip"> 64 <div class="fixed"></div> 65 </div> 66 </div> 67 68 <div class="absoluteCyanBox" reftest-assigned-layer="page-background"></div>