anchor-position-multicol-011.html (1258B)
1 <!DOCTYPE html> 2 <title>List item marker inside multicol. Markers cannot be anchors.</title> 3 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-anchor"> 5 <link rel="help" href="https://drafts.csswg.org/css-lists-3/#marker-properties"> 6 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 7 <style> 8 #mc { 9 columns: 2; 10 gap: 0; 11 display: list-item; 12 list-style-position: outside; 13 margin-left: 40px; 14 width: 60px; 15 color: red; 16 } 17 #mc::marker { 18 /* anchor-name doesn't apply here. */ 19 anchor-name: --invalid; 20 } 21 </style> 22 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 23 <div style="position:relative;"> 24 <div id="mc"> 25 x 26 <div style="break-before:column; position:relative;"> 27 <div style="anchor-name:--foo;">y</div> 28 <div style="position:absolute; position-anchor:--foo; top:anchor(top); right:anchor(right); width:30px; height:100px; background:green;"></div> 29 </div> 30 </div> 31 <div style="position:absolute; position-anchor:--invalid; left:anchor(right, 0px); top:anchor(bottom, 0px); width:70px; height:100px; background:green;"></div> 32 </div>