test_pointermove_drag_scrollbar.html (2457B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1509710 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 1509710</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <script src="/tests/SimpleTest/EventUtils.js"></script> 11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 12 <style> 13 #scroll { 14 width: 200px; 15 height: 200px; 16 overflow: scroll; 17 } 18 #scrolled { 19 width: 200px; 20 height: 1000px; /* so the subframe has room to scroll */ 21 will-change: transform; /* to force active layers */ 22 } 23 </style> 24 </head> 25 <body> 26 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1509710">Mozilla Bug 1509710</a> 27 <p id="display"></p> 28 <div id="scroll"> 29 <div id="scrolled"></div> 30 </div> 31 <script type="text/javascript"> 32 33 /** Test for Bug 1509710 */ 34 add_task(async function test_pointer_mouse_event() { 35 await SimpleTest.promiseFocus(); 36 37 let subframe = document.getElementById("scroll"); 38 if (subframe.clientWidth == 200) { 39 // No scrollbar, abort the test. This can happen e.g. on local macOS runs 40 // with OS settings to only show scrollbars on trackpad/mouse activity. 41 ok(false, "No scrollbars found, cannot run this test!"); 42 return; 43 } 44 45 let receivedEvent = {}; 46 let handler = function(e) { 47 receivedEvent[e.type] = true; 48 }; 49 subframe.addEventListener("pointerdown", handler); 50 subframe.addEventListener("pointermove", handler); 51 subframe.addEventListener("pointerup", handler); 52 subframe.addEventListener("mousedown", handler); 53 subframe.addEventListener("mousemove", handler); 54 subframe.addEventListener("mouseup", handler); 55 56 // synthesize mouse actions on scrollbar. 57 let scrollbarX = (200 + subframe.clientWidth) / 2; 58 synthesizeMouse(subframe, scrollbarX, 30, { type: "mousedown" }); 59 synthesizeMouse(subframe, scrollbarX, 40, { type: "mousemove" }); 60 synthesizeMouse(subframe, scrollbarX, 40, { type: "mouseup" }); 61 62 await new Promise(SimpleTest.executeSoon); 63 64 // Test pointer event 65 ok(receivedEvent.pointerdown, "should receive pointerdown event"); 66 ok(!receivedEvent.pointermove, "should not receive pointermove event"); 67 ok(receivedEvent.pointerup, "should receive pointerup event"); 68 69 // Test mouse event 70 ok(receivedEvent.mousedown, "should receive mousedown event"); 71 ok(!receivedEvent.mousemove, "should not receive mousemove event"); 72 ok(receivedEvent.mouseup, "should receive mouseup event"); 73 }); 74 75 </script> 76 </body> 77 </html>