From f80617cbeb028b79f93aed7ddca6c0390050c7d3 Mon Sep 17 00:00:00 2001
From: James Graham <james@hoppipolla.co.uk>
Date: Tue, 12 Jul 2022 12:18:20 +0000
Subject: [PATCH] Implement support for touch input in marionette

Touch is a bit different to mouse inputs because there are often
multiple pointers (i.e. fingers) acting at the same time. It turns out
that Gecko wants a single call containing all the positions etc. of
the touch pointers for each event, rather than having a single call
per pointer. So we have to group the pointer actions from one tick
together.

Differential Revision: https://phabricator.services.mozilla.com/D139120

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1543337
gecko-commit: a2a4ccd34675568a182f539d7a9375518339094e
gecko-reviewers: webdriver-reviewers, whimboo, jdescottes
---
 .../testdriver/actions/elementTiming.html     | 22 +++++++-------
 .../testdriver/actions/multiTouchPoints.html  | 24 ++++++++-------
 .../multiTouchPointsReleaseSecondPoint.html   | 20 ++++++-------
 .../multiTouchPointsTwoTouchStarts.html       | 29 ++++++++++---------
 4 files changed, 50 insertions(+), 45 deletions(-)

diff --git a/infrastructure/testdriver/actions/elementTiming.html b/infrastructure/testdriver/actions/elementTiming.html
index ec71e0477ba1ff..33731e92999809 100644
--- a/infrastructure/testdriver/actions/elementTiming.html
+++ b/infrastructure/testdriver/actions/elementTiming.html
@@ -33,35 +33,37 @@
 <script>
 let events = [];
 
-async_test(t => {
+promise_test(async t => {
   let test1 = document.getElementById("test1");
   let test2 = document.getElementById("test2");
   test1.addEventListener("click",
     () => {
       test2.style.display = "block";
       test2.style.top = "100px";
-      test2.style.left = "0"});
+      test2.style.left = "0"
+    });
   test2.addEventListener("click",
     e => {
       events.push(e.clientX);
-      events.push(e.clientY);});
+      events.push(e.clientY);
+    });
 
   const waitCondition = new Promise((resolve, reject)=>{setTimeout(resolve, 5000);});
   const test1ClickWatcher = new EventWatcher(t, test1, ["click"], ()=>waitCondition);
   const test2ClickWatcher = new EventWatcher(t, test2, ["click"], ()=>waitCondition);
   let waitForClicks = Promise.all([test1ClickWatcher.wait_for(["click"]), test2ClickWatcher.wait_for(["click"])]);
-  let actions = new test_driver.Actions()
+
+  await new test_driver.Actions()
     .pointerMove(0, 0, {origin: test1})
     .pointerDown()
     .pointerUp()
-    .send()
-    .then(()=>new test_driver.Actions()
+    .send();
+  await new test_driver.Actions()
       .pointerMove(0, 0, {origin: test2})
       .pointerDown()
       .pointerUp()
-      .send())
-    .then(()=>waitForClicks)
-    .then(t.step_func_done(() => assert_array_equals(events, [50, 150])))
-    .catch(e => t.step_func(() => assert_unreached("Actions sequence failed " + e)));
+      .send();
+  await waitForClicks;
+  assert_array_equals(events, [50, 150])
 });
 </script>
diff --git a/infrastructure/testdriver/actions/multiTouchPoints.html b/infrastructure/testdriver/actions/multiTouchPoints.html
index 3933db156297d8..3a80f900c79b2d 100644
--- a/infrastructure/testdriver/actions/multiTouchPoints.html
+++ b/infrastructure/testdriver/actions/multiTouchPoints.html
@@ -27,14 +27,17 @@
 let event_type = [];
 let event_id = [];
 
-async_test(t => {
+promise_test(async t => {
+  let onEvent = t.step_func(e => {
+    event_type.push(e.type);
+    event_id.push(e.pointerId);
+  });
+
   let test1 = document.getElementById("test1");
-  document.getElementById("test1").addEventListener("pointerdown",
-    e => {event_type.push(e.type); event_id.push(e.pointerId);});
-  document.getElementById("test1").addEventListener("pointerup",
-    e => {event_type.push(e.type); event_id.push(e.pointerId);});
-  document.getElementById("test1").addEventListener("pointermove",
-    e => {event_type.push(e.type); event_id.push(e.pointerId);});
+
+  test1.addEventListener("pointerdown", onEvent);
+  test1.addEventListener("pointerup", onEvent);
+  test1.addEventListener("pointermove", onEvent);
 
   let actions = new test_driver.Actions()
       .addPointer("touchPointer1", "touch")
@@ -47,9 +50,8 @@
       .pointerUp({sourceName: "touchPointer1"})
       .pointerUp({sourceName: "touchPointer2"});
 
-  actions.send()
-    .then(t.step_func_done(() => {assert_array_equals(event_type, ["pointerdown", "pointerdown", "pointermove", "pointerup", "pointerup"]);
-      assert_array_equals(event_id, [2, 3, 2, 2, 3]);}))
-    .catch(e => t.step_func(() => assert_unreached("Actions sequence failed " + e)));
+  await actions.send()
+  assert_array_equals(event_type, ["pointerdown", "pointerdown", "pointermove", "pointerup", "pointerup"]);
+  assert_array_equals(event_id, [2, 3, 2, 2, 3]);
 });
 </script>
diff --git a/infrastructure/testdriver/actions/multiTouchPointsReleaseSecondPoint.html b/infrastructure/testdriver/actions/multiTouchPointsReleaseSecondPoint.html
index ba976939365f08..e04fb02977385a 100644
--- a/infrastructure/testdriver/actions/multiTouchPointsReleaseSecondPoint.html
+++ b/infrastructure/testdriver/actions/multiTouchPointsReleaseSecondPoint.html
@@ -27,7 +27,7 @@
 let event_type = [];
 let event_id = [];
 
-async_test(t => {
+promise_test(async t => {
   let test1 = document.getElementById("test1");
   document.getElementById("test1").addEventListener("pointerdown",
     e => {event_type.push(e.type); event_id.push(e.pointerId);});
@@ -36,7 +36,7 @@
   document.getElementById("test1").addEventListener("pointermove",
     e => {event_type.push(e.type); event_id.push(e.pointerId);});
 
-  let actions = new test_driver.Actions()
+  await new test_driver.Actions()
       .addPointer("touchPointer1", "touch")
       .addPointer("touchPointer2", "touch")
       .pointerMove(0, 0, {origin: test1, sourceName: "touchPointer1"})
@@ -44,14 +44,14 @@
       .pointerDown({sourceName: "touchPointer1"})
       .pointerDown({sourceName: "touchPointer2"})
       .pointerMove(10, 10, {origin: test1, sourceName: "touchPointer1"})
+      .addTick()
       .pointerUp({sourceName: "touchPointer2"})
-      .pointerUp({sourceName: "touchPointer1"});
-
-  actions.send()
-    .then(t.step_func_done(() => {
-      assert_array_equals(event_type, ["pointerdown", "pointerdown", "pointermove", "pointerup", "pointerup"]);
-      assert_array_equals(event_id, [2, 3, 2, 3, 2]);
-    }))
-    .catch(e => t.step_func(() => assert_unreached("Actions sequence failed " + e)));
+      .addTick()
+      .pointerUp({sourceName: "touchPointer1"})
+      .send();
+
+  assert_array_equals(event_type, ["pointerdown", "pointerdown", "pointermove", "pointerup", "pointerup"]);
+  assert_array_equals(event_id, [2, 3, 2, 3, 2]);
+
 });
 </script>
diff --git a/infrastructure/testdriver/actions/multiTouchPointsTwoTouchStarts.html b/infrastructure/testdriver/actions/multiTouchPointsTwoTouchStarts.html
index 788d96e1fd6aa7..06f48ebc38a17e 100644
--- a/infrastructure/testdriver/actions/multiTouchPointsTwoTouchStarts.html
+++ b/infrastructure/testdriver/actions/multiTouchPointsTwoTouchStarts.html
@@ -27,14 +27,15 @@
 let event_type = [];
 let event_id = [];
 
-async_test(t => {
-  let test1 = document.getElementById("test1");
-  document.getElementById("test1").addEventListener("pointerdown",
-    e => {event_type.push(e.type); event_id.push(e.pointerId);});
-  document.getElementById("test1").addEventListener("pointerup",
-    e => {event_type.push(e.type); event_id.push(e.pointerId);});
-  document.getElementById("test1").addEventListener("pointermove",
-    e => {event_type.push(e.type); event_id.push(e.pointerId);});
+promise_test(async t => {
+  const test1 = document.getElementById("test1");
+  const handleEvent = e => {
+    event_type.push(e.type);
+    event_id.push(e.pointerId);
+  }
+  test1.addEventListener("pointerdown", handleEvent);
+  test1.addEventListener("pointerup", handleEvent);
+  test1.addEventListener("pointermove", handleEvent);
 
   let actions = new test_driver.Actions()
       .addPointer("touchPointer1", "touch")
@@ -43,15 +44,15 @@
       .pointerMove(10, 0, {origin: test1, sourceName: "touchPointer2"})
       .pointerDown({sourceName: "touchPointer1"})
       .pointerMove(0, 5, {origin: test1, sourceName: "touchPointer1"})
+      .addTick()
       .pointerDown({sourceName: "touchPointer2"})
+      .addTick()
       .pointerUp({sourceName: "touchPointer1"})
       .pointerUp({sourceName: "touchPointer2"});
 
-  actions.send()
-    .then(t.step_func_done(() => {
-      assert_array_equals(event_type, ["pointerdown", "pointermove", "pointerdown", "pointerup", "pointerup"]);
-      assert_array_equals(event_id, [2, 2, 3, 2, 3]);
-    }))
-    .catch(e => t.step_func(() => assert_unreached("Actions sequence failed " + e)));
+  await actions.send()
+
+  assert_array_equals(event_type, ["pointerdown", "pointermove", "pointerdown", "pointerup", "pointerup"]);
+  assert_array_equals(event_id, [2, 2, 3, 2, 3]);
 });
 </script>