anchor-position-multicol-nested-001.html (3049B)
1 <!DOCTYPE html> 2 <title>Anchors in nested 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 <link rel="author" href="mailto:mstensho@chromium.org"> 8 <link rel="match" href="anchor-position-multicol-nested-001-ref.html"> 9 <style> 10 .cb { 11 position: relative; 12 } 13 body > * .cb { 14 border-style: solid; 15 border-color: transparent; 16 border-width: 3px 2px 4px 1px; 17 padding: 3px 2px 4px 1px; 18 } 19 .columns { 20 columns: 4; 21 column-fill: auto; 22 column-gap: 10px; 23 width: 630px; 24 height: 100px; 25 } 26 .columns .columns { 27 columns: 2; 28 width: 130px; 29 height: 200px; 30 } 31 .anchor1 { 32 anchor-name: --a1; 33 margin-left: 10px; 34 width: 20px; 35 height: 150px; 36 background: red; 37 } 38 .target { 39 position: absolute; 40 left: anchor(--a1 left); 41 top: anchor(--a1 top); 42 width: anchor-size(--a1 width); 43 height: anchor-size(--a1 height); 44 } 45 </style> 46 <p>There should only be green below, and no red.</p> 47 <div class="cb"> 48 <div style="height: 10px"></div> 49 <div class="columns"> 50 <div class="cb"> 51 <div style="height: 110px"></div> 52 <div class="columns"> 53 <div class="cb"> 54 <div style="height: 60px"></div> 55 <div class="anchor1"></div> 56 <div style="height: 80px"></div> 57 <div class="target"> 58 <div style="width:20px;"> 59 <div style="height:10px; background:green;"></div> 60 <div style="margin-left:10px; height:8px; background:green;"></div> 61 <div style="margin-right:10px; height:10px; background:green;"></div> 62 <div style="height:74px; background:green;"></div> 63 <div style="margin-right:10px; height:10px; background:green;"></div> 64 <div style="height:28px; background:green;"></div> 65 <div style="margin-left:10px; height:10px; background:green;"></div> 66 </div> 67 </div> 68 </div> 69 </div> 70 <div class="target"> 71 <div style="position:absolute; top:0; left:0; width:10px; height:10px; background:green;"></div> 72 <div style="position:absolute; top:0; right:0; width:10px; height:10px; background:green;"></div> 73 <div style="position:absolute; bottom:0; left:0; width:10px; height:10px; background:green;"></div> 74 <div style="position:absolute; bottom:0; right:0; width:10px; height:10px; background:green;"></div> 75 </div> 76 </div> 77 </div> 78 <div class="target"> 79 <div style="position:absolute; top:0; left:0; width:10px; height:10px; background:green;"></div> 80 <div style="position:absolute; top:0; right:0; width:10px; height:10px; background:green;"></div> 81 <div style="position:absolute; bottom:0; left:0; width:10px; height:10px; background:green;"></div> 82 <div style="position:absolute; bottom:0; right:0; width:10px; height:10px; background:green;"></div> 83 </div> 84 </div>