LayoutTests/fast/sub-pixel/compositing-layers-on-subpixel-position.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <title>This tests that we properly position render layers when composition is introduced.</title>
 <style>
   div {
     background-color: black;
     position: absolute;
   }
   .parent {
     background-color: red;
     -webkit-transform: translateZ(0);
   }
 </style>
 </head>
 <body>
 <p id="container"></p>
 <script>
   var childPos = -2;
   function createGrid(topPos, leftPos) {
     var container = document.getElementById("container");
     localTopPos = topPos;
     localLeftPos = leftPos;
     for (var i = 0; i < 10; ++i, localTopPos = localTopPos + 7) {
       localLeftPos = leftPos;
       for (var j = 0; j < 10; ++j, localLeftPos = localLeftPos + 7, childPos = childPos < 2 ? childPos + 0.1 : -2) {
         var outer = document.createElement("div");
         outer.className = "parent";
         outer.style.top = localTopPos + "px";
         outer.style.left = localLeftPos + "px";
         outer.style.width = "4px";
         outer.style.height = "4px";

         var inner = document.createElement("div");
         inner.style.top = childPos + "px";
         inner.style.left = childPos + "px";
         inner.style.width = "2px";
         inner.style.height = "2px";

         outer.appendChild(inner);
         container.appendChild(outer);
       }
     }
   }

   for (var i = 0; i < 10; ++i)
     createGrid(i * 0.1, i * 70.1);
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>This tests that we properly position render layers when composition is introduced.</title>
	<style>
	div {
	background-color: black;
	position: absolute;
	}
	.parent {
	background-color: red;
	-webkit-transform: translateZ(0);
	}
	</style>
	</head>
	<body>
	<p id="container"></p>
	<script>
	var childPos = -2;
	function createGrid(topPos, leftPos) {
	var container = document.getElementById("container");
	localTopPos = topPos;
	localLeftPos = leftPos;
	for (var i = 0; i < 10; ++i, localTopPos = localTopPos + 7) {
	localLeftPos = leftPos;
	for (var j = 0; j < 10; ++j, localLeftPos = localLeftPos + 7, childPos = childPos < 2 ? childPos + 0.1 : -2) {
	var outer = document.createElement("div");
	outer.className = "parent";
	outer.style.top = localTopPos + "px";
	outer.style.left = localLeftPos + "px";
	outer.style.width = "4px";
	outer.style.height = "4px";

	var inner = document.createElement("div");
	inner.style.top = childPos + "px";
	inner.style.left = childPos + "px";
	inner.style.width = "2px";
	inner.style.height = "2px";

	outer.appendChild(inner);
	container.appendChild(outer);
	}
	}
	}

	for (var i = 0; i < 10; ++i)
	createGrid(i * 0.1, i * 70.1);
	</script>

	</body>
	</html>