LayoutTests/compositing/tiling/huge-layer-with-layer-children-resize.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
   <head>
     <style>
     #container {
         width: 500px;
         height: 500px;
         border: 1px solid black;
         background-color: yellow;
         -webkit-transform:translateZ(0);
     }

     .box {
         position: absolute;
         left:50px;
         width: 200px;
         height: 200px;
         -webkit-transform:translateZ(0);
     }

     .at-the-top {
         top: 100px;
         background-color: red;
     }

     .at-the-bottom {
         top:200px;
         left: 275px;
         background-color: blue;
     }
     </style>
     <script>
         if (window.testRunner)
             testRunner.dumpAsText();

         var result = "";

         function testOnLoad()
         {
             // Small layer first
             if (window.testRunner)
                 result = "First (small layer):<br>" + window.internals.layerTreeAsText(document);

             // Huge layer second
             document.getElementById('container').style.height = "5000px";
             document.getElementById('blue-box').style.top = "4700px";
             if (window.testRunner)
                 result += "<br><br>Second (huge layer):<br>" + window.internals.layerTreeAsText(document);

             // Small layer third
             document.getElementById('container').style.height = "500px";
             document.getElementById('blue-box').style.top = "200px";
             if (window.testRunner) {
                 result += "<br><br>Third (small layer):<br>" + window.internals.layerTreeAsText(document);
                 document.getElementById('layers').innerHTML = result;
             }
         }

         window.addEventListener('load', testOnLoad, false);
     </script>
   </head>
   <body>
       <p>
         The yellow box should be 500 x 500 on startup. Then it should
         stretch to be 500 x 5000, then shrink back down to 500 x 500.
         This tests that we can resize to a huge layer and back again
         and still maintain integrity of the layer tree.
       </p>
         <div id="container">
           <div class="box at-the-top"></div>
           <div id="blue-box" class="box at-the-bottom"></div>
         </div>
         <pre id="layers">Layer tree appears here in DRT.</pre>
   </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#container {
	width: 500px;
	height: 500px;
	border: 1px solid black;
	background-color: yellow;
	-webkit-transform:translateZ(0);
	}

	.box {
	position: absolute;
	left:50px;
	width: 200px;
	height: 200px;
	-webkit-transform:translateZ(0);
	}

	.at-the-top {
	top: 100px;
	background-color: red;
	}

	.at-the-bottom {
	top:200px;
	left: 275px;
	background-color: blue;
	}
	</style>
	<script>
	if (window.testRunner)
	testRunner.dumpAsText();

	var result = "";

	function testOnLoad()
	{
	// Small layer first
	if (window.testRunner)
	result = "First (small layer):<br>" + window.internals.layerTreeAsText(document);

	// Huge layer second
	document.getElementById('container').style.height = "5000px";
	document.getElementById('blue-box').style.top = "4700px";
	if (window.testRunner)
	result += "<br><br>Second (huge layer):<br>" + window.internals.layerTreeAsText(document);

	// Small layer third
	document.getElementById('container').style.height = "500px";
	document.getElementById('blue-box').style.top = "200px";
	if (window.testRunner) {
	result += "<br><br>Third (small layer):<br>" + window.internals.layerTreeAsText(document);
	document.getElementById('layers').innerHTML = result;
	}
	}

	window.addEventListener('load', testOnLoad, false);
	</script>
	</head>
	<body>
	<p>
	The yellow box should be 500 x 500 on startup. Then it should
	stretch to be 500 x 5000, then shrink back down to 500 x 500.
	This tests that we can resize to a huge layer and back again
	and still maintain integrity of the layer tree.
	</p>
	<div id="container">
	<div class="box at-the-top"></div>
	<div id="blue-box" class="box at-the-bottom"></div>
	</div>
	<pre id="layers">Layer tree appears here in DRT.</pre>
	</body>
	</html>