column-scroll-marker-010.html (3403B)
1 <!DOCTYPE html> 2 <title>Multicol in scrollable with ::column::scroll-marker</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 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <style> 11 #scrollable { 12 overflow: hidden; 13 height: 100px; 14 border: 15px solid; 15 line-height: 20px; 16 scroll-marker-group: before; 17 background: yellow; 18 } 19 #multicol { 20 columns: 3; 21 column-fill: auto; 22 gap: 0; 23 orphans: 1; 24 widows: 1; 25 width: 420px; 26 height: 100px; 27 margin-left: 100px; 28 margin-top: 50px; 29 } 30 #scrollable::scroll-marker-group { 31 display: flex; 32 justify-content: space-between; 33 height: 50px; 34 background: cyan; 35 } 36 #multicol::column::scroll-marker { 37 display: flex; 38 justify-content: center; 39 align-items: center; 40 width: 50px; 41 height: 50px; 42 background: hotpink; 43 content: "*"; 44 } 45 </style> 46 <div style="width:450px;"> 47 <div id="scrollable"> 48 <div id="multicol"> 49 First column<br> 50 <br> 51 <br> 52 <br> 53 <br> 54 Second column<br> 55 <br> 56 <br> 57 <br> 58 <br> 59 Third column<br> 60 <br> 61 <br> 62 <br> 63 <br> 64 Fourth column<br> 65 <br> 66 <br> 67 <br> 68 <br> 69 Fifth column<br> 70 </div> 71 </div> 72 </div> 73 <script> 74 function sendClick(x) { 75 return new test_driver.Actions() 76 .pointerMove(x, 10) 77 .pointerDown() 78 .pointerUp() 79 .send(); 80 } 81 82 test(()=> { 83 assert_equals(scrollable.scrollLeft, 0); 84 assert_equals(scrollable.scrollTop, 0); 85 }, "Initial scroll position"); 86 promise_test(async t => { 87 await sendClick(110); 88 assert_equals(scrollable.scrollLeft, 240); 89 assert_equals(scrollable.scrollTop, 50); 90 }, "Scroll second column into view"); 91 promise_test(async t => { 92 await sendClick(210); 93 assert_equals(scrollable.scrollLeft, 380); 94 assert_equals(scrollable.scrollTop, 50); 95 }, "Scroll third column into view"); 96 promise_test(async t => { 97 await sendClick(310); 98 assert_equals(scrollable.scrollLeft, 380); 99 assert_equals(scrollable.scrollTop, 50); 100 }, "Scroll fourth column into view"); 101 promise_test(async t => { 102 await sendClick(410); 103 assert_equals(scrollable.scrollLeft, 380); 104 assert_equals(scrollable.scrollTop, 50); 105 }, "Scroll fifth column into view"); 106 promise_test(async t => { 107 await sendClick(310); 108 assert_equals(scrollable.scrollLeft, 380); 109 assert_equals(scrollable.scrollTop, 50); 110 }, "Scroll fourth column into view again"); 111 promise_test(async t => { 112 await sendClick(210); 113 assert_equals(scrollable.scrollLeft, 380); 114 assert_equals(scrollable.scrollTop, 50); 115 }, "Scroll third column into view again"); 116 promise_test(async t => { 117 await sendClick(110); 118 assert_equals(scrollable.scrollLeft, 240); 119 assert_equals(scrollable.scrollTop, 50); 120 }, "Scroll second column into view again"); 121 promise_test(async t => { 122 await sendClick(10); 123 assert_equals(scrollable.scrollLeft, 100); 124 assert_equals(scrollable.scrollTop, 50); 125 }, "Scroll first column into view"); 126 </script>