| <html> |
| <body onload="autoTest()"> |
| <script> |
| function log(message) |
| { |
| var item = document.createElement("li"); |
| item.appendChild(document.createTextNode(message)); |
| document.getElementById('log').appendChild(item); |
| } |
| |
| function logMouseEvent(evt) |
| { |
| target = (evt.target) ? evt.target : evt.srcElement; |
| log(evt.type + " on " + target.id); |
| } |
| |
| </script> |
| <p>Tests for bugs |
| <a href="http://bugzilla.opendarwin.org/show_bug.cgi?id=3439">3439</a>, |
| <a href="http://bugzilla.opendarwin.org/show_bug.cgi?id=5764">5764</a>, |
| <a href="http://bugzilla.opendarwin.org/show_bug.cgi?id=7701">7701</a> - |
| Mouse events vs. DOM manipulation.</p> |
| <p>Move the mouse pointer from left to right:</p> |
| |
| <!-- 1: Show an element under the mouse --> |
| <div style='height: 50; width: 50; background:red;top:100;left:100; position:absolute;' id='t1_1' |
| onMouseOver="logMouseEvent(event); document.getElementById('t1_2').style.display = 'block'" |
| onMouseOut="logMouseEvent(event);">1 </div> |
| <div style='display: none; height: 50; width: 50; background:white;top:100;left:100; position:absolute;' id='t1_2' |
| onMouseOver="logMouseEvent(event)" |
| onMouseOut="logMouseEvent(event); document.getElementById('t1_2').style.backgroundColor = 'gray'">1 </div> |
| |
| <!-- 2: Hide an element under the mouse --> |
| <div style='height: 50; width: 50; background:white;top:100;left:150; position:absolute;' id='t2_2' |
| onMouseOver="logMouseEvent(event)" |
| onMouseOut="logMouseEvent(event); document.getElementById('t2_2').style.backgroundColor = 'gray'">2</div> |
| <div style='height: 50; width: 50; background:orange;top:100;left:150; position:absolute;' id='t2_1' |
| onMouseOver="logMouseEvent(event); document.getElementById('t2_1').style.display = 'none'" |
| onMouseOut="logMouseEvent(event)">2</div> |
| |
| <!-- 3: Move the element under the mouse into another document --> |
| <div style='height: 50; width: 50; background:white;top:100;left:200; position:absolute;' id='t3_2' |
| onMouseOver="logMouseEvent(event)" |
| onMouseOut="logMouseEvent(event); document.getElementById('t3_2').style.backgroundColor = 'gray'">3</div> |
| <div style='height: 50; width: 50; background:yellow;top:100;left:200; position:absolute;' id='t3_1' |
| onMouseOver=" |
| logMouseEvent(event); |
| newDoc = document.getElementById('invisible_frame').contentDocument; |
| try { |
| newDoc.adoptNode(document.getElementById('t3_1')); |
| } catch (e) { |
| newDoc.documentElement.appendChild(document.getElementById('t3_1')); |
| } |
| " |
| onMouseOut="logMouseEvent(event)">3</div> |
| |
| <!-- 4: Move the element under the mouse into another document, and append it --> |
| <div style='height: 50; width: 50; background:white;top:100;left:250; position:absolute;' id='t4_2' |
| onMouseOver="logMouseEvent(event)" |
| onMouseOut="logMouseEvent(event); document.getElementById('t4_2').style.backgroundColor = 'gray'">4</div> |
| <div style='height: 50; width: 50; background:green;top:100;left:250; position:absolute;' id='t4_1' |
| onMouseOver=" |
| logMouseEvent(event); |
| newDoc = document.getElementById('invisible_frame').contentDocument; |
| try { |
| newDoc.documentElement.appendChild(newDoc.adoptNode(document.getElementById('t4_1'))); |
| } catch (ex) { |
| newDoc.documentElement.appendChild(document.getElementById('t4_1')); |
| } |
| " |
| onMouseOut="logMouseEvent(event)">4</div> |
| |
| <!-- 5: Remove the element under the mouse --> |
| <div style='height: 50; width: 50; background:white;top:100;left:300; position:absolute;' id='t5_2' |
| onMouseOver="logMouseEvent(event)" |
| onMouseOut="logMouseEvent(event); document.getElementById('t5_2').style.backgroundColor = 'gray'">5</div> |
| <div style='height: 50; width: 50; background:blue;top:100;left:300; position:absolute;' id='t5_1' |
| onMouseOver=" |
| logMouseEvent(event); |
| document.body.removeChild(document.getElementById('t5_1')); |
| " |
| onMouseOut="logMouseEvent(event)">5</div> |
| |
| <!-- 6: Enter a different document --> |
| <iframe style='height: 50; width: 50; top:100;left:350; position:absolute; border-width:0' src='resources/mouseover-mouseout-iframe.html' |
| onMouseOver="logMouseEvent(event)" |
| onMouseOut=" |
| logMouseEvent(event); |
| if (top.document.getElementById('log').innerHTML == top.document.getElementById('exp').innerHTML) { |
| top.document.getElementById('success').style.display = 'block'; |
| } |
| " |
| id="frame6" |
| ></iframe> |
| |
| <iframe id=invisible_frame style="width:0; height:0; border-width:0"></iframe> |
| |
| <table border=1 width="100%" style='top:200; position:absolute'> |
| <tr><td width="50%">Log</td><td>Expected results</td></tr> |
| <tr> |
| <td id=log style="vertical-align:top"></td> |
| <td id=exp style="vertical-align:top"><li>mouseover on t1_1</li><li>mouseout on t1_1</li><li>mouseover on t1_2</li><li>mouseout on t1_2</li><li>mouseover on t2_1</li><li>mouseout on t2_1</li><li>mouseover on t2_2</li><li>mouseout on t2_2</li><li>mouseover on t3_1</li><li>mouseover on t3_2</li><li>mouseout on t3_2</li><li>mouseover on t4_1</li><li>mouseover on t4_2</li><li>mouseout on t4_2</li><li>mouseover on t5_1</li><li>mouseout on t5_1</li><li>mouseover on t5_2</li><li>mouseout on t5_2</li><li>mouseover on frame6</li><li>mouseover on t6</li><li>mouseout on t6</li><li>mouseout on frame6</li></td> |
| </tr> |
| </table> |
| |
| <div style='height: 50; width: 300; top:100;left:100; position:absolute; display:none' id='success'><br><center>SUCCESS</center></div> |
| |
| <script> |
| function autoTest() { |
| if (window.layoutTestController) { |
| layoutTestController.dumpAsText(); |
| |
| eventSender.mouseMoveTo(1,1); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| |
| eventSender.mouseMoveTo(125, 125); |
| eventSender.mouseMoveTo(130, 125); |
| eventSender.mouseMoveTo(135, 125); |
| |
| eventSender.mouseMoveTo(175, 125); |
| eventSender.mouseMoveTo(180, 125); |
| |
| eventSender.mouseMoveTo(225, 125); |
| eventSender.mouseMoveTo(230, 125); |
| |
| eventSender.mouseMoveTo(275, 125); |
| eventSender.mouseMoveTo(280, 125); |
| |
| eventSender.mouseMoveTo(325, 125); |
| eventSender.mouseMoveTo(330, 125); |
| |
| eventSender.mouseMoveTo(375, 125); |
| eventSender.mouseMoveTo(380, 125); |
| eventSender.mouseMoveTo(385, 125); |
| |
| eventSender.mouseMoveTo(1, 1); |
| } |
| } |
| </script> |
| |
| </body> |
| </html> |
