LayoutTests/compositing/visibility/layer-visible-content.html - WebKit - Git at Google

 <html>
 <head>
   <style type="text/css">
     body {
         margin: 0;
         overflow: hidden;
     }

     .container {
         visibility: hidden;
         position: absolute;
         width: 200px;
         height: 200px;
         overflow: hidden;
         z-index: 0;
     }

     .box {
         height: 100px;
         width: 100px;
     }

     .indicator {
         position: absolute;
         top: 0;
         left: 0;
         background-color:red;
     }

     .visible-box {
         background-color:green;
     }
     .composited {
         -webkit-transform:translateZ(0);
         height: 10px;
         width: 10px;
     }
     pre {
         opacity: 0; /* hide in pixel result */
         height: 16px; /* avoid platform-dependent height difference of hidden text layer-tree */
     }
   </style>
   <script>
     if (window.testRunner)
         testRunner.dumpAsText(true);

     function dumpLayers()
     {
         if (window.testRunner)
             document.getElementById('layer-tree').innerText = testRunner.layerTreeAsText();
     }
     window.addEventListener('load', dumpLayers, false);
   </script>
 </head>

 <body>
   <!-- You should see a green box in the top left, and no red. -->
   <div class="indicator box"></div>

   <div class="container">
     <div style="position: relative;">
       <div style="visibility:visible;">
         <div class="visible-box box">
           <div class="composited box"></div>
         </div>
       </div>
     </div>
   </div>
 <pre id="layer-tree">Layer tree goes here in DRT</pre>
 </body>
 </html>
	<html>
	<head>
	<style type="text/css">
	body {
	margin: 0;
	overflow: hidden;
	}

	.container {
	visibility: hidden;
	position: absolute;
	width: 200px;
	height: 200px;
	overflow: hidden;
	z-index: 0;
	}

	.box {
	height: 100px;
	width: 100px;
	}

	.indicator {
	position: absolute;
	top: 0;
	left: 0;
	background-color:red;
	}

	.visible-box {
	background-color:green;
	}
	.composited {
	-webkit-transform:translateZ(0);
	height: 10px;
	width: 10px;
	}
	pre {
	opacity: 0; /* hide in pixel result */
	height: 16px; /* avoid platform-dependent height difference of hidden text layer-tree */
	}
	</style>
	<script>
	if (window.testRunner)
	testRunner.dumpAsText(true);

	function dumpLayers()
	{
	if (window.testRunner)
	document.getElementById('layer-tree').innerText = testRunner.layerTreeAsText();
	}
	window.addEventListener('load', dumpLayers, false);
	</script>
	</head>

	<body>
	<!-- You should see a green box in the top left, and no red. -->
	<div class="indicator box"></div>

	<div class="container">
	<div style="position: relative;">
	<div style="visibility:visible;">
	<div class="visible-box box">
	<div class="composited box"></div>
	</div>
	</div>
	</div>
	</div>
	<pre id="layer-tree">Layer tree goes here in DRT</pre>
	</body>
	</html>