column-scroll-marker-004.html (1187B)
1 <!DOCTYPE html> 2 <title>::column::scroll-marker on multicol fieldset</title> 3 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 4 <link rel="help" href="https://www.w3.org/TR/css-multicol-2/#column-pseudo"> 5 <link rel="help" href="https://html.spec.whatwg.org/#anonymous-fieldset-content-box"> 6 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 7 <style> 8 #container { 9 overflow: hidden; 10 columns: 3; 11 column-fill: auto; 12 gap: 0; 13 height: 50px; 14 margin: 0; 15 border: 15px solid green; 16 padding: 0; 17 scroll-marker-group: before; 18 background: red; 19 } 20 #container::scroll-marker-group { 21 display: flex; 22 height: 20px; 23 background: red; 24 } 25 #container::column::scroll-marker { 26 display: flex; 27 width: 20px; 28 height: 100%; 29 background: green; 30 content: ""; 31 } 32 </style> 33 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 34 <div style="width:100px; height:100px; background:red;"> 35 <fieldset id="container"> 36 <legend style="width:50px; height:15px; background:green;"></legend> 37 <div style="height:210px; background:green;"></div> 38 </fieldset> 39 </div>