summaryrefslogtreecommitdiffstats
path: root/ppapi/examples
diff options
context:
space:
mode:
authorraymes@chromium.org <raymes@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>2012-06-26 18:00:03 +0000
committerraymes@chromium.org <raymes@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>2012-06-26 18:00:03 +0000
commit49a4f741fab46a2f5ff4dd2c106ccd16c4c2b2ab (patch)
treeef2afdea2b2d08322e4ae2b21f30cdad06a20429 /ppapi/examples
parent19dd535146167bc634c2cbd0a7e5b7cf2773d468 (diff)
downloadchromium_src-49a4f741fab46a2f5ff4dd2c106ccd16c4c2b2ab.zip
chromium_src-49a4f741fab46a2f5ff4dd2c106ccd16c4c2b2ab.tar.gz
chromium_src-49a4f741fab46a2f5ff4dd2c106ccd16c4c2b2ab.tar.bz2
Updated the flash_topmost ppapi example
This updates the flash_topmost example to demonstrate the case when the plugin is within a frame. BUG=127185 TEST=Manually checked the plugin turns red when covered. Review URL: https://chromiumcodereview.appspot.com/10572055 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@144206 0039d316-1c4b-4281-b951-d872f2087c98
Diffstat (limited to 'ppapi/examples')
-rw-r--r--ppapi/examples/flash_topmost/flash_topmost.html86
-rw-r--r--ppapi/examples/flash_topmost/flash_topmost_inner.html103
2 files changed, 106 insertions, 83 deletions
diff --git a/ppapi/examples/flash_topmost/flash_topmost.html b/ppapi/examples/flash_topmost/flash_topmost.html
index ba21246..e7f7faa 100644
--- a/ppapi/examples/flash_topmost/flash_topmost.html
+++ b/ppapi/examples/flash_topmost/flash_topmost.html
@@ -13,91 +13,11 @@
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>
+<iframe id="iframe-view" name="iframe-view"
+ src="flash_topmost_inner.html" width=1000 height = 1000>
+</iframe>
</body>
</html>
diff --git a/ppapi/examples/flash_topmost/flash_topmost_inner.html b/ppapi/examples/flash_topmost/flash_topmost_inner.html
new file mode 100644
index 0000000..ba21246
--- /dev/null
+++ b/ppapi/examples/flash_topmost/flash_topmost_inner.html
@@ -0,0 +1,103 @@
+<!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>