position-visibility-initial.html (1120B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="assert" content="Position-visibility: anchors-visible should be the initial value." /> 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-initial-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-area: bottom right; 28 width: 100px; 29 height: 100px; 30 background: red; 31 position: absolute; 32 top: 0; 33 left: 0; 34 } 35 </style> 36 37 <div id="scroll-container"> 38 <div id="anchor">anchor</div> 39 <div id="spacer"></div> 40 <div id="target">target</div> 41 </div> 42 43 <script> 44 const scroller = document.getElementById('scroll-container'); 45 scroller.scrollTop = 100; 46 // #target should not be visible because #anchor is scrolled out of view. 47 </script>