| <!DOCTYPE html> |
| <style> |
| #outer > div { margin: 0 25px; } |
| </style> |
| <div id="outer" style=" |
| outline: dashed lightblue; |
| width: 150px; |
| padding: 25px; |
| -webkit-writing-mode: horizontal-bt; |
| "> |
| <div id="before-before" style=" |
| background-color: purple; |
| height: 10px; |
| "></div> |
| <div id="before" style=" |
| background-color: silver; |
| height: 15px; |
| "></div> |
| <div id="middle" style=" |
| background-color: blue; |
| height: 100px; |
| "></div> |
| <div id="after" style=" |
| background-color: silver; |
| height: 15px; |
| "></div> |
| <div id="after-after" style=" |
| background-color: purple; |
| height: 10px; |
| "></div> |
| </div> |
| <table id="results"> |
| <thead> |
| <tr> |
| <th>y</th> |
| <th>x</th> |
| <th>element</th> |
| <th>range start container</th> |
| </tr> |
| </thead> |
| <tbody id="table-body"> |
| </tbody> |
| </table> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function addCell(row, text) |
| { |
| row.appendChild(document.createElement("td")).appendChild(document.createTextNode(text)); |
| } |
| |
| function test(x, y) |
| { |
| var row = document.getElementById("table-body").appendChild(document.createElement("tr")); |
| addCell(row, y); |
| addCell(row, x); |
| addCell(row, document.elementFromPoint(8 + x, 8 + y).id); |
| addCell(row, document.caretRangeFromPoint(8 + x, 8 + y).startContainer.id); |
| } |
| |
| test(25, 25); |
| test(100, 25); |
| test(25, 49); |
| test(100, 49); |
| test(25, 50); |
| test(100, 50); |
| test(25, 149); |
| test(100, 149); |
| test(25, 150); |
| test(100, 150); |
| test(25, 165); |
| test(100, 165); |
| </script> |
