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

    /* Need a wrapper to establish the writing mode, thanks to crbug.com/463462 */
    #wrapper {
	-webkit-writing-mode: vertical-lr;
        padding: 20px 100px;
        width: 400px;
	height: 350px;
    }

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

    #log {
	position: absolute;
	top: 400px;
    }
</style>
<div id="log">
    <p id="description"></p>
    <div id="console"></div>
</div>
<div id="wrapper">
    <div id="mc">xxx xxx xxx xxx xxx xxx xxx xxx xxx</div>
</div>
<script src="../../../resources/js-test.js"></script>
<script>
    if (window.internals)
        internals.settings.setEditingBehavior('win');

    description("Test that hitting areas outside columns takes us to the right text content inside columns.");

    debug("To the left of the first column:");
    shouldBe("document.caretRangeFromPoint(0,309).startOffset", "0");
    shouldBe("document.caretRangeFromPoint(0,270).startOffset", "2");
    shouldBe("document.caretRangeFromPoint(0,211).startOffset", "3");
    shouldBe("document.caretRangeFromPoint(0,210).startOffset", "3");

    debug("To the left of the second column:");
    shouldBe("document.caretRangeFromPoint(0,209).startOffset", "12");
    shouldBe("document.caretRangeFromPoint(0,170).startOffset", "14");
    shouldBe("document.caretRangeFromPoint(0,111).startOffset", "15");
    shouldBe("document.caretRangeFromPoint(0,110).startOffset", "15");

    debug("To the left of the third column:");
    shouldBe("document.caretRangeFromPoint(0,109).startOffset", "24");
    shouldBe("document.caretRangeFromPoint(0,70).startOffset", "26");
    shouldBe("document.caretRangeFromPoint(0,0).startOffset", "27");

    debug("To the right of the first column:");
    shouldBe("document.caretRangeFromPoint(400,309).startOffset", "8");
    shouldBe("document.caretRangeFromPoint(400,270).startOffset", "10");
    shouldBe("document.caretRangeFromPoint(400,211).startOffset", "11");
    shouldBe("document.caretRangeFromPoint(400,210).startOffset", "11");

    debug("To the right of the second column:");
    shouldBe("document.caretRangeFromPoint(400,209).startOffset", "20");
    shouldBe("document.caretRangeFromPoint(400,170).startOffset", "22");
    shouldBe("document.caretRangeFromPoint(400,111).startOffset", "23");
    shouldBe("document.caretRangeFromPoint(400,110).startOffset", "23");

    debug("To the right of the third column:");
    shouldBe("document.caretRangeFromPoint(400,109).startOffset", "32");
    shouldBe("document.caretRangeFromPoint(400,70).startOffset", "34");
    shouldBe("document.caretRangeFromPoint(400,11).startOffset", "35");

    debug("Below first column:");
    shouldBe("document.caretRangeFromPoint(90,350).startOffset", "0");
    shouldBe("document.caretRangeFromPoint(110,350).startOffset", "0");
    shouldBe("document.caretRangeFromPoint(130,350).startOffset", "4");
    shouldBe("document.caretRangeFromPoint(150,350).startOffset", "8");
    shouldBe("document.caretRangeFromPoint(170,350).startOffset", "8");

    debug("Above third column:");
    shouldBe("document.caretRangeFromPoint(90,0).startOffset", "27");
    shouldBe("document.caretRangeFromPoint(110,0).startOffset", "27");
    shouldBe("document.caretRangeFromPoint(130,0).startOffset", "31");
    shouldBe("document.caretRangeFromPoint(150,0).startOffset", "35");

    debug("In the gap between the first and second columns:");
    shouldBe("document.caretRangeFromPoint(100,211).startOffset", "3");
    shouldBe("document.caretRangeFromPoint(120,211).startOffset", "7");
    shouldBe("document.caretRangeFromPoint(140,211).startOffset", "11");
    shouldBe("document.caretRangeFromPoint(159,211).startOffset", "11");
    shouldBe("document.caretRangeFromPoint(100,210).startOffset", "3");
    shouldBe("document.caretRangeFromPoint(120,210).startOffset", "7");
    shouldBe("document.caretRangeFromPoint(140,210).startOffset", "11");
    shouldBe("document.caretRangeFromPoint(159,210).startOffset", "11");
    shouldBe("document.caretRangeFromPoint(100,209).startOffset", "12");
    shouldBe("document.caretRangeFromPoint(120,209).startOffset", "16");
    shouldBe("document.caretRangeFromPoint(140,209).startOffset", "20");
    shouldBe("document.caretRangeFromPoint(159,209).startOffset", "20");

    debug("In the gap between the second and third columns:");
    shouldBe("document.caretRangeFromPoint(100,111).startOffset", "15");
    shouldBe("document.caretRangeFromPoint(120,111).startOffset", "19");
    shouldBe("document.caretRangeFromPoint(140,111).startOffset", "23");
    shouldBe("document.caretRangeFromPoint(159,111).startOffset", "23");
    shouldBe("document.caretRangeFromPoint(100,110).startOffset", "15");
    shouldBe("document.caretRangeFromPoint(120,110).startOffset", "19");
    shouldBe("document.caretRangeFromPoint(140,110).startOffset", "23");
    shouldBe("document.caretRangeFromPoint(159,110).startOffset", "23");
    shouldBe("document.caretRangeFromPoint(100,109).startOffset", "24");
    shouldBe("document.caretRangeFromPoint(120,109).startOffset", "28");
    shouldBe("document.caretRangeFromPoint(140,109).startOffset", "32");
    shouldBe("document.caretRangeFromPoint(159,109).startOffset", "32");
</script>