summaryrefslogtreecommitdiffstats
path: root/dom/tests/mochitest/pointerlock/file_childIframe.html
blob: 9ee3153d2e5c13a7cc17fe8b8fe8c40e9a0f2038 (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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=633602
-->
<head>
  <title>Bug 633602 - file_childIframe.html</title>
  <script src="/tests/SimpleTest/SimpleTest.js">
  </script>
  <script src="/tests/SimpleTest/EventUtils.js"></script>
  <script type="application/javascript" src="pointerlock_utils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  <style>
    #parent, #childDiv, #iframe, #table, #table td {
      margin: 0;
      padding: 0;
      border: none;
    }
    #iframe, #table {
      background-color: red;
      width: 100%;
      height: 100%;
    }
    #childDiv, #table td {
      background-color: blue;
      width: 50%;
      height: 50%;
    }
  </style>
</head>
<body>
  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=633602">
    Mozilla Bug 633602
  </a>

  <div id="parent">
    <table id="childTable">
      <tr>
        <td>
          <iframe id="iframe" src="iframe_differentDOM.html">
          </iframe>
        </td>
        <td>
          <div id="childDiv">
          </div>
        </td>
      </tr>
    </table>
  </div>

  <pre id="test">
    <script type="application/javascript">
      /*
       * Test for Bug 633602
       * Check if pointer is locked when over a child iframe of
       * the locked element
       * Check if pointer is being repositioned back to center of
       * the locked element even when pointer goes over a child ifame
       */

      SimpleTest.waitForExplicitFinish();

      var parent = document.getElementById("parent")
        , childDiv = document.getElementById("childDiv")
        , iframe = document.getElementById("iframe");

      function MovementStats() {
        this.movementX = false;
        this.movementY = false;
      }

      var firstMove = new MovementStats()
        , secondMove = new MovementStats()
        , hoverIframe = false;

      function runTests () {
        ok(hoverIframe, "Pointer should be locked even when pointer " +
          "hovers over a child iframe");
        is(firstMove.movementX, secondMove.movementX, "MovementX of first " +
          "move to childDiv should be equal to movementX of second move " +
          "to child div");
        is(firstMove.movementY, secondMove.movementY, "MovementY of first " +
          "move to childDiv should be equal to movementY of second move " +
          "to child div");
      }

      var firstMoveChild = function (e) {
        firstMove.movementX = e.movementX;
        firstMove.movementY = e.movementY;

        parent.removeEventListener("mousemove", firstMoveChild);
        parent.addEventListener("mousemove", moveIframe);

        synthesizeMouseAtCenter(iframe, {type: "mousemove"}, window);
      };

      var moveIframe = function (e) {
        hoverIframe = !!document.pointerLockElement;

        parent.removeEventListener("mousemove", moveIframe);
        parent.addEventListener("mousemove", secondMoveChild);

        synthesizeMouseAtCenter(childDiv, {type: "mousemove"}, window);
      };

      var secondMoveChild = function (e) {
        secondMove.movementX = e.movementX;
        secondMove.movementY = e.movementY;
        parent.removeEventListener("mousemove", secondMoveChild);

        addFullscreenChangeContinuation("exit", function() {
          runTests();
          SimpleTest.finish();
        });
        document.exitFullscreen();
      };

      document.addEventListener("pointerlockchange", function () {
        if (document.pointerLockElement === parent) {
          parent.addEventListener("mousemove", firstMoveChild);
          synthesizeMouseAtCenter(childDiv, {type: "mousemove"}, window);
        }
      });

      function start() {
        addFullscreenChangeContinuation("enter", function() {
          parent.requestPointerLock();
        });
        parent.requestFullscreen();
      }
    </script>
  </pre>
</body>
</html>