<!DOCTYPE html>
<html>
<head>
<script src="../resources/js-test-pre.js"></script>
<style>
    #shape {
        float: left;
        width: 200px;
        height: 200px;
        -webkit-shape-outside: url("/resources/load-and-stall.php?name=square100.png&stallAt=0&stallFor=1");
    }
</style>
</head>
<body>
<p>Verify that a image valued shape-outside layout is updated after the image has been loaded. This test
checks that left edge of the "Hello World" text span is defined by the 200px wide float before shape-outside
image has been loaded and by the 100px wide image after it's been laoded.</p>

<div id="container">
  <div id="shape"></div><span id="text">Hello World</span>
</div>
<p id="console"></p>

<script>
window.jsTestIsAsync = true;
function elementRect(elementId) 
{
    var s = document.getElementById("container").getBoundingClientRect();
    var r = document.getElementById(elementId).getBoundingClientRect();
    return {left: r.left - s.left, top: r.top - s.top, width: r.width, height: r.height};
}

shouldBe('elementRect("text").left', "200"); // image hasn't loaded yet

window.onload = function() {
    document.body.offsetTop; // fetch offsetTop to force a layout
    shouldBe('elementRect("text").left', "100");
    finishJSTest();
};

</script>
<script src="../resources/js-test-post.js"></script>
</body>
</html>