position-visibility-anchors-visible-change-css-visibility.html (1454B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <meta charset="utf-8"> 4 <meta name="assert" content="Position-visibility: anchors-visible should show an element after an anchor changes from visibility: hidden to visibility: 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-anchors-visible-change-css-visibility-ref.html"> 8 <script src="/common/reftest-wait.js"></script> 9 <script src="/common/rendering-utils.js"></script> 10 <style> 11 #container { 12 visibility: hidden; 13 } 14 15 #anchor { 16 anchor-name: --a1; 17 width: 100px; 18 height: 100px; 19 background: orange; 20 } 21 22 #target { 23 position-anchor: --a1; 24 position-visibility: anchors-visible; 25 position-area: bottom center; 26 width: 100px; 27 height: 100px; 28 background: green; 29 position: absolute; 30 inset: 0; 31 } 32 </style> 33 34 <div id="container"> 35 <div id="anchor">anchor</div> 36 </div> 37 <div id="target">target</div> 38 39 <script> 40 // #target should be initially hidden because it is anchored to #anchor, 41 // which is hidden with "visibility: hidden". 42 43 waitForAtLeastOneFrame().then(() => { 44 // Change #container to "visibility: visible". #target should become 45 // visible again, because #anchor is no longer hidden. 46 container.style.visibility = 'visible'; 47 takeScreenshot(); 48 }); 49 </script>