| <!DOCTYPE html> |
| <script src="../../../resources/js-test.js"></script> |
| <style> |
| .box { |
| line-height: 30px; |
| font-family: monospace; |
| font-size: 20px; |
| } |
| |
| .horizontal { |
| width: 400px; |
| } |
| |
| .vertical { |
| height: 400px; |
| -webkit-writing-mode: vertical-rl; |
| } |
| |
| #console { |
| position:absolute; |
| left: 500px; |
| } |
| </style> |
| |
| <div id="console"></div> |
| <div class="box horizontal" id="test-horizontal">ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ</div> |
| <div class="box vertical" id="test-vertical">ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ</div> |
| |
| <script> |
| debug("Test horizontal"); |
| var range = document.createRange(); |
| var box = document.getElementById('test-horizontal'); |
| range.setStart(box.firstChild, 20); |
| range.setEnd(box.firstChild, 21); |
| var rects = range.getClientRects(); |
| shouldBe("1", "rects.length"); |
| shouldBeGreaterThanOrEqual("box.offsetWidth / 26", "rects[0].width"); |
| shouldBeGreaterThanOrEqual("box.offsetHeight / 2", "rects[0].height"); |
| |
| debug("Test vertical"); |
| box = document.getElementById('test-vertical'); |
| range.setStart(box.firstChild, 20); |
| range.setEnd(box.firstChild, 21); |
| rects = range.getClientRects(); |
| shouldBe("1", "rects.length"); |
| shouldBeGreaterThanOrEqual("box.offsetWidth / 2", "rects[0].width"); |
| shouldBeGreaterThanOrEqual("box.offsetHeight / 26", "rects[0].height"); |
| </script> |
