anchor-css-zoom.html (2020B)
1 <!DOCTYPE html> 2 3 <title>CSS Anchor Positioning: tests that anchor() works with CSS zoom property</title> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-pos"> 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-css-zoom-ref.html"> 8 9 <style> 10 .containing-block { 11 position: relative; 12 width: 150px; 13 height: 150px; 14 15 zoom: 2; 16 } 17 18 .cell { 19 width: 50px; 20 height: 50px; 21 } 22 23 #anchor-cell { 24 position: absolute; 25 top: 50px; 26 left: 50px; 27 28 anchor-name: --anchor; 29 30 background: green; 31 } 32 33 .anchor-positioned-cell { 34 position: absolute; 35 position-anchor: --anchor; 36 } 37 38 #top-left { 39 top: 0; 40 right: anchor(left); 41 42 background: cyan; 43 } 44 45 #top-right { 46 top: 0; 47 left: anchor(right); 48 49 background: magenta; 50 } 51 52 #bottom-left { 53 bottom: 0; 54 right: anchor(left); 55 56 background: yellow; 57 } 58 59 #bottom-right { 60 bottom: 0; 61 left: anchor(right); 62 63 background: black; 64 } 65 </style> 66 67 <body> 68 <!-- 69 The boxes below are arranged like this: 70 (the outside box is .containing-block) 71 72 ------------- 73 | 1 | | 2 | 74 |---|---|---| 75 | | A | | 76 |---|---|---| 77 | 3 | | 4 | 78 ------------- 79 --> 80 81 <div class="containing-block"> 82 <!-- Box A --> 83 <div class="cell" id="anchor-cell"></div> 84 85 <!-- Box 1 --> 86 <div class="cell anchor-positioned-cell" id="top-left"></div> 87 88 <!-- Box 2 --> 89 <div class="cell anchor-positioned-cell" id="top-right"></div> 90 91 <!-- Box 3 --> 92 <div class="cell anchor-positioned-cell" id="bottom-left"></div> 93 94 <!-- Box 4 --> 95 <div class="cell anchor-positioned-cell" id="bottom-right"></div> 96 </div> 97 </body>