<!DOCTYPE html>
<html>
<head>
<style>
#console { margin-top: 40px; }
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body style="zoom: 1.1">
<div>
<canvas style="position: absolute; top: 0px; left: 0px; background-color: black;" width="32" height="32"></canvas>
<canvas style="position: absolute; top: 0px; left: 32px; background-color: black;" width="32" height="32"></canvas>
<canvas style="position: absolute; top: 0px; left: 64px; background-color: black;" width="32" height="32"></canvas>
<canvas style="position: absolute; top: 0px; left: 96px; background-color: black;" width="32" height="32"></canvas>
</div>
<script>
function r(n) {
return Math.round(n * 1000) / 1000;
}
var expected = 0;
var elements = document.getElementsByTagName('canvas');
for (var el, i = 0; el = elements[i]; i++) {
var rect = el.getBoundingClientRect();
if (Math.round(expected) == Math.round(rect.left))
testPassed('Left edge of block lines up with right edge of previous block.');
else
shouldBe('Math.round(rect.left)', String(Math.round(expected)));
expected += rect.width;
}
</script>
</body>
</html>
Codebase Browser
chromium