position-visibility-anchors-visible-chained-003.html (1780B)
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-after-scroll-out-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 width: 300px; 13 height: 100px; 14 } 15 16 #anchor1 { 17 anchor-name: --a1; 18 width: 100px; 19 height: 100px; 20 background: orange; 21 } 22 23 .spacer { 24 height: 100px; 25 } 26 27 #anchor2 { 28 anchor-name: --a2; 29 position-anchor: --a1; 30 } 31 32 #anchor3 { 33 anchor-name: --a3; 34 position-anchor: --a2; 35 } 36 37 #anchor4 { 38 anchor-name: --a4; 39 position-anchor: --a3; 40 } 41 42 .anchored { 43 position-visibility: anchors-visible; 44 position-area: bottom; 45 width: 100px; 46 height: 50px; 47 background: red; 48 position: absolute; 49 top: 0; 50 left: 0; 51 } 52 53 #target { 54 position-anchor: --a4; 55 } 56 </style> 57 58 <div id="scroll-container"> 59 <div id="anchor1">anchor1</div> 60 <div class="spacer"></div> 61 <div id="anchor2" class="anchored">anchor2</div> 62 <div id="anchor3" class="anchored">anchor3</div> 63 <div id="anchor4" class="anchored">anchor4</div> 64 <div id="target" class="anchored">target</div> 65 </div> 66 67 <script> 68 // #target should be initially visible because it is anchored to #anchor2 69 // which is chained to #anchor1 and both anchors are visible. 70 waitForAtLeastOneFrame().then(() => { 71 // Scroll #anchor1 so that it is out of view. 72 document.getElementById('scroll-container').scrollTop = 100; 73 74 // #target should now be invisible. 75 takeScreenshot(); 76 }); 77 </script>