position-visibility-anchors-visible.html (1191B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="assert" content="Position-visibility: anchors-visible should hide an element with an out-of-view anchor." /> 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-ref.html"> 7 <style> 8 #scroll-container { 9 overflow: hidden scroll; 10 width: 300px; 11 height: 100px; 12 } 13 14 #anchor { 15 anchor-name: --a1; 16 width: 100px; 17 height: 100px; 18 background: orange; 19 } 20 21 #spacer { 22 height: 100px; 23 } 24 25 #target { 26 position-anchor: --a1; 27 position-visibility: anchors-visible; 28 position-area: bottom right; 29 width: 100px; 30 height: 100px; 31 background: red; 32 position: absolute; 33 top: 0; 34 left: 0; 35 } 36 </style> 37 38 <div id="scroll-container"> 39 <div id="anchor">anchor</div> 40 <div id="spacer"></div> 41 <div id="target">target</div> 42 </div> 43 44 <script> 45 const scroller = document.getElementById('scroll-container'); 46 scroller.scrollTop = 100; 47 // #target should not be visible because #anchor is scrolled out of view. 48 </script>