position-visibility-anchors-visible-after-scroll-in.html (1708B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <meta charset="utf-8"> 4 <meta name="assert" content="Scrolling an anchor in to view should cause a position-visibility: anchors-visible element to appear." /> 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-in-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 scrollbar-width: none; 14 width: 300px; 15 height: 100px; 16 } 17 18 #anchor { 19 anchor-name: --a1; 20 width: 100px; 21 height: 100px; 22 background: orange; 23 } 24 25 #spacer { 26 height: 100px; 27 } 28 29 #target { 30 position-anchor: --a1; 31 position-visibility: anchors-visible; 32 position-area: block-end center; 33 width: 100px; 34 height: 100px; 35 background: green; 36 position: absolute; 37 inset: 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 waitForAtLeastOneFrame().then(() => { 51 // Scroll #anchor out of view. 52 const scroller = document.getElementById('scroll-container'); 53 scroller.scrollTop = 100; 54 // #target should now be invisible. 55 56 waitForAtLeastOneFrame().then(() => { 57 // Scroll #anchor back into view. 58 scroller.scrollTop = 0; 59 60 // #target should now be visible again. 61 takeScreenshot(); 62 }); 63 }); 64 </script>