| <!doctype html> |
| <head> |
| <meta charset=utf-8> |
| <title>MouseEvent - mousemove event order</title> |
| <style> |
| .testarea { margin: auto; width: 80%; height: 250px; border: 1px solid grey; position: relative; } |
| |
| #start,#end { background-color: red; border: 1px solid black; margin: 0; padding: 0; } |
| /* start/end layout */ |
| #start.green,#end.green { background-color: green; } |
| #start { position: absolute; left: 15%; top: 15%; width: 50%; height: 50%; } |
| #end { position: absolute; right: 15%; bottom: 15%; width: 50%; height: 50%; } |
| </style> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <script> |
| setup({explicit_timeout: true}); |
| </script> |
| <script src="/uievents/resources/eventrecorder.js"></script> |
| </head> |
| <body> |
| <p><strong>Description</strong>: Verifies that mousemove events track the pointer position and transition from top-most |
| visible element to top-most visible element, changing targets |
| in the DOM along the way.</p> |
| |
| <p><strong>Instructions</strong>: </p> |
| <ol> |
| <li>Move the pointer to the upper-left red box and then move it directly toward and into the lower-right red box. |
| </ol> |
| <p><strong>Test Passes</strong> if both boxes turn green and the word 'PASS' appears below</p> |
| |
| <section class="testarea"> |
| <div id="end"></div> |
| <div id="start"></div> |
| </section> |
| |
| <script> |
| var mouse_test = async_test("Mousemove events"); |
| var start = document.getElementById("start"); |
| var end = document.getElementById("end"); |
| var actions_promise; |
| |
| EventRecorder.configure({ |
| mergeEventTypes: ["mousemove"], |
| objectMap: { |
| "div#start": start, |
| "div#end": end |
| } |
| }); |
| |
| |
| start.addRecordedEventListener('mousemove', function (e) { |
| e.stopPropagation(); |
| this.className = "green"; |
| }); |
| |
| end.addRecordedEventListener('mousemove', function (e) { |
| e.stopPropagation(); |
| this.className = "green"; |
| endTest(); |
| // Make sure the test finishes after all the input actions are completed. |
| actions_promise.then( () => mouse_test.done() ); |
| }); |
| |
| function endTest() { |
| EventRecorder.stop(); |
| var results = EventRecorder.getRecords(); |
| // Check results: |
| mouse_test.step(function () { |
| assert_equals(results.length, 2, "Two mousemove events"); |
| assert_equals(results[0].event.type, "mousemove", "First event is a mousemove event"); |
| assert_equals(results[1].event.type, "mousemove", "Second event is a mousemove event"); |
| assert_equals(results[0].event.target, "div#start", "First event targetted #start"); |
| assert_equals(results[1].event.target, "div#end", "Second event targetted #end"); |
| }); |
| } |
| |
| EventRecorder.start(); |
| |
| var rect = start.getClientRects()[0]; |
| // Inject mouse inputs. |
| actions_promise = new test_driver.Actions() |
| .pointerMove(0, 0, {origin: start}) |
| .pointerMove(Math.round(rect.width/2) + 10, |
| Math.round(rect.height/2) + 10, {origin: start}) |
| .send(); |
| </script> |
| </body> |
| </html> |
