node-webodf
Version:
WebODF - JavaScript Document Engine http://webodf.org/
40 lines (36 loc) • 1.5 kB
HTML
<html>
<head>
<title></title>
</head>
<body>
<div id="zoomed" style="position: absolute">
<div id="container" style="position: absolute; top: 10px; left: 20px; width: 200px; height: 20px; background-color: red">
</div>
</div>
<pre style="position: absolute; top: 50px">
<script>
var zoomed = document.getElementById("zoomed"),
container = document.getElementById("container"),
range = document.createRange();
range.selectNode(container);
function toString(rect) {
return "top: " + rect.top + ", left: " + rect.left + ", height: " + rect.height;
}
document.writeln("Before transform");
document.writeln("================");
document.writeln("container.getBoundingClientRect: " + toString(container.getBoundingClientRect()));
document.writeln("range.getBoundingClientRect: " + toString(range.getBoundingClientRect()));
zoomed.style["transform"] = "scale(1.5)";
zoomed.style["transform-origin"] = "left top 0px";
zoomed.style["-webkit-transform"] = "scale(1.5)";
zoomed.style["-webkit-transform-origin"] = "50% 0%";
document.writeln("");
document.writeln("After transform");
document.writeln("================");
document.writeln("container.getBoundingClientRect: " + toString(container.getBoundingClientRect()));
document.writeln("range.getBoundingClientRect: " + toString(range.getBoundingClientRect()));
</script>
</pre>
</body>
</html>