| <html><head> |
| <script> |
| var expectedClicks = []; |
| var clicks = []; |
| |
| var height = 100; |
| var width = 100; |
| var items = 0; |
| |
| function makePluginElement() |
| { |
| var f = document.createElement('embed'); |
| f.setAttribute('id', 'swf_embed_' + items); |
| f.setAttribute('width', width + ''); |
| f.setAttribute('height', height + ''); |
| f.setAttribute('wmode', 'window'); |
| f.setAttribute('loop', 'false'); |
| f.setAttribute('src', 'resources/simple_blank.swf'); |
| f.setAttribute('type', 'application/x-shockwave-flash'); |
| return f; |
| } |
| |
| function makePluginElementWithHigherZIndex() |
| { |
| var f = makePluginElement(); |
| f.style.zIndex = 1000; |
| f.style.position = 'relative'; |
| return f; |
| } |
| |
| function makeIframeDiv() |
| { |
| var i = document.createElement('iframe'); |
| i.style.position = 'absolute'; |
| i.style.top = '10px'; |
| i.style.left = '30px'; |
| i.style.width = '80px'; |
| i.style.height = '80px'; |
| i.setAttribute('frameborder', '0'); |
| i.setAttribute('src', 'javascript:void(0);'); |
| return i; |
| } |
| |
| function makeOverlayDiv(color, caseId) |
| {
|
| var o = document.createElement('div'); |
| o.style.position = 'absolute'; |
| o.style.top = '10px'; |
| o.style.left = '30px'; |
| o.style.width = '80px'; |
| o.style.height = '80px'; |
| o.style.backgroundColor = color; |
| o.style.overflow = 'hidden'; |
| o.innerHTML = '<input type="button" id="button' + caseId + '" ' + |
| 'onclick="doClick(' + caseId + |
| ');" value="clickme" style="position: absolute; top: 10; left: 10; width: 60px; height: 60px;"/>'; |
| return o; |
| } |
| |
| function appendOverlay(overlayDivZIframe, overlayDivZOverlay, overlayInsideDiv, expectClickable, caseId) |
| { |
| var id = makeIframeDiv(); |
| var root = document.getElementById(caseId); |
| if (overlayDivZIframe) |
| id.style.zIndex = overlayDivZIframe; |
| |
| var od = makeOverlayDiv(expectClickable ? 'green' : 'red', caseId); |
| od.style.position = 'absolute'; |
| if (overlayDivZOverlay) |
| od.style.zIndex = overlayDivZOverlay; |
| |
| if (overlayInsideDiv) { |
| var parentdiv = document.createElement('div'); |
| if (overlayDivZOverlay) |
| parentdiv.style.zIndex = overlayDivZOverlay; |
| |
| parentdiv.style.position = 'absolute'; |
| parentdiv.style.top = '0px'; |
| parentdiv.style.left = '0px'; |
| parentdiv.appendChild(id); |
| parentdiv.appendChild(od); |
| root.appendChild(parentdiv); |
| } else { |
| root.appendChild(id); |
| root.appendChild(od); |
| } |
| }; |
| |
| function addCase(x, y, tags) |
| { |
| var caseId = items; |
| items++; |
| |
| var expectClickable = tags.expect && tags.expect.indexOf('UNDER') == -1; |
| expectedClicks[caseId] = expectClickable;
|
|
|
| var container = document.getElementById('container'); |
| var root = document.createElement('div'); |
| root.style.position = 'absolute'; |
| root.style.left = x * (width + 40) + 'px'; |
| root.style.top = y * (height + 20) + 'px'; |
| root.id = caseId; |
| container.appendChild(root); |
| |
| var pluginDivZ; |
| var overlayDivZIframe; |
| var overlayDivZOverlay; |
| if (tags.pluginLowerz) { |
| pluginDivZ = 100; |
| overlayDivZIframe = 200; |
| overlayDivZOverlay = 201; |
| } else if (tags.pluginHigherz) { |
| pluginDivZ = 200; |
| overlayDivZIframe = 100; |
| overlayDivZOverlay = 101; |
| } else if (tags.pluginEqualz) { |
| pluginDivZ = 100; |
| overlayDivZIframe = 100; |
| overlayDivZOverlay = 100; |
| } else if (tags.pluginExplicitHigherZIndex) {
|
| // For this test case we set the z-index for the iframe and the overlay |
| // to be lower than the plugin. |
| overlayDivZIframe = 100; |
| overlayDivZOverlay = 0; |
| } |
| |
| var appendPlugin = function() |
| { |
| var pd; |
| if (tags.pluginExplicitHigherZIndex) { |
| pd = makePluginElementWithHigherZIndex(); |
| } else { |
| pd = makePluginElement(); |
| }
|
|
|
| if (tags.pluginInsideDiv || pluginDivZ) { |
| var parentdiv = document.createElement('div'); |
| parentdiv.appendChild(pd) |
| if (!tags.pluginNorelative) |
| parentdiv.style.position = 'relative'; |
| |
| if (pluginDivZ) |
| parentdiv.style.zIndex = pluginDivZ; |
| |
| root.appendChild(parentdiv); |
| } else { |
| if (!tags.pluginNorelative) |
| pd.style.position = 'relative'; |
| root.appendChild(pd); |
| } |
| }; |
| |
| if (tags.overlayEarlier) { |
| appendOverlay(overlayDivZIframe, overlayDivZOverlay, tags.overlayInsideDiv, expectClickable, caseId); |
| appendPlugin(); |
| } else {
|
| appendPlugin(); |
| if (tags.overlayOnTimeout) { |
| setTimeout('appendOverlay('+overlayDivZIframe+', '+overlayDivZOverlay +', ' + tags.overlayInsideDiv + ', ' + expectClickable + ', ' + caseId + ')', 0); |
| } else {
|
| appendOverlay(overlayDivZIframe, overlayDivZOverlay, tags.overlayInsideDiv, expectClickable, caseId); |
| } |
| } |
| } |
| |
| function doClick(id) |
| {
|
| clicks[id] = true; |
| |
| // Check success/failure. |
| var output = document.getElementById("output"); |
| var waitingForMoreClicks = false; |
| var k; |
| for (k in expectedClicks) { |
| if (expectedClicks[k] && !clicks[k]) |
| waitingForMoreClicks = true; |
| else if (!expectedClicks[k] && clicks[k]) { |
| output.innerHTML = 'FAILURE'; |
| return; |
| } |
| }
|
|
|
| if (!waitingForMoreClicks) { |
| output.innerHTML = 'SUCCESS'; |
| return; |
| } |
| } |
| |
| function init() { |
| addCase(0, 0, {expect:'overlay OVER'}); |
| addCase(1, 0, {'overlayEarlier':1, 'overlayInsideDiv': 1, 'pluginInsideDiv':1, expect:'overlay UNDER'}); |
| addCase(2, 0, {'pluginLowerz':1, expect:'overlay OVER'}); |
| addCase(3, 0, {'pluginHigherz':1, expect:'overlay UNDER'}); |
| addCase(0, 1, {'overlayInsideDiv':1, expect:'overlay OVER'}); |
| addCase(1, 1, {'pluginLowerz':1, 'overlayInsideDiv':1, expect:'overlay OVER'}); |
| addCase(2, 1, {'pluginHigherz':1, 'overlayInsideDiv':1, expect:'overlay UNDER'}); |
| addCase(0, 2, {'pluginEqualz':1, 'overlayInsideDiv':1, expect:'overlay OVER'}); |
| addCase(1, 2, {'pluginEqualz':1, 'overlayInsideDiv':1, 'overlayEarlier':1, expect:'overlay UNDER'}); |
| addCase(2, 2, {'overlayEarlier':1, expect:'overlay UNDER'}); |
| addCase(3, 2, {'overlayEarlier':1, 'pluginNorelative':1, expect:'overlay OVER'}); |
| addCase(0, 3, {'pluginNorelative':1, expect:'overlay OVER'}); |
| addCase(1, 3, {'overlayEarlier':1, 'pluginNorelative':1, 'pluginInsideDiv':1, expect:'overlay OVER'}); |
| addCase(2, 3, {'pluginNorelative':1, 'pluginInsideDiv':1, expect:'overlay OVER'}); |
| addCase(3, 3, {'pluginLowerz':1, 'overlayOnTimeout':1, expect:'overlay OVER'}); |
| addCase(4, 0, {'pluginExplicitHigherZIndex': 1, 'pluginNorelative': 1, 'pluginInsideDiv': 1, 'overlayInsideDiv': 1, expect: 'overlay UNDER' }); |
| runTest(); |
| } |
| |
| // Automation: try to click on each button. |
| var nextIdToClick = 0; |
| |
| function runTest() { |
| if (window.testRunner && window.eventSender) { |
| testRunner.waitUntilDone(); |
| testRunner.dumpAsText(); |
| setTimeout(doNextClick, 0); |
| } |
| } |
| |
| function moveMouseOver(elemName) { |
| var elem = document.getElementById(elemName); |
| 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 doNextClick() { |
| eventSender.mouseUp(); |
| if (nextIdToClick < expectedClicks.length) { |
| moveMouseOver('button' + nextIdToClick); |
| eventSender.mouseDown(); |
| nextIdToClick++; |
| setTimeout(doNextClick, 0); |
| } else { |
| setTimeout(function() { |
| testRunner.notifyDone(); |
| }, 0); |
| } |
| } |
| |
| </script> |
| </head> |
| <body onload="init()"> |
| |
| <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 plugins, and the green squares should appear over the |
| plugins. 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 id="container" style="position: relative;"></div> |
| |
| </body> |
| </html> |