LayoutTests/fast/events/mouseover-mouseout.html

   1 <html>
   2 <body onload="autoTest()">
   3 <script>
   4     function log(message)
   5     {
   6         var item = document.createElement("li");
   7         item.appendChild(document.createTextNode(message));
   8         document.getElementById('log').appendChild(item);
   9     }
  10
  11     function logMouseEvent(evt)
  12     {
  13         target = (evt.target) ? evt.target : evt.srcElement;
  14         log(evt.type + " on " + target.id);
  15     }
  16
  17 </script>
  18 <p>Tests for bugs
  19 <a href="https://bugs.webkit.org/show_bug.cgi?id=3439">3439</a>,
  20 <a href="https://bugs.webkit.org/show_bug.cgi?id=5764">5764</a>,
  21 <a href="https://bugs.webkit.org/show_bug.cgi?id=7701">7701</a> -
  22 Mouse events vs. DOM manipulation.</p>
  23 <p>Move the mouse pointer from left to right:</p>
  24
  25 <!-- 1: Show an element under the mouse -->
  26 <div style='height: 50; width: 50; background:red;top:100;left:100; position:absolute;' id='t1_1'
  27     onMouseOver="logMouseEvent(event); document.getElementById('t1_2').style.display = 'block'"
  28     onMouseOut="logMouseEvent(event);">1&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; </div>
  29 <div style='display: none; height: 50; width: 50; background:white;top:100;left:100; position:absolute;' id='t1_2'
  30     onMouseOver="logMouseEvent(event)"
  31     onMouseOut="logMouseEvent(event); document.getElementById('t1_2').style.backgroundColor = 'gray'">1&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; </div>
  32
  33 <!-- 2: Hide an element under the mouse -->
  34 <div style='height: 50; width: 50; background:white;top:100;left:150; position:absolute;' id='t2_2'
  35     onMouseOver="logMouseEvent(event)"
  36     onMouseOut="logMouseEvent(event); document.getElementById('t2_2').style.backgroundColor = 'gray'">2</div>
  37 <div style='height: 50; width: 50; background:orange;top:100;left:150; position:absolute;' id='t2_1'
  38     onMouseOver="logMouseEvent(event); document.getElementById('t2_1').style.display = 'none'"
  39     onMouseOut="logMouseEvent(event)">2</div>
  40
  41 <!-- 3: Move the element under the mouse into another document -->
  42 <div style='height: 50; width: 50; background:white;top:100;left:200; position:absolute;' id='t3_2'
  43     onMouseOver="logMouseEvent(event)"
  44     onMouseOut="logMouseEvent(event); document.getElementById('t3_2').style.backgroundColor = 'gray'">3</div>
  45 <div style='height: 50; width: 50; background:yellow;top:100;left:200; position:absolute;' id='t3_1'
  46     onMouseOver="
  47         logMouseEvent(event);
  48         newDoc = document.getElementById('invisible_frame').contentDocument;
  49         try {
  50             newDoc.adoptNode(document.getElementById('t3_1'));
  51         } catch (e) {
  52             newDoc.documentElement.appendChild(document.getElementById('t3_1'));
  53         }
  54         "
  55     onMouseOut="logMouseEvent(event)">3</div>
  56
  57 <!-- 4: Move the element under the mouse into another document, and append it -->
  58 <div style='height: 50; width: 50; background:white;top:100;left:250; position:absolute;' id='t4_2'
  59     onMouseOver="logMouseEvent(event)"
  60     onMouseOut="logMouseEvent(event); document.getElementById('t4_2').style.backgroundColor = 'gray'">4</div>
  61 <div style='height: 50; width: 50; background:green;top:100;left:250; position:absolute;' id='t4_1'
  62     onMouseOver="
  63         logMouseEvent(event);
  64         newDoc = document.getElementById('invisible_frame').contentDocument;
  65         try {
  66             newDoc.documentElement.appendChild(newDoc.adoptNode(document.getElementById('t4_1')));
  67         } catch (ex) {
  68             newDoc.documentElement.appendChild(document.getElementById('t4_1'));
  69         }
  70         "
  71     onMouseOut="logMouseEvent(event)">4</div>
  72
  73 <!-- 5: Remove the element under the mouse -->
  74 <div style='height: 50; width: 50; background:white;top:100;left:300; position:absolute;' id='t5_2'
  75     onMouseOver="logMouseEvent(event)"
  76     onMouseOut="logMouseEvent(event); document.getElementById('t5_2').style.backgroundColor = 'gray'">5</div>
  77 <div style='height: 50; width: 50; background:blue;top:100;left:300; position:absolute;' id='t5_1'
  78     onMouseOver="
  79         logMouseEvent(event);
  80         document.body.removeChild(document.getElementById('t5_1'));
  81         "
  82     onMouseOut="logMouseEvent(event)">5</div>
  83
  84 <!-- 6: Enter a different document -->
  85 <iframe style='height: 50; width: 50; top:100;left:350; position:absolute; border-width:0' src='resources/mouseover-mouseout-iframe.html'
  86         onMouseOver="logMouseEvent(event)"
  87         onMouseOut="
  88             logMouseEvent(event);
  89             if (top.document.getElementById('log').innerHTML == top.document.getElementById('exp').innerHTML) {
  90                 top.document.getElementById('success').style.display = 'block';
  91             }
  92             "
  93         id="frame6"
  94     ></iframe>
  95
  96 <iframe id=invisible_frame style="width:0; height:0; border-width:0"></iframe>
  97
  98 <table border=1 width="100%" style='top:200; position:absolute'>
  99 <tr><td width="50%">Log</td><td>Expected results</td></tr>
 100 <tr>
 101     <td id=log style="vertical-align:top"></td>
 102     <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>
 103 </tr>
 104 </table>
 105
 106 <div style='height: 50; width: 300; top:100;left:100; position:absolute; display:none' id='success'><br><center>SUCCESS</center></div>
 107
 108 <script>
 109 function autoTest() {
 110     if (window.layoutTestController) {
 111         layoutTestController.dumpAsText();
 112
 113         eventSender.mouseMoveTo(1,1);
 114         eventSender.mouseDown();
 115         eventSender.mouseUp();
 116
 117         eventSender.mouseMoveTo(125, 125);
 118         eventSender.mouseMoveTo(130, 125);
 119         eventSender.mouseMoveTo(135, 125);
 120
 121         eventSender.mouseMoveTo(175, 125);
 122         eventSender.mouseMoveTo(180, 125);
 123
 124         eventSender.mouseMoveTo(225, 125);
 125         eventSender.mouseMoveTo(230, 125);
 126
 127         eventSender.mouseMoveTo(275, 125);
 128         eventSender.mouseMoveTo(280, 125);
 129
 130         eventSender.mouseMoveTo(325, 125);
 131         eventSender.mouseMoveTo(330, 125);
 132
 133         eventSender.mouseMoveTo(375, 125);
 134         eventSender.mouseMoveTo(380, 125);
 135         eventSender.mouseMoveTo(385, 125);
 136
 137         eventSender.mouseMoveTo(1, 1);
 138     }
 139 }
 140 </script>
 141
 142 </body>
 143 </html>