scroll-marker-group-014.html (1501B)
1 <!DOCTYPE html> 2 <title>Scroll marker group on multicol fieldset</title> 3 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-group"> 4 <link rel="help" href="https://html.spec.whatwg.org/#anonymous-fieldset-content-box"> 5 <style> 6 #scroller { 7 overflow: hidden; 8 columns: 2; 9 column-fill: auto; 10 padding: 0; 11 gap: 0; 12 width: 400px; 13 height: 100px; 14 scroll-marker-group: before; 15 } 16 17 #scroller::scroll-marker-group { 18 display: flex; 19 height: 200px; 20 background: gray; 21 } 22 23 #scroller>div::scroll-marker { 24 display: block; 25 width: 25px; 26 height: 50%; 27 content: ""; 28 background: yellow; 29 } 30 </style> 31 <fieldset id="scroller"> 32 <legend>Legend</legend> 33 <div style="break-before:column;">first</div> 34 <div style="break-before:column;">second</div> 35 <div style="break-before:column;">third</div> 36 <div style="break-before:column;">fourth</div> 37 </fieldset> 38 39 <script src="/resources/testharness.js"></script> 40 <script src="/resources/testharnessreport.js"></script> 41 <script src="/resources/testdriver.js"></script> 42 <script src="/resources/testdriver-actions.js"></script> 43 <script src="/resources/testdriver-vendor.js"></script> 44 <script> 45 promise_test(async t => { 46 assert_equals(scroller.scrollLeft, 0); 47 // Click on the third scroll marker. 48 await new test_driver.Actions().pointerMove(60, 10).pointerDown().pointerUp().send(); 49 assert_equals(scroller.scrollLeft, 400); 50 }, "Click on third scroll marker"); 51 </script>