position-visibility-anchors-visible-chained-002.html (1559B)
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 #chained { 24 position-anchor: --a1; 25 anchor-name: --a2; 26 background: yellow; 27 } 28 29 .spacer { 30 height: 100px; 31 } 32 33 .anchored { 34 position-visibility: anchors-visible; 35 position-area: bottom; 36 width: 100px; 37 height: 50px; 38 background: red; 39 position: absolute; 40 top: 0; 41 left: 0; 42 } 43 44 #target { 45 position-anchor: --a2; 46 } 47 </style> 48 49 <div id="scroll-container"> 50 <div id="anchor1">anchor1</div> 51 <div class="spacer"></div> 52 <div id="chained" class="anchored"></div> 53 <div id="target" class="anchored">target</div> 54 </div> 55 56 <script> 57 // #target should be initially visible because it is anchored to #anchor2 58 // which is chained to #anchor1 and both anchors are visible. 59 waitForAtLeastOneFrame().then(() => { 60 // Scroll #anchor1 so that it is out of view. 61 document.getElementById('scroll-container').scrollTop = 100; 62 63 // #target should now be invisible. 64 takeScreenshot(); 65 }); 66 </script>