LayoutTests/fast/events/mouseover-mouseout2.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: Enter a subframe -->
  26 <iframe style='height: 50; width: 50; top:100;left:100; position:absolute; border-width:0' src='resources/mouseover-mouseout2-iframe-1.html'
  27         onMouseOver="logMouseEvent(event)"
  28         onMouseOut="logMouseEvent(event);"
  29         id="frame1"
  30     ></iframe>
  31
  32 <!-- 2: Move from one subframe to another -->
  33 <iframe style='height: 50; width: 50; top:100;left:150; position:absolute; border-width:0' src='resources/mouseover-mouseout2-iframe-2.html'
  34         onMouseOver="logMouseEvent(event)"
  35         onMouseOut="logMouseEvent(event)"
  36         id="frame2"
  37     ></iframe>
  38
  39 <!-- 3: Hide a subframe under the mouse -->
  40 <div style='height: 50; width: 50; background:white;top:100;left:200; position:absolute;' id='t3_2'
  41     onMouseOver="logMouseEvent(event)"
  42     onMouseOut="logMouseEvent(event); document.getElementById('t3_2').style.backgroundColor = 'gray'">3</div>
  43 <iframe style='height: 50; width: 50; top:100;left:200; position:absolute; border-width:0' src='resources/mouseover-mouseout2-iframe-3.html'
  44         onMouseOver="logMouseEvent(event)"
  45         onMouseOut="logMouseEvent(event)"
  46         id="frame3"
  47     ></iframe>
  48
  49 <!-- 4: Show a subframe under the mouse -->
  50 <div style='height: 50; width: 50; background:green;top:100;left:250; position:absolute;' id='t4_2'
  51     onMouseOver="logMouseEvent(event); document.getElementById('frame4').style.visibility = 'visible'"
  52     onMouseOut="logMouseEvent(event)">4</div>
  53 <iframe style='height: 50; width: 50; top:100;left:250; position:absolute; border-width:0; visibility:hidden' src='resources/mouseover-mouseout2-iframe-4.html'
  54         onMouseOver="logMouseEvent(event)"
  55         onMouseOut="logMouseEvent(event)"
  56         id="frame4"
  57     ></iframe>
  58
  59 <!-- 5: Remove the subframe under the mouse -->
  60 <div style='height: 50; width: 50; background:white;top:100;left:300; position:absolute;' id='t5_2'
  61     onMouseOver="logMouseEvent(event)"
  62     onMouseOut="logMouseEvent(event); document.getElementById('t5_2').style.backgroundColor = 'gray'">5</div>
  63 <iframe style='height: 50; width: 50; top:100;left:300; position:absolute; border-width:0' src='resources/mouseover-mouseout2-iframe-5.html'
  64         onMouseOver="logMouseEvent(event)"
  65         onMouseOut="logMouseEvent(event)"
  66         id="frame5"
  67     ></iframe>
  68
  69 <!-- 6: Nothing but a rainbow end -->
  70 <div style='height: 50; width: 50; background:violet;top:100;left:350; position:absolute;' id='t6'
  71     onMouseOver="logMouseEvent(event); document.getElementById('t6').style.backgroundColor = 'white'"
  72     onMouseOut="
  73         logMouseEvent(event);
  74         document.getElementById('t6').style.backgroundColor = 'gray';
  75         if (top.document.getElementById('log').innerHTML == top.document.getElementById('exp').innerHTML) {
  76             top.document.getElementById('success').style.display = 'block';
  77         }
  78         ">6</div>
  79
  80 <table border=1 width="100%" style='top:200; position:absolute'>
  81 <tr><td width="50%">Log</td><td>Expected results</td></tr>
  82 <tr>
  83     <td id=log style="vertical-align:top"></td>
  84     <td id=exp style="vertical-align:top"><LI>mouseover on frame1</LI><LI>mouseover on t1</LI><LI>mouseout on t1</LI><LI>mouseout on frame1</LI><LI>mouseover on frame2</LI><LI>mouseover on t2</LI><LI>mouseout on t2</LI><LI>mouseout on frame2</LI><LI>mouseover on frame3</LI><LI>mouseover on t3_1</LI><LI>mouseout on t3_1</LI><LI>mouseout on frame3</LI><LI>mouseover on t3_2</LI><LI>mouseout on t3_2</LI><LI>mouseover on t4_2</LI><LI>mouseout on t4_2</LI><LI>mouseover on frame4</LI><LI>mouseover on t4_1</LI><LI>mouseout on t4_1</LI><LI>mouseout on frame4</LI><LI>mouseover on frame5</LI><LI>mouseover on t5_1</LI><LI>mouseout on frame5</LI><LI>mouseover on t5_2</LI><LI>mouseout on t5_2</LI><LI>mouseover on t6</LI><LI>mouseout on t6</LI></td>
  85 </tr>
  86 </table>
  87
  88 <div style='height: 50; width: 300; top:100;left:100; position:absolute; display:none' id='success'><br><center>SUCCESS</center></div>
  89
  90 <script>
  91 function autoTest() {
  92     if (window.layoutTestController) {
  93         layoutTestController.dumpAsText();
  94         layoutTestController.waitUntilDone();
  95
  96         eventSender.mouseMoveTo(1,1);
  97         eventSender.mouseDown();
  98         eventSender.mouseUp();
  99
 100         eventSender.mouseMoveTo(125, 125);
 101         eventSender.mouseMoveTo(130, 125);
 102         eventSender.mouseMoveTo(135, 125);
 103
 104         eventSender.mouseMoveTo(175, 125);
 105         eventSender.mouseMoveTo(180, 125);
 106
 107         eventSender.mouseMoveTo(225, 125);
 108         eventSender.mouseMoveTo(230, 125);
 109
 110         eventSender.mouseMoveTo(275, 125);
 111         eventSender.mouseMoveTo(280, 125);
 112
 113         eventSender.mouseMoveTo(325, 125);
 114         eventSender.mouseMoveTo(330, 125);
 115
 116         eventSender.mouseMoveTo(375, 125);
 117         eventSender.mouseMoveTo(380, 125);
 118         eventSender.mouseMoveTo(385, 125);
 119
 120         eventSender.mouseMoveTo(1, 1);
 121         layoutTestController.notifyDone()
 122     }
 123 }
 124 </script>
 125
 126 </body>
 127 </html>