<!DOCTYPE html>
<html>
<body>
<p>This tests dragging text within the same contenteditable element. To manually test, move the target below to the destination.
You should see source:dragstart, destination:drop, and source:dragend in the log.</p>
<div id="source" contenteditable><span>Drag and drop this <span id="target">target</span> from here</div>
<div id="destination" contenteditable><span>to here, the_destination.</span></div>
<pre id="log">
Log:
</pre>
<script>

var log = document.getElementById('log');
var source = document.getElementById('source');
var destination = document.getElementById('destination');
var eventLogs = [];

function attachLogger(element) {
    var logger = function(event) {
        var text = element.id + ':' + event.type;
        eventLogs.push(text);
        log.innerHTML += text + '\n';
    }
    element.addEventListener('dragstart', logger, false);
    element.addEventListener('dragend', logger, false);
    element.addEventListener('drop', logger, false);
}

attachLogger(source);
attachLogger(destination);

if (window.eventSender) {
    testRunner.dumpAsText();

    source.focus();
    var target = document.getElementById('target');
    getSelection().selectAllChildren(target);

    function mouseMoveToCenterOfElement(element) {
        eventSender.mouseMoveTo(element.offsetLeft + element.offsetWidth / 2, element.offsetTop + element.offsetHeight / 2);
    }

    eventSender.dragMode = true;
    mouseMoveToCenterOfElement(target);
    eventSender.mouseDown();
    eventSender.leapForward(500);
    mouseMoveToCenterOfElement(destination);
    eventSender.mouseUp();

    source.style.display = 'none';
    destination.style.display = 'none';

    log.innerHTML += '\n' + (eventLogs.join('') == ['source:dragstart', 'destination:drop', 'source:dragend'].join('') ? 'PASS' : 'FAIL');
}

</script>
</body>
</html>