scroll-marker-group-013.html (1197B)
1 <!DOCTYPE html> 2 <title>Scroll marker group on multicol fieldset</title> 3 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-group"> 4 <link rel="help" href="https://html.spec.whatwg.org/#anonymous-fieldset-content-box"> 5 <link rel="match" href="scroll-marker-group-013-ref.html"> 6 <style> 7 #scroller { 8 overflow: hidden; 9 columns: 2; 10 column-fill: auto; 11 padding: 0; 12 gap: 0; 13 width: 400px; 14 height: 100px; 15 scroll-marker-group: before; 16 } 17 18 #scroller::scroll-marker-group { 19 display: flex; 20 height: 200px; 21 background: gray; 22 } 23 24 #scroller>div::scroll-marker { 25 display: block; 26 width: 25px; 27 height: 50%; 28 content: ""; 29 background: yellow; 30 } 31 32 fieldset { 33 border: 3px solid black; 34 } 35 </style> 36 <p>There should be a yellow square inside a gray box below, and below that, a 37 fieldset with a legend. The text "first" and "second" should be seen 38 inside.</p> 39 <fieldset id="scroller"> 40 <legend>Legend</legend> 41 <div style="break-before:column;">first</div> 42 <div style="break-before:column;">second</div> 43 <div style="break-before:column;">third</div> 44 <div style="break-before:column;">fourth</div> 45 </fieldset>