OLD | NEW |
| (Empty) |
1 <html><head> | |
2 <script> | |
3 var expected_clicks = []; | |
4 var clicks = []; | |
5 | |
6 var HEIGHT = 100; | |
7 var WIDTH = 100; | |
8 var items = 0; | |
9 | |
10 function makePluginElement() { | |
11 var f = document.createElement('embed'); | |
12 f.setAttribute('id', 'swf_embed_' + items); | |
13 f.setAttribute('width', WIDTH + ''); | |
14 f.setAttribute('height', HEIGHT + ''); | |
15 f.setAttribute('wmode', 'window'); | |
16 f.setAttribute('loop', 'false'); | |
17 f.setAttribute('src', 'simple_blank.swf'); | |
18 f.setAttribute('type', 'application/x-shockwave-flash'); | |
19 return f; | |
20 } | |
21 | |
22 function makeIframeDiv() { | |
23 var i = document.createElement('iframe'); | |
24 i.style.position = 'absolute'; | |
25 i.style.top = '10px'; | |
26 i.style.left = '30px'; | |
27 i.style.width = '80px'; | |
28 i.style.height = '80px'; | |
29 i.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)
'; | |
30 i.setAttribute('frameborder', '0'); | |
31 i.setAttribute('src', 'javascript:void(0);'); | |
32 return i; | |
33 } | |
34 | |
35 function makeOverlayDiv(color, case_id) { | |
36 var o = document.createElement('div'); | |
37 o.style.position = 'absolute'; | |
38 o.style.top = '10px'; | |
39 o.style.left = '30px'; | |
40 o.style.width = '80px'; | |
41 o.style.height = '80px'; | |
42 o.style.backgroundColor = color; | |
43 o.style.overflow = 'hidden'; | |
44 o.innerHTML = '<input type="button" id="button' + case_id + '" ' + | |
45 'onclick="doClick(' + case_id + | |
46 ');" value="clickme" style="position: absolute; top: 10; left: 10; wid
th: 60px; height: 60px;"/>'; | |
47 return o; | |
48 } | |
49 | |
50 function addCase(x, y, tags) { | |
51 var case_id = items; | |
52 items++; | |
53 | |
54 var desc = case_id + ":"; | |
55 | |
56 var expect_clickable = tags.expect && tags.expect.indexOf('UNDER') == -1; | |
57 expected_clicks[case_id] = expect_clickable; | |
58 | |
59 var container = document.getElementById('container'); | |
60 var root = document.createElement('div'); | |
61 root.style.position = 'absolute'; | |
62 root.style.left = x * (WIDTH + 40) + 'px'; | |
63 root.style.top = y * (HEIGHT + 20) + 'px'; | |
64 container.appendChild(root); | |
65 | |
66 var plugin_div_z; | |
67 var overlay_div_z_iframe; | |
68 var overlay_div_z_overlay; | |
69 if (tags.plugin_lowerz) { | |
70 desc += ' plugin_lowerz'; | |
71 plugin_div_z = 100; | |
72 overlay_div_z_iframe = 200; | |
73 overlay_div_z_overlay = 201; | |
74 } else if (tags.plugin_higherz) { | |
75 desc += ' plugin_higherz'; | |
76 plugin_div_z = 200; | |
77 overlay_div_z_iframe = 100; | |
78 overlay_div_z_overlay = 101; | |
79 } else if (tags.plugin_equalz) { | |
80 desc += ' plugin_equalz'; | |
81 plugin_div_z = 100; | |
82 overlay_div_z_iframe = 100; | |
83 overlay_div_z_overlay = 100; | |
84 } | |
85 | |
86 var append_plugin = function() { | |
87 var pd = makePluginElement(); | |
88 if (tags.plugin_inside_div || plugin_div_z) { | |
89 desc += ' plugin_inside_div'; | |
90 var parentdiv = document.createElement('div'); | |
91 parentdiv.appendChild(pd) | |
92 if (!tags.plugin_norelative) { | |
93 parentdiv.style.position = 'relative'; | |
94 } else { | |
95 desc += ' plugin_norelative'; | |
96 } | |
97 | |
98 if (plugin_div_z) { | |
99 parentdiv.style.zIndex = plugin_div_z; | |
100 } | |
101 root.appendChild(parentdiv); | |
102 } else { | |
103 if (!tags.plugin_norelative) { | |
104 pd.style.position = 'relative'; | |
105 } else { | |
106 desc += ' plugin_norelative'; | |
107 } | |
108 root.appendChild(pd); | |
109 } | |
110 }; | |
111 | |
112 var append_overlay = function() { | |
113 var id = makeIframeDiv(); | |
114 if (overlay_div_z_iframe) { | |
115 id.style.zIndex = overlay_div_z_iframe; | |
116 } | |
117 | |
118 var od = makeOverlayDiv(expect_clickable ? 'green' : 'red', case_id); | |
119 od.style.position = 'absolute'; | |
120 if (overlay_div_z_overlay) { | |
121 od.style.zIndex = overlay_div_z_overlay; | |
122 } | |
123 | |
124 if (tags.overlay_inside_div) { | |
125 desc += ' overlay_inside_div'; | |
126 var parentdiv = document.createElement('div'); | |
127 if (overlay_div_z_overlay) { | |
128 parentdiv.style.zIndex = overlay_div_z_overlay; | |
129 } | |
130 | |
131 parentdiv.style.position = 'absolute'; | |
132 parentdiv.style.top = '0px'; | |
133 parentdiv.style.left = '0px'; | |
134 parentdiv.appendChild(id); | |
135 parentdiv.appendChild(od); | |
136 root.appendChild(parentdiv); | |
137 } else { | |
138 root.appendChild(id); | |
139 root.appendChild(od); | |
140 } | |
141 }; | |
142 | |
143 if (tags.overlay_earlier) { | |
144 desc += ' overlay_earlier'; | |
145 append_overlay(); | |
146 append_plugin(); | |
147 } else { | |
148 append_plugin(); | |
149 append_overlay(); | |
150 } | |
151 | |
152 if (tags.expect) { | |
153 desc += ' <i>(expect:' + tags.expect + ')</i>'; | |
154 } | |
155 | |
156 // Description. | |
157 if (0) { | |
158 var dd = document.createElement('div'); | |
159 dd.style.position = 'absolute'; | |
160 dd.style.top = '0px'; | |
161 dd.style.left = (WIDTH + 50) + 'px'; | |
162 dd.innerHTML = desc; | |
163 root.appendChild(dd); | |
164 } | |
165 } | |
166 | |
167 function doClick(id) { | |
168 clicks[id] = true; | |
169 | |
170 // Check success/failure. | |
171 var output = document.getElementById("output"); | |
172 var waiting_for_more_clicks = false; | |
173 var k; | |
174 for (k in expected_clicks) { | |
175 if (expected_clicks[k] && !clicks[k]) { | |
176 waiting_for_more_clicks = true; | |
177 } else if (!expected_clicks[k] && clicks[k]) { | |
178 output.innerHTML = 'FAILURE'; | |
179 return; | |
180 } | |
181 } | |
182 | |
183 if (!waiting_for_more_clicks) { | |
184 output.innerHTML = 'SUCCESS'; | |
185 return; | |
186 } | |
187 } | |
188 | |
189 function init() { | |
190 addCase(0, 0, {expect:'overlay OVER'}); | |
191 addCase(1, 0, {'overlay_earlier':1, 'overlay_inside_div': 1, 'plugin_inside_
div':1, expect:'overlay UNDER'}); | |
192 addCase(2, 0, {'plugin_lowerz':1, expect:'overlay OVER'}); | |
193 addCase(3, 0, {'plugin_higherz':1, expect:'overlay UNDER'}); | |
194 addCase(0, 1, {'overlay_inside_div':1, expect:'overlay OVER'}); | |
195 addCase(1, 1, {'plugin_lowerz':1, 'overlay_inside_div':1, expect:'overlay OV
ER'}); | |
196 addCase(2, 1, {'plugin_higherz':1, 'overlay_inside_div':1, expect:'overlay U
NDER'}); | |
197 addCase(0, 2, {'plugin_equalz':1, 'overlay_inside_div':1, expect:'overlay OV
ER'}); | |
198 addCase(1, 2, {'plugin_equalz':1, 'overlay_inside_div':1, 'overlay_earlier':
1, expect:'overlay UNDER'}); | |
199 addCase(2, 2, {'overlay_earlier':1, expect:'overlay UNDER'}); | |
200 addCase(3, 2, {'overlay_earlier':1, 'plugin_norelative':1, expect:'overlay O
VER'}); | |
201 addCase(0, 3, {'plugin_norelative':1, expect:'overlay OVER'}); | |
202 addCase(1, 3, {'overlay_earlier':1, 'plugin_norelative':1, 'plugin_inside_di
v':1, expect:'overlay OVER'}); | |
203 addCase(2, 3, {'plugin_norelative':1, 'plugin_inside_div':1, expect:'overlay
OVER'}); | |
204 | |
205 runTest(); | |
206 } | |
207 | |
208 // Automation: try to click on each button. | |
209 var next_id_to_click = 0; | |
210 | |
211 function runTest() { | |
212 if (window.layoutTestController && window.eventSender) { | |
213 layoutTestController.waitUntilDone(); | |
214 layoutTestController.dumpAsText(); | |
215 setTimeout(doNextClick, 0); | |
216 } | |
217 } | |
218 | |
219 function moveMouseOver(elem_name) { | |
220 var elem = document.getElementById(elem_name); | |
221 var x = elem.offsetLeft + elem.scrollWidth / 2; | |
222 var y = elem.offsetTop + elem.scrollHeight / 2; | |
223 var offsetParent = elem.offsetParent; | |
224 while (offsetParent) { | |
225 x += offsetParent.offsetLeft; | |
226 y += offsetParent.offsetTop; | |
227 offsetParent = offsetParent.offsetParent; | |
228 } | |
229 eventSender.mouseMoveTo(x, y); | |
230 } | |
231 | |
232 function doNextClick() { | |
233 eventSender.mouseUp(); | |
234 if (next_id_to_click < expected_clicks.length) { | |
235 moveMouseOver('button' + next_id_to_click); | |
236 eventSender.mouseDown(); | |
237 next_id_to_click++; | |
238 setTimeout(doNextClick, 0); | |
239 } else { | |
240 setTimeout(function() { | |
241 layoutTestController.notifyDone(); | |
242 }, 0); | |
243 } | |
244 } | |
245 | |
246 </script> | |
247 </head> | |
248 <body onload="init()"> | |
249 | |
250 <p>Test that iframe shims can be used to overlay HTML above a | |
251 windowed plugin. The red squares should be hidden by the blue | |
252 flash plugins, and the green squares should appear over the | |
253 plugins. To test interactively, click over the buttons on the | |
254 squares. You should not be able to reach the red squares' | |
255 buttons.</p> | |
256 | |
257 <p>Prints "SUCCESS" on success, "FAILURE" on failure.</p> | |
258 <div id=output>NONE</div> | |
259 <div id="container" style="position: relative;"></div> | |
260 | |
261 </body> | |
262 </html> | |
OLD | NEW |