position-visibility-anchors-valid.tentative.html (949B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Anchor Positioning Test: position-visibility: anchors-valid</title> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility"> 5 <link rel="match" href="position-visibility-anchors-valid-ref.html"> 6 <style> 7 .anchor { 8 width: 100px; 9 height: 100px; 10 background: orange; 11 display: inline-block; 12 } 13 14 .target { 15 position: absolute; 16 position-visibility: anchors-valid; 17 position-area: block-end; 18 width: 100px; 19 height: 100px; 20 background: red; 21 inset: 0; 22 } 23 </style> 24 25 <!-- #target1 should be visible. --> 26 <div class="anchor" style="anchor-name: --a1;">anchor1</div> 27 <div id="target1" class="target" style="position-anchor: --a1; background: green">target1</div> 28 29 <!-- #target2 should not be visible because anchor name does not exist. --> 30 <div id="target2" class="target" style="top: anchor(--does-not-exist bottom);">target2</div>