<!DOCTYPE html>
<style>
    body {
	margin:0;
    }

    #mc {
	-webkit-columns: 3;
	-webkit-column-gap: 20px;
        direction: rtl;
        unicode-bidi: bidi-override;
	width: 280px;
	margin:20px 100px;
	font: 20px/1 Ahem;
    }

    #log {
	position: absolute;
	top: 101px;
    }
</style>
<div id="log">
    <p id="description"></p>
    <div id="console"></div>
</div>
<div id="mc">xxx xxx xxx xxx xxx xxx xxx xxx xxx</div>
<script src="../../resources/js-test.js"></script>
<script>
    description("Test that hitting areas outside columns takes us to the right text content inside columns.");

    debug("Above first column:");
    shouldBe("document.caretRangeFromPoint(450,0).startOffset", "0");
    shouldBe("document.caretRangeFromPoint(350,0).startOffset", "0");
    shouldBe("document.caretRangeFromPoint(291,0).startOffset", "0");

    debug("Above second column:");
    shouldBe("document.caretRangeFromPoint(290,0).startOffset", "12");
    shouldBe("document.caretRangeFromPoint(250,0).startOffset", "12");
    shouldBe("document.caretRangeFromPoint(191,0).startOffset", "12");

    debug("Above third column:");
    shouldBe("document.caretRangeFromPoint(190,0).startOffset", "24");
    shouldBe("document.caretRangeFromPoint(150,0).startOffset", "24");
    shouldBe("document.caretRangeFromPoint(50,0).startOffset", "24");

    debug("Below first column:");
    shouldBe("document.caretRangeFromPoint(450,100).startOffset", "12");
    shouldBe("document.caretRangeFromPoint(350,100).startOffset", "12");
    shouldBe("document.caretRangeFromPoint(291,100).startOffset", "12");

    debug("Below second column:");
    shouldBe("document.caretRangeFromPoint(290,100).startOffset", "24");
    shouldBe("document.caretRangeFromPoint(250,100).startOffset", "24");
    shouldBe("document.caretRangeFromPoint(191,100).startOffset", "24");

    debug("To the right of the first column:");
    shouldBe("document.caretRangeFromPoint(400,10).startOffset", "0");
    shouldBe("document.caretRangeFromPoint(400,30).startOffset", "0");
    shouldBe("document.caretRangeFromPoint(400,50).startOffset", "4");
    shouldBe("document.caretRangeFromPoint(400,70).startOffset", "8");
    shouldBe("document.caretRangeFromPoint(400,90).startOffset", "12");

    debug("To the left of the third column:");
    shouldBe("document.caretRangeFromPoint(0,10).startOffset", "24");
    shouldBe("document.caretRangeFromPoint(0,30).startOffset", "27");
    shouldBe("document.caretRangeFromPoint(0,50).startOffset", "31");
    shouldBe("document.caretRangeFromPoint(0,70).startOffset", "35");

    debug("In the gap between the first and second columns:");
    shouldBe("document.caretRangeFromPoint(291,20).startOffset", "3");
    shouldBe("document.caretRangeFromPoint(291,40).startOffset", "7");
    shouldBe("document.caretRangeFromPoint(291,60).startOffset", "11");
    shouldBe("document.caretRangeFromPoint(291,69).startOffset", "11");
    shouldBe("document.caretRangeFromPoint(290,20).startOffset", "12");
    shouldBe("document.caretRangeFromPoint(290,40).startOffset", "16");
    shouldBe("document.caretRangeFromPoint(290,60).startOffset", "20");
    shouldBe("document.caretRangeFromPoint(290,69).startOffset", "20");

    debug("In the gap between the second and third columns:");
    shouldBe("document.caretRangeFromPoint(191,20).startOffset", "15");
    shouldBe("document.caretRangeFromPoint(191,40).startOffset", "19");
    shouldBe("document.caretRangeFromPoint(191,60).startOffset", "23");
    shouldBe("document.caretRangeFromPoint(191,69).startOffset", "23");
    shouldBe("document.caretRangeFromPoint(190,20).startOffset", "24");
    shouldBe("document.caretRangeFromPoint(190,40).startOffset", "28");
    shouldBe("document.caretRangeFromPoint(190,60).startOffset", "32");
    shouldBe("document.caretRangeFromPoint(190,69).startOffset", "32");
</script>