position-visibility-anchors-visible-non-intervening-container.html (1776B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="assert" content="position-visibility: anchors-visible should consider the visibility of the anchor relative the containing scroller, ignoring visibility in other scrollers." /> 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-non-intervening-container-ref.html"> 7 <style> 8 #non-intervening-scroll-container { 9 overflow: hidden; 10 width: 200px; 11 height: 200px; 12 position: relative; 13 } 14 15 #position-container { 16 position: relative; 17 } 18 19 #scroll-container { 20 overflow: hidden scroll; 21 width: 400px; 22 height: 100px; 23 } 24 25 #anchor { 26 anchor-name: --a1; 27 width: 100px; 28 height: 100px; 29 background: orange; 30 } 31 32 #spacer { 33 height: 100px; 34 } 35 36 #target { 37 position-anchor: --a1; 38 position-visibility: anchors-visible; 39 position-area: right; 40 width: 100px; 41 height: 100px; 42 background: green; 43 position: absolute; 44 top: 0; 45 left: 0; 46 } 47 </style> 48 49 <div id="non-intervening-scroll-container"> 50 <div id="position-container"> 51 <div id="scroll-container"> 52 <!-- The anchor is not visible to the screen, but it is visible in the --> 53 <!-- containing block of anchor1 and target1, so the target should not --> 54 <!-- be hidden due to position-visibility: anchors-visible. --> 55 <div id="anchor">anchor</div> 56 <div id="spacer"></div> 57 <div id="target">target</div> 58 </div> 59 </div> 60 </div> 61 62 <script> 63 const non_intervening_scroller = document.getElementById('non-intervening-scroll-container'); 64 non_intervening_scroller.scrollLeft = 100; 65 </script>