anchor-position-multicol-003.html (2679B)
1 <!DOCTYPE html> 2 <title>Tests anchors on out-of-flow boxes</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#determining"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name"> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-size"> 6 <link rel="author" href="mailto:kojii@chromium.org"> 7 <link rel="author" href="mailto:mstensho@chromium.org"> 8 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 9 <style> 10 .relpos { 11 position: relative; 12 } 13 .columns { 14 columns: 2; 15 column-fill: auto; 16 column-gap: 10px; 17 width: 170px; 18 height: 50px; 19 } 20 .anchor1 { 21 anchor-name: --a1; 22 position: absolute; 23 width: 10px; 24 height: 30px; 25 background: red; 26 } 27 .target { 28 position: absolute; 29 left: anchor(--a1 left); 30 top: anchor(--a1 top); 31 width: anchor-size(--a1 width); 32 height: anchor-size(--a1 height); 33 } 34 .target::before { 35 position: absolute; 36 content: ""; 37 background: green; 38 } 39 .first { 40 .target.inside::before { 41 width: 100%; 42 height: 100%; 43 } 44 } 45 .second { 46 .target.inside::before { 47 width: 100%; 48 height: 50%; 49 } 50 .target.inside.part2::before { 51 top: 50%; 52 } 53 } 54 .target.outside::before { 55 width: calc(50% - 10px); 56 height: 100%; 57 } 58 .target.outside.part1::before { 59 left: 10px; 60 } 61 .target.outside.part2::before { 62 right: 10px; 63 } 64 </style> 65 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 66 <div style="width:100px; height:100px; background:red;"> 67 <div class="relpos first"> 68 <div class="columns"> 69 <div class="relpos"> 70 <div style="width:10px; height:30px; background:green;"></div> 71 <div class="anchor1"></div> 72 <div style="height:30px;"></div> 73 <div style="width:10px; height:40px; background:green;"></div> 74 <div class="target inside"></div> 75 </div> 76 <div class="target outside part1"></div> 77 </div> 78 <div class="target outside part2"></div> 79 </div> 80 <div class="relpos second"> 81 <div class="columns"> 82 <div style="width:10px; height:10px; background:green;"></div> 83 <div class="relpos"> 84 <div style="width:10px; height:10px; background:green;"></div> 85 <div class="relpos"> 86 <div style="width:10px; height:10px; background:green;"></div> 87 <div class="anchor1"></div> 88 <div style="height:30px;"></div> 89 <div style="width:10px; height:40px; background:green;"></div> 90 <div class="target inside part1"></div> 91 </div> 92 <div class="target inside part2"></div> 93 </div> 94 <div class="target outside part1"></div> 95 </div> 96 <div class="target outside part2"></div> 97 </div> 98 </div>