mouseevent_move_button.html (4537B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Mouse Events with button depressed</title> 5 <meta name="timeout" content="long"> 6 <meta name="viewport" content="width=device-width"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <style> 13 div.box { 14 border: 2px solid lightgray; 15 margin: 25px; 16 padding: 25px; 17 float: left; 18 } 19 #lightyellow { 20 background-color: lightyellow; 21 } 22 #lightblue { 23 background-color: lightblue; 24 } 25 #lightgreen { 26 background-color: lightgreen; 27 } 28 </style> 29 </head> 30 <body onload="run()"> 31 <h2>Mouse Events</h2> 32 <h4>Test Description: This test checks if mouse events set button property correctly 33 <ol> 34 <li>Put your mouse over the green rectangle</li> 35 <li>Press a non-primary button and hold it</li> 36 <li>Drag mouse to blue rectangle</li> 37 <li>Release mouse button</li> 38 </ol> 39 </h4> 40 <div class="box" id="lightyellow"> 41 <div class="box" id="lightgreen"></div> 42 <div class="box" id="lightblue"></div> 43 </div> 44 <script> 45 var test = async_test("mouse events fired without button state"); 46 var button = -1; 47 var actions_promise; 48 49 function run() { 50 var lightgreen = document.getElementById("lightgreen"); 51 var lightyellow = document.getElementById("lightyellow"); 52 var lightblue = document.getElementById("lightblue"); 53 54 on_event(lightgreen, "contextmenu", function (event) { 55 event.preventDefault(); 56 }); 57 58 on_event(lightgreen, "mousedown", function (event) { 59 test.step(function() {assert_equals(button, -1, "There must only be one mouse down event.");}); 60 test.step(function() {assert_not_equals(event.button, 0, "Must not be primary button.");}); 61 button = event.button; 62 }); 63 on_event(lightyellow, "click", function (event) { 64 test.step(function() {assert_equals(event.button, button, "Button must be the same as mousedown.");}); 65 }); 66 on_event(lightyellow, "mousemove", function (event) { 67 if (button != -1) { 68 test.step(function() {assert_equals(event.button, 0, "Button must be un-initialized for mousemove.");}); 69 } 70 }); 71 on_event(lightgreen, "mouseleave", function (event) { 72 if (button != -1) { 73 test.step(function() {assert_equals(event.button, 0, "Button must be un-initialized for mouseleave.");}); 74 } 75 }); 76 on_event(lightblue, "mouseenter", function (event) { 77 if (button != -1) { 78 test.step(function() {assert_equals(event.button, 0, "Button must be un-initialized for mouseenter.");}); 79 } 80 }); 81 on_event(lightblue, "mouseup", function (event) { 82 if (button != -1) { 83 test.step(function() {assert_equals(event.button, button, "Button must be the same as mousedown.");}); 84 // Make sure the test finishes after all the input actions are completed. 85 actions_promise.then( () => { 86 test.done(); 87 }); 88 } 89 }); 90 91 // Inject mouse inputs. 92 var actions = new test_driver.Actions(); 93 actions_promise = actions.pointerMove(0, 0, {origin: lightgreen}) 94 .pointerDown({button: actions.ButtonType.MIDDLE}) 95 .pointerMove(0, 0, {origin: lightyellow}) 96 .pointerMove(0, 0, {origin: lightblue}) 97 .pointerUp({button: actions.ButtonType.MIDDLE}) 98 .send(); 99 } 100 </script> 101 </body> 102 </html>