| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../../resources/js-test.js"></script> |
| <style> |
| #test { |
| /* We do not use Ahem because its perfectly square glyph would mask rounding bugs in layout. */ |
| /* FIXME: Find a way to write this test so as to insulate it from font changes, but not mask |
| rounding bugs in layout. */; |
| font-family: Times; |
| font-size: 16px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="test" style="width: 180px;">This is a sentence that is long enough to span 2 lines.</div> |
| <pre id="console"></pre> |
| <script> |
| description("Tests that getClientRects(), getBoundingClientRect() return the same result regardless of whether text is selected or not."); |
| |
| let test = document.getElementById("test"); |
| let range = document.createRange(); |
| range.setStart(test.firstChild, "This is a sentence that is".length); |
| range.setEnd(test.firstChild, "This is a sentence that is long".length); |
| |
| function testBoundingRect() |
| { |
| shouldBeEqualToString('JSON.stringify(range.getBoundingClientRect())', '{"x":8,"y":8,"width":155,"height":36,"top":8,"right":163,"bottom":44,"left":8}'); |
| } |
| |
| function testClientRects() |
| { |
| shouldBe('range.getClientRects().length', '2'); |
| shouldBeEqualToString('JSON.stringify(range.getClientRects()[0])', '{"x":163,"y":8,"width":0,"height":18,"top":8,"right":163,"bottom":26,"left":163}'); |
| shouldBeEqualToString('JSON.stringify(range.getClientRects()[1])', '{"x":8,"y":26,"width":29,"height":18,"top":26,"right":37,"bottom":44,"left":8}'); |
| } |
| |
| debug("<br>Before selection:"); |
| testClientRects(); |
| testBoundingRect(); |
| |
| debug("<br>After selection:"); |
| window.getSelection().selectAllChildren(test); |
| testClientRects(); |
| testBoundingRect(); |
| |
| document.body.removeChild(test); |
| </script> |
| </body> |
| </html> |
