<!DOCTYPE html>
<html>
<head>
    <title>This tests the ability to place the caret to the left and to the right of an image with display block style.</title>
</head>
<body>
    To run this test manually, click to the left and verify that the caret is placed to the left of the image, then click to the right of the image and verify that the caret is on the right.
    <div contentEditable="true" id="test">hello<img id='myimage' style="margin-left: 100px; display:block; width: 76px; height: 103px" src="../resources/abe.png">world</div>
    <ul id="console"></ul>
</body>
<script>
function log(str) {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(str));
    var console = document.getElementById("console");
    console.appendChild(li);
}

function runTest(x, y, elem, offset) {
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.mouseUp();
    
    var selection = window.getSelection();

    var anchorNode = selection.anchorNode;
    var anchorOffset = selection.anchorOffset;

    var anchorString = "Anchor (" + anchorNode + ", " + anchorOffset + ")";
    var anchorCorrect = anchorNode == elem && anchorOffset == offset;
    if (anchorCorrect)
        log(anchorString + " is correct.");
    else
        log(anchorString + " is incorrect.");
}

function automaticTest() {
    if (window.testRunner) {   
        window.testRunner.dumpAsText();           
        
        var elem;
        elem = document.getElementById("myimage");
        
        runTest(elem.offsetLeft - 10, elem.offsetTop + 10, document.getElementById("test"), 1);
        runTest(elem.offsetLeft + elem.offsetWidth + 10, elem.offsetTop + 10, document.getElementById("test"), 2);
    }
}

automaticTest();
</script>
</html>