anchor-name-002.html (2093B)
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 .abspos { 13 position: absolute; 14 } 15 .anchor1 { 16 anchor-name: --a1; 17 width: 10px; 18 height: 10px; 19 background: orange; 20 } 21 .target { 22 position: absolute; 23 width: anchor-size(--a1 width); 24 height: 10px; 25 background: lime; 26 } 27 </style> 28 <body onload="checkLayoutForAnchorPos('.target')"> 29 <div class="relpos"> 30 <div> 31 <div class="relpos"> 32 <!-- This target should not find the anchor, because the last containing 33 block has `position: absolute` and is after in tree order. --> 34 <div class="target" data-expected-width=0></div> 35 <div class="abspos"> 36 <div class="relpos"> 37 <!-- This target should not find the anchor, because the anchor is 38 absolutely positioned after it. --> 39 <div class="target" data-expected-width=0></div> 40 <div class="anchor1" style="position: absolute"></div> 41 <!-- This target should find the anchor, because the anchor is 42 absolutely positioned before it. --> 43 <div class="target" data-expected-width=10></div> 44 </div> 45 <!-- This target should find the anchor, because the last containing 46 block has `position: relative`. --> 47 <div class="target" data-expected-width=10></div> 48 </div> 49 <!-- This target should find the anchor, because the last containing 50 block has `position: absolute` and is before in tree order. --> 51 <div class="target" data-expected-width=10></div> 52 </div> 53 </div> 54 <!-- This target should find the anchor, because the last containing block 55 is statically positioned. --> 56 <div class="target" data-expected-width=10></div> 57 </div> 58 </body>