<!DOCTYPE html>
<style>
#foo:hover { color:red }
</style>
<div id="target" style="
    outline: dashed lightblue;
    -webkit-columns: 2;
    -webkit-column-gap: 0;
    -webkit-column-fill: auto;
    columns: 2;
    column-gap: 0;
    column-fill: auto;
    width: 400px;
    height: 80px;
    font: 20px ahem;
    line-height: 2;
">Lorem ipsum dolor sit <span id="foo">amet</span></div>
<pre id="console"></pre>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();

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

    // Clicking below the last line in the first column should not select anything from the first
    // line on the second column.
    var target = document.getElementById("target");
    var hitOffset = document.caretRangeFromPoint(target.offsetLeft + 190, target.offsetTop + 77).startOffset;
    log(hitOffset === 11 ? "PASS" : "FAIL: hit offset " + hitOffset + ".");

    // Clicking above the first line in the second column should not snap to the beginning of the line.
    hitOffset = document.caretRangeFromPoint(target.offsetLeft + 250, target.offsetTop + 2).startOffset;
    log(hitOffset === 14 ? "PASS" : "FAIL: hit offset " + hitOffset + ".");

    // Now test with a flipped lines writing mode.
    target.style.webkitWritingMode = "horizontal-bt";

    // Clicking above the last line in the first column should not select anything from the first
    // line on the second column.
    hitOffset = document.caretRangeFromPoint(target.offsetLeft + 190, target.offsetTop + 3).startOffset;
    log(hitOffset === 11 ? "PASS" : "FAIL: hit offset " + hitOffset + ".");

    // Clicking below the first line in the second column should not snap to the beginning of the line.
    hitOffset = document.caretRangeFromPoint(target.offsetLeft + 250, target.offsetTop + 78).startOffset;
    log(hitOffset === 14 ? "PASS" : "FAIL: hit offset " + hitOffset + ".");
</script>