<!DOCTYPE HTML>
<html>
  <!--
  https://bugzilla.mozilla.org/show_bug.cgi?id=633602
  -->
  <head>
    <title>Bug 633602 - file_targetOutOfFocus.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"/>
  </head>
  <body>
    <a target="_blank"
      href="https://bugzilla.mozilla.org/show_bug.cgi?id=633602">
      Mozilla Bug 633602
    </a>
    <p id="display"></p>
    <div id="content">
    </div>
    <div id="div">
      <input id="input" type="text" />
    </div>
    <pre id="test">
      <script type="application/javascript">
        /*
         * Test for Bug 633602
         * Element doesn't need to have focus to request
         * pointer lock
        */

        SimpleTest.waitForExplicitFinish();

        var div = document.getElementById("div")
          , input = document.getElementById("input")
          , divPointerLock = false;

        function runTests () {
          ok(divPointerLock, "Pointer should be locked even if " +
            "the element being locked is not focused");
        }

        input.addEventListener("focus", function() {
          div.requestPointerLock();
        }, { once: true });

        document.addEventListener("pointerlockchange", function (e) {
          if (document.pointerLockElement === div) {
            divPointerLock = true;
            addFullscreenChangeContinuation("exit", function() {
              runTests();
              SimpleTest.finish();
            });
            document.exitFullscreen();
          }
        });

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