anchor-position-004.html (3941B)
1 <!DOCTYPE html> 2 <title>The `anchor()` function with percentages</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos"> 4 <link rel="author" href="mailto:kojii@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/check-layout-th.js"></script> 8 <script src="support/test-common.js"></script> 9 <style> 10 .relpos { 11 position: relative; 12 width: 200px; 13 outline: 1px solid; 14 } 15 .vrl-rtl { 16 writing-mode: vertical-rl; 17 direction: rtl; 18 } 19 .spacer { 20 background: yellow; 21 width: 10px; 22 height: 10px; 23 } 24 #anchor { 25 anchor-name: --a1; 26 margin: 20px; 27 width: 100px; 28 height: 200px; 29 background: orange; 30 } 31 .target { 32 position: absolute; 33 } 34 </style> 35 <body onload="checkLayoutForAnchorPos('.target')"> 36 <div class="relpos"> 37 <div class="spacer"></div> 38 <div id="anchor"></div> 39 40 <div class="target" style="left: anchor(--a1 0%)" 41 data-offset-x="20"></div> 42 <div class="target" style="left: anchor(--a1 20%)" 43 data-offset-x="40"></div> 44 <div class="target" style="left: anchor(--a1 50%)" 45 data-offset-x="70"></div> 46 <div class="target" style="left: anchor(--a1 center)" 47 data-offset-x="70"></div> 48 <div class="target" style="left: anchor(--a1 80%)" 49 data-offset-x="100"></div> 50 <div class="target" style="left: anchor(--a1 100%)" 51 data-offset-x="120"></div> 52 53 <div class="target" style="right: anchor(--a1 0%)" 54 data-offset-x="20"></div> 55 <div class="target" style="right: anchor(--a1 20%)" 56 data-offset-x="40"></div> 57 <div class="target" style="right: anchor(--a1 50%)" 58 data-offset-x="70"></div> 59 <div class="target" style="right: anchor(--a1 center)" 60 data-offset-x="70"></div> 61 <div class="target" style="right: anchor(--a1 80%)" 62 data-offset-x="100"></div> 63 <div class="target" style="right: anchor(--a1 100%)" 64 data-offset-x="120"></div> 65 66 <div class="target" style="top: anchor(--a1 0%)" 67 data-offset-y="30"></div> 68 <div class="target" style="top: anchor(--a1 20%)" 69 data-offset-y="70"></div> 70 <div class="target" style="top: anchor(--a1 50%)" 71 data-offset-y="130"></div> 72 <div class="target" style="top: anchor(--a1 center)" 73 data-offset-y="130"></div> 74 <div class="target" style="top: anchor(--a1 80%)" 75 data-offset-y="190"></div> 76 <div class="target" style="top: anchor(--a1 100%)" 77 data-offset-y="230"></div> 78 79 <div class="target" style="bottom: anchor(--a1 0%)" 80 data-offset-y="30"></div> 81 <div class="target" style="bottom: anchor(--a1 20%)" 82 data-offset-y="70"></div> 83 <div class="target" style="bottom: anchor(--a1 50%)" 84 data-offset-y="130"></div> 85 <div class="target" style="bottom: anchor(--a1 center)" 86 data-offset-y="130"></div> 87 <div class="target" style="bottom: anchor(--a1 80%)" 88 data-offset-y="190"></div> 89 <div class="target" style="bottom: anchor(--a1 100%)" 90 data-offset-y="230"></div> 91 </div> 92 93 <div class="vrl-rtl relpos"> 94 <div class="spacer"></div> 95 <div id="anchor"></div> 96 97 <div class="target" style="left: anchor(--a1 0%)" 98 data-offset-x="170"></div> 99 <div class="target" style="left: anchor(--a1 100%)" 100 data-offset-x="70"></div> 101 102 <div class="target" style="right: anchor(--a1 0%)" 103 data-offset-x="170"></div> 104 <div class="target" style="right: anchor(--a1 100%)" 105 data-offset-x="70"></div> 106 107 <div class="target" style="top: anchor(--a1 0%)" 108 data-offset-y="220"></div> 109 <div class="target" style="top: anchor(--a1 100%)" 110 data-offset-y="20"></div> 111 112 <div class="target" style="bottom: anchor(--a1 0%)" 113 data-offset-y="220"></div> 114 <div class="target" style="bottom: anchor(--a1 100%)" 115 data-offset-y="20"></div> 116 </div> 117 </body>