<!DOCTYPE html>
<html>
<head>
<script>
    function log(str)
    {
        var result = document.getElementById('result');
        result.appendChild(document.createTextNode(str));
        result.appendChild(document.createElement('br'));
    }
    function dragNowhere(element)
    {
        eventSender.mouseMoveTo(element.offsetLeft + element.offsetWidth / 2,
                                element.offsetTop + element.offsetHeight / 2);
        eventSender.mouseDown();
        eventSender.leapForward(100);
        eventSender.mouseMoveTo(element.offsetLeft + 1, element.offsetHeight + 1);
        eventSender.mouseUp();
    }
    window.onload = function()
    {
        if (!window.testRunner)
            return;
        testRunner.dumpAsText();

        log('Starting test...');
        log(window.getSelection().rangeCount + ' range(s) selected');
        log('Dragging image in non-editable area...');
        dragNowhere(document.getElementById('imageOne'));
        log(window.getSelection().rangeCount + ' range(s) selected');
        log('Dragging image in editable area...');
        dragNowhere(document.getElementById('imageTwo'));
        log(window.getSelection().rangeCount + ' range(s) selected');
        if (window.getSelection().rangeCount && window.getSelection().containsNode(document.getElementById('imageTwo')))
          log('imageTwo is selected');
    }
</script>
</head>
<body>
<div>
<h3>Non-editable area</h3>
<img id="imageOne" src="resources/abe.png">
</div>
<div contenteditable="true">
<h3>Editable area</h3>
<img id="imageTwo" src="resources/onload-image.png">
</div>
<p>This tests that images are properly left selected or unselected when an image drag is started.
Only the image in the editable area should be selected when an image drag is started.
<div id="result">
</div>
</body>
</html>