| <div id="test-1" style="width: 200px; outline: dashed lightblue;"> |
| <div style="height: 10px; background-color: silver;"></div> |
| <div style="width: 200px; height: 10px; background-color: silver; -webkit-writing-mode: vertical-lr;"></div> |
| <div class="target" style="margin-top: 40px; height: 20px; background-color: silver;"></div> |
| </div> |
| <br> |
| <div id="test-2" style="height: 200px; outline: dashed lightblue; -webkit-writing-mode: vertical-lr;"> |
| <div style="width: 10px; background-color: silver;"></div> |
| <div class="target" style="margin-left: 40px; width: 10px; background-color: silver;"></div> |
| <div style="width: 20px; background-color: silver;"></div> |
| </div> |
| |
| <pre id="console"></pre> |
| |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function log(message) |
| { |
| document.getElementById("console").appendChild(document.createTextNode(message + "\n")); |
| } |
| |
| function test(index, x, y) |
| { |
| var container = document.getElementById("test-" + index); |
| var range = document.caretRangeFromPoint(container.offsetLeft + x, container.offsetTop + y); |
| log("Test " + index + " result: " |
| + (range.startContainer.className === "target" ? "PASS" : "FAIL")); |
| } |
| |
| test(1, 20, 50); |
| test(2, 20, 180); |
| </script> |