<html> 
<head>
<script>
function log(message) {
    var console = document.getElementById("console");
    var li = document.createElement("li");
    var text = document.createTextNode(message);
    
    console.appendChild(li);
    li.appendChild(text);
}

if (window.testRunner)
    testRunner.waitUntilDone();

function runTest() {
    if (!window.testRunner) {
        log("To run this test manually attempt to drag and drop Abe after the broken image in the editable div");
        return;
    }
    
    //find abe
    var dragme = document.getElementById("dragme");
    x1 = dragme.offsetLeft + 20;
    y1 = dragme.offsetTop + 20;
    
    // Find the target
    var drag_target = document.getElementById("drag_target");
    x2 = drag_target.offsetLeft + drag_target.offsetWidth / 2;
    y2 = drag_target.offsetTop + drag_target.offsetHeight / 2;
 
    // Drag abe into the editable 
    eventSender.mouseMoveTo(x1, y1);
    eventSender.mouseDown();
    eventSender.leapForward(500);
    eventSender.mouseMoveTo(x2, y2);
    eventSender.mouseUp();

    if (window.testRunner) {
        var pasted_image = drag_target.contentDocument.querySelector('.target');
        if (pasted_image.complete)
            testRunner.notifyDone();
        else
            pasted_image.onload = function () { testRunner.notifyDone(); }
    }
}

</script>
<title>Dragging an image to the end of a content editable div in an iframe</title> 
</head> 
<body onload="runTest()">
    <p>This tests that we can drag an image into the last position of a content editable div in an iframe that already contains an image, without crashing.</p>
    
    <img id="dragme" class="target" src="../resources/abe.png"/>
    <iframe id="drag_target" src="resources/drag-image-to-contenteditable-iframe.html"></iframe>
    <ul id="console"></ul>
</body>
</html>