<!DOCTYPE html>
<style>
body {
margin:0;
}
/* Need a wrapper to establish the writing mode, thanks to crbug.com/463462 */
#wrapper {
-webkit-writing-mode: vertical-rl;
padding: 20px 100px;
width: 400px;
height: 350px;
background: green;
}
#mc {
-webkit-columns: 3;
-webkit-column-gap: 20px;
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 right of the first column:");
shouldBe("document.caretRangeFromPoint(550,10).startOffset", "0");
shouldBe("document.caretRangeFromPoint(550,70).startOffset", "2");
shouldBe("document.caretRangeFromPoint(550,109).startOffset", "3");
debug("To the right of the second column:");
shouldBe("document.caretRangeFromPoint(550,110).startOffset", "12");
shouldBe("document.caretRangeFromPoint(550,170).startOffset", "14");
shouldBe("document.caretRangeFromPoint(550,209).startOffset", "15");
debug("To the right of the third column:");
shouldBe("document.caretRangeFromPoint(550,210).startOffset", "24");
shouldBe("document.caretRangeFromPoint(550,270).startOffset", "26");
shouldBe("document.caretRangeFromPoint(550,309).startOffset", "27");
debug("To the left of the first column:");
shouldBe("document.caretRangeFromPoint(0,10).startOffset", "8");
shouldBe("document.caretRangeFromPoint(0,70).startOffset", "10");
shouldBe("document.caretRangeFromPoint(0,109).startOffset", "11");
debug("To the left of the second column:");
shouldBe("document.caretRangeFromPoint(0,110).startOffset", "20");
shouldBe("document.caretRangeFromPoint(0,170).startOffset", "22");
shouldBe("document.caretRangeFromPoint(0,209).startOffset", "23");
debug("To the left of the third column:");
shouldBe("document.caretRangeFromPoint(0,210).startOffset", "32");
shouldBe("document.caretRangeFromPoint(0,270).startOffset", "34");
shouldBe("document.caretRangeFromPoint(0,309).startOffset", "35");
debug("Above first column:");
shouldBe("document.caretRangeFromPoint(550,0).startOffset", "0");
shouldBe("document.caretRangeFromPoint(490,0).startOffset", "0");
shouldBe("document.caretRangeFromPoint(470,0).startOffset", "4");
shouldBe("document.caretRangeFromPoint(450,0).startOffset", "8");
debug("Below third column:");
shouldBe("document.caretRangeFromPoint(490,350).startOffset", "27");
shouldBe("document.caretRangeFromPoint(470,350).startOffset", "31");
shouldBe("document.caretRangeFromPoint(450,350).startOffset", "35");
debug("In the gap between the first and second columns:");
shouldBe("document.caretRangeFromPoint(499,109).startOffset", "3");
shouldBe("document.caretRangeFromPoint(479,109).startOffset", "7");
shouldBe("document.caretRangeFromPoint(459,109).startOffset", "11");
shouldBe("document.caretRangeFromPoint(440,109).startOffset", "11");
shouldBe("document.caretRangeFromPoint(499,110).startOffset", "12");
shouldBe("document.caretRangeFromPoint(479,110).startOffset", "16");
shouldBe("document.caretRangeFromPoint(459,110).startOffset", "20");
shouldBe("document.caretRangeFromPoint(440,110).startOffset", "20");
debug("In the gap between the second and third columns:");
shouldBe("document.caretRangeFromPoint(499,209).startOffset", "15");
shouldBe("document.caretRangeFromPoint(479,209).startOffset", "19");
shouldBe("document.caretRangeFromPoint(459,209).startOffset", "23");
shouldBe("document.caretRangeFromPoint(440,209).startOffset", "23");
shouldBe("document.caretRangeFromPoint(499,210).startOffset", "24");
shouldBe("document.caretRangeFromPoint(479,210).startOffset", "28");
shouldBe("document.caretRangeFromPoint(459,210).startOffset", "32");
shouldBe("document.caretRangeFromPoint(440,210).startOffset", "32");
</script>
Codebase Browser
chromium