position-visibility-anchors-visible-chained-001.html (1652B)
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 #anchor2 { 24 anchor-name: --a2; 25 width: 100px; 26 height: 50px; 27 background: yellow; 28 } 29 30 .spacer { 31 height: 100px; 32 } 33 34 .anchored { 35 position-visibility: anchors-visible; 36 position-area: bottom; 37 width: 100px; 38 height: 50px; 39 background: red; 40 position: absolute; 41 top: 0; 42 left: 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 #anchor1 so that it is out of view. 68 document.getElementById('scroll-container').scrollTop = 100; 69 70 // #target should now be invisible. 71 takeScreenshot(); 72 }); 73 </script>