<!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>