LayoutTests/fast/sub-pixel/tiled-canvas-elements.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
     <head>
         <style>
             #console { margin-top: 40px; }
         </style>
         <script src="../../resources/js-test-pre.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>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#console { margin-top: 40px; }
	</style>
	<script src="../../resources/js-test-pre.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>