<!DOCTYPE html>
<html>
<head>
<title>Fullscreen and Mouse Lock Scripts</title>
<script type="text/javascript">

function enterFullscreen() {
  console.log("enterFullscreen()");
  document.getElementById('container').webkitRequestFullScreen(
    Element.ALLOW_KEYBOARD_INPUT);
}

function exitFullscreen() {
  console.log("exitFullscreen()");
  document.webkitCancelFullScreen();
}

// Wait for notification from JS, then notify test of success or failure
// callback that the click has registered and the mouse lock state has changed.
function lockMouse1(callback) {
  console.log("lockMouse1()");
  navigator.webkitPointer.lock(document.getElementById("lockTarget1"),
    function() {
      console.log("lock success");
      if (callback) {
        callback("success");
      }
    },
    function() {
      console.log("lock failed");
      if (callback) {
        callback("failure");
      }
    }
  );
}

var lock_result1 = "";
// In the pyAuto test the fullscreen is initiated, accepted and enters into a wait state
// reading the value of lock_result1. One of the two asynchronous functions in the JS will
// be executed. The pyAuto code waits for lock_result to return "success" or "failure".
// Sample pyAuto code: lock_result = self._driver.execute_script('lockMouse1AndSetLockResult()')
function lockMouse1AndSetLockResult() {
  console.log("lockMouse1AndSetLockResult()");
  lock_result1 = "";
  navigator.webkitPointer.lock(document.getElementById("lockTarget1"),
    function() {
      console.log("lock success");
      lock_result = "success"
    },
    function() {
      console.log("lock failed");
      lock_result = "failure"
    }
  );
}

function lockMouse2() {
  console.log("lockMouse2()");
  navigator.webkitPointer.lock(document.getElementById("lockTarget2"),
                               function(){console.log("lock success")},
                               function(){console.log("lock failed")});
}

function delayedLockMouse1() {
  console.log("delayedLockMouse1()");
  window.setTimeout(lockMouse1, 1010);
  // Delay must be over 1 second or the click that initiated the delayed action
  // may still be considered active and treat this as a user gesture.
  // We want to test a lock not associated with a user gesture.
}

function spamLockMouse2() {
  console.log("spamLockMouse2()")
  window.setInterval(lockMouse2, 111);
}

function unlockMouse() {
  console.log("unlockMouse()");
  navigator.webkitPointer.unlock();
}

function enterFullscreenAndLockMouse1() {
  console.log("enterFullscreenAndLockMouse1()");
  enterFullscreen();
  lockMouse1();
}

function lockMouse1AndEnterFullscreen() {
  console.log("lockMouse1AndEnterFullscreen()");
  lockMouse1();
  enterFullscreen();
}

</script>
</head>
<body title="This tooltip should not be shown if the mouse is locked.">
  <div id="container">
    <button id="enterFullscreen" onclick="enterFullscreen();">enterFullscreen()</button><br>
    <button id="exitFullscreen" onclick="exitFullscreen();">exitFullscreen()</button><br>
    <button id="lockMouse1" onclick="lockMouse1();">lockMouse1()</button><br>
    <button id="lockMouse2" onclick="lockMouse2();">lockMouse2()</button><br>
    <button id="delayedLockMouse1" onclick="delayedLockMouse1();">delayedLockMouse1()</button><br>
    <button id="spamLockMouse2" onclick="spamLockMouse2();">spamLockMouse2()</button><br>
    <button id="unlockMouse" onclick="unlockMouse();">unlockMouse()</button><br>
    <button id="enterFullscreenAndLockMouse1" onclick="enterFullscreenAndLockMouse1()">enterFullscreenAndLockMouse1()</button><br>
    <button id="lockMouse1AndEnterFullscreen" onclick="lockMouse1AndEnterFullscreen()">lockMouse1AndEnterFullscreen()</button><br>
    <div id="lockTarget1">lockTarget1</div>
    <div id="lockTarget2">lockTarget2</div>
  </div>
  This text is outside of the container that is made fullscreen. This text should not be visible when fullscreen.
</body>
</html>
</html>