<head>
<style>
span:before {
    content: "<before> ";
}
span:after {
    content: " <after>";
}
</style>
<script>
    function nodeAsString(node)
    {
        if (node && node.nodeType == Node.TEXT_NODE)
            return "text in " + nodeAsString(node.parentNode);
        if (node && node.nodeType == Node.ELEMENT_NODE) {
            var id;
            if (id = node.getAttribute("id"))
                return id;
        }
        return node;
    }
    function selectionAsString()
    {
        return "(" + nodeAsString(getSelection().anchorNode)
            + ", " + getSelection().anchorOffset
            + "), (" + nodeAsString(getSelection().focusNode)
            + ", " + getSelection().focusOffset + ")";        
    }
    function checkSelection(step, expected)
    {
        if (selectionAsString() !== expected) {
            document.getElementById("result").innerHTML = "FAIL: After step " + step + " selection was " + selectionAsString();
            return true;
        }
        return false;
    }
    function runTest()
    {
        if (window.testRunner)
            testRunner.dumpAsText();

        var block = document.getElementById("block");
        var x = block.offsetLeft + 5;
        var y = block.offsetTop + 5;

        if (window.eventSender) {
            // Click in the anonymous content, check that cursor goes to
            // the start of the span.
            eventSender.mouseMoveTo(x, y);
            eventSender.mouseDown();
            eventSender.mouseUp();
        }

        if (checkSelection(1, "(text in span, 0), (text in span, 0)"))
            return;

        x = block.offsetLeft + 200;

        if (window.eventSender) {
            // Click in the regular text, make sure it goes into the span.
            eventSender.mouseMoveTo(x, y);
            eventSender.mouseDown();
            eventSender.mouseUp();
        }

        if (checkSelection(2, "(text in span, 7), (text in span, 7)"))
            return;

        document.getElementById("result").innerHTML = "SUCCESS";
    }
</script>
</head>
<body onload="runTest()">
<p>This tests clicking in anonymous content to see if a selection is successfully created.</p>
<p id="block" contentEditable style="border: 1px solid blue; font-size:30px"><span id="span">This is the selectable text.</span></div>
<p id="result">TEST DID NOT RUN</div>
</body>