<html>
<head>
    <title>This tests the ability to place the caret in an editable div that contains only non editable content</title>
</head>
<body>
  <p>#1 DIV element with a non-editable element only <span style="color:red">align center</span>:</p>
  <div style="width:100px;background-color:#cee;text-align: center;" contenteditable="true" id="edit1">
    <span contenteditable="false" id="nonedit1">Hello</span>
  </div>
  <p>#2 DIV element with a non-editable element only <span style="color:red">align left</span>:</p>
  <div style="width:100px;background-color:#cee;" contenteditable="true" id="edit2"><span contenteditable="false" id="nonedit2">Hello</span></div>
  <p>#3 DIV element with a non-editable element only <span style="color:red">align right</span>:</p>
  <div style="width:100px;background-color:#cee;text-align: right;" contenteditable="true" id="edit3">
  <span contenteditable="false" id="nonedit3">Hello</span></div>
  <p>#4 DIV element with two non-editable element<span style="color:red">with padding</span>:</p>
  <div style="width:200px;background-color:#cee;" contenteditable="true" id="edit4">
      <span contenteditable="false">Hello </span>
      <span contenteditable="false" id="nonedit4">World</span>
  </div>
  <p>#5 DIV element empty</p>
  <div style="width:100px;background-color:#cee;text-align: center;" contenteditable="true" id="edit5">
  </div>
  <p>#6 non editable DIV element with an editable empty span element</p>
  <div id="nonedit6" style="width:100px;background-color:#cee;">
    Hello:&nbsp;<span id="edit6" contenteditable="true"> </span>
  </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 caretCoordinates()
{
    if (!window.textInputController)
        return { x: 0, y :0 };
    var caretRect = textInputController.firstRectForCharacterRange(textInputController.selectedRange()[0], 0);
    return { x: caretRect[0], y: caretRect[1] };
}

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

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

    var coord = caretCoordinates();
    var anchorString = "Anchor (" + anchorNode + ", " + anchorOffset + " caret[" + coord.x + "," + coord.y + "] refpos=" + Math.round(refpos) + ")";
    var anchorCorrect = anchorNode == elem && anchorOffset == offset && coord.x == Math.round(refpos);
    if (anchorCorrect)
        log(anchorString + " is correct.");
    else
        log(anchorString + " is incorrect.");
}

function automaticTest() {
    if (window.testRunner) {   
        window.testRunner.dumpAsText();
            
        var elem;
        
        // the div has text-alignment center
        elem = document.getElementById("edit1");
        x = elem.offsetLeft + 10;
        y = elem.offsetTop + elem.offsetHeight / 2;
        runTest(x, y, elem, 0, document.getElementById("nonedit1").offsetLeft);
        x = elem.offsetLeft + elem.offsetWidth - 10;
        runTest(x, y, elem, 3, document.getElementById("nonedit1").offsetLeft + document.getElementById("nonedit1").offsetWidth);       

        // the div has text-alignment left
        elem = document.getElementById("edit2");
        x = elem.offsetLeft + elem.offsetWidth - 10;
        y = elem.offsetTop + elem.offsetHeight / 2;
        runTest(x, y, elem, 1, document.getElementById("nonedit2").offsetLeft + document.getElementById("nonedit2").offsetWidth);
        x = elem.offsetLeft;
        runTest(x, y, elem, 0, document.getElementById("nonedit2").offsetLeft);

        // the div has text-alignment right
        elem = document.getElementById("edit3");
        x = elem.offsetLeft + 10;
        y = elem.offsetTop + elem.offsetHeight / 2;
        runTest(x, y, elem, 0, document.getElementById("nonedit3").offsetLeft);

        // the div contains 2 non editable span
        elem = document.getElementById("edit4");
        x = document.getElementById("nonedit4").offsetLeft;
        y = elem.offsetTop + elem.offsetHeight / 2;
        runTest(x, y, elem, 3, document.getElementById("nonedit4").offsetLeft);

        // the div is empty
        elem = document.getElementById("edit5");
        x = elem.offsetLeft;
        y = elem.offsetTop + elem.offsetHeight / 2;
        runTest(x, y, elem, 0, (elem.offsetLeft + elem.offsetWidth)/2 + 4);

        // the div is non editable and contains an empty editable span
        elem = document.getElementById("edit6");
        x = document.getElementById("nonedit6").offsetLeft + document.getElementById("nonedit6").offsetWidth / 2;
        y = document.getElementById("nonedit6").offsetTop + document.getElementById("nonedit6").offsetHeight / 2;
        runTest(x, y, elem, 0, 0);
    }
}

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