mouseevents-mousemove.htm

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /uievents/order-of-events/mouse-events/mouseevents-mousemove.htm - WPT Dashboard Interop Dashboard

<!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>