src/chrome/test/data/fullscreen_mouselock/fullscreen_mouselock.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Fullscreen and Mouse Lock Scripts</title>
   5 <style type="text/css">
   6   #HTMLCursor {
   7       border: solid black 1px;
   8       background: yellow;
   9       display: inline;
  10       position: absolute;
  11       pointer-events: none;
  12       z-index: 1;
  13   }
  14 </style>
  15 <script type="text/javascript">
  16
  17 function enterFullscreen() {
  18   console.log("enterFullscreen()");
  19   document.getElementById('container').webkitRequestFullScreen(
  20     Element.ALLOW_KEYBOARD_INPUT);
  21 }
  22
  23 function exitFullscreen() {
  24   console.log("exitFullscreen()");
  25   document.webkitCancelFullScreen();
  26 }
  27
  28 // Wait for notification from JS, then notify test of success or failure
  29 // callback that the click has registered and the mouse lock state has changed.
  30 function lockMouse1(callback) {
  31   console.log("lockMouse1()");
  32   var target = document.getElementById("lockTarget1");
  33
  34   function failure() {
  35     console.log("lock failed");
  36     if (callback) {
  37       callback("failure");
  38     }
  39   };
  40   function possibleSuccess() {
  41     if (document.webkitPointerLockElement == target) {
  42       console.log("lock success");
  43       if (callback)
  44         callback("success");
  45     } else {
  46       failure();
  47     }
  48   };
  49   document.onwebkitpointerlockchange = possibleSuccess;
  50   document.onwebkitpointerlockerror = failure;
  51   target.webkitRequestPointerLock();
  52 }
  53
  54 // In the PyAuto test the fullscreen is initiated, accepted and enters into a
  55 // wait state reading the value of lock_result. One of the two asynchronous
  56 // functions in the JS will be executed. The PyAuto code waits for lock_result
  57 // to return "success" or "failure". Sample PyAuto code:
  58 // lock_result = self._driver.execute_script('lockMouse1AndSetLockResult()')
  59 function lockMouseAndSetLockResult(targetId) {
  60   var target = document.getElementById(targetId);
  61   lock_result = "";
  62
  63   function failure() {
  64     console.log("lock failed");
  65     lock_result = "failure"
  66   };
  67   function possibleSuccess() {
  68     if (document.webkitPointerLockElement == target) {
  69       console.log("lock success");
  70       lock_result = "success"
  71     } else {
  72       failure();
  73     }
  74   };
  75   document.onwebkitpointerlockchange = possibleSuccess;
  76   document.onwebkitpointerlockerror = failure;
  77   target.webkitRequestPointerLock();
  78 }
  79
  80 function lockMouse1AndSetLockResult() {
  81   console.log("lockMouse1AndSetLockResult()");
  82   lockMouseAndSetLockResult("lockTarget1");
  83 }
  84
  85 // When mouse lock is initiated and accepted, PyAuto test will wait for the
  86 // lock_result to return "success" or "failure" to initiate the next action.
  87 function lockMouse2() {
  88   console.log("lockMouse2()");
  89   lockMouseAndSetLockResult("lockTarget2");
  90 }
  91
  92 function delayedLockMouse1() {
  93   console.log("delayedLockMouse1()");
  94   window.setTimeout(lockMouse1, 1010);
  95   // Delay must be over 1 second or the click that initiated the delayed action
  96   // may still be considered active and treat this as a user gesture.
  97   // We want to test a lock not associated with a user gesture.
  98 }
  99
 100 function spamLockMouse2() {
 101   console.log("spamLockMouse2()")
 102   window.setInterval(lockMouse2, 111);
 103 }
 104
 105 function unlockMouse() {
 106   console.log("unlockMouse()");
 107   document.webkitExitPointerLock();
 108 }
 109
 110 function enterFullscreenAndLockMouse1() {
 111   console.log("enterFullscreenAndLockMouse1()");
 112   enterFullscreen();
 113   lockMouse1();
 114 }
 115
 116 function lockMouse1AndEnterFullscreen() {
 117   console.log("lockMouse1AndEnterFullscreen()");
 118   lockMouse1();
 119   enterFullscreen();
 120 }
 121
 122 function moveHTMLCursorTo(x, y) {
 123   HTMLCursor.style.left = x + "px";;
 124   HTMLCursor.style.top = y + "px";
 125 }
 126
 127 function moveHTMLCursorToCenter() {
 128   moveHTMLCursorTo(window.innerWidth / 2, window.innerHeight / 2);
 129 }
 130
 131 function moveHTMLCursorBy(x, y) {
 132   moveHTMLCursorTo(
 133       HTMLCursor.getBoundingClientRect().left + parseInt(x),
 134       HTMLCursor.getBoundingClientRect().top + parseInt(y));
 135 }
 136
 137 var polyFillMouseEventMovementFromVenderPrefix = function (e) {
 138   e.movementX = (e.movementX !== undefined ? e.movementX :
 139                 (e.webkitMovementX !== undefined ? e.webkitMovementX :
 140                 (e.mozMovementX !== undefined ? e.mozMovementX :
 141                 (e.oMovementX !== undefined ? e.oMovementX :
 142                  e.msMovementY))));
 143   e.movementY = (e.movementY !== undefined ? e.movementY :
 144                 (e.webkitMovementY !== undefined ? e.webkitMovementY :
 145                 (e.mozMovementY !== undefined ? e.mozMovementY :
 146                 (e.oMovementY !== undefined ? e.oMovementY :
 147                  e.msMovementY))));
 148 }
 149
 150 var clicked_elem_ID = ""
 151 function clickElement(id) {
 152   clicked_elem_ID = id;
 153 }
 154
 155 function init() {
 156   moveHTMLCursorToCenter();
 157
 158   document.addEventListener("mousemove",
 159                             polyFillMouseEventMovementFromVenderPrefix);
 160   document.addEventListener("mousemove", function (e) {
 161     if (e.movementX !== undefined) {
 162       moveHTMLCursorBy(e.movementX, e.movementY);
 163       displaytext.innerHTML =
 164         "Document mousemove listener:<br>" +
 165         "<ul>" +
 166         "<li>Raw screen position: " + e.screenX + ", " + e.screenY + "</li>" +
 167         "<li>HTMLCursor: "
 168         + HTMLCursor.getBoundingClientRect().left + ", "
 169         + HTMLCursor.getBoundingClientRect().top + "</li>" +
 170         "<li>Movement: " + e.movementX + ", " + e.movementY + "</li>" +
 171         "</ul>";
 172     } else {
 173       displaytext.innerHTML =
 174         "<b>You must enable pointer lock in about:flags</b>";
 175     }
 176   });
 177
 178   document.addEventListener("keypress", function (e) {
 179     switch (String.fromCharCode(e.charCode)) {
 180     case "f": enterFullscreen(); break;
 181     case "x": exitFullscreen(); break;
 182     case "1": lockMouse1(); break;
 183     case "2": lockMouse2(); break;
 184     case "d": delayedLockMouse1(); break;
 185     case "u": unlockMouse(); break;
 186     case "b": enterFullscreenAndLockMouse1(); break;
 187     case "B": lockMouse1AndEnterFullscreen(); break;
 188     default: moveHTMLCursorToCenter(); break;
 189     }
 190   });
 191 }
 192
 193 </script>
 194 </head>
 195 <body onload="init()"
 196   title="This tooltip should not be shown if the mouse is locked.">
 197   <div id="container">
 198     <button id="enterFullscreen" onclick="enterFullscreen();">
 199       enterFullscreen() [f]
 200     </button><br>
 201     <button id="exitFullscreen" onclick="exitFullscreen();">
 202       exitFullscreen() [x]
 203     </button><br>
 204     <button id="lockMouse1" onclick="lockMouse1();">
 205       lockMouse1() [1]
 206     </button><br>
 207     <button id="lockMouse2" onclick="lockMouse2();">
 208       lockMouse2() [2]
 209     </button><br>
 210     <button id="delayedLockMouse1" onclick="delayedLockMouse1();">
 211       delayedLockMouse1() [d]
 212     </button><br>
 213     <button id="spamLockMouse2" onclick="spamLockMouse2();">
 214       spamLockMouse2()
 215     </button><br>
 216     <button id="unlockMouse" onclick="unlockMouse();">
 217       unlockMouse() [u]
 218     </button><br>
 219     <button id="enterFullscreenAndLockMouse1"
 220       onclick="enterFullscreenAndLockMouse1()">
 221       enterFullscreenAndLockMouse1() [b]
 222     </button><br>
 223     <button id="lockMouse1AndEnterFullscreen"
 224       onclick="lockMouse1AndEnterFullscreen()">
 225       lockMouse1AndEnterFullscreen() [B]
 226     </button><br>
 227     <div id="lockTarget1">lockTarget1</div>
 228     <div id="lockTarget2">lockTarget2</div>
 229     <form name="HTMLCursor" id="HTMLCursor">HTMLCursor</form>
 230     <form name="displaytext">...</form>
 231     <p>The <a href="#anchor" name="anchor" id="anchor"
 232       onclick="clickElement(this.id);">
 233       anchor link
 234     </a>
 235     navigates to an anchor on this page. The browser should not exit tab
 236     fullscreen or mouse lock.</p>
 237   </div>
 238   <p>This text is outside of the container that is made fullscreen. This text
 239   should not be visible when fullscreen.</p>
 240 </body>
 241 </html>