| <!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> |