anchor-position-multicol-004.html (2283B)
1 <!DOCTYPE html> 2 <title>Tests resolving anchor-name conflicts 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 <link rel="author" href="mailto:mstensho@chromium.org"> 8 <link rel="match" href="anchor-position-multicol-004-ref.html"> 9 <style> 10 .cb { 11 transform: translate(0); /* Make it a containing block. */ 12 border: solid transparent; 13 border-width: 5px 6px 7px 8px; 14 padding: 5px 6px 7px 8px; 15 } 16 .columns { 17 columns: 5; 18 column-fill: auto; 19 column-gap: 10px; 20 width: 540px; 21 height: 100px; 22 } 23 .spacer { 24 height: 10px; 25 } 26 .anchor1 { 27 anchor-name: --a1; 28 margin-left: 10px; 29 width: 40px; 30 height: 90px; 31 } 32 .target { 33 position: absolute; 34 } 35 .all { 36 left: anchor(--a1 left); 37 top: anchor(--a1 top); 38 width: anchor-size(--a1 width); 39 height: anchor-size(--a1 height); 40 } 41 .rb { 42 right: anchor(--a1 right); 43 bottom: anchor(--a1 bottom); 44 width: 10px; 45 height: 10px; 46 } 47 </style> 48 <p>There should be two green rectangles below, and no red.</p> 49 <div> 50 <div class="columns"> 51 <div style="height: 70px"></div> 52 <div class="cb"> 53 <!-- This spacer fills up to the middle of the 2nd column. --> 54 <div style="height: 60px"></div> 55 <div class="anchor1"></div> 56 <div class="cb"> 57 <div style="height: 120px"></div> 58 <div class="anchor1" style="width:20px; background:red;"></div> 59 60 <div class="target all"> 61 <div style="height:50%; background:green;"></div> 62 </div> 63 <div class="target rb"> 64 <div style="margin-left:auto; width:50%; height:100%; background:green;"></div> 65 </div> 66 </div> 67 68 <div class="target all"> 69 <!-- Leave room for the rb thingie that comes after. --> 70 <div style="position:absolute; width:100%; top:50%; bottom:10px; background:green;"></div> 71 <div style="position:absolute; width:10px; height:10px; bottom:0; background:green;"></div> 72 </div> 73 <div class="target rb"> 74 <div style="width:50%; height:100%; background:green;"></div> 75 </div> 76 </div> 77 </div> 78 </div>