LayoutTests/compositing/tiling/huge-layer-add-remove-child.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
   <head>
     <style>
     #container {
         width: 500px;
         height: 5000px;
         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: 400px;
         background-color: red;
     }
     </style>
     <script>
         if (window.testRunner)
             testRunner.dumpAsText();

         var result = "";

         function testOnLoad()
         {
             // First with no kids
             if (window.testRunner)
                 result = "First (no children):<br>" + window.internals.layerTreeAsText(document);

             // Second add kid
             var box = document.createElement("div");
             box.className = "box at-the-top";
             document.getElementById('container').appendChild(box);
             if (window.testRunner)
                 result += "<br><br>Second (child added):<br>" + window.internals.layerTreeAsText(document);

             // Third remove kid
             var container = document.getElementById('container');
             container.removeChild(container.lastChild);
             if (window.testRunner) {
                 result += "<br><br>Third (child removed):<br>" + window.internals.layerTreeAsText(document);
                 document.getElementById('layers').innerHTML = result;
             }
         }

         window.addEventListener('load', testOnLoad, false);
     </script>
   </head>
   <body>
       <p>
         The yellow box should be large enough to scroll off the bottom.
         At the start there should be no child. After 100ms a red box is
         added and after 100ms more it should be removed. This tests that
         we can support very large compositing layers with dynamically added
         and removed child compositing layers.
       </p>
         <div id="container"></div>
         <pre id="layers">Layer tree appears here in DRT.</pre>
   </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#container {
	width: 500px;
	height: 5000px;
	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: 400px;
	background-color: red;
	}
	</style>
	<script>
	if (window.testRunner)
	testRunner.dumpAsText();

	var result = "";

	function testOnLoad()
	{
	// First with no kids
	if (window.testRunner)
	result = "First (no children):<br>" + window.internals.layerTreeAsText(document);

	// Second add kid
	var box = document.createElement("div");
	box.className = "box at-the-top";
	document.getElementById('container').appendChild(box);
	if (window.testRunner)
	result += "<br><br>Second (child added):<br>" + window.internals.layerTreeAsText(document);

	// Third remove kid
	var container = document.getElementById('container');
	container.removeChild(container.lastChild);
	if (window.testRunner) {
	result += "<br><br>Third (child removed):<br>" + window.internals.layerTreeAsText(document);
	document.getElementById('layers').innerHTML = result;
	}
	}

	window.addEventListener('load', testOnLoad, false);
	</script>
	</head>
	<body>
	<p>
	The yellow box should be large enough to scroll off the bottom.
	At the start there should be no child. After 100ms a red box is
	added and after 100ms more it should be removed. This tests that
	we can support very large compositing layers with dynamically added
	and removed child compositing layers.
	</p>
	<div id="container"></div>
	<pre id="layers">Layer tree appears here in DRT.</pre>
	</body>
	</html>