diff options
Diffstat (limited to 'testing/web-platform/tests/uievents/order-of-events/mouse-events/mouseevents-mousemove.htm')
| -rw-r--r-- | testing/web-platform/tests/uievents/order-of-events/mouse-events/mouseevents-mousemove.htm | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/testing/web-platform/tests/uievents/order-of-events/mouse-events/mouseevents-mousemove.htm b/testing/web-platform/tests/uievents/order-of-events/mouse-events/mouseevents-mousemove.htm new file mode 100644 index 0000000000..98a35bbcf6 --- /dev/null +++ b/testing/web-platform/tests/uievents/order-of-events/mouse-events/mouseevents-mousemove.htm @@ -0,0 +1,92 @@ +<!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>
\ No newline at end of file |