Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<link rel="author" title="Peng Zhou" href="mailto:zhoupeng.1996@bytedance.com">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
white-space: pre;
font-family: Ahem;
font-size: 10px;
line-height: 1;
width: 10ch;
}
</style>
<body>
<div contenteditable></div>
</body>
<script>
function getBoundingClientRect(node, offset) {
const range = document.createRange();
range.setStart(node, offset);
range.setEnd(node, offset);
const rect = range.getBoundingClientRect();
return rect;
}
test(function() {
const editable = document.querySelector('div[contenteditable]');
editable.innerHTML = '123456\n789012';
const rect0 = getBoundingClientRect(editable.firstChild, 0);
const rect6 = getBoundingClientRect(editable.firstChild, 6);
const rect7 = getBoundingClientRect(editable.firstChild, 7);
assert_equals(rect0.x, rect7.x);
assert_greater_than(rect6.x, rect7.x);
assert_equals(rect0.y, rect6.y);
assert_less_than(rect6.y, rect7.y);
}, 'Range.getBoundingClientRect() should return the first position of the next line when the collapsed range is a newline character');
</script>