anchor-pos-2.html (1333B)
1 <!DOCTYPE html> 2 <html reftest-async-scroll> 3 <style> 4 .container { 5 position: absolute; 6 left: 0; 7 top: 0; 8 } 9 .scroller { 10 position: absolute; 11 overflow: auto; 12 scrollbar-width: none; 13 width: 150px; 14 height: 100px; 15 } 16 .spacer { 17 width: 1px; 18 height: 500px; 19 } 20 .anchor1 { 21 width: 50px; 22 height: 50px; 23 background: blue; 24 anchor-name: --my-anchor1; 25 position: absolute; 26 position-anchor: --my-anchor2; 27 position-visibility: always; 28 left: anchor(right); 29 top: anchor(bottom); 30 } 31 .anchor2 { 32 width: 50px; 33 height: 50px; 34 background: pink; 35 anchor-name: --my-anchor2; 36 } 37 .anchored { 38 position: absolute; 39 position-anchor: --my-anchor1; 40 position-visibility: always; 41 width: 50px; 42 height: 50px; 43 background: yellow; 44 left: anchor(right); 45 top: anchor(bottom); 46 } 47 </style> 48 <div class="container"> 49 <div class="scroller" 50 reftest-displayport-x="0" reftest-displayport-y="0" 51 reftest-displayport-w="150" reftest-displayport-h="500"> 52 <div class="scroller" 53 reftest-displayport-x="0" reftest-displayport-y="0" 54 reftest-displayport-w="150" reftest-displayport-h="500" 55 reftest-async-scroll-y="50"> 56 <div class="anchor2"></div> 57 <div class="spacer"></div> 58 </div> 59 <div class="anchor1"></div> 60 <div class="spacer"></div> 61 </div> 62 <div class="anchored"></div> 63 </div> 64 </html>