<!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>