<html>
<head>
<script>

function out(event)
{
    var m = document.getElementById("m1");
    while (m.firstChild)
        m.removeChild(m.firstChild);
    m.appendChild(document.createTextNode("Moved out of "
        + event.target.getAttribute("id") + " to "
        + event.relatedTarget.getAttribute("id") + "."));
}

function over(event)
{
    var m = document.getElementById("m2");
    while (m.firstChild)
        m.removeChild(m.firstChild);
    m.appendChild(document.createTextNode("Moved over "
        + event.target.getAttribute("id") + " from "
        + event.relatedTarget.getAttribute("id") + "."));

    if (window.layoutTestController)
        layoutTestController.notifyDone();
}

function test()
{
    if (window.layoutTestController)
        layoutTestController.dumpAsText();

    if (window.eventSender) {
        eventSender.mouseMoveTo(50, 50);
        eventSender.mouseDown();
        eventSender.mouseUp();
        eventSender.mouseMoveTo(50, 150);
        eventSender.mouseDown();
        eventSender.mouseUp();
    }
}

</script>
</head>
<body onload="test()">
<div>
<div id="A" style="background-color: red; width:100px; height:100px" onmouseout="out(event)"></div>
<div id="B" style="background-color: blue; width:100px; height:100px" onmouseover="over(event)"></div>
</div>
<p>This test checks that the relatedTarget property is set on mouse out and mouse over events.</p>
<p>To perform the test, move the mouse into the red box, and then drag it out of the red box into the blue box.</p>
<p>The text below should say "Moved out of A to B. Moved over B from A."</p>
<span id="m1"></span> <span id="m2"></span>
</body>
</html>