<!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>
