| <body style="margin: 0"> |
| <div style="margin: 50px; background-color: lightblue; width: 800px; height: 200px; -webkit-column-width:185px; -webkit-column-gap:15px; -webkit-column-fill:auto; column-width:185px; column-gap:15px; column-fill:auto; font-family: Ahem; font-size: 50px; line-height: 1;"> |
| 123<div style="background-color: blue; height: 70px;"></div>abc<br>def<div style="background-color: blue; height: 60px;"></div>ghi<br>jkl<div style="background-color: blue; height: 110px;"></div>mno</div> |
| <pre id="console" style="display: none;"></pre> |
| <script> |
| function characterAtPoint(x, y) |
| { |
| var range = document.caretRangeFromPoint(x, y); |
| if (range.startContainer.nodeType !== Node.TEXT_NODE) |
| return null; |
| if (range.startOffset >= range.startContainer.length) |
| return null; |
| return range.startContainer.data[range.startOffset]; |
| } |
| |
| function log(message) |
| { |
| document.getElementById("console").appendChild(document.createTextNode(message + "\n")); |
| } |
| |
| function test(x, y, character) |
| { |
| var actualCharacter = characterAtPoint(x, y); |
| if (character === actualCharacter) |
| log ("Character at " + x + ", " + y + " is " + character + " as expected."); |
| else |
| log ("FAIL: Character at " + x + ", " + y + " is " + actualCharacter + ". Expected " + character + "."); |
| } |
| |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| test(150, 25, "1"); |
| test(350, 25, "d"); |
| test(550, 25, "j"); |
| test(750, 25, "m"); |
| |
| test(150, 275, "d"); |
| test(350, 275, "j"); |
| test(550, 275, "m"); |
| test(750, 275, null); |
| |
| test(150, 475, "d"); |
| test(350, 475, "j"); |
| test(550, 475, "m"); |
| test(750, 475, null); |
| |
| document.getElementById("console").style.display = "block"; |
| </script> |
