anchor-name-003.html (5868B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#determining"> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name"> 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 } 13 .abspos { 14 position: absolute; 15 } 16 .anchor1 { 17 anchor-name: --a1; 18 width: 10px; 19 height: 10px; 20 background: orange; 21 } 22 .target { 23 position: absolute; 24 width: anchor-size(--a1 width); 25 height: 10px; 26 background: lime; 27 } 28 </style> 29 <body onload="checkLayoutForAnchorPos('.target')"> 30 <!-- In-flow and out-of-flow boxes in a containing block. --> 31 <div class="relpos"> 32 <div class="target" data-expected-width=30></div> 33 <div> 34 <div class="target" data-expected-width=30></div> 35 <div class="relpos"> 36 <div class="target" data-expected-width=0></div> 37 <div class="abspos"> 38 <div class="target" data-expected-width=30></div> 39 <div class="relpos"> 40 <div class="target" data-expected-width=40></div> 41 <div class="anchor1" style="width: 20px"></div> 42 <div class="anchor1" style="position: absolute; width: 10px"></div> 43 <div class="anchor1" style="width: 40px"></div> 44 <div class="anchor1" style="position: absolute; width: 30px"></div> 45 <div class="target" data-expected-width=30></div> 46 </div> 47 </div> 48 <div class="target" data-expected-width=30></div> 49 </div> 50 <div class="target" data-expected-width=30></div> 51 </div> 52 <div class="target" data-expected-width=30></div> 53 </div> 54 55 <!-- In-flow boxes in ancestors, after the propagated ones. --> 56 <div class="relpos"> 57 <div> 58 <div class="relpos"> 59 <div class="target" data-expected-width=0></div> 60 <div class="abspos"> 61 <div class="relpos"> 62 <div class="target" data-expected-width=20></div> 63 <div class="anchor1" style="width: 20px"></div> 64 <div class="anchor1" style="position: absolute; width: 10px"></div> 65 <div class="target" data-expected-width=10></div> 66 </div> 67 <div class="anchor1" style="width: 50px"></div> 68 <div class="target" data-expected-width=50></div> 69 </div> 70 <div class="target" data-expected-width=50></div> 71 </div> 72 <div class="anchor1" style="width: 60px"></div> 73 <div class="target" data-expected-width=70></div> 74 </div> 75 <div class="anchor1" style="width: 70px"></div> 76 <div class="target" data-expected-width=70></div> 77 </div> 78 79 <!-- Out-of-flow boxes in ancestors, after the propagated ones. --> 80 <div class="relpos"> 81 <div> 82 <div class="relpos"> 83 <div class="target" data-expected-width=0></div> 84 <div class="abspos"> 85 <div class="relpos"> 86 <div class="target" data-expected-width=20></div> 87 <div class="anchor1" style="width: 20px"></div> 88 <div class="anchor1" style="position: absolute; width: 10px"></div> 89 <div class="target" data-expected-width=10></div> 90 </div> 91 <div class="anchor1" style="position: absolute; width: 110px"></div> 92 <div class="target" data-expected-width=110></div> 93 </div> 94 <div class="target" data-expected-width=110></div> 95 </div> 96 <div class="target" data-expected-width=110></div> 97 </div> 98 <div class="anchor1" style="position: absolute; width: 100px"></div> 99 <div class="target" data-expected-width=100></div> 100 </div> 101 102 <!-- In-flow boxes in ancestors, before the propagated ones. --> 103 <div class="relpos"> 104 <div> 105 <div class="relpos"> 106 <div class="abspos"> 107 <div class="relpos"> 108 <div class="target" data-expected-width=20></div> 109 <div class="anchor1" style="position: absolute; width: 10px"></div> 110 <div class="anchor1" style="width: 20px"></div> 111 <div class="target" data-expected-width=20></div> 112 </div> 113 <div class="anchor1" style="width: 120px"></div> 114 <div class="target" data-expected-width=120></div> 115 </div> 116 <div class="anchor1" style="width: 110px"></div> 117 <div class="target" data-expected-width=110></div> 118 </div> 119 <div class="target" data-expected-width=100></div> 120 </div> 121 <div class="anchor1" style="width: 100px"></div> 122 <div class="target" data-expected-width=100></div> 123 </div> 124 125 <!-- Out-of-flow boxes in ancestors, before the propagated ones. --> 126 <div class="relpos"> 127 <div class="target" data-expected-width=10></div> 128 <div class="anchor1" style="position: absolute; width: 100px"></div> 129 <div> 130 <div class="target" data-expected-width=10></div> 131 <div class="relpos"> 132 <div class="target" data-expected-width=0></div> 133 <div class="anchor1" style="position: absolute; width: 110px"></div> 134 <div class="abspos"> 135 <div class="target" data-expected-width=10></div> 136 <div class="anchor1" style="position: absolute; width: 120px"></div> 137 <div class="relpos"> 138 <div class="target" data-expected-width=20></div> 139 <div class="anchor1" style="width: 20px"></div> 140 <div class="anchor1" style="position: absolute; width: 10px"></div> 141 <div class="target" data-expected-width=10></div> 142 </div> 143 <div class="target" data-expected-width=10></div> 144 </div> 145 <div class="target" data-expected-width=10></div> 146 </div> 147 <div class="target" data-expected-width=10></div> 148 </div> 149 <div class="target" data-expected-width=10></div> 150 </div> 151 </body>