anchor-name-inline-001.html (1654B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#target"> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#determining"> 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 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 10 <style> 11 .container { 12 font-family: Ahem; 13 font-size: 10px; 14 line-height: 1; 15 width: 10em; 16 } 17 .relpos { 18 position: relative; 19 } 20 .abspos { 21 position: absolute; 22 } 23 .anchor { 24 anchor-name: --a1; 25 background: orange; 26 } 27 .target { 28 position: absolute; 29 width: anchor-size(--a1 width); 30 height: 10px; 31 background: lime; 32 } 33 </style> 34 <body> 35 <div class="container relpos"> 36 <div style="height: 150px"></div> 37 <div class="relpos"> 38 <span class="target" data-expected-width=30></span> 39 <span class="relpos"> 40 <span class="target" data-expected-width=30></span> 41 <span class="relpos"> 42 <span class="target" data-expected-width=20></span> 43 <span class="anchor">12</span> 44 <span class="target" data-expected-width=20></span> 45 <span class="anchor abspos">123</span> 46 <span class="target" data-expected-width=30></span> 47 </span> 48 <span class="target" data-expected-width=30></span> 49 </span> 50 <span class="target" data-expected-width=30></span> 51 </div> 52 </div> 53 <script> 54 document.fonts.ready.then(() => checkLayoutForAnchorPos('.target')); 55 </script> 56 </body>