<html>
<head>
<script>
if (window.testRunner) {
     testRunner.dumpEditingCallbacks();
     testRunner.waitUntilDone();
}

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

function runTest() {
    if (!window.testRunner) {
        log("This test uses the eventSender.  To run it manually, drag the image into the editable frame and drop it.  It should appear inside the editable frame.");
        return;
    }
    
    log("Abe should be outside the frame and inside it.");
    
    e = document.getElementById("dragme");
    x = e.offsetLeft + e.offsetWidth / 2;
    y = e.offsetTop + e.offsetHeight / 2;

    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.leapForward(1000);
    
    const frame = document.getElementById("frame");
    x = frame.offsetLeft + frame.offsetWidth / 2;
    y = frame.offsetTop + frame.offsetHeight / 2;
    
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseUp();

    const img = frame.contentDocument.querySelector('img');
    if (img.complete)
        testRunner.notifyDone();
    else
        img.onload = () => testRunner.notifyDone();
}

window.onload = runTest;

</script>
</head>

<body style="padding:0; margin:0">  

<iframe id="frame" style="width: 200px; height: 200px; border: 4px solid black;" src="../resources/contenteditable-iframe-src.html"></iframe>
<img id="dragme" src="../resources/abe.png">

<ul id="console"></ul>
</body>