position-visibility-anchors-visible-with-position.html (1322B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="assert" content="Position-visibility: anchors-visible should not hide an element with an out-of-view anchor and a relpos scroller." /> 4 <title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility"> 6 <link rel="match" href="position-visibility-anchors-visible-with-position-ref.html"> 7 <style> 8 #scroll-container { 9 overflow: hidden scroll; 10 width: 300px; 11 height: 100px; 12 /* Same as position-visibility-anchors-visible.html, but with relpos here */ 13 position: relative; 14 } 15 16 #anchor { 17 anchor-name: --a1; 18 width: 100px; 19 height: 100px; 20 background: orange; 21 } 22 23 #spacer { 24 height: 100px; 25 } 26 27 #target { 28 position-anchor: --a1; 29 position-visibility: anchors-visible; 30 position-area: bottom right; 31 width: 100px; 32 height: 100px; 33 background: green; 34 position: absolute; 35 inset: 0; 36 } 37 </style> 38 39 <div id="scroll-container"> 40 <div id="anchor">anchor</div> 41 <div id="spacer"></div> 42 <div id="target">target</div> 43 </div> 44 45 <script> 46 const scroller = document.getElementById('scroll-container'); 47 scroller.scrollTop = 100; 48 // #target should be visible because there are no intervening clips. 49 </script>