anchor-pos-1.html (877B)
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: 100px; 14 height: 100px; 15 } 16 .spacer { 17 width: 1px; 18 height: 500px; 19 } 20 .anchor { 21 width: 50px; 22 height: 50px; 23 background: blue; 24 anchor-name: --my-anchor; 25 } 26 .anchored { 27 position: absolute; 28 position-anchor: --my-anchor; 29 position-visibility: always; 30 width: 50px; 31 height: 50px; 32 background: yellow; 33 left: anchor(right); 34 top: anchor(bottom); 35 } 36 </style> 37 <div class="container"> 38 <div class="scroller" 39 reftest-displayport-x="0" reftest-displayport-y="0" 40 reftest-displayport-w="100" reftest-displayport-h="500" 41 reftest-async-scroll-y="50"> 42 <div class="anchor"></div> 43 <div class="spacer"></div> 44 </div> 45 <div class="anchored"></div> 46 </div> 47 </html>