column-scroll-marker-005.html (2532B)
1 <!DOCTYPE html> 2 <title>::column::scroll-marker on multicol fieldset</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 #container { 12 overflow: hidden; 13 columns: 3; 14 column-fill: auto; 15 gap: 0; 16 height: 100px; 17 margin: 0; 18 border: 15px solid; 19 padding: 0; 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::scroll-marker { 30 display: flex; 31 justify-content: center; 32 align-items: center; 33 width: 50px; 34 height: 50px; 35 background: hotpink; 36 content: "*"; 37 } 38 </style> 39 <div style="width:450px;"> 40 <fieldset id="container"> 41 <legend style="line-height:15px;">legend</legend> 42 <div style="height:500px;"></div> 43 </div> 44 </div> 45 <script> 46 function sendClick(x) { 47 return new test_driver.Actions() 48 .pointerMove(x, 10) 49 .pointerDown() 50 .pointerUp() 51 .send(); 52 } 53 promise_test(async t => { 54 await sendClick(110); 55 assert_equals(container.scrollLeft, 140); 56 }, "Scroll second column into view"); 57 promise_test(async t => { 58 await sendClick(210); 59 assert_equals(container.scrollLeft, 280); 60 }, "Scroll third column into view"); 61 promise_test(async t => { 62 await sendClick(310); 63 assert_equals(container.scrollLeft, 280); 64 }, "Scroll fourth column into view"); 65 promise_test(async t => { 66 await sendClick(410); 67 assert_equals(container.scrollLeft, 280); 68 }, "Scroll fifth column into view"); 69 promise_test(async t => { 70 await sendClick(310); 71 assert_equals(container.scrollLeft, 280); 72 }, "Scroll fourth column into view again"); 73 promise_test(async t => { 74 await sendClick(210); 75 assert_equals(container.scrollLeft, 280); 76 }, "Scroll third column into view again"); 77 promise_test(async t => { 78 await sendClick(110); 79 assert_equals(container.scrollLeft, 140); 80 }, "Scroll second column into view again"); 81 promise_test(async t => { 82 await sendClick(10); 83 assert_equals(container.scrollLeft, 0); 84 }, "Scroll first column into view"); 85 </script>