fixed-pos-scrolled-clip-3.html (1431B)
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="20"> 6 7 <title>like fixed-pos-scrolled-clip-1.html, but inside a transform. This also tests that scrolling the root scroll frame moves the "fixed" layer which is only fixed with respect to the transform, not with respect to the viewport.</title> 8 9 <style> 10 11 body { 12 margin: 0; 13 height: 4000px; 14 } 15 16 .transform { 17 transform: translate(10px, 10px); 18 width: 500px; 19 } 20 21 .subframe { 22 height: 600px; 23 overflow: auto; 24 box-shadow: 0 0 0 2px black; 25 } 26 27 .scrolled { 28 height: 4000px; 29 position: relative; 30 } 31 32 .absoluteClip { 33 position: absolute; 34 top: 300px; 35 left: 100px; 36 width: 200px; 37 height: 200px; 38 background: red; 39 clip: rect(auto auto auto auto); 40 } 41 42 .fixed { 43 position: fixed; 44 top: 0; 45 right: 0; 46 bottom: 0; 47 left: 0; 48 background: linear-gradient(lime, lime) black 0 100px no-repeat; 49 background-size: 100% 200px; 50 } 51 52 </style> 53 54 <div class="transform"> 55 <div class="subframe" 56 reftest-displayport-x="0" reftest-displayport-y="0" 57 reftest-displayport-w="800" reftest-displayport-h="2000" 58 reftest-async-scroll-x="0" reftest-async-scroll-y="200"> 59 <div class="scrolled"> 60 <div class="absoluteClip"> 61 <div class="fixed"></div> 62 </div> 63 </div> 64 </div> 65 </div>