<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<script src="resources/record-events.js"></script>
<script>
if (window.testRunner)
    testRunner.dumpAsText();

window.onload = runTest;

function runTest()
{
    if (!window.eventSender)
        return;

    var firstInput = document.getElementById("firstInput");
    var secondInput = document.getElementById("secondInput");
    registerElementsAndEventsToRecord([firstInput, secondInput], ["focus", "blur", "change", "click"]);

    beginRecordingEvents();
    firstInput.focus();
    eventSender.keyDown("A");
    eventSender.mouseMoveTo(secondInput.offsetLeft + secondInput.offsetWidth / 2,
                            secondInput.offsetTop + secondInput.offsetHeight / 2);
    eventSender.mouseDown();
    eventSender.mouseUp(); // Transfers focus to text field "second input".
    endRecordingEvents();
    checkThatEventsFiredInOrder([["firstInput", "focus"], ["firstInput", "change"], ["firstInput", "blur"], ["secondInput", "focus"], ["secondInput", "click"]]);
    debug('<br /><span class="pass">TEST COMPLETE</span>');
}
</script>
</head>
<body>
<p id="description"></p>
<div id="test-container">
    <input type="text" id="firstInput" placeholder="first input" />
    <input type="text" id="secondInput" placeholder="second input" />
</div>
<div id="console"></div>
<script>
    description("This test checks that when a user focuses on the &quot;first input&quot; text field, modifies its contents, and then " +
                "defocuses it by clicking on the &quot;second input&quot; text field that the following DOM events are fired in order: " +
                "Focus, Change, Blur, Focus (on &quot;second input&quot;), Click (on &quot;second input&quot;). Note, this test must be run by Dump Render Tree.");
</script>
</body>
</html>