anchor-name-multicol-003.html (2340B)
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 <link rel="match" href="anchor-name-multicol-003-ref.html"> 8 <style> 9 .relpos { 10 position: relative; 11 } 12 .abspos { 13 position: absolute; 14 } 15 .columns { 16 columns: 6; 17 column-fill: auto; 18 column-gap: 10px; 19 width: 170px; 20 height: 50px; 21 } 22 .spacer { 23 height: 10px; 24 } 25 .anchor { 26 anchor-name: --a1; 27 margin-left: 10px; 28 width: 10px; 29 } 30 .target { 31 position: absolute; 32 left: anchor(--a1 left); 33 top: anchor(--a1 top); 34 width: anchor-size(--a1 width); 35 height: anchor-size(--a1 height); 36 } 37 .target::before { 38 position: absolute; 39 background: green; 40 content: ""; 41 } 42 .target.inside::before { 43 width: 100%; 44 height: 50%; 45 } 46 .target.outside::before { 47 width: 20px; 48 height: 100%; 49 } 50 .target.inside.part2::before { 51 top: 50%; 52 } 53 .target.outside.part1::before { 54 left: 10px; 55 } 56 .target.outside.part2::before { 57 right: 10px; 58 } 59 .filler > .background { 60 background: green; 61 } 62 </style> 63 <!-- All targets should find the abspos anchor --> 64 <p>There should be a green rectangle below, no red.</p> 65 <div class="relpos"> 66 <div class="columns relpos"> 67 <div class="relpos"> 68 <div class="relpos"> 69 <div class="spacer"></div> 70 <div class="anchor" style="height:60px;"></div> 71 <div style="height:30px;"></div> 72 <div class="filler" style="width:30px; height:150px; background:red;"> 73 <div style="width:20px; height:20px;" class="background"></div> 74 <div style="width:10px; height:30px;" class="background"></div> 75 <div style="height:50px;"></div> 76 <div style="margin-left:auto; width:10px; height:20px;" class="background"></div> 77 <div style="margin-left:auto; width:20px; height:30px;" class="background"></div> 78 </div> 79 <div class="anchor abspos" style="top:120px; height:100px;"></div> 80 <div class="target inside part1"></div> 81 </div> 82 <div class="target inside part2"></div> 83 </div> 84 <div class="target outside part1"></div> 85 </div> 86 <div class="target outside part2"></div> 87 </div>