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