anchor-size-css-zoom.html (1197B)
1 <!DOCTYPE html> 2 3 <title>CSS Anchor Positioning: tests that anchor-size() works with CSS zoom property</title> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-size-fn"> 5 <link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property"> 6 <link rel="author" href="mailto:kiet.ho@apple.com"> 7 <link rel="match" href="reference/anchor-size-css-zoom-ref.html"> 8 9 <style> 10 #containing-block { 11 position: relative; 12 13 zoom: 2; 14 } 15 16 #anchor { 17 position: absolute; 18 19 width: 200px; 20 height: 100px; 21 22 anchor-name: --anchor; 23 24 background: red; 25 } 26 27 #anchor-positioned { 28 position: absolute; 29 30 width: anchor-size(--anchor width); 31 height: anchor-size(--anchor height); 32 33 background: green; 34 35 z-index: 1; 36 } 37 </style> 38 39 Test passes if no red is visible. 40 41 <div id="containing-block"> 42 <!-- 43 Both rectangles below overlaps. 44 #anchor is red, #anchor-positioned is green and above #anchor in Z order. 45 If no red is visible then #anchor-positioned has fully covered #anchor. 46 --> 47 <div id="anchor"></div> 48 <div id="anchor-positioned"></div> 49 </div>