anchor-name-multicol-004.html (1629B)
1 <!DOCTYPE html> 2 <title>Anchor name resolution of OOF anchors 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 <link rel="author" href="mailto:mstensho@chromium.org"> 7 <style> 8 .relpos { 9 position: relative; 10 } 11 .abspos { 12 position: absolute; 13 } 14 .columns { 15 columns: 6; 16 column-fill: auto; 17 column-gap: 10px; 18 width: 530px; 19 height: 100px; 20 } 21 .spacer { 22 height: 10px; 23 } 24 .anchor { 25 anchor-name: --a1; 26 width: 10px; 27 } 28 .target { 29 position: absolute; 30 left: anchor(--a1 left); 31 top: anchor(--a1 top); 32 width: anchor-size(--a1 width); 33 height: anchor-size(--a1 height); 34 } 35 </style> 36 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 37 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 38 <!-- All targets should find the static positioned anchor --> 39 <div style="width:100px; height:100px; background:red;"> 40 <div class="relpos"> 41 <div class="columns relpos"> 42 <div class="relpos"> 43 <div style="width:10px; height:10px; background:green;"></div> 44 <div class="anchor abspos" style="top:220px; height:200px;"></div> 45 <div class="anchor" style="height:120px;"></div> 46 <div style="width:10px; height:70px; background:green;"></div> 47 <div class="target" style="background:green;"></div> 48 </div> 49 <div class="target"> 50 <div style="margin-left:10px; width:80px; height:100%; background:green;"></div> 51 </div> 52 </div> 53 </div> 54 </div>