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