summaryrefslogtreecommitdiffstats
path: root/dom/tests/mochitest/pointerlock/file_pointerlock-api.html
blob: 6f5fb537beb1eb9a048d4597107da90796ca5161 (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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE HTML>
<html>
<!--https://bugzilla.mozilla.org/show_bug.cgi?id=633602-->
<head>
  <title>Bug 633602</title>
  <script src="/tests/SimpleTest/EventUtils.js">
  </script>
  <script src="/tests/SimpleTest/SimpleTest.js">
  </script>
  <script type="application/javascript" src="pointerlock_utils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
  <a target="_blank"
    href="https://bugzilla.mozilla.org/show_bug.cgi?id=633602">
    Mozilla Bug 633602
  </a>
  <div id="div"></div>
  <pre id="test">
    <script type="text/javascript">
      /*
       * Test for Bug 633602
       * Make sure DOM API is correct.
       */

      SimpleTest.waitForExplicitFinish();

      var div,
        hasRequestPointerLock = false,
        pointerLockChangeEventFired = false,
        pointerUnlocked = false,
        pointerLocked = false,
        hasExitPointerLock = false,
        pointerLockElement = false,
        hasMovementX = false,
        hasMovementY = false;
        gotContextMenuEvent = false;

      function runTests () {
        ok(hasRequestPointerLock, "Element should have requestPointerLock.");
        ok(pointerLockChangeEventFired, "pointerlockchange event should fire.");
        ok(pointerUnlocked, "Should be able to unlock pointer locked element.");
        ok(pointerLocked, "Requested element should be able to lock.");
        ok(hasExitPointerLock, "Document should have exitPointerLock");
        ok(pointerLockElement, "Document should keep track of correct pointer locked element");
        ok(hasMovementX, "Mouse Event should have movementX.");
        ok(hasMovementY, "Mouse Event should have movementY.");
        ok(!gotContextMenuEvent, "Shouldn't have got a contextmenu event.");
      }

      function mouseMoveHandler(e) {
        info("Got mousemove");
        document.removeEventListener("mousemove", mouseMoveHandler);

        hasMovementX = "movementX" in e;
        hasMovementY = "movementY" in e;

        hasExitPointerLock = "exitPointerLock" in document;
        document.exitPointerLock();
      }

      document.addEventListener("pointerlockchange", function (e) {
        pointerLockChangeEventFired = true;

        if (document.pointerLockElement) {
          info("Got pointerlockchange for entering");
          pointerLocked = true;
          pointerLockElement = document.pointerLockElement === div;
 
          window.addEventListener("contextmenu",
                                  function() { gotContextMenuEvent = true; },
                                  true);
          synthesizeMouse(document.body, 4, 4,
                          { type: "contextmenu", button: 2 },
                          window);

          document.addEventListener("mousemove", mouseMoveHandler);
          synthesizeMouseAtCenter(div, {type: "mousemove"}, window);
        } else {
          info("Got pointerlockchange for exiting");
          pointerUnlocked = true;
          addFullscreenChangeContinuation("exit", function() {
            info("Got fullscreenchange for exiting");
            runTests();
            SimpleTest.finish();
          });
          document.exitFullscreen();
        }
      });

      function start() {
        div = document.getElementById("div");
        info("Requesting fullscreen on parent");
        addFullscreenChangeContinuation("enter", function() {
          info("Got fullscreenchange for entering");
          hasRequestPointerLock = "requestPointerLock" in div;
          div.requestPointerLock();
        });
        div.requestFullscreen();
      }
    </script>
  </pre>
</body>
</html>