anchor-position-multicol-005.html (1722B)
1 <!DOCTYPE html> 2 <title>Overflow pushing anchors to later fragmentainers than querying element 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 .anchor1 { 31 anchor-name: --a1; 32 margin-left: 10px; 33 width: 40px; 34 height: 80px; 35 background: orange; 36 } 37 .target { 38 position: absolute; 39 background: lime; 40 opacity: 1; 41 } 42 .target1 { 43 left: anchor(--a1 left); 44 top: anchor(--a1 top); 45 width: anchor-size(--a1 width); 46 height: anchor-size(--a1 height); 47 } 48 </style> 49 <body onload="checkLayoutForAnchorPos('.target')"> 50 <div class="spacer" style="height: 10px"></div> 51 <div class="columns"> 52 <div class="relpos"> 53 <div style="height: 50px"> 54 <div class="spacer" style="height: 110px"></div> 55 <div class="relpos" style="height: 50px"> 56 <div class="anchor1 abspos"></div> 57 </div> 58 </div> 59 <div style="height: 50px"> 60 <div class="target target1" 61 data-expected-width=40 data-expected-height=80></div> 62 </div> 63 </div> 64 </div> 65 </body>