<style>
td {
    border: 1px solid #aaa;
}
</style>

<body style="border: 1px solid red;" contenteditable="true"><table id="table" style="margin: 25px; border:10px solid #ccc; padding: 10px;"><tr><td>cell one</td><td>cell two</td></tr></table>
<ul id="console"></ul>
<script>
if (window.testRunner)
     testRunner.dumpEditingCallbacks();

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 runAutomatedTest() {
    window.testRunner.dumpAsText();
    var s, x, y, e, top, bottom, left, right;
    table = document.getElementById("table");

    top = table.offsetTop;
    left = table.offsetLeft;
    bottom = top + table.offsetHeight;
    right = left + table.offsetWidth;
    
    x = right + 5;
    y = (top + bottom) / 2;
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.mouseUp();
    s = window.getSelection();
    if (!(s.anchorNode == document.body && s.anchorOffset == 1))
        log("Failure: Clicking @ " + x + ", " + y + " after the table didn't put the caret after it.  Instead: " + s.anchorNode + ", " + s.anchorOffset);
    
    x = right - 5;
    y = (top + bottom) / 2;
    eventSender.leapForward(1000);
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.mouseUp();
    s = window.getSelection();
    if (s.anchorNode == document.body)
        log("Failure: Clicking @ " + x + ", " + y + " inside the table put the caret before or after it.  Instead: " + s.anchorNode + ", " + s.anchorOffset);
        
    x = left - 5;
    y = (top + bottom) / 2;
    eventSender.leapForward(1000);
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.mouseUp();
    s = window.getSelection();
    if (s.anchorNode != table || s.anchorOffset != 0)
    if (!(s.anchorNode == document.body && s.anchorOffset == 0))
        log("Failure: Clicking @ " + x + ", " + y + " before the table should be the caret before it.  Instead: " + s.anchorNode + ", " + s.anchorOffset);
        
    x = left + 5;
    y = (top + bottom) / 2;
    eventSender.leapForward(1000);
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.mouseUp();
    s = window.getSelection();
    if (s.anchorNode == document.body)
        log("Failure: Clicking @ " + x + ", " + y + " inside the table put the caret before or after it.  Instead: " + s.anchorNode + ", " + s.anchorOffset);
}

if (window.testRunner)
    runAutomatedTest();
else {
    log("This test uses the eventSender to do mouse clicks.  To run it manually, click after the table, the caret should appear there (and not inside the table).  Then click inside the table.  The caret should appear inside it.");
    document.body.addEventListener("click", function() { var s = window.getSelection(); log("click @ " + event.clientX + ", " + event.clientY + " caret at: " + s.anchorNode + ", " + s.anchorOffset); }, true);
}

</script>
</body>