diff options
author | raymes@chromium.org <raymes@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2012-06-26 18:00:03 +0000 |
---|---|---|
committer | raymes@chromium.org <raymes@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2012-06-26 18:00:03 +0000 |
commit | 49a4f741fab46a2f5ff4dd2c106ccd16c4c2b2ab (patch) | |
tree | ef2afdea2b2d08322e4ae2b21f30cdad06a20429 /ppapi/examples | |
parent | 19dd535146167bc634c2cbd0a7e5b7cf2773d468 (diff) | |
download | chromium_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.html | 86 | ||||
-rw-r--r-- | ppapi/examples/flash_topmost/flash_topmost_inner.html | 103 |
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> |