getClientRects-character.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/fast/dom/Range/getClientRects-character.html
