<html>
<head>
<script>
function log(message)
{
    var element = document.createElement("p");
    element.appendChild(document.createTextNode(message));
    document.getElementById("results").appendChild(element);
}
function runTest()
{
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    if (document.scrollingElement.scrollTop == 0)
        log("PASS: Document is starting scrolled to top.");
    else
        log("FAIL: Document is starting scrolled to " + document.scrollingElement.scrollTop + ".");
    document.getElementById("area").focus();

    setTimeout(() => {
        if (document.scrollingElement.scrollTop > 4000 && document.scrollingElement.scrollTop < 6000)
            log("PASS: Focusing area element caused the image to scroll into view.");
        else
            log("FAIL: Document is scrolled to " + document.scrollingElement.scrollTop + " after focusing area element.");
        document.scrollingElement.scrollTop = 0;
        if (document.scrollingElement.scrollTop == 0)
            log("PASS: Document is scrolled to top once again.");
        else
            log("FAIL: Document should be scrolled to top but is scrolled to " + document.scrollingElement.scrollTop + ".");
        document.getElementById("area").blur();
        if (document.scrollingElement.scrollTop == 0)
            log("PASS: Document is still scrolled to top after removing focus from area element.");
        else
            log("FAIL: Document is scrolled to " + document.scrollingElement.scrollTop + " after removing focus from area element.");
        document.scrollingElement.scrollTop = 0;
        document.body.removeChild(document.getElementById("test"));
        log("TEST COMPLETE");

        if (window.testRunner)
            testRunner.notifyDone();
    }, 0);
}
</script>
</head>
<body onload="runTest()">
<div id="results">
<p>This tests to be sure that focusing an area element triggers scrolling and removing focus from it does not.</p>
</div>
<div id="test">
<div style="height:5000px"></div>
<map name="imagemap">
    <area id="area" shape="rect" coords="0,0,128,128" href="#dummy">
</map>
<img src="resources/mu.png" width="128" height="128" usemap="#imagemap" ismap>
<div style="height:5000px"></div>
<div>
</body>
</head>
</html>