<body onload="test()">
<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=38752">bug 38752</a>:
Images cannot be dynamically added to image documents.</p>
<p id=result>Onload was not called, which is not good. But is the square below green?</p>
<iframe src="resources/test-load.jpg" width=100 height=100 frameborder=0></iframe>
<script>
if (window.testRunner) {
    testRunner.waitUntilDone();
    testRunner.dumpAsText();
}

function loaded()
{
    if (frames[0].document.getElementById("green").naturalWidth == 16)
        document.getElementById("result").innerHTML = "PASS";
    if (window.testRunner)
        testRunner.notifyDone();
}

function test()
{
    var d = frames[0].document;
    var script = d.createElement("SCRIPT");
    script.src = "data:text/plain," + 
        "var bg = document.createElement('DIV');" +
        "bg.style.width = '100px';" + 
        "bg.style.height = '100px';" + 
        "bg.style.position = 'absolute';" + 
        "bg.style.top = 0;" + 
        "bg.style.left = 0;" + 
        "bg.style.background = 'red no-repeat';" + 
        "bg.style.overflow = 'visible';" + 
        "bg.style.zIndex = '1000000';" + 
        "document.body.appendChild(bg);" +

        "var img = document.createElement('IMG');" +
        "img.id = 'green';" +
        "img.src = 'green.jpg';" +
        "img.style.width = '100px';" +
        "img.style.height = '100px';" +
        "img.style.position = 'absolute';" +
        "img.style.top = 0;" +
        "img.style.left = 0;" +
        "img.style.zIndex = '2000000';" +
        "img.onload = function() { top.loaded() };" + 
        "document.body.appendChild(img);"
    d.body.appendChild(script);
}

</script>
</body>