position-visibility-anchors-visible-stacked-child.tentative.html (1414B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="assert" content="Position-visibility: anchors-visible should hide an element and stacked children with an out-of-view anchor." /> 4 <title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> 5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> 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 #stacking-child { 37 /* stacking context */ 38 z-index: 1; 39 width: 100px; 40 height: 100px; 41 background: maroon; 42 position: absolute; 43 top: 25px; 44 left: 25px; 45 } 46 </style> 47 48 <div id="scroll-container"> 49 <div id="anchor">anchor</div> 50 <div id="spacer"></div> 51 <div id="target">target 52 <div id="stacking-child"></div> 53 </div> 54 </div> 55 56 <script> 57 const scroller = document.getElementById('scroll-container'); 58 scroller.scrollTop = 100; 59 // #target should not be visible because #anchor is scrolled out of view. 60 </script>