position-visibility-anchors-visible-chained-004.html (1856B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <meta charset="utf-8"> 4 <title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> 5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> 6 <link rel="match" href="position-visibility-anchors-visible-chained-004-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <script src="/common/rendering-utils.js"></script> 9 <style> 10 #scroll-container { 11 overflow: hidden scroll; 12 scrollbar-width: none; 13 width: 300px; 14 height: 100px; 15 } 16 17 #anchor1 { 18 anchor-name: --a1; 19 width: 100px; 20 height: 100px; 21 background: orange; 22 } 23 24 #anchor2 { 25 anchor-name: --a2; 26 width: 100px; 27 height: 50px; 28 background: blue; 29 } 30 31 .spacer { 32 height: 100px; 33 } 34 35 .anchored { 36 position-visibility: anchors-visible; 37 position-area: bottom center; 38 width: 100px; 39 height: 50px; 40 background: green; 41 position: absolute; 42 inset: 0; 43 } 44 45 #chained { 46 position-anchor: --a1; 47 } 48 49 #target { 50 position-anchor: --a2; 51 } 52 </style> 53 54 <div id="scroll-container"> 55 <div id="anchor1">anchor1</div> 56 <div class="spacer"></div> 57 <div id="chained" class="anchored"> 58 <div id="anchor2">chained</div> 59 </div> 60 <div id="target" class="anchored">target</div> 61 </div> 62 63 <script> 64 // #target should be initially visible because it is anchored to #anchor2 65 // which is chained to #anchor1 and both anchors are visible. 66 waitForAtLeastOneFrame().then(() => { 67 // Scroll #anchor out of view. 68 const scroller = document.getElementById('scroll-container'); 69 scroller.scrollTop = 100; 70 // #target1 should now be invisible. 71 72 waitForAtLeastOneFrame().then(() => { 73 // Scroll #anchor back into view. 74 scroller.scrollTop = 0; 75 76 // #target should now be visible again. 77 takeScreenshot(); 78 }); 79 }); 80 </script>