scroll-marker-event-target.html (1836B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: event.target and event.currentTarget for ::scroll-marker is its originating element</title> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker"> 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 #scroller { 16 position: absolute; 17 top: 100px; 18 width: 600px; 19 height: 300px; 20 overflow: auto; 21 scroll-marker-group: before; 22 white-space: nowrap; 23 } 24 25 #scroller div { 26 display: inline-block; 27 width: 600px; 28 height: 270px; 29 } 30 31 #scroller::scroll-marker-group { 32 position: absolute; 33 top: 0; 34 display: flex; 35 height: 20px; 36 width: 40px; 37 } 38 39 #scroller div::scroll-marker { 40 content: ""; 41 width: 100px; 42 height: 20px; 43 display: inline-block; 44 } 45 </style> 46 <div id="scroller"> 47 <div id="originatingElement"></div> 48 <div></div> 49 </div> 50 <script> 51 let target = null; 52 let currentTarget = null; 53 54 originatingElement.addEventListener('click', (e) => { 55 target = e.target; 56 currentTarget = e.currentTarget; 57 }); 58 59 promise_test(async t => { 60 // Click on ::scroll-marker 61 const scrollMarkerX = 15; 62 const scrollMarkerY = 15; 63 await new test_driver.Actions() 64 .pointerMove(scrollMarkerX, scrollMarkerY) 65 .pointerDown() 66 .pointerUp() 67 .send(); 68 assert_equals(currentTarget, originatingElement, "event.currentTarget for ::scroll-marker click is its originating element"); 69 assert_equals(target, originatingElement, "event.target for ::scroll-marker click is its originating element"); 70 }); 71 </script>