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