plugins/iframe-shims.html

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