anchor-position-multicol-001.html (1303B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name"> 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 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <style> 10 #container { 11 position: relative; 12 font-family: Ahem; 13 font-size: 10px; 14 line-height: 1; 15 width: 10em; 16 } 17 .columns { 18 column-width: 100px; 19 column-count: 3; 20 column-gap: 10px; 21 height: 100px; 22 } 23 #anchor1 { 24 anchor-name: --a1; 25 background: blue; 26 } 27 .target { 28 position: absolute; 29 } 30 </style> 31 <body onload="checkLayoutForAnchorPos('.target')"> 32 <div id="container"> 33 <div>spacer</div> 34 <div class="columns"> 35 <div style="height: 150px"></div> 36 <div id="anchor1" style="height: 100px"></div> 37 </div> 38 39 <div class="target" style="left: anchor(--a1 left)" data-offset-x=110></div> 40 <div class="target" style="right: anchor(--a1 right)" data-offset-x=320></div> 41 <div class="target" style="top: anchor(--a1 top)" data-offset-y=10></div> 42 <div class="target" style="bottom: anchor(--a1 bottom)" data-offset-y=110></div> 43 </div> 44 </body>