scroll-marker-group-012.html (1351B)
1 <!DOCTYPE html> 2 <title>Scroll marker group on 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 height: 100px; 9 padding: 0; 10 scroll-marker-group: before; 11 } 12 13 #scroller::scroll-marker-group { 14 display: flex; 15 height: 200px; 16 background: gray; 17 } 18 19 #scroller>div::scroll-marker { 20 display: block; 21 width: 25px; 22 height: 50%; 23 content: ""; 24 background: yellow; 25 } 26 </style> 27 <fieldset id="scroller"> 28 <legend>Legend</legend> 29 <div style="height:100px;">first</div> 30 <div style="height:100px;">second</div> 31 <div style="height:100px;">third</div> 32 <div style="height:100px;">fourth</div> 33 </fieldset> 34 35 <script src="/resources/testharness.js"></script> 36 <script src="/resources/testharnessreport.js"></script> 37 <script src="/resources/testdriver.js"></script> 38 <script src="/resources/testdriver-actions.js"></script> 39 <script src="/resources/testdriver-vendor.js"></script> 40 <script> 41 promise_test(async t => { 42 assert_equals(scroller.scrollTop, 0); 43 await new test_driver.Actions().pointerMove(60, 10).pointerDown().pointerUp().send(); 44 assert_equals(scroller.scrollTop, 200); 45 }, "Click on third scroll marker"); 46 </script>