testing/web-platform/tests/infrastructure/testdriver/actions/multiTouchPoints.html

   1 <!DOCTYPE html>
   2 <meta charset="utf-8">
   3 <title>TestDriver actions: two touch points with one moving one pause</title>
   4 <script src="/resources/testharness.js"></script>
   5 <script src="/resources/testharnessreport.js"></script>
   6 <script src="/resources/testdriver.js"></script>
   7 <script src="/resources/testdriver-actions.js"></script>
   8 <script src="/resources/testdriver-vendor.js"></script>
   9 <script src="touchEvents.js"></script>
  10
  11 <style>
  12 div#test1{
  13   position: fixed;
  14   touch-action: none;
  15   top: 0;
  16   left: 0;
  17   width: 100px;
  18   height: 100px;
  19   background-color: blue;
  20 }
  21
  22 </style>
  23
  24 <div id="test1">
  25 </div>
  26
  27 <script>
  28 promise_test(async t => {
  29   const test1 = document.getElementById("test1");
  30
  31   const events = [];
  32   addPointerEventListeners(t, test1, events);
  33
  34   const actions = new test_driver.Actions()
  35       .addPointer("touchPointer1", "touch")
  36       .addPointer("touchPointer2", "touch")
  37       .pointerMove(0, 0, {origin: test1, sourceName: "touchPointer1"})
  38       .pointerMove(10, 0, {origin: test1, sourceName: "touchPointer2"})
  39       .pointerDown({sourceName: "touchPointer1"})
  40       .pointerDown({sourceName: "touchPointer2"})
  41       .pointerMove(0, 10, {origin: test1, sourceName: "touchPointer1"})
  42       .pointerUp({sourceName: "touchPointer1"})
  43       .pointerUp({sourceName: "touchPointer2"});
  44
  45   await actions.send()
  46
  47   eventEquals(events[0], {type: "pointerdown", pointerId: 2, clientX: 50, clientY: 50});
  48   eventEquals(events[1], {type: "pointerdown", pointerId: 3, clientX: 60, clientY: 50});
  49   // Allow one or two pointermove events
  50   let index = 3;
  51   const moveEvents = [events[2]];
  52   if (events[3].type === "pointermove") {
  53     index += 1;
  54     moveEvents.push(events[3]);
  55   }
  56   for (const event of moveEvents) {
  57     if (event.pointerId === 2) {
  58       eventEquals(event, {type: "pointermove", clientX: 50, clientY: 60});
  59     } else {
  60       eventEquals(event, {type: "pointermove", pointerId: 3, clientX: 60, clientY: 50});
  61     }
  62   }
  63   let remainingEvents = events.slice(index);
  64   assert_equals(remainingEvents.length, 2);
  65   eventEquals(remainingEvents[0], {type: "pointerup", pointerId: 2, clientX: 50, clientY: 60});
  66   eventEquals(remainingEvents[1], {type: "pointerup", pointerId: 3, clientX: 60, clientY: 50});
  67 });
  68 </script>