column-scroll-marker-002.html (1829B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 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="match" href="column-scroll-marker-002-ref.html"> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-actions.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <style> 10 #container { 11 overflow: hidden; 12 columns: 3; 13 column-fill: auto; 14 gap: 0; 15 orphans: 1; 16 widows: 1; 17 height: 100px; 18 border: 15px solid; 19 line-height: 20px; 20 scroll-marker-group: before; 21 background: yellow; 22 } 23 #container::scroll-marker-group { 24 display: flex; 25 justify-content: space-between; 26 height: 50px; 27 background: cyan; 28 } 29 #container::column { 30 scroll-snap-align: center; 31 } 32 #container::column::scroll-marker { 33 display: flex; 34 justify-content: center; 35 align-items: center; 36 width: 50px; 37 height: 50px; 38 background: hotpink; 39 content: "*"; 40 } 41 </style> 42 <div style="width:450px;"> 43 <div id="container"> 44 First column<br> 45 <br> 46 <br> 47 <br> 48 <br> 49 Second column<br> 50 <br> 51 <br> 52 <br> 53 <br> 54 Third column<br> 55 <br> 56 <br> 57 <br> 58 <br> 59 Fourth column<br> 60 <br> 61 <br> 62 <br> 63 <br> 64 Fifth column<br> 65 </div> 66 </div> 67 <script> 68 async function run() { 69 actions_promise = new test_driver.Actions() 70 .pointerMove(210, 10) 71 .pointerDown() 72 .pointerUp() 73 .send(); 74 await actions_promise; 75 document.documentElement.classList.remove("reftest-wait"); 76 } 77 run(); 78 </script> 79 </html>