<!DOCTYPE html>
 <script src="../../resources/js-test.js"></script>
 <script src="../../resources/run-after-layout-and-paint.js"></script>
 <style>
 #anchor {
    display: none;
    position: absolute;
    width: 60px;
    height: 30px;
    background-color: #eee;
    font: bold 10pt monospace;
    padding: 10px;
    left: 50vw;
    top: 200vh;
}

</style>
<a id="anchor" name="foo">ANCHOR</a>
<script>

description("Tests that the scroll position does not stick to the anchor if " +
            "it becomes visible after the page has finished loading.");

var jsTestIsAsync = true;
var anchor = document.querySelector("#anchor");

onhashchange = function() {
    if (location.hash != '#foo')
        return;

    runAfterLayoutAndPaint(function() {
        anchor.style.display = 'block';
        runAfterLayoutAndPaint(function() {
            shouldBe("scrollY", "0");

            location.hash = "#";
            anchor.style.display = 'none';
            finishJSTest();
        });
    });
};

onload = function() {
    runAfterLayoutAndPaint(function() {
        location.hash = "#foo";
    });
};

</script>