summaryrefslogtreecommitdiffstats
path: root/devtools/client/responsive/test/browser/browser_touch_pointerevents.js
blob: e94409a2031184d36a2bae536e066fd248782597 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/* Any copyright is dedicated to the Public Domain.
   http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test that simulating touch only dispatches pointer events from a touch event.

const TEST_URL =
  "data:text/html;charset=utf-8," +
  '<div style="width:100px;height:100px;background-color:red"></div>' +
  "</body>";

addRDMTask(TEST_URL, async function ({ ui }) {
  info("Toggling on touch simulation.");
  reloadOnTouchChange(true);
  await toggleTouchSimulation(ui);

  await testPointerEvents(ui);

  info("Toggling off touch simulation.");
  await toggleTouchSimulation(ui);
  reloadOnTouchChange(false);
});

async function testPointerEvents(ui) {
  info("Test that pointer events are from touch events");
  await SpecialPowers.spawn(ui.getViewportBrowser(), [], async function () {
    const div = content.document.querySelector("div");

    div.addEventListener("pointermove", () => {
      div.style["background-color"] = "green"; //rgb(0,128,0)
    });
    div.addEventListener("pointerdown", e => {
      ok(e.pointerType === "touch", "Got pointer event from a touch event.");
    });

    info("Check that the pointerdown event is from a touch event.");
    const pointerDownPromise = ContentTaskUtils.waitForEvent(
      div,
      "pointerdown"
    );

    await EventUtils.synthesizeMouseAtCenter(
      div,
      { type: "mousedown", isSynthesized: false },
      content
    );
    await pointerDownPromise;
    await EventUtils.synthesizeMouseAtCenter(
      div,
      { type: "mouseup", isSynthesized: false },
      content
    );

    info(
      "Check that a pointermove event was never dispatched from the mousemove event"
    );
    await EventUtils.synthesizeMouseAtCenter(
      div,
      { type: "mousemove", isSynthesized: false },
      content
    );

    const win = content.document.defaultView;
    const bg = win.getComputedStyle(div).getPropertyValue("background-color");

    is(
      bg,
      "rgb(255, 0, 0)",
      `div's background color should still be red: rgb(255, 0, 0): got ${bg}`
    );
  });
}