LayoutTests/fast/sub-pixel/layout-boxes-with-zoom.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
     <title>layout zoom test</title>
     <style>
         #test {
             width: 500px;
             height: 1500px;
             background: skyblue;
         }
         #test > div {
             background: navy;
             height: 15px;
         }
     </style>
 </head>
 <body>
     <div id="test"></div>
     <div id="console">
         The box above should be navy blue with no banding effects.<br>
     </div>
 </body>
 <script>
     var testElement = document.getElementById('test');
     var consoleElement = document.getElementById('console');

     function init()
     {
         testElement.innerHTML = '';
         for (var i = 0; i < 100; i++)
             testElement.appendChild(document.createElement('div'));
     }

     function test(zoom)
     {
         testElement.style.zoom = zoom + '%';

         var lastElementBottom = testElement.lastChild.getBoundingClientRect().bottom;
         var containerBottom = testElement.getBoundingClientRect().bottom;

         var tolerance = Math.ceil(1 / (zoom / 100));
         if (Math.abs(lastElementBottom - containerBottom) <= tolerance)
             log('PASS: With zoom of ' + zoom + '% bottom edge of last child lines up with bottom edge of container.');
         else
             log('FAIL: With zoom of ' + zoom + '% bottom edge of last child at ' + lastElementBottom + ', container at ' + containerBottom + '.');
     }

     function log(str)
     {
         consoleElement.appendChild(document.createTextNode(str));
         consoleElement.appendChild(document.createElement('br'));
     }

     init();
     test(100);
     test(110);
     test(125);
     test(133);
     test(150);
     test(166);
     test(175);
     test(200);
     test(250);
     test(300);
     test(400);
     test(500);
     test(750);
     test(1000);
     test(90);
     test(80);
     test(75);
     test(66);
     test(50);
     test(33);
     test(25);
     test(10);
     test(5);
 </script>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>layout zoom test</title>
	<style>
	#test {
	width: 500px;
	height: 1500px;
	background: skyblue;
	}
	#test > div {
	background: navy;
	height: 15px;
	}
	</style>
	</head>
	<body>
	<div id="test"></div>
	<div id="console">
	The box above should be navy blue with no banding effects.<br>
	</div>
	</body>
	<script>
	var testElement = document.getElementById('test');
	var consoleElement = document.getElementById('console');

	function init()
	{
	testElement.innerHTML = '';
	for (var i = 0; i < 100; i++)
	testElement.appendChild(document.createElement('div'));
	}

	function test(zoom)
	{
	testElement.style.zoom = zoom + '%';

	var lastElementBottom = testElement.lastChild.getBoundingClientRect().bottom;
	var containerBottom = testElement.getBoundingClientRect().bottom;

	var tolerance = Math.ceil(1 / (zoom / 100));
	if (Math.abs(lastElementBottom - containerBottom) <= tolerance)
	log('PASS: With zoom of ' + zoom + '% bottom edge of last child lines up with bottom edge of container.');
	else
	log('FAIL: With zoom of ' + zoom + '% bottom edge of last child at ' + lastElementBottom + ', container at ' + containerBottom + '.');
	}

	function log(str)
	{
	consoleElement.appendChild(document.createTextNode(str));
	consoleElement.appendChild(document.createElement('br'));
	}

	init();
	test(100);
	test(110);
	test(125);
	test(133);
	test(150);
	test(166);
	test(175);
	test(200);
	test(250);
	test(300);
	test(400);
	test(500);
	test(750);
	test(1000);
	test(90);
	test(80);
	test(75);
	test(66);
	test(50);
	test(33);
	test(25);
	test(10);
	test(5);
	</script>
	</html>