<html>
<head>
<script src=../editing.js language="JavaScript" type="text/JavaScript" ></script>
<script>
if (window.testRunner)
     testRunner.dumpEditingCallbacks();
</script>

<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);
}

function runTest() {
    if (window.testRunner)
        testRunner.waitUntilDone();
    e = document.getElementById("dragme");
    setSelectionCommand(e, 0, e, 1);

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

    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();    
    e = document.getElementById("target");
    x = e.offsetLeft + e.offsetWidth / 2;
    y = e.offsetTop + e.offsetHeight / 2;
    
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseUp();

    Promise.all(Array.from(document.querySelectorAll('img')).map((img) => {
        if (img.complete)
            return;
        return new Promise((resolve) => img.onload = resolve);
    })).then(() => testRunner.notifyDone());
}

</script>
</head>

<body style="padding:0; margin:0" onload="runTest();">  

<div id="target" style="border: 1px solid black; width: 300px; height: 120px;" contenteditable="true"></div>
<img id="dragme" src="../resources/abe.png">

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