anchor-name-001.html (1140B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#determining"> 3 <link rel="author" href="mailto:kojii@chromium.org"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/check-layout-th.js"></script> 7 <script src="support/test-common.js"></script> 8 <style> 9 .relpos { 10 position: relative; 11 } 12 .anchor1 { 13 anchor-name: --a1; 14 width: 10px; 15 height: 10px; 16 background: orange; 17 } 18 .target { 19 position: absolute; 20 width: anchor-size(--a1 width); 21 height: 10px; 22 background: lime; 23 } 24 </style> 25 <body onload="checkLayoutForAnchorPos('.target')"> 26 <!-- 27 All targets should find the 30px anchor, because it's the last 28 one in the pre-order DFS from the `relpos`. 29 --> 30 <div class="relpos"> 31 <div class="target" data-expected-width=30></div> 32 <div class="anchor1" style="width: 10px"> 33 <div class="anchor1" style="width: 20px"></div> 34 <div class="target" data-expected-width=30></div> 35 </div> 36 <div class="anchor1" style="width: 30px"></div> 37 <div class="target" data-expected-width=30></div> 38 </div> 39 </body>