position-visibility-no-overflow-scroll-002.html (1494B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>CSS Anchor Positioning Test: position-visibility: no-overflow + scrolling + position-area</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 #scroll-container { 14 overflow: hidden scroll; 15 scrollbar-width: none; 16 width: 100%; 17 height: 100%; 18 } 19 20 .anchor { 21 width: 100px; 22 height: 100px; 23 background: orange; 24 display: inline-block; 25 } 26 27 .target { 28 position: absolute; 29 position-visibility: no-overflow; 30 width: 100px; 31 height: 100px; 32 } 33 </style> 34 35 <div id="container"> 36 <div id="scroll-container"> 37 <div class="anchor" style="anchor-name: --a1;">anchor1</div> 38 <div class="anchor" style="anchor-name: --a2; position: relative; top: 100px">anchor2</div> 39 <div id="target1" class="target" style="position-anchor: --a1; position-area: bottom; background: green">target1</div> 40 <div id="target2" class="target" style="position-anchor: --a2; position-area: top; background: red">target2</div> 41 <div style="height: 300px"></div> 42 </div> 43 </div> 44 45 <script> 46 requestAnimationFrame(() => { 47 requestAnimationFrame(() => { 48 document.getElementById('scroll-container').scrollTop = 50; 49 document.documentElement.classList.remove('reftest-wait'); 50 }); 51 }); 52 </script> 53 </html>