anchor-name-multicol-002.html (1569B)
1 <!DOCTYPE html> 2 <title>Anchors in OOF in multicol</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos"> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-size"> 6 <link rel="author" href="mailto:kojii@chromium.org"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/check-layout-th.js"></script> 10 <script src="support/test-common.js"></script> 11 <style> 12 .relpos { 13 position: relative; 14 } 15 .abspos { 16 position: absolute; 17 } 18 .columns { 19 column-count: 2; 20 column-fill: auto; 21 column-gap: 10px; 22 column-width: 100px; 23 width: 210px; 24 height: 100px; 25 } 26 .spacer { 27 height: 10px; 28 background: pink; 29 } 30 .anchor { 31 anchor-name: --a1; 32 margin-left: 10px; 33 width: 40px; 34 height: 60px; 35 background: orange; 36 } 37 .target { 38 position: absolute; 39 background: lime; 40 opacity: .5; 41 position-anchor: --a1; 42 left: anchor(left); 43 top: anchor(top); 44 width: anchor-size(width); 45 height: anchor-size(height); 46 } 47 </style> 48 <body onload="checkLayoutForAnchorPos('.target')"> 49 <div class="spacer"></div> 50 <div class="columns"> 51 <div class="relpos"> 52 <div class="relpos"> 53 <div class="abspos"> 54 <div class="spacer"></div> 55 <div class="anchor"></div> 56 </div> 57 </div> 58 <div class="target" 59 data-offset-x=10 data-offset-y=10 60 data-expected-width=40 data-expected-height=60></div> 61 </div> 62 </div> 63 </body>