1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
<html><head>
<script>
function noop(x) {
}
var red1_clicks = 0;
var green1_clicks = 0;
var red2_clicks = 0;
var green2_clicks = 0;
function red1Clicked() {
red1_clicks++;
checkResult();
}
function green1Clicked() {
green1_clicks++;
checkResult();
}
function red2Clicked() {
red2_clicks++;
checkResult();
}
function green2Clicked() {
green2_clicks++;
checkResult();
}
function checkResult() {
var output = document.getElementById("output");
var success = green1_clicks > 0 && green2_clicks > 0 &&
red1_clicks == 0 && red2_clicks == 0;
output.innerHTML = success ? "SUCCESS" : "FAILURE";
document.title = output.innerHTML;
}
function moveMouseOver(elem_name) {
var elem = document.getElementById(elem_name);
var x = elem.offsetLeft + elem.scrollWidth / 2;
var y = elem.offsetTop + elem.scrollHeight / 2;
var offsetParent = elem.offsetParent;
while (offsetParent) {
x += offsetParent.offsetLeft;
y += offsetParent.offsetTop;
offsetParent = offsetParent.offsetParent;
}
eventSender.mouseMoveTo(x, y);
}
function runTest() {
if (window.layoutTestController && window.eventSender) {
layoutTestController.waitUntilDone();
layoutTestController.dumpAsText();
setTimeout(doClickRed1, 0);
}
}
function doClickRed1() {
moveMouseOver("red_square1");
eventSender.mouseDown();
setTimeout(doClickGreen1, 0);
}
function doClickGreen1() {
eventSender.mouseUp();
moveMouseOver("green_square1");
eventSender.mouseDown();
setTimeout(doClickRed2, 0);
}
function doClickRed2() {
eventSender.mouseUp();
moveMouseOver("red_square2");
eventSender.mouseDown();
setTimeout(doClickGreen2, 0);
}
function doClickGreen2() {
eventSender.mouseUp();
moveMouseOver("green_square2");
eventSender.mouseDown();
setTimeout(finishTest, 0);
}
function finishTest() {
eventSender.mouseUp();
layoutTestController.notifyDone();
}
</script>
</head>
<body onload="runTest()">
<p>Test that iframe shims can be used to overlay HTML above a windowed
plugin. The red squares should be hidden by the blue flash plugin, and
the green squares should appear over it. To test interactively, click
over the buttons on the squares. You should not be able to reach the
red squares' buttons.</p>
<p>Prints "SUCCESS" on success, "FAILURE" on failure.</p>
<div id=output>NONE</div>
<div style="position: relative;">
<!-- div with a lower stacking order than the plugin, appearing earlier in the document -->
<div id="red_square1"
style="z-index: 50; background-color: #FF0000; position: absolute; top: -10; left: 50; width: 100px; height: 100px; overflow: hidden;">
<input type="button" onclick="red1Clicked()" value="red" style="position: absolute; top: 10; left: 10; width: 80px; height: 80px;"/>
<iframe src="javascript:void(0);" frameborder=0 style="z-index: -1; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></iframe>
</div>
<!-- div with a higher stacking order than the plugin, appearing earlier in the document -->
<div id="green_square1"
style="z-index: 150; background-color: #00FF00; position: absolute; top: -10; left: 250; width: 100px; height: 100px; overflow: hidden;">
<input type="button" onclick="green1Clicked()" value="green" style="position: absolute; top: 10; left: 10; width: 80px; height: 80px;"/>
<iframe src="javascript:void(0);" frameborder=0 style="z-index: -1; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></iframe>
</div>
<div id="embed_parent" style="position: absolute; z-index: 100"
<embed width="400" height="200" wmode="window" loop="false" quality="high" src="simple_blank.swf" type="application/x-shockwave-flash" />
</div>
<!-- div with a lower stacking order than the plugin, appearing later in the document -->
<div id="red_square2"
style="z-index: 50; background-color: #FF0000; position: absolute; top: 110; left: 50; width: 100px; height: 100px; overflow: hidden;">
<input type="button" onclick="red2Clicked()" value="red" style="position: absolute; top: 10; left: 10; width: 80px; height: 80px;"/>
<iframe src="javascript:void(0);" frameborder=0 style="z-index: -1; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></iframe>
</div>
<!-- div with a higher stacking order than the plugin, appearing later in the document -->
<div id="green_square2"
style="z-index: 150; background-color: #00FF00; position: absolute; top: 110; left: 250; width: 100px; height: 100px; overflow: hidden;">
<input type="button" onclick="green2Clicked()" value="green" style="position: absolute; top: 10; left: 10; width: 80px; height: 80px;"/>
<iframe src="javascript:void(0);" frameborder=0 style="z-index: -1; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></iframe>
</div>
</div>
</body>
</html>
|
