Simulate actions in order-of-events/focus-events/focus-contained.html

Use testdriver Action API to simulate mouse click actions in
third_party/blink/web_tests/external/wpt/uievents/order-of-events/
focus-events/focus-contained.html.

The focus events in these tests are not I saw when I run this test on
Chrome, Firefox and Safari, https://output.jsbin.com/ladarov/quiet.
Below are the correct events and targets:
"type focus target b
type focusin target b
type blur target b
type focusout target b
type focus target a
type focusin target a
type blur target a
type focusout target a
type focus target b
type focusin target b
type blur target b
type focusout target b"

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

uievents/order-of-events/focus-events/focus-contained-manual.html → uievents/order-of-events/focus-events/focus-contained.html

@@ -4,9 +4,11 @@
   <meta charset="utf-8">
   <title>Focus-related events should fire in the correct order</title>
   <link rel="help" href="https://w3c.github.io/uievents/#events-focusevent-event-order">
-  <meta name="flags" content="interact">
   <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>
 </head>
 
@@ -35,9 +37,10 @@
   "focusin",
   "focusout"
 ];
-window.onload = function () {
+window.onload = async function () {
   var a = document.getElementById("a");
   var b = document.getElementById("b");
+  var button = document.getElementById("done");
   var inputs = [a, b];
   EventRecorder.configure({
       objectMap: {
@@ -48,29 +51,44 @@
 
   EventRecorder.addEventListenersForNodes(relevantEvents, inputs, stopPropagation);
   var expected = [
-    {type: "focusin", target: "b"},
     {type: "focus", target: "b"},
-    {type: "focusout", target: "b"},
-    {type: "focusin", target: "a"},
+    {type: "focusin", target: "b"},
     {type: "blur", target: "b"},
+    {type: "focusout", target: "b"},
     {type: "focus", target: "a"},
-    {type: "focusout", target: "a"},
-    {type: "focusin", target: "b"},
+    {type: "focusin", target: "a"},
     {type: "blur", target: "a"},
+    {type: "focusout", target: "a"},
     {type: "focus", target: "b"},
-    {type: "focusout", target: "b"},
-    {type: "blur", target: "b"}
+    {type: "focusin", target: "b"},
+    {type: "blur", target: "b"},
+    {type: "focusout", target: "b"}
   ];
 
   async_test(function(t) {
-    document.getElementById("done").addEventListener("click", function () {
+    button.addEventListener("click", function () {
       t.step(function () {
         assert_true(EventRecorder.checkRecords(expected));
         t.done();
       });
     }, false);
   }, "Focus-related events should fire in the correct order");
   EventRecorder.start();
+
+  await new test_driver.Actions()
+    .pointerMove(0, 0, {origin: b})
+    .pointerDown()
+    .pointerUp()
+    .pointerMove(0, 0, {origin: a})
+    .pointerDown()
+    .pointerUp()
+    .pointerMove(0, 0, {origin: b})
+    .pointerDown()
+    .pointerUp()
+    .pointerMove(0, 0, {origin: button})
+    .pointerDown()
+    .pointerUp()
+    .send();
 };
 </script>
 </html>