position-visibility-anchors-visible-after-scroll-in-document.html (1384B)
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 after scrolling in the document</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-document-ref.html"> 8 <script src="/common/reftest-wait.js"></script> 9 <script src="/common/rendering-utils.js"></script> 10 <style> 11 #anchor { 12 anchor-name: --anchor; 13 margin-left: 150vw; 14 width: 100px; 15 height: 100px; 16 background: orange; 17 } 18 19 #spacer { 20 height: 100px; 21 } 22 23 #target { 24 position-anchor: --anchor; 25 position-visibility: anchors-visible; 26 position-area: left center; 27 width: 100px; 28 height: 100px; 29 background: green; 30 position: absolute; 31 inset: 0; 32 } 33 </style> 34 35 <div id="anchor">anchor</div> 36 <div id="spacer"></div> 37 <div id="target">target</div> 38 39 <script> 40 document.documentElement.scrollLeft = 0; 41 waitForAtLeastOneFrame().then(() => { 42 // Scroll #anchor in to view. 43 document.documentElement.scrollLeft = document.documentElement.scrollWidth; 44 waitForAtLeastOneFrame().then(() => { 45 takeScreenshot(); 46 }); 47 }); 48 </script>