<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: Enter a subframe -->
<iframe style='height: 50; width: 50; top:100;left:100; position:absolute; border-width:0' src='resources/mouseover-mouseout2-iframe-1.html'
        onMouseOver="logMouseEvent(event)"
        onMouseOut="logMouseEvent(event);"
        id="frame1"
    ></iframe>

<!-- 2: Move from one subframe to another -->
<iframe style='height: 50; width: 50; top:100;left:150; position:absolute; border-width:0' src='resources/mouseover-mouseout2-iframe-2.html'
        onMouseOver="logMouseEvent(event)"
        onMouseOut="logMouseEvent(event)"
        id="frame2"
    ></iframe>

<!-- 3: Hide a subframe under the mouse -->
<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>
<iframe style='height: 50; width: 50; top:100;left:200; position:absolute; border-width:0' src='resources/mouseover-mouseout2-iframe-3.html'
        onMouseOver="logMouseEvent(event)"
        onMouseOut="logMouseEvent(event)"
        id="frame3"
    ></iframe>

<!-- 4: Show a subframe under the mouse -->
<div style='height: 50; width: 50; background:green;top:100;left:250; position:absolute;' id='t4_2' 
    onMouseOver="logMouseEvent(event); document.getElementById('frame4').style.visibility = 'visible'"
    onMouseOut="logMouseEvent(event)">4</div>
<iframe style='height: 50; width: 50; top:100;left:250; position:absolute; border-width:0; visibility:hidden' src='resources/mouseover-mouseout2-iframe-4.html'
        onMouseOver="logMouseEvent(event)"
        onMouseOut="logMouseEvent(event)"
        id="frame4"
    ></iframe>

<!-- 5: Remove the subframe 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>
<iframe style='height: 50; width: 50; top:100;left:300; position:absolute; border-width:0' src='resources/mouseover-mouseout2-iframe-5.html'
        onMouseOver="logMouseEvent(event)"
        onMouseOut="logMouseEvent(event)"
        id="frame5"
    ></iframe>

<!-- 6: Nothing but a rainbow end -->
<div style='height: 50; width: 50; background:violet;top:100;left:350; position:absolute;' id='t6' 
    onMouseOver="logMouseEvent(event); document.getElementById('t6').style.backgroundColor = 'white'" 
    onMouseOut="
        logMouseEvent(event);
        document.getElementById('t6').style.backgroundColor = 'gray';
        if (top.document.getElementById('log').innerHTML == top.document.getElementById('exp').innerHTML) {
            top.document.getElementById('success').style.display = 'block';
        }
        ">6</div>

<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 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>
</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();
        testRunner.waitUntilDone();

        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);
        testRunner.notifyDone()
    }
}
</script>

</body>
</html>