144 lines
6.5 KiB
HTML
144 lines
6.5 KiB
HTML
<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="https://bugs.webkit.org/show_bug.cgi?id=3439">3439</a>,
|
|
<a href="https://bugs.webkit.org/show_bug.cgi?id=5764">5764</a>,
|
|
<a href="https://bugs.webkit.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.testRunner) {
|
|
testRunner.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>
|