position-visibility-anchors-visible-in-overflow.html (1767B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="assert" content="A position-visibility: anchors-visible element should be visible if the anchor is under overflow: visible." /> 4 <title>CSS Anchor Positioning Test: position-visibility: anchors-visible in overflow</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-in-overflow-ref.html"> 7 <style> 8 #outer-container { 9 width: 100px; 10 height: 100px; 11 overflow: visible; 12 position: relative; 13 } 14 #inner-container { 15 width: 100px; 16 height: 100px; 17 overflow: visible; 18 position: relative; 19 } 20 #anchor { 21 anchor-name: --anchor; 22 position: relative; 23 margin-left: 200px; 24 width: 100px; 25 height: 100px; 26 background: orange; 27 } 28 #spacer { 29 height: 200px; 30 } 31 #target-a { 32 position-anchor: --anchor; 33 position-visibility: anchors-visible; 34 position-area: top left; 35 width: 50px; 36 height: 50px; 37 background: green; 38 position: absolute; 39 inset: 0; 40 } 41 #target-b { 42 position-anchor: --anchor; 43 position-visibility: anchors-visible; 44 position-area: center left; 45 width: 50px; 46 height: 50px; 47 background: green; 48 position: absolute; 49 inset: 0; 50 } 51 #target-c { 52 position-anchor: --anchor; 53 position-visibility: anchors-visible; 54 position-area: bottom left; 55 width: 50px; 56 height: 50px; 57 background: green; 58 position: absolute; 59 inset: 0; 60 } 61 </style> 62 63 <div id="outer-container"> 64 <div id="inner-container"> 65 <div id="spacer"></div> 66 <div id="anchor">anchor</div> 67 <div id="target-a">target-a</div> 68 </div> 69 <div id="target-b">target-b</div> 70 </div> 71 <div id="target-c">target-c</div>