scroll-marker-activation-default-direction-position.html (1943B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow Test: ::scroll-marker activation scrolls into view with `start` as default direction position</title> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-activation"> 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 .toc { 12 overflow: auto; 13 overscroll-behavior: contain; 14 height: 50vh; 15 scroll-marker-group: before links; 16 counter-reset: --section; 17 padding-left: 200px; 18 19 &::scroll-marker-group { 20 position: absolute; 21 width: 200px; 22 } 23 24 & h3 { 25 counter-increment: --section; 26 27 &::scroll-marker { 28 font-size: 1rem; 29 display: block; 30 content: counter(--section) ". " attr(data-label); 31 } 32 33 &::scroll-marker:target-current { 34 color: ActiveText; 35 } 36 } 37 } 38 </style> 39 <div id="scroller" class="toc"> 40 <h3 data-label="Introduction">Introduction</h3> 41 <p>Lorem ipsum</p> 42 <p>Lorem ipsum</p> 43 44 <h3 data-label="Focus">Focus Behavior</h3> 45 <p>Lorem ipsum</p> 46 <p>Lorem ipsum</p> 47 <p>Lorem ipsum</p> 48 <p>Lorem ipsum</p> 49 50 <h3 data-label="Roles">Roles</h3> 51 <p>Lorem ipsum</p> 52 <p>Lorem ipsum</p> 53 <p>Lorem ipsum</p> 54 <p>Lorem ipsum</p> 55 <p>Lorem ipsum</p> 56 <p>Lorem ipsum</p> 57 </div> 58 <script> 59 promise_test(async t => { 60 const secondScrollMarkerX = 34; 61 const secondScrollMarkerY = 37; 62 actions_promise = new test_driver.Actions() 63 .pointerMove(secondScrollMarkerX, secondScrollMarkerY) 64 .pointerDown() 65 .pointerUp() 66 .send(); 67 await actions_promise; 68 assert_not_equals(scroller.scrollTop, 0, "scroll marker activation should scroll into view with `start` as direction position"); 69 }); 70 </script>