anchor-position-multicol-colspan-002.html (2313B)
1 <!DOCTYPE html> 2 <title>Anchors in column-spanner 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 .columns { 16 column-count: 2; 17 column-fill: auto; 18 column-gap: 10px; 19 column-width: 100px; 20 width: 210px; 21 height: 100px; 22 } 23 .colspan { 24 column-span: all; 25 } 26 .spacer { 27 height: 10px; 28 background: pink; 29 } 30 .anchor1 { 31 anchor-name: --a1; 32 margin-left: 10px; 33 width: 40px; 34 background: blue; 35 } 36 .anchor1 .spacer { 37 background: inherit; 38 } 39 .target { 40 position: absolute; 41 left: anchor(--a1 left); 42 top: anchor(--a1 top); 43 width: anchor-size(--a1 width); 44 height: anchor-size(--a1 height); 45 background: lime; 46 opacity: .3; 47 } 48 </style> 49 <body onload="checkLayoutForAnchorPos('.target')"> 50 <div class="relpos"> 51 <div class="spacer" style="height: 10px"></div> 52 <div class="columns relpos"> 53 <div class="spacer" style="height: 50px"></div> 54 <div class="relpos"> 55 <div class="anchor1"> 56 <div class="spacer" style="height: 10px"></div> 57 <div class="colspan" style="height: 20px"></div> 58 <div class="spacer" style="height: 30px"></div> 59 </div> 60 <!-- 61 When anchors are split by the column spanners, OOFs laid out in a 62 multicol (i.e., the containing block is within a multicol) can't 63 compute the united bounding box, because the coordinate system in the 64 multicol can't express united rectangles across columns that are not 65 lined up. 66 <div class="target"></div> 67 --> 68 </div> 69 <div class="target" 70 data-offset-x=10 data-offset-y=20 71 data-expected-width=150 data-expected-height=60></div> 72 </div> 73 <div class="target" 74 data-offset-x=10 data-offset-y=30 75 data-expected-width=150 data-expected-height=60></div> 76 </div> 77 </body>