anchor-position-multicol-007.html (1735B)
1 <!DOCTYPE html> 2 <title>position-area and anchor() to all four edges works inside vertical-rl multicol</title> 3 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 4 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-pos"> 6 <style> 7 .container { 8 border: solid transparent; border-width: 3px 5px 7px 9px; 9 columns: 3; column-fill: auto; gap: 10px; 10 inline-size: 230px; block-size: 100px; 11 writing-mode: vertical-rl; 12 } 13 .test { 14 position: absolute; 15 position-anchor: --a1; 16 place-self: stretch; 17 } 18 .test.area { 19 position-area: center; 20 } 21 .test.func { 22 inset: anchor(inside); 23 } 24 .test.inside { 25 border: solid 5px green; 26 } 27 .test.inside.area { 28 margin: 5px; 29 } 30 .test.outside.func { 31 margin: 5px; background: green; 32 z-index: -1; 33 } 34 .test.outside.area { 35 border: 5px solid green; 36 z-index: -1; 37 } 38 .anchor { 39 anchor-name:--a1; 40 background: red; 41 } 42 </style> 43 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 44 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 45 <div style="position: relative; top: -3px; left: -9px"> 46 <div class="test outside area"></div> 47 <div class="test outside func"></div> 48 <div class="container"> 49 <div style="block-size:30px;"></div> 50 <div style="position:relative; inline-size:100px; block-size:200px;"> 51 <div style="block-size:20px;"></div> 52 <div class="anchor" style="inline-size:20px; block-size:70px;"></div> 53 <div class="test inside area"></div> 54 <div class="test inside func"></div> 55 </div> 56 </div> 57 </div>