2009-09-22 Victor Wang <victorw@chromium.org>
authoreric@webkit.org <eric@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 22 Sep 2009 17:19:21 +0000 (17:19 +0000)
committereric@webkit.org <eric@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 22 Sep 2009 17:19:21 +0000 (17:19 +0000)
        Reviewed by Dimitri Glazkov.

        https://bugs.webkit.org/show_bug.cgi?id=28914

        Add layout test to test iframe shim can be used
        to overlay html above a windowed plugin. It checks
        premutations of iframe shims in relationship to
        plugin.

        * plugins/iframe-shims-expected.txt: Added with property svn:eol-style.
        * plugins/iframe-shims.html: Added with property svn:eol-style.
        * plugins/resources/simple_blank.swf: Added with property svn:mime-type.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@48638 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/plugins/iframe-shims-expected.txt [new file with mode: 0644]
LayoutTests/plugins/iframe-shims.html [new file with mode: 0644]
LayoutTests/plugins/resources/simple_blank.swf [new file with mode: 0644]

index 8699fbe..6ea9fd7 100644 (file)
@@ -1,3 +1,18 @@
+2009-09-22  Victor Wang  <victorw@chromium.org>
+
+        Reviewed by Dimitri Glazkov.
+
+        https://bugs.webkit.org/show_bug.cgi?id=28914
+
+        Add layout test to test iframe shim can be used
+        to overlay html above a windowed plugin. It checks
+        premutations of iframe shims in relationship to 
+        plugin.
+
+        * plugins/iframe-shims-expected.txt: Added with property svn:eol-style.
+        * plugins/iframe-shims.html: Added with property svn:eol-style.
+        * plugins/resources/simple_blank.swf: Added with property svn:mime-type.
+
 2009-09-22  Andras Becsi  <becsi.andras@stud.u-szeged.hu>
 
         Rubber-stamped by Tor Arne Vestbø.
diff --git a/LayoutTests/plugins/iframe-shims-expected.txt b/LayoutTests/plugins/iframe-shims-expected.txt
new file mode 100644 (file)
index 0000000..8ac528c
--- /dev/null
@@ -0,0 +1,22 @@
+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.
+
+Prints "SUCCESS" on success, "FAILURE" on failure.
+
+SUCCESS
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/LayoutTests/plugins/iframe-shims.html b/LayoutTests/plugins/iframe-shims.html
new file mode 100644 (file)
index 0000000..e4be006
--- /dev/null
@@ -0,0 +1,238 @@
+<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 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 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';
+        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;
+        }
+
+        var appendPlugin = function()
+        {
+            var 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);
+            }
+        };
+
+        var appendOverlay = function()
+        {
+            var id = makeIframeDiv();
+            if (overlayDivZIframe)
+                id.style.zIndex = overlayDivZIframe;
+
+            var od = makeOverlayDiv(expectClickable ? 'green' : 'red', caseId);
+            od.style.position = 'absolute';
+            if (overlayDivZOverlay)
+                od.style.zIndex = overlayDivZOverlay;
+
+            if (tags.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);
+            }
+        };
+
+        if (tags.overlayEarlier) {
+            appendOverlay();
+            appendPlugin();
+        } else {
+            appendPlugin();
+            appendOverlay();
+        }
+     }
+
+    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'});
+
+        runTest();
+    }
+
+    // Automation: try to click on each button.
+    var nextIdToClick = 0;
+
+    function runTest() {
+        if (window.layoutTestController && window.eventSender) {
+            layoutTestController.waitUntilDone();
+            layoutTestController.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() {
+                layoutTestController.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>
diff --git a/LayoutTests/plugins/resources/simple_blank.swf b/LayoutTests/plugins/resources/simple_blank.swf
new file mode 100644 (file)
index 0000000..b846387
Binary files /dev/null and b/LayoutTests/plugins/resources/simple_blank.swf differ