anchor-scroll-position-try-015.tentative.html (1110B)
1 <!DOCTYPE html> 2 <title>Scrolling further up shouldn't trigger the anchored element to grow.</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-try-fallbacks"> 4 <link rel="match" href="anchor-scroll-position-try-015-ref.html"> 5 <style> 6 #anchor { 7 anchor-name: --a; 8 margin-top: 200px; 9 width: 100px; 10 height: 100px; 11 background: blue; 12 } 13 #anchored { 14 position: absolute; 15 position-anchor: --a; 16 position-area: top center; 17 position-try-fallbacks: flip-block; 18 width: 100%; 19 height: 100%; 20 min-height: 100px; 21 background: green; 22 } 23 </style> 24 25 <div style="position:relative; width:200px; height:300px;"> 26 <div id="scroller" style="overflow:scroll; scrollbar-width:none; width:100%; height:100%;"> 27 <div id="anchor"></div> 28 <div style="width:1000px; height:1000px;"></div> 29 <div id="anchored"></div> 30 </div> 31 </div> 32 33 <script> 34 scroller.scrollTop = 150; 35 requestAnimationFrame(() => { 36 requestAnimationFrame(() => { 37 scroller.scrollTop = 200; 38 document.documentElement.classList.remove('reftest-wait'); 39 }); 40 }); 41 </script>