Reviewed by Darin.
[WebKit-https.git] / 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="http://bugzilla.opendarwin.org/show_bug.cgi?id=3439">3439</a>, 
20 <a href="http://bugzilla.opendarwin.org/show_bug.cgi?id=5764">5764</a>,
21 <a href="http://bugzilla.opendarwin.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').document;
49         if (!newDoc)
50             newDoc = document.getElementById('invisible_frame').contentDocument;
51         try {
52             newDoc.adoptNode(document.getElementById('t3_1'));
53         } catch (e) {
54             newDoc.documentElement.appendChild(document.getElementById('t3_1'));
55         }
56         " 
57     onMouseOut="logMouseEvent(event)">3</div>
58
59 <!-- 4: Move the element under the mouse into another document, and append it -->
60 <div style='height: 50; width: 50; background:white;top:100;left:250; position:absolute;' id='t4_2' 
61     onMouseOver="logMouseEvent(event)" 
62     onMouseOut="logMouseEvent(event); document.getElementById('t4_2').style.backgroundColor = 'gray'">4</div>
63 <div style='height: 50; width: 50; background:green;top:100;left:250; position:absolute;' id='t4_1' 
64     onMouseOver="
65         logMouseEvent(event);
66         newDoc = document.getElementById('invisible_frame').document;
67         if (!newDoc)
68             newDoc = document.getElementById('invisible_frame').contentDocument;
69         try {
70             newDoc.documentElement.appendChild(newDoc.adoptNode(document.getElementById('t4_1')));
71         } catch (ex) {
72             newDoc.documentElement.appendChild(document.getElementById('t4_1'));
73         }
74         " 
75     onMouseOut="logMouseEvent(event)">4</div>
76
77 <!-- 5: Remove the element under the mouse -->
78 <div style='height: 50; width: 50; background:white;top:100;left:300; position:absolute;' id='t5_2' 
79     onMouseOver="logMouseEvent(event)" 
80     onMouseOut="logMouseEvent(event); document.getElementById('t5_2').style.backgroundColor = 'gray'">5</div>
81 <div style='height: 50; width: 50; background:blue;top:100;left:300; position:absolute;' id='t5_1' 
82     onMouseOver="
83         logMouseEvent(event);
84         document.body.removeChild(document.getElementById('t5_1'));
85         "
86     onMouseOut="logMouseEvent(event)">5</div>
87
88 <!-- 6: Enter a different document -->
89 <iframe style='height: 50; width: 50; top:100;left:350; position:absolute; border-width:0' src='data:text/html,
90     <body style="margin-left:0; margin-top:0">
91         <script>
92             function log(message)
93             {
94                 var item = top.document.createElement("li");
95                 item.appendChild(document.createTextNode(message));
96                 top.document.getElementById("log").appendChild(item);
97             }
98             
99             function logMouseEvent(evt)
100             {
101                 target = (evt.target) ? evt.target : evt.srcElement;
102                 log(evt.type + " on " + target.id);
103             }
104             
105             function doOnMouseOver(evt)
106             {
107                 logMouseEvent(evt);
108                 document.getElementById("t6").style.backgroundColor = "white";
109             }
110
111             function doOnMouseOut(evt)
112             {
113                 logMouseEvent(evt);
114                 document.getElementById("t6").style.backgroundColor = "gray";
115             }
116             
117         </script>
118         <div style="height: 50; width: 50; background:violet; top:0;left:0; position:absolute;" id="t6" 
119             onMouseOver="doOnMouseOver(event);" 
120             onMouseOut="doOnMouseOut(event)">6</div>
121     </body>'
122         onMouseOver="logMouseEvent(event)"
123         onMouseOut="
124             logMouseEvent(event);
125             if (top.document.getElementById('log').innerHTML == top.document.getElementById('exp').innerHTML) {
126                 top.document.getElementById('success').style.display = 'block';
127             }
128             "
129         id="frame6"
130     ></iframe>
131
132 <iframe id=invisible_frame style="width:0; height:0; border-width:0"></iframe>
133
134 <table border=1 width="100%" style='top:200; position:absolute'>
135 <tr><td width="50%">Log</td><td>Expected results</td></tr>
136 <tr>
137     <td id=log style="vertical-align:top"></td>
138     <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>
139 </tr>
140 </table>
141
142 <div style='height: 50; width: 300; top:100;left:100; position:absolute; display:none' id='success'><br><center>SUCCESS</center></div>
143
144 <script>
145 function autoTest() {
146     if (window.layoutTestController) {
147         layoutTestController.dumpAsText();
148     
149         eventSender.mouseMoveTo(1,1);
150         eventSender.mouseDown();
151         eventSender.mouseUp();
152
153         eventSender.mouseMoveTo(125, 125);
154         eventSender.mouseMoveTo(130, 125);
155         eventSender.mouseMoveTo(135, 125);
156
157         eventSender.mouseMoveTo(175, 125);
158         eventSender.mouseMoveTo(180, 125);
159
160         eventSender.mouseMoveTo(225, 125);
161         eventSender.mouseMoveTo(230, 125);
162
163         eventSender.mouseMoveTo(275, 125);
164         eventSender.mouseMoveTo(280, 125);
165
166         eventSender.mouseMoveTo(325, 125);
167         eventSender.mouseMoveTo(330, 125);
168
169         eventSender.mouseMoveTo(375, 125);
170         eventSender.mouseMoveTo(380, 125);
171         eventSender.mouseMoveTo(385, 125);
172
173         eventSender.mouseMoveTo(1, 1);
174     }
175 }
176 </script>
177
178 </body>
179 </html>