1<!DOCTYPE html>
2<html>
3  <!--
4  Copyright (c) 2012 The Chromium Authors. All rights reserved.
5  Use of this source code is governed by a BSD-style license that can be
6  found in the LICENSE file.
7  -->
8<head>
9  <title>Flash Topmost Check Example/Test</title>
10</head>
11
12<style type="text/css">
13embed {
14  position: absolute;
15}
16#box0 {
17  background-color: #cccccc;
18  line-height: 200px;
19  padding: 0px;
20  position: absolute;
21  text-align: center;
22  width: 2000px;
23  height: 2000px;
24  z-index: -2;
25}
26#box1 {
27  background-color: #ffff00;
28  line-height: 200px;
29  padding: 0px;
30  position: absolute;
31  text-align: center;
32  width: 200px;
33  height: 200px;
34  z-index: -1;
35}
36#box2 {
37  background-color: #00ffff;
38  line-height: 200px;
39  padding: 0px;
40  position: absolute;
41  text-align: center;
42  width: 200px;
43  height: 200px;
44  z-index: 1;
45}
46#box3 {
47  background-color: #000000;
48  line-height: 200px;
49  padding: 0px;
50  position: absolute;
51  text-align: center;
52  width: 2000px;
53  height: 2000px;
54  z-index: 2;
55  visibility: hidden;
56}
57</style>
58
59<script type="text/javascript">
60var dragInfo = { lastX:0, lastY:0, target:null };
61
62function onMouseDown(event) {
63  dragInfo.lastX = event.clientX;
64  dragInfo.lastY = event.clientY;
65  dragInfo.target = event.target;
66  document.addEventListener("mousemove", onMouseMove, true);
67  document.addEventListener("mouseup", onMouseUp, true);
68  event.preventDefault();
69}
70
71function onMouseMove(event) {
72  deltaX = event.clientX - dragInfo.lastX;
73  deltaY = event.clientY - dragInfo.lastY;
74  dragInfo.lastX = event.clientX;
75  dragInfo.lastY = event.clientY;
76  baseX = parseInt(dragInfo.target.style.left, 10);
77  baseY = parseInt(dragInfo.target.style.top, 10);
78  dragInfo.target.style.left = (baseX + deltaX) + "px";
79  dragInfo.target.style.top = (baseY + deltaY) + "px";
80  event.preventDefault();
81}
82
83function onMouseUp(event) {
84  document.removeEventListener("mousemove", onMouseMove, true);
85  document.removeEventListener("mouseup", onMouseUp, true);
86  event.preventDefault();
87}
88</script>
89
90<div id="box0" style="left:0px;top:0px;"
91     onmousedown="onMouseDown(event)">Box #0</div>
92<div id="box1" style="left:100px;top:400px;"
93     onmousedown="onMouseDown(event)">Box #1</div>
94<embed id="plugin" type="application/x-ppapi-example-flash-topmost"
95     width="400" height="400"
96     style="left:200px;top:400px;" />
97<div id="box2" style="left:200px;top:500px;"
98     onmousedown="onMouseDown(event)">Box #2</div>
99<div id="box3" style="left:0px;top:0px;"
100     onmousedown="onMouseDown(event)">Box #3</div>
101
102</body>
103</html>
104