scroll-marker-disposed-event-target.html (1802B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: event.target for detached ::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 .sm::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" class="sm"></div> 48 <div></div> 49 </div> 50 <script> 51 let event = null; 52 53 originatingElement.addEventListener('click', (e) => { 54 event = e; 55 }); 56 57 promise_test(async t => { 58 // Click on ::scroll-marker 59 const scrollMarkerX = 15; 60 const scrollMarkerY = 15; 61 await new test_driver.Actions() 62 .pointerMove(scrollMarkerX, scrollMarkerY) 63 .pointerDown() 64 .pointerUp() 65 .send(); 66 assert_equals(event.target, originatingElement, "event.target for ::scroll-marker click is its originating element"); 67 originatingElement.classList.remove("sm"); 68 assert_equals(event.target, originatingElement, "event.target for detached ::scroll-marker click is its originating element"); 69 }); 70 </script>