anchor-position-multicol-002.html (3278B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name"> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos"> 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-position-multicol-002-ref.html"> 8 <style> 9 .cb { 10 transform: translate(0); /* Make it a containing block. */ 11 border: solid transparent; 12 border-width: 5px 6px 7px 8px; 13 padding: 5px 6px 7px 8px; 14 } 15 .columns { 16 columns: 3; 17 column-fill: auto; 18 column-gap: 10px; 19 width: 320px; 20 height: 100px; 21 } 22 .anchor1 { 23 anchor-name: --a1; 24 margin-left: 10px; 25 width: 50px; 26 height: 90px; 27 background: yellow; 28 } 29 .target { 30 position: absolute; 31 } 32 .target.fixed { 33 position: fixed; 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 .target::before { 48 position: absolute; 49 content: ""; 50 background: green; 51 } 52 .target.inner.all::before { 53 width: 100%; 54 height: 50%; 55 } 56 .target.inner.all.part2::before { 57 top: 50%; 58 } 59 /* Mark the .rb area red again. */ 60 .target.inner.all.part2::after { 61 position: absolute; 62 content: ""; 63 right: 0; 64 bottom: 0; 65 width: 10px; 66 height: 10px; 67 background: red; 68 } 69 .target.inner.rb::before { 70 width: 50%; 71 height: 100%; 72 } 73 .target.inner.rb.part2::before { 74 left: 50%; 75 } 76 .target.outer::before { 77 left: 50px; 78 right: 50px; 79 height: 25%; 80 } 81 .target.outer.part2::before { 82 top: 25%; 83 } 84 .target.outer.part3::before { 85 top: 50%; 86 } 87 .target.outer.part4::before { 88 top: 75%; 89 } 90 </style> 91 <p>There should be a green rectangle below, no red.</p> 92 <div class="cb outer"> 93 <div style="position:absolute; z-index:-1; left:144px; width:160px; height:100px; background:red;"></div> 94 <div class="columns"> 95 <div style="height:30px;"></div> 96 <div class="cb inner"> 97 <!-- This spacer fills up to the middle of the 2nd column. --> 98 <div style="height:60px;"></div> 99 <div style="margin-left:10px; width:50px; height:70px; background:green;"></div> 100 <div class="anchor1"></div> 101 <div style="margin-right:12px; height:40px; background:green;"></div> 102 <div style="height:60px;"></div> 103 104 <!-- The containing block of querying elements is block-fragmented. --> 105 <div class="target all inner part1"></div> 106 <div class="target all fixed inner part2"></div> 107 <div class="target rb inner part1"></div> 108 <div class="target rb fixed inner part2"></div> 109 </div> 110 111 <!-- The containing block of querying elements is a multi-column, i.e. not fragmented. --> 112 <div class="target all outer part1"></div> 113 <div class="target all fixed outer part2"></div> 114 <div class="target rb outer part1"></div> 115 <div class="target rb fixed outer part2"></div> 116 </div> 117 118 <!-- The containing block of querying elements is not fragmented. --> 119 <div class="target all outer part3"></div> 120 <div class="target all fixed outer part4"></div> 121 <div class="target rb outer part3"></div> 122 <div class="target rb fixed outer part4"></div> 123 </div>