anchor-position-grid-001.html (1869B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos"> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-size"> 4 <link rel="author" href="mailto:kojii@chromium.org"> 5 <link rel="author" href="mailto:mstensho@chromium.org"> 6 <link rel="match" href="anchor-position-grid-001-ref.html"> 7 <style> 8 .cb { 9 position: relative; 10 } 11 .columns { 12 column-count: 3; 13 column-fill: auto; 14 column-gap: 10px; 15 width: 620px; 16 height: 100px; 17 } 18 .grid { 19 display: grid; 20 grid-template-columns: repeat(2, 100px); 21 grid-template-rows: 50px 100px; 22 } 23 .anchor1 { 24 anchor-name: --a1; 25 grid-column: 2; 26 grid-row: 2; 27 border: 2px solid red; 28 border-width: 5px 6px 7px 8px; 29 background: green; 30 } 31 .target { 32 grid-column: 2; 33 grid-row: 2; 34 position: absolute; 35 width: anchor-size(--a1 width); 36 height: anchor-size(--a1 height); 37 background: lime; 38 } 39 .target1-l { 40 left: anchor(--a1 left); 41 top: anchor(--a1 top); 42 width: 8px; 43 } 44 .target1-r { 45 right: anchor(--a1 right); 46 bottom: anchor(--a1 bottom); 47 width: 6px; 48 } 49 .target1-t { 50 left: anchor(--a1 left); 51 top: anchor(--a1 top); 52 height: 5px; 53 } 54 .target1-b { 55 right: anchor(--a1 right); 56 bottom: anchor(--a1 bottom); 57 height: 7px; 58 } 59 </style> 60 <p>There should be a green square with a lime border, split over two 61 columns. There should be no red.</p> 62 <div class="columns"> 63 <div style="height: 10px"></div> 64 <div class="grid cb"> 65 <div><br></div> 66 <div><br></div> 67 <div><br></div> 68 <div class="anchor1"></div> 69 70 <div class="target target1-l" data-offset-x=100 data-expected-height=100></div> 71 <div class="target target1-r" data-offset-x=194 data-expected-height=100></div> 72 <div class="target target1-t" data-offset-y=50 data-expected-width=100></div> 73 <div class="target target1-b" data-offset-y=145 data-expected-width=100></div> 74 </div> 75 </div>