column-scroll-marker-011.html (1137B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>multicol ::column::scroll-marker, add more columns</title> 4 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-group-pseudo"> 6 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 7 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 8 <style> 9 #container { 10 overflow: hidden; 11 columns: 3; 12 column-fill: auto; 13 gap: 0; 14 height: 100px; 15 scroll-marker-group: before; 16 } 17 #container::scroll-marker-group { 18 overflow: auto; 19 display: flex; 20 width: 100px; 21 height: 100px; 22 background: red; 23 } 24 #container::column::scroll-marker { 25 width: 25px; 26 height: 100px; 27 flex: none; 28 content: ""; 29 background: green; 30 } 31 </style> 32 <div id="container"> 33 <div style="height:100px;"></div> 34 </div> 35 <script> 36 requestAnimationFrame(()=> { 37 requestAnimationFrame(()=> { 38 document.documentElement.classList.remove("reftest-wait"); 39 container.style.height = "25px"; 40 }); 41 }); 42 </script>