<style>
td, tr {
    border: 1px solid #bbb;
}
</style>

<body>
<p>This tests clicking to place a caret in the padding of an editable region.  The eventSender clicks to the left of the ToDo in the left padding of the editable region and the caret should be just before that ToDo.</p>
<div style="border: 1px solid black; padding: 25px;" contenteditable="true">
<div id="p1">Paragraph One.</div>
<table id="t1" contenteditable="false" style="border: 1px solid #bbb;"><tr><td>&nbsp;</td><td contenteditable="true">ToDo One.</td></tr></table>
<div id="p2">Paragraph Two.</div>
</div>

<script>
if (window.testRunner) {
    var o = document.getElementById("t1");
    x = o.offsetParent.offsetLeft + o.offsetLeft - 10;
    y = o.offsetParent.offsetTop + o.offsetTop + o.offsetHeight / 2;
    
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.mouseUp();
}
</script>
</body>