<div id="test-1" style="width: 200px; outline: dashed lightblue;">
    <div style="height: 10px; background-color: silver;"></div>
    <div style="width: 200px; height: 10px; background-color: silver; -webkit-writing-mode: vertical-lr;"></div>
    <div class="target" style="margin-top: 40px; height: 20px; background-color: silver;"></div>
</div>
<br>
<div id="test-2" style="height: 200px; outline: dashed lightblue; -webkit-writing-mode: vertical-lr;">
    <div style="width: 10px; background-color: silver;"></div>
    <div class="target" style="margin-left: 40px; width: 10px; background-color: silver;"></div>
    <div style="width: 20px; background-color: silver;"></div>
</div>

<pre id="console"></pre>

<script>
    if (window.testRunner)
        testRunner.dumpAsText();

    function log(message)
    {
        document.getElementById("console").appendChild(document.createTextNode(message + "\n"));
    }

    function test(index, x, y)
    {
        var container = document.getElementById("test-" + index);
        var range = document.caretRangeFromPoint(container.offsetLeft + x, container.offsetTop + y);
        log("Test " + index + " result: "
            + (range.startContainer.className === "target" ? "PASS" : "FAIL"));
    }

    test(1, 20, 50);
    test(2, 20, 180);
</script>