editing/selection/click-after-nested-block.html

<html> 
<head>
<script>

function runTest()
{
    if (!window.testRunner)
        return;

    testRunner.dumpAsText();

    var target = document.getElementById("test");
    
    x = target.offsetLeft + target.offsetWidth - 10;
    y = target.offsetTop + target.offsetHeight - 10;

    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.mouseUp();
}

function setTestResultMessage()
{
    var line2Text = document.getElementById("line2").firstChild;

    var result = "FAILED";
    if (getSelection().rangeCount !== 1)
        result = "FAILED: Selection had range count of " + getSelection().rangeCount;
    else if (getSelection().getRangeAt(0).startContainer !== line2Text)
        result = "FAILED: Selection was not within second line of text.";
    else if (getSelection().getRangeAt(0).endContainer !== line2Text)
        result = "FAILED: Selection end was not within second line of text.";
    else if (getSelection().getRangeAt(0).startOffset !== getSelection().getRangeAt(0).endOffset)
        result = "FAILED: Selection was not a caret.";
    else if (getSelection().getRangeAt(0).startOffset !== 6)
        result = "FAILED: Selection was not at the end of the line.";
    else
        result = "SUCCESS";

    document.getElementById("message").firstChild.data = result;
}

</script>
</head>
<body onload="runTest()" onclick="setTestResultMessage()">
<p>
    This is a test for a bug where clicking below a block didn't work right if
    the block was nested inside an inline.
</p>
<p>
    To test interactively, click below and to the right of the 2 in line 2.
    The caret should appear after the 2.
</p>
<p id="message">TEST HAS NOT RUN YET</p>
<hr>
<div contenteditable id="test" style="font-size: 48px; width: 250px; height: 250px"><div>line 1</div><div><span><div id="line2">line 2</div></span></div></div>
</body>