LayoutTests/compositing/ancestor-compositing-layer-is-on-subpixel-position.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <title>This tests that child content snapped to device pixel (borders are clear) when ancestor compositing layer has fractional bounds.</title>
 <style>
 	.overlap {
 		-webkit-transform: translateZ(0);
 		width: 500px;
 		height: 40px;
 		margin-bottom: -5px;
 	}

 	.container {
     	position: absolute;
     	top: 10px;
 		width: 40px;
 		height: 40px;
 		z-index: 0;
 	}

 	.push_horizontal {
 		position: absolute;
   		left: -1.4px;
   		width: 5px;
   		height: 5px;
 	}

 	.push_vertical {
 		position: absolute;
   		top: -1.4px;
   		width: 5px;
   		height: 5px;
 	}

 	.fuzzy {
 		border: 1px solid blue;
 		width: 10px;
 		height: 10px;
 		-webkit-transform: translateZ(0);
 	}
 </style>
 </head>
 <body>
     <div class=overlap></div>
 <script>
 	var delta = -1;
 	for (i = 0; i < 11; ++i) {
   		var container = document.createElement("div");
   		container.className = "container";
   		container.style.left = 45 * i + "px";
   		document.body.appendChild(container);

   		var pushHorizontal = document.createElement("div");
   		pushHorizontal.className = "push_horizontal";
   		pushHorizontal.style.left = delta + "px";
   		pushHorizontal.style.top = "0px";
   		container.appendChild(pushHorizontal);

   		var pushVertical = document.createElement("div");
   		pushVertical.className = "push_vertical";
   		pushVertical.style.left = "0px";
   		pushVertical.style.top = delta + "px";
   		container.appendChild(pushVertical);

   		var fuzzy = document.createElement("div");
   		fuzzy.className = "fuzzy";
   		container.appendChild(fuzzy);
 	  	delta -= 0.1;
 	}
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>This tests that child content snapped to device pixel (borders are clear) when ancestor compositing layer has fractional bounds.</title>
	<style>
	.overlap {
	-webkit-transform: translateZ(0);
	width: 500px;
	height: 40px;
	margin-bottom: -5px;
	}

	.container {
	position: absolute;
	top: 10px;
	width: 40px;
	height: 40px;
	z-index: 0;
	}

	.push_horizontal {
	position: absolute;
	left: -1.4px;
	width: 5px;
	height: 5px;
	}

	.push_vertical {
	position: absolute;
	top: -1.4px;
	width: 5px;
	height: 5px;
	}

	.fuzzy {
	border: 1px solid blue;
	width: 10px;
	height: 10px;
	-webkit-transform: translateZ(0);
	}
	</style>
	</head>
	<body>
	<div class=overlap></div>
	<script>
	var delta = -1;
	for (i = 0; i < 11; ++i) {
	var container = document.createElement("div");
	container.className = "container";
	container.style.left = 45 * i + "px";
	document.body.appendChild(container);

	var pushHorizontal = document.createElement("div");
	pushHorizontal.className = "push_horizontal";
	pushHorizontal.style.left = delta + "px";
	pushHorizontal.style.top = "0px";
	container.appendChild(pushHorizontal);

	var pushVertical = document.createElement("div");
	pushVertical.className = "push_vertical";
	pushVertical.style.left = "0px";
	pushVertical.style.top = delta + "px";
	container.appendChild(pushVertical);

	var fuzzy = document.createElement("div");
	fuzzy.className = "fuzzy";
	container.appendChild(fuzzy);
	delta -= 0.1;
	}
	</script>
	</body>
	</html>