position-visibility-remove-no-overflow.html (1162B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <meta charset="utf-8"> 4 <title>CSS Anchor Positioning Test: position-visibility: no-overflow</title> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility"> 6 <link rel="match" href="position-visibility-remove-no-overflow-ref.html"> 7 <style> 8 #container { 9 position: relative; 10 width: 400px; 11 height: 150px; 12 } 13 14 .anchor { 15 width: 100px; 16 height: 100px; 17 background: orange; 18 display: inline-block; 19 } 20 21 .target { 22 position: absolute; 23 position-visibility: no-overflow; 24 position-area: block-end; 25 width: 100px; 26 height: 100px; 27 background: green; 28 inset: 0; 29 } 30 </style> 31 32 <div id="container"> 33 <!-- #target1 should not be visible because it overflows the containing block. --> 34 <div class="anchor" style="anchor-name: --a1;">anchor1</div> 35 <div id="target" class="target" style="position-anchor: --a1;">target1</div> 36 </div> 37 38 <script> 39 requestAnimationFrame(() => { 40 requestAnimationFrame(() => { 41 target.style.positionVisibility = 'initial'; 42 document.documentElement.classList.remove('reftest-wait'); 43 }); 44 }); 45 </script> 46 </html>