OLD | NEW |
(Empty) | |
| 1 <html><head> |
| 2 <script> |
| 3 function noop(x) { |
| 4 } |
| 5 |
| 6 var red1_clicks = 0; |
| 7 var green1_clicks = 0; |
| 8 var red2_clicks = 0; |
| 9 var green2_clicks = 0; |
| 10 |
| 11 function red1Clicked() { |
| 12 red1_clicks++; |
| 13 checkResult(); |
| 14 } |
| 15 |
| 16 function green1Clicked() { |
| 17 green1_clicks++; |
| 18 checkResult(); |
| 19 } |
| 20 |
| 21 function red2Clicked() { |
| 22 red2_clicks++; |
| 23 checkResult(); |
| 24 } |
| 25 |
| 26 function green2Clicked() { |
| 27 green2_clicks++; |
| 28 checkResult(); |
| 29 } |
| 30 |
| 31 function checkResult() { |
| 32 var output = document.getElementById("output"); |
| 33 var success = green1_clicks > 0 && green2_clicks > 0 && |
| 34 red1_clicks == 0 && red2_clicks == 0; |
| 35 output.innerHTML = success ? "SUCCESS" : "FAILURE"; |
| 36 document.title = output.innerHTML; |
| 37 } |
| 38 |
| 39 function moveMouseOver(elem_name) { |
| 40 var elem = document.getElementById(elem_name); |
| 41 var x = elem.offsetLeft + elem.scrollWidth / 2; |
| 42 var y = elem.offsetTop + elem.scrollHeight / 2; |
| 43 var offsetParent = elem.offsetParent; |
| 44 while (offsetParent) { |
| 45 x += offsetParent.offsetLeft; |
| 46 y += offsetParent.offsetTop; |
| 47 offsetParent = offsetParent.offsetParent; |
| 48 } |
| 49 eventSender.mouseMoveTo(x, y); |
| 50 } |
| 51 |
| 52 function runTest() { |
| 53 if (window.layoutTestController && window.eventSender) { |
| 54 layoutTestController.waitUntilDone(); |
| 55 layoutTestController.dumpAsText(); |
| 56 setTimeout(doClickRed1, 0); |
| 57 } |
| 58 } |
| 59 |
| 60 function doClickRed1() { |
| 61 moveMouseOver("red_square1"); |
| 62 eventSender.mouseDown(); |
| 63 setTimeout(doClickGreen1, 0); |
| 64 } |
| 65 |
| 66 function doClickGreen1() { |
| 67 eventSender.mouseUp(); |
| 68 moveMouseOver("green_square1"); |
| 69 eventSender.mouseDown(); |
| 70 setTimeout(doClickRed2, 0); |
| 71 } |
| 72 |
| 73 function doClickRed2() { |
| 74 eventSender.mouseUp(); |
| 75 moveMouseOver("red_square2"); |
| 76 eventSender.mouseDown(); |
| 77 setTimeout(doClickGreen2, 0); |
| 78 } |
| 79 |
| 80 function doClickGreen2() { |
| 81 eventSender.mouseUp(); |
| 82 moveMouseOver("green_square2"); |
| 83 eventSender.mouseDown(); |
| 84 setTimeout(finishTest, 0); |
| 85 } |
| 86 |
| 87 function finishTest() { |
| 88 eventSender.mouseUp(); |
| 89 layoutTestController.notifyDone(); |
| 90 } |
| 91 </script> |
| 92 </head> |
| 93 <body onload="runTest()"> |
| 94 |
| 95 <p>Test that iframe shims can be used to overlay HTML above a windowed |
| 96 plugin. The red squares should be hidden by the blue flash plugin, and |
| 97 the green squares should appear over it. To test interactively, click |
| 98 over the buttons on the squares. You should not be able to reach the |
| 99 red squares' buttons.</p> |
| 100 |
| 101 <p>Prints "SUCCESS" on success, "FAILURE" on failure.</p> |
| 102 |
| 103 <div id=output>NONE</div> |
| 104 |
| 105 <div style="position: relative;"> |
| 106 |
| 107 <!-- div with a lower stacking order than the plugin, appearing earlier in th
e document --> |
| 108 <div id="red_square1" |
| 109 style="z-index: 50; background-color: #FF0000; position: absolute; top:
-10; left: 50; width: 100px; height: 100px; overflow: hidden;"> |
| 110 <input type="button" onclick="red1Clicked()" value="red" style="position: a
bsolute; top: 10; left: 10; width: 80px; height: 80px;"/> |
| 111 <iframe src="javascript:void(0);" frameborder=0 style="z-index: -1; positio
n: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></iframe> |
| 112 </div> |
| 113 |
| 114 <!-- div with a higher stacking order than the plugin, appearing earlier in t
he document --> |
| 115 <div id="green_square1" |
| 116 style="z-index: 150; background-color: #00FF00; position: absolute; top:
-10; left: 250; width: 100px; height: 100px; overflow: hidden;"> |
| 117 <input type="button" onclick="green1Clicked()" value="green" style="positio
n: absolute; top: 10; left: 10; width: 80px; height: 80px;"/> |
| 118 <iframe src="javascript:void(0);" frameborder=0 style="z-index: -1; positio
n: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></iframe> |
| 119 </div> |
| 120 |
| 121 <div id="embed_parent" style="position: absolute; z-index: 100" |
| 122 <embed width="400" height="200" wmode="window" loop="false" quality="high"
src="simple_blank.swf" type="application/x-shockwave-flash" /> |
| 123 </div> |
| 124 |
| 125 <!-- div with a lower stacking order than the plugin, appearing later in the
document --> |
| 126 <div id="red_square2" |
| 127 style="z-index: 50; background-color: #FF0000; position: absolute; top:
110; left: 50; width: 100px; height: 100px; overflow: hidden;"> |
| 128 <input type="button" onclick="red2Clicked()" value="red" style="position: a
bsolute; top: 10; left: 10; width: 80px; height: 80px;"/> |
| 129 <iframe src="javascript:void(0);" frameborder=0 style="z-index: -1; positio
n: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></iframe> |
| 130 </div> |
| 131 |
| 132 <!-- div with a higher stacking order than the plugin, appearing later in the
document --> |
| 133 <div id="green_square2" |
| 134 style="z-index: 150; background-color: #00FF00; position: absolute; top:
110; left: 250; width: 100px; height: 100px; overflow: hidden;"> |
| 135 <input type="button" onclick="green2Clicked()" value="green" style="positio
n: absolute; top: 10; left: 10; width: 80px; height: 80px;"/> |
| 136 <iframe src="javascript:void(0);" frameborder=0 style="z-index: -1; positio
n: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></iframe> |
| 137 </div> |
| 138 |
| 139 |
| 140 |
| 141 </div> |
| 142 |
| 143 </body> |
| 144 </html> |
| 145 |
OLD | NEW |