<!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>Flash Topmost Check Example/Test</title>
</head>
<style type="text/css">
embed {
position: absolute;
}
#box0 {
background-color: #cccccc;
line-height: 200px;
padding: 0px;
position: absolute;
text-align: center;
width: 2000px;
height: 2000px;
z-index: -2;
}
#box1 {
background-color: #ffff00;
line-height: 200px;
padding: 0px;
position: absolute;
text-align: center;
width: 200px;
height: 200px;
z-index: -1;
}
#box2 {
background-color: #00ffff;
line-height: 200px;
padding: 0px;
position: absolute;
text-align: center;
width: 200px;
height: 200px;
z-index: 1;
}
#box3 {
background-color: #000000;
line-height: 200px;
padding: 0px;
position: absolute;
text-align: center;
width: 2000px;
height: 2000px;
z-index: 2;
visibility: hidden;
}
</style>
<script type="text/javascript">
var dragInfo = { lastX:0, lastY:0, target:null };
function onMouseDown(event) {
dragInfo.lastX = event.clientX;
dragInfo.lastY = event.clientY;
dragInfo.target = event.target;
document.addEventListener("mousemove", onMouseMove, true);
document.addEventListener("mouseup", onMouseUp, true);
event.preventDefault();
}
function onMouseMove(event) {
deltaX = event.clientX - dragInfo.lastX;
deltaY = event.clientY - dragInfo.lastY;
dragInfo.lastX = event.clientX;
dragInfo.lastY = event.clientY;
baseX = parseInt(dragInfo.target.style.left, 10);
baseY = parseInt(dragInfo.target.style.top, 10);
dragInfo.target.style.left = (baseX + deltaX) + "px";
dragInfo.target.style.top = (baseY + deltaY) + "px";
event.preventDefault();
}
function onMouseUp(event) {
document.removeEventListener("mousemove", onMouseMove, true);
document.removeEventListener("mouseup", onMouseUp, true);
event.preventDefault();
}
</script>
<div id="box0" style="left:0px;top:0px;"
onmousedown="onMouseDown(event)">Box #0</div>
<div id="box1" style="left:100px;top:400px;"
onmousedown="onMouseDown(event)">Box #1</div>
<embed id="plugin" type="application/x-ppapi-example-flash-topmost"
width="400" height="400"
style="left:200px;top:400px;" />
<div id="box2" style="left:200px;top:500px;"
onmousedown="onMouseDown(event)">Box #2</div>
<div id="box3" style="left:0px;top:0px;"
onmousedown="onMouseDown(event)">Box #3</div>
</body>
</html>