scroll-buttons-activation-with-columns.html (1873B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow Test: ::scroll-button() activation with column scroll markers</title> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-buttons"> 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 * { 12 margin: 0; 13 padding: 0; 14 } 15 16 #scroller { 17 width: 600px; 18 height: 300px; 19 overflow: auto; 20 columns: 1; 21 gap: 0; 22 column-fill: auto; 23 scroll-marker-group: after; 24 white-space: nowrap; 25 } 26 27 #scroller div { 28 background: green; 29 display: inline-block; 30 width: 600px; 31 height: 270px; 32 } 33 34 #scroller :first-child { 35 background: purple; 36 } 37 38 #scroller::scroll-marker-group { 39 border: 3px solid black; 40 padding: 5px; 41 display: flex; 42 height: 20px; 43 width: 40px; 44 } 45 46 #scroller::scroll-button(right) { 47 content: ">"; 48 background: blue; 49 display: flex; 50 height: 20px; 51 width: 20px; 52 top: 0px; 53 left: 0px; 54 position: absolute; 55 z-index: 99; 56 } 57 58 #scroller::column::scroll-marker { 59 content: ""; 60 width: 10px; 61 height: 10px; 62 background-color: blue; 63 border-radius: 100%; 64 display: inline-block; 65 } 66 </style> 67 <div id="scroller"> 68 <div></div> 69 <br> 70 <div></div> 71 </div> 72 <script> 73 /* 74 Double click as recommended scroll amount is 85% of the page, so 75 to make sure all browsers reach the end. 76 */ 77 promise_test(async t => { 78 actions_promise = new test_driver.Actions() 79 .pointerMove(5, 5) 80 .pointerDown() 81 .pointerUp() 82 .pointerDown() 83 .pointerUp() 84 .send(); 85 await actions_promise; 86 assert_equals(scroller.scrollLeft, 600); 87 }); 88 </script>