position-visibility-anchors-visible-after-scroll-out.html (1531B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <meta charset="utf-8"> 4 <meta name="assert" content="Scrolling an anchor out of view should cause a position-visibility: anchors-visible element to disappear." /> 5 <title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> 6 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility"> 7 <link rel="match" href="position-visibility-anchors-visible-after-scroll-out-ref.html"> 8 <script src="/common/reftest-wait.js"></script> 9 <script src="/common/rendering-utils.js"></script> 10 <style> 11 #scroll-container { 12 overflow: hidden scroll; 13 width: 300px; 14 height: 100px; 15 } 16 17 #anchor { 18 anchor-name: --a1; 19 width: 100px; 20 height: 100px; 21 background: orange; 22 } 23 24 #spacer { 25 height: 100px; 26 } 27 28 #target { 29 position-anchor: --a1; 30 position-visibility: anchors-visible; 31 position-area: bottom; 32 width: 100px; 33 height: 100px; 34 background: red; 35 position: absolute; 36 top: 0; 37 left: 0; 38 } 39 </style> 40 41 <div id="scroll-container"> 42 <div id="anchor">anchor</div> 43 <div id="spacer"></div> 44 <div id="target">target</div> 45 </div> 46 47 <script> 48 // #target should be initially visible because it is anchored to #anchor, 49 // which is visible. 50 51 waitForAtLeastOneFrame().then(() => { 52 // Scroll #anchor so that it is out of view. 53 const scroller = document.getElementById('scroll-container'); 54 scroller.scrollTop = 100; 55 56 // #target should now be invisible. 57 takeScreenshot(); 58 }); 59 </script>