From 49a4f741fab46a2f5ff4dd2c106ccd16c4c2b2ab Mon Sep 17 00:00:00 2001
From: "raymes@chromium.org"
 <raymes@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>
Date: Tue, 26 Jun 2012 18:00:03 +0000
Subject: 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
---
 ppapi/examples/flash_topmost/flash_topmost.html    |  86 +----------------
 .../flash_topmost/flash_topmost_inner.html         | 103 +++++++++++++++++++++
 2 files changed, 106 insertions(+), 83 deletions(-)
 create mode 100644 ppapi/examples/flash_topmost/flash_topmost_inner.html

(limited to 'ppapi/examples')
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>
-- 
cgit v1.1

