position-visibility-remove-anchors-visible.html (1760B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <meta charset="utf-8"> 4 <meta name="assert" content="Removing position-visibility: anchors-visible from an invisible anchored element should cause it to become visible." /> 5 <title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> 6 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility"> 7 <link rel="match" href="position-visibility-remove-anchors-visible-ref.html"> 8 <script src="/common/reftest-wait.js"></script> 9 <script src="/common/rendering-utils.js"></script> 10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 11 <style> 12 #scroll-container { 13 overflow: hidden scroll; 14 width: 300px; 15 height: 100px; 16 font: 20px/1 Ahem; 17 } 18 19 #anchor { 20 anchor-name: --a1; 21 width: 100px; 22 height: 100px; 23 background: orange; 24 font: 20px/1 Ahem; 25 } 26 27 #spacer { 28 height: 100px; 29 } 30 31 #target { 32 position-anchor: --a1; 33 position-visibility: anchors-visible; 34 position-area: bottom; 35 width: 100px; 36 height: 100px; 37 background: green; 38 position: absolute; 39 inset: 0; 40 font: 20px/1 Ahem; 41 } 42 </style> 43 44 <div id="scroll-container"> 45 <div id="anchor">anchor</div> 46 <div id="spacer"></div> 47 <div id="target">target</div> 48 </div> 49 50 <script> 51 // #target should be initially visible because it is anchored to #anchor, 52 // which is visible. 53 54 // Scroll #anchor so that it is no longer visible. 55 const scroller = document.getElementById('scroll-container'); 56 scroller.scrollTop = 100; 57 58 waitForAtLeastOneFrame().then(() => { 59 // Remove position-visibility: anchors-visible. #target should become 60 // visible again. 61 target.style.positionVisibility = 'always'; 62 takeScreenshot(); 63 }); 64 </script>