anchor-position-003.html (1671B)
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 .cb { 10 position: relative; 11 } 12 .not-positioned-cb { 13 transform: translate(0, 0); /* Make it a containing block. */ 14 } 15 .anchor1 { 16 anchor-name: --a1; 17 } 18 .size5x7 { 19 width: 5px; 20 height: 7px; 21 background: orange; 22 } 23 .size9x11 { 24 width: 9px; 25 height: 11px; 26 background: blue; 27 } 28 .target { 29 position: absolute; 30 } 31 </style> 32 <!-- 33 To determine the target anchor element, find the last acceptable anchor 34 element el in tree order. 35 https://drafts.csswg.org/css-anchor-1/#determining 36 --> 37 <body onload="checkLayoutForAnchorPos('.target')"> 38 <div class="cb"> 39 <div class="anchor1 size5x7"></div> 40 <div class="anchor1 size9x11"></div> 41 <div class="target" style="left: anchor(--a1 right)" data-offset-x=9></div> 42 </div> 43 44 <div class="cb"> 45 <div class="anchor1 size5x7"> 46 <div class="anchor1 size9x11"></div> 47 <div class="target" style="left: anchor(--a1 right)" data-offset-x=9></div> 48 </div> 49 <div class="target" style="left: anchor(--a1 right)" data-offset-x=9></div> 50 </div> 51 52 <div class="cb"> 53 <div class="anchor1 size5x7 not-positioned-cb"> 54 <div class="anchor1 size9x11"></div> 55 <div class="target" style="left: anchor(--a1 right)" data-offset-x=9></div> 56 </div> 57 <div class="target" style="left: anchor(--a1 right)" data-offset-x=9></div> 58 </div> 59 </body>