<!DOCTYPE html>
<html>
<head>
<title>Tests getBoundingClientRect for ranges spanning multiple elements</title>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
</head>
<style>
p { visibility: hidden; }
p > span { text-decoration: underline; }
</style>
<body>
<p id="test">Test that getBoundingClientRect <span>returns the correct
results for ranges spanning multiple</span> elements.</p>
<p id="reference">Test that getBoundingClientRect <span>returns</span>
the correct results for ranges spanning multiple elements.</p>
<script>
test(function() {
var element = document.getElementById('test');
var span = element.getElementsByTagName('span')[0];
var range = document.createRange();
range.setStart(element.firstChild, 10);
range.setEnd(element.firstElementChild.firstChild, 7);
element = document.getElementById('reference');
var reference = document.createRange();
reference.setStart(element.firstChild, 10);
reference.setEnd(element.firstElementChild.firstChild, 7);
assert_equals(
Math.round(range.getBoundingClientRect().width),
Math.round(reference.getBoundingClientRect().width),
'Width of range should match reference range.');
assert_less_than(
Math.round(range.getBoundingClientRect().width),
Math.round(span.getBoundingClientRect().width),
'Width of range should be less than inner span.');
}, 'Check reported width of range.');
</script>
</body>
</html>