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