| 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 |