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