root-scroll-marker-activation-and-scroll-tracking.html (1623B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: ::scroll-marker with ::scroll-marker-group on root element scroll tracking</title> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-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 body { 12 margin: 0; 13 } 14 15 :root { 16 scroll-marker-group: before; 17 } 18 19 :root::scroll-marker-group { 20 border: 3px solid black; 21 padding: 5px; 22 height: 20px; 23 display: block; 24 position: fixed; 25 top: 0; 26 } 27 28 div { 29 width: 600px; 30 height: 300px; 31 margin-bottom: 20px; 32 background: blue; 33 } 34 35 div:first-of-type { 36 margin-top: 40px; 37 } 38 39 div::scroll-marker { 40 content: ""; 41 width: 20px; 42 height: 20px; 43 background-color: red; 44 display: inline-block; 45 margin-right: 4px; 46 } 47 48 div::scroll-marker:target-current { 49 background-color: green; 50 } 51 52 div:last-of-type::scroll-marker { 53 margin-right: 0px; 54 } 55 </style> 56 <div></div> 57 <div></div> 58 <div id="target"></div> 59 <script> 60 promise_test(async t => { 61 // Click on the fourth scroll marker. 62 await new test_driver.Actions() 63 .pointerMove(65, 20) 64 .pointerDown() 65 .pointerUp() 66 .pointerDown() 67 .pointerUp() 68 .send(); 69 assert_equals(window.scrollY, 400); 70 assert_equals(getComputedStyle(target, "::scroll-marker").backgroundColor, "rgb(0, 128, 0)"); 71 }); 72 </script>