<!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>
