ppapi/examples/mouse_lock/mouse_lock.html

<!DOCTYPE html>
<html>
  <!--
  Copyright (c) 2012 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>
</head>
<body title="This tooltip should not be shown if the mouse is locked.">
<div id="container">
  <ul>
    <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 "tab fullscreen"/"browser fullscreen"/"Flash 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>
            <li>"Flash fullscreen" refers to the fullscreen mode used by Pepper
                Flash. You could enter Flash fullscreen by pressing 'f' key
                when either of the boxes is focused, and exit by pressing Esc
                key.</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <div>
    <button onclick="ToggleFullscreen();">
      Toggle Tab Fullscreen
    </button>
    <button onclick="AddAPlugin();">
      Add A Plugin
    </button>
    <button onclick="RemoveAPlugin();">
      Remove A Plugin (press 'x')
    </button>
  </div>
  <div id="plugins_container">
  </div>
</div>
</body>
<script>
  plugins_container = document.getElementById("plugins_container");
  AddAPlugin();
  AddAPlugin();

  function ToggleFullscreen() {
    if (document.webkitIsFullScreen) {
      document.webkitCancelFullScreen();
    } else {
      document.getElementById('container').webkitRequestFullScreen(
          Element.ALLOW_KEYBOARD_INPUT);
    }
  }
  function AddAPlugin() {
    plugins_container.insertAdjacentHTML("BeforeEnd",
        '<object type="application/x-ppapi-example-mouse-lock" ' +
        'width="300" height="300" border="2px"></object>');
  }
  function RemoveAPlugin() {
    if (plugins_container.firstElementChild)
      plugins_container.removeChild(plugins_container.firstElementChild);
  }
  document.body.onkeydown = function (e) {
    if (String.fromCharCode(e.keyCode) == "X")
      RemoveAPlugin();
  }
</script>
</html>