LayoutTests/compositing/hidpi-composited-container-and-graphics-layer-gap-changes.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <title>This tests when the gap between the graphics layer and its associated renderer changes dynamically.</title>
 <style>
 div {
   transform: translateZ(0);
   width: 20px;
   height: 20px;
   background-color: green;
   position: absolute;
 }

 .boxShadow {
   background-color: yellow;
 }
 </style>
 <script>
   if (window.testRunner)
     testRunner.waitUntilDone();

   function runTest() {
   	setTimeout(function() {
   	  var elements = document.getElementsByClassName("boxShadow")
   	  for (var i = 0; i < elements.length; ++i)
         elements[i].style.boxShadow = "0px 0px 10px transparent";
       if (window.testRunner)
         testRunner.notifyDone();
       }, 0);
   }
 </script>
 </head>
 <body onload="runTest()">
 <p id="container"></p>
 <script>
   var subpixel = 0;
   var container = document.getElementById("container");
   for (i = 0; i < 20; ++i) {
     for (j = 0; j < 20; ++j) {
       var outer = document.createElement("div");
       outer.style.top = 25 * i + subpixel + "px";
       outer.style.left = 25 * j + subpixel + "px";
       outer.className = "boxShadow";
       outer.appendChild(document.createElement("div"));
       container.appendChild(outer);
       subpixel += 0.1;
     }
   }
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>This tests when the gap between the graphics layer and its associated renderer changes dynamically.</title>
	<style>
	div {
	transform: translateZ(0);
	width: 20px;
	height: 20px;
	background-color: green;
	position: absolute;
	}

	.boxShadow {
	background-color: yellow;
	}
	</style>
	<script>
	if (window.testRunner)
	testRunner.waitUntilDone();

	function runTest() {
	setTimeout(function() {
	var elements = document.getElementsByClassName("boxShadow")
	for (var i = 0; i < elements.length; ++i)
	elements[i].style.boxShadow = "0px 0px 10px transparent";
	if (window.testRunner)
	testRunner.notifyDone();
	}, 0);
	}
	</script>
	</head>
	<body onload="runTest()">
	<p id="container"></p>
	<script>
	var subpixel = 0;
	var container = document.getElementById("container");
	for (i = 0; i < 20; ++i) {
	for (j = 0; j < 20; ++j) {
	var outer = document.createElement("div");
	outer.style.top = 25 * i + subpixel + "px";
	outer.style.left = 25 * j + subpixel + "px";
	outer.className = "boxShadow";
	outer.appendChild(document.createElement("div"));
	container.appendChild(outer);
	subpixel += 0.1;
	}
	}
	</script>
	</body>
	</html>