node-webodf
Version:
WebODF - JavaScript Document Engine http://webodf.org/
40 lines (37 loc) • 1.47 kB
HTML
<html>
<head>
<title>Chrome Client Rect behaviours</title>
</head>
<body>
<div id="demo" style="margin-left: 13.591px">
A D B
</div>
This page is demonstrating two interesting differences in Chrome vs. Firefox:
<ol>
<li>Collapsed ranges in Chrome have a width of 1px, which shifts the left side of the rect</li>
<li>Individual client rectangles are truncated to the nearest pixel in Chrome, but the corresponding bounding client rect is not</li>
</ol>
<pre>
<script type="text/javascript">
var node = document.getElementById("demo").firstChild,
range = document.createRange(),
bIndex = node.length - 1;
function toString(rect) {
return "top: " + rect.top + ", left: " + rect.left + ", right: " + rect.right
+ ", height: " + rect.height + ", width: " + rect.width;
}
range.setStart(node, bIndex);
range.setEnd(node, bIndex);
document.writeln("Selection after 'B'");
document.writeln(" (BCR) " + toString(range.getBoundingClientRect()));
document.writeln("(client rect) " + toString(range.getClientRects()[0]));
range.setStart(node, bIndex - 1);
range.setEnd(node, bIndex);
document.writeln("Selection over 'B'");
document.writeln(" (BCR) " + toString(range.getBoundingClientRect()));
document.writeln("(client rect) " + toString(range.getClientRects()[0]));
</script>
</pre>
</body>
</html>