position-visibility-no-overflow-scroll.html (1486B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>CSS Anchor Positioning Test: position-visibility: no-overflow</title> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility"> 5 <link rel="match" href="position-visibility-no-overflow-scroll-ref.html"> 6 <style> 7 #container { 8 position: relative; 9 width: 400px; 10 height: 150px; 11 overflow: hidden; 12 } 13 14 #scroll-container { 15 overflow: hidden scroll; 16 scrollbar-width: none; 17 width: 100%; 18 height: 100%; 19 } 20 21 .anchor { 22 width: 100px; 23 height: 100px; 24 background: orange; 25 display: inline-block; 26 } 27 28 .target { 29 position: absolute; 30 position-visibility: no-overflow; 31 width: 100px; 32 height: 100px; 33 } 34 </style> 35 36 <div id="container"> 37 <div id="scroll-container"> 38 <div class="anchor" style="anchor-name: --a1;">anchor1</div> 39 <div class="anchor" style="anchor-name: --a2; position: relative; top: 100px">anchor2</div> 40 <div id="target1" class="target" style="position-anchor: --a1; top: anchor(bottom); background: green">target1</div> 41 <div id="target2" class="target" style="position-anchor: --a2; left: anchor(left); bottom: anchor(top); background: red">target2</div> 42 <div style="height: 300px"></div> 43 </div> 44 </div> 45 46 <script> 47 requestAnimationFrame(() => { 48 requestAnimationFrame(() => { 49 document.getElementById('scroll-container').scrollTop = 50; 50 document.documentElement.classList.remove('reftest-wait'); 51 }); 52 }); 53 </script> 54 </html>