| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright (c) 2011 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| <head> |
| <title>Mouse Lock Example</title> |
| <style type="text/css"> |
| :-webkit-full-screen { |
| width: 100%; |
| height: 100%; |
| } |
| </style> |
| <script> |
| var fullscreen = false; |
| function ToggleFullscreen() { |
| if (fullscreen) { |
| document.webkitCancelFullScreen(); |
| } else { |
| document.getElementById('container').webkitRequestFullScreen( |
| Element.ALLOW_KEYBOARD_INPUT); |
| } |
| fullscreen = !fullscreen; |
| } |
| </script> |
| </head> |
| <body title="This tooltip should not be shown if the mouse is locked."> |
| <div id="container"> |
| <ul> |
| <li>There are two different kinds of fullscreen mode - "tab fullscreen" and |
| "browser fullscreen". |
| <ul> |
| <li>"tab fullscreen" refers to when a tab enters fullscreen mode via the |
| JS or Pepper fullscreen API;</li> |
| <li>"browser fullscreen" refers to the user putting the browser itself |
| into fullscreen mode from the UI (e.g., pressing F11).</li> |
| </ul> |
| <span style="font-weight:bold"> |
| NOTE: Mouse lock is only allowed in "tab fullscreen" mode. |
| </span> |
| </li> |
| <li>Lock mouse: |
| <ul> |
| <li>left click in either of the two boxes; or</li> |
| <li>right click in either of the boxes to ensure that it is focused and |
| then press Enter key. (You could verify that the tooltip window is |
| dismissed properly by this second approach.)</li> |
| </ul> |
| </li> |
| <li>Unlock mouse voluntarily: |
| <ul> |
| <li>press Enter.</li> |
| </ul> |
| </li> |
| <li>Unlock mouse involuntarily: |
| <ul> |
| <li>lose focus; or</li> |
| <li>press Esc key; or</li> |
| <li>exit from the "tab fullscreen" mode.</li> |
| </ul> |
| </li> |
| </ul> |
| <div> |
| <button id="toggle_fullscreen" onclick="ToggleFullscreen();"> |
| Toggle Tab Fullscreen |
| </button> |
| </div> |
| <object id="plugin" type="application/x-ppapi-example-mouse-lock" |
| width="300" height="300" border="2px"></object> |
| <div></div> |
| <object id="plugin" type="application/x-ppapi-example-mouse-lock" |
| width="300" height="300" border="2px"></object> |
| </div> |
| </body> |
| </html> |
