mouseevents-mousemove.htm (3279B)
1 <!doctype html> 2 <head> 3 <meta charset=utf-8> 4 <title>MouseEvent - mousemove event order</title> 5 <style> 6 .testarea { margin: auto; width: 80%; height: 250px; border: 1px solid grey; position: relative; } 7 8 #start,#end { background-color: red; border: 1px solid black; margin: 0; padding: 0; } 9 /* start/end layout */ 10 #start.green,#end.green { background-color: green; } 11 #start { position: absolute; left: 15%; top: 15%; width: 50%; height: 50%; } 12 #end { position: absolute; right: 15%; bottom: 15%; width: 50%; height: 50%; } 13 </style> 14 <script src="/resources/testharness.js"></script> 15 <script src="/resources/testharnessreport.js"></script> 16 <script src="/resources/testdriver.js"></script> 17 <script src="/resources/testdriver-actions.js"></script> 18 <script src="/resources/testdriver-vendor.js"></script> 19 <script> 20 setup({explicit_timeout: true}); 21 </script> 22 <script src="/uievents/resources/eventrecorder.js"></script> 23 </head> 24 <body> 25 <p><strong>Description</strong>: Verifies that mousemove events track the pointer position and transition from top-most 26 visible element to top-most visible element, changing targets 27 in the DOM along the way.</p> 28 29 <p><strong>Instructions</strong>: </p> 30 <ol> 31 <li>Move the pointer to the upper-left red box and then move it directly toward and into the lower-right red box. 32 </ol> 33 <p><strong>Test Passes</strong> if both boxes turn green and the word 'PASS' appears below</p> 34 35 <section class="testarea"> 36 <div id="end"></div> 37 <div id="start"></div> 38 </section> 39 40 <script> 41 var mouse_test = async_test("Mousemove events"); 42 var start = document.getElementById("start"); 43 var end = document.getElementById("end"); 44 var actions_promise; 45 46 EventRecorder.configure({ 47 mergeEventTypes: ["mousemove"], 48 objectMap: { 49 "div#start": start, 50 "div#end": end 51 } 52 }); 53 54 55 start.addRecordedEventListener('mousemove', function (e) { 56 e.stopPropagation(); 57 this.className = "green"; 58 }); 59 60 end.addRecordedEventListener('mousemove', function (e) { 61 e.stopPropagation(); 62 this.className = "green"; 63 endTest(); 64 // Make sure the test finishes after all the input actions are completed. 65 actions_promise.then( () => mouse_test.done() ); 66 }); 67 68 function endTest() { 69 EventRecorder.stop(); 70 var results = EventRecorder.getRecords(); 71 // Check results: 72 mouse_test.step(function () { 73 assert_equals(results.length, 2, "Two mousemove events"); 74 assert_equals(results[0].event.type, "mousemove", "First event is a mousemove event"); 75 assert_equals(results[1].event.type, "mousemove", "Second event is a mousemove event"); 76 assert_equals(results[0].event.target, "div#start", "First event targetted #start"); 77 assert_equals(results[1].event.target, "div#end", "Second event targetted #end"); 78 }); 79 } 80 81 EventRecorder.start(); 82 83 var rect = start.getClientRects()[0]; 84 // Inject mouse inputs. 85 actions_promise = new test_driver.Actions() 86 .pointerMove(0, 0, {origin: start}) 87 .pointerMove(Math.round(rect.width/2) + 10, 88 Math.round(rect.height/2) + 10, {origin: start}) 89 .send(); 90 </script> 91 </body> 92 </html>