Simulate actions in mouse tests in uievents/order-of-events/mouse-eve…

…nts/

Use testdriver Action API to simulate mouse click actions in
third_party/blink/web_tests/external/wpt/uievents/order-of-events/
mouse-events/mouseevents-mousemove.htm,
uievents/order-of-events/mouse-events/mousemove-across.html and
uievents/order-of-events/mouse-events/mousemove-between.html.

Bug: 1145677
Change-Id: I8a9bb41496651b6751fe88f84b693380b2d9531d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2713430
Reviewed-by: Mustaq Ahmed <mustaq@chromium.org>
Commit-Queue: Lan Wei <lanwei@chromium.org>
Cr-Commit-Position: refs/heads/master@{#857268}

uievents/order-of-events/mouse-events/mouseevents-mousemove-manual.htm → uievents/order-of-events/mouse-events/mouseevents-mousemove.htm

@@ -13,6 +13,9 @@
   </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>
@@ -35,8 +38,10 @@
  </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"],
@@ -56,21 +61,32 @@
       e.stopPropagation();
       this.className = "green";
       endTest();
-      done();
+      // 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:
-      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");
+      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>

uievents/order-of-events/mouse-events/mousemove-across-manual.html → uievents/order-of-events/mouse-events/mousemove-across.html

@@ -3,6 +3,9 @@
 <title>Mousemove handling across elements</title>
 <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 src="/uievents/resources/eventrecorder.js"></script>
 <style>
 #a {
@@ -75,7 +78,7 @@
   event.stopPropagation();
 }
 
-window.onload = function() {
+window.onload = async function() {
   var a = document.getElementById("a");
   var b = document.getElementById("b");
   var c = document.getElementById("c");
@@ -130,5 +133,30 @@
     }, false);
   }, "Mousemove events across elements should fire in the correct order.");
   EventRecorder.start();
+
+  var a_rect = a.getClientRects()[0];
+  var c_rect = c.getClientRects()[0];
+  var center_a_x = Math.round((a_rect.left + a_rect.right) / 2);
+  var center_a_y = Math.round((a_rect.top + a_rect.bottom) / 2);
+
+  var a1_rect = a1.getClientRects()[0];
+  var c1_rect = c1.getClientRects()[0];
+  var center_a1_x = Math.round((a1_rect.left + a1_rect.right) / 2);
+  var center_a1_y = Math.round((a1_rect.top + a1_rect.bottom) / 2);
+  // Inject mouse inputs.
+  await new test_driver.Actions()
+      .pointerMove(a_rect.right + 20, center_a_y)
+      .pointerMove(center_a_x, center_a_y)
+      .pointerMove(a_rect.left + 20, center_a_y)
+      .pointerMove(a_rect.left - 20, center_a_y)
+      .pointerMove(c_rect.left + 20, center_a_y)
+      .pointerMove(0, center_a_y)
+      .pointerMove(a1_rect.right + 20, center_a1_y)
+      .pointerMove(center_a1_x, center_a1_y)
+      .pointerMove(a1_rect.left + 20, center_a1_y)
+      .pointerMove(a1_rect.left - 20, center_a1_y)
+      .pointerMove(c1_rect.left + 20, center_a1_y)
+      .pointerMove(0, center_a1_y)
+      .send();
 };
 </script>

uievents/order-of-events/mouse-events/mousemove-between-manual.html → uievents/order-of-events/mouse-events/mousemove-between.html

@@ -3,6 +3,9 @@
 <title>Mousemove handling between elements</title>
 <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 src="/uievents/resources/eventrecorder.js"></script>
 <style>
 #a {
@@ -58,7 +61,7 @@
   event.stopPropagation();
 }
 
-window.onload = function() {
+window.onload = async function() {
   var a = document.getElementById("a");
   var b = document.getElementById("b");
   var c = document.getElementById("c");
@@ -102,5 +105,22 @@
     }, false);
   }, "Mousemove events between elements should fire in the correct order.");
   EventRecorder.start();
+
+  var a_rect = a.getClientRects()[0];
+  var b_rect = b.getClientRects()[0];
+  var c_rect = c.getClientRects()[0];
+  var center_b_y = Math.round((b_rect.top + b_rect.bottom) / 2);
+  var center_c_y = Math.round((c_rect.top + c_rect.bottom) / 2);
+
+  // Inject mouse inputs.
+  await new test_driver.Actions()
+      .pointerMove(b_rect.right + 10, center_b_y)
+      .pointerMove(0, 0, {origin: b})
+      .pointerMove(b_rect.right + 10, center_b_y)
+      .pointerMove(a_rect.right + 10, center_b_y)
+      .pointerMove(c_rect.right + 10, center_c_y)
+      .pointerMove(0, 0, {origin: c})
+      .pointerMove(c_rect.right + 20, c_rect.bottom + 20)
+      .send();
 };
 </script>