column-scroll-marker-013.html (1412B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>multicol ::column::scroll-marker, add columns, keep target-current</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="help" href="https://drafts.csswg.org/css-overflow-5/#active-scroll-marker"> 7 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 8 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 9 <style> 10 #container { 11 overflow: hidden; 12 columns: 1; 13 column-fill: auto; 14 gap: 0; 15 width: 100px; 16 height: 100px; 17 scroll-marker-group: before; 18 } 19 #container::scroll-marker-group { 20 position: relative; 21 left: -200px; 22 display: flex; 23 height: 100px; 24 } 25 #container::column::scroll-marker { 26 width: 100px; 27 height: 100px; 28 flex: none; 29 content: ""; 30 } 31 #container::column::scroll-marker:target-current { 32 background: green; 33 } 34 </style> 35 <div style="position:absolute; width:100px; height:100px; background:red;"></div> 36 <div id="container"> 37 <div style="height:400px;"></div> 38 </div> 39 <script> 40 container.scrollTo(200, 0); 41 requestAnimationFrame(()=> { 42 requestAnimationFrame(()=> { 43 document.documentElement.classList.remove("reftest-wait"); 44 container.style.height = "150px"; 45 }); 46 }); 47 </script>