LayoutTests/compositing/geometry/bounds-ignores-hidden-composited-descendant.html - WebKit - Git at Google

 <style>
   .composited {
     -webkit-transform: translateZ(0);
   }

   img {
     background-color: black;
     width: 50px;
     height: 50px;
   }

   .box {
       width: 100px;
       height: 100px;
       background-color: blue;
   }

   .inner {
       position: relative;
       visibility: visible;
   }

   #layers {
       opacity: 0; /* hide from pixel result */
   }
 </style>
 <script>
     if (window.testRunner)
         testRunner.dumpAsText();

     function dumpLayers()
     {
         if (window.testRunner) {
             document.getElementById('layers').innerText = window.testRunner.layerTreeAsText();
         }
     }
     window.addEventListener('load', dumpLayers, false);
 </script>
 <body>
     <div style="position: absolute; left: 0px; top: 0px; z-index: 1; " class="composited">
         <img style="position: absolute; left: 10px; top: 10px; z-index: 0;">
         <div style="position: absolute; left: 500px; top: 100px; z-index: 1; visibility: hidden;">
             stuff
             <div class="inner box"></div>
         </div>
     </div>

     <div style="position: absolute; left: 0px; top: 250px; z-index: 1; " class="composited">
         <img style="position: absolute; left: 10px; top: 10px; z-index: 0;">
         <div style="position: absolute; left: 500px; top: 100px; z-index: 1; visibility: hidden;">
             stuff
             <!-- Ideally this layer wouldn't affect the bounds of its composited ancestor. -->
             <div class="composited inner box"></div>
         </div>
     </div>

 <pre id="layers">Layer tree goes here in DRT</pre>
 </body>
	<style>
	.composited {
	-webkit-transform: translateZ(0);
	}

	img {
	background-color: black;
	width: 50px;
	height: 50px;
	}

	.box {
	width: 100px;
	height: 100px;
	background-color: blue;
	}

	.inner {
	position: relative;
	visibility: visible;
	}

	#layers {
	opacity: 0; /* hide from pixel result */
	}
	</style>
	<script>
	if (window.testRunner)
	testRunner.dumpAsText();

	function dumpLayers()
	{
	if (window.testRunner) {
	document.getElementById('layers').innerText = window.testRunner.layerTreeAsText();
	}
	}
	window.addEventListener('load', dumpLayers, false);
	</script>
	<body>
	<div style="position: absolute; left: 0px; top: 0px; z-index: 1; " class="composited">
	<img style="position: absolute; left: 10px; top: 10px; z-index: 0;">
	<div style="position: absolute; left: 500px; top: 100px; z-index: 1; visibility: hidden;">
	stuff
	<div class="inner box"></div>
	</div>
	</div>

	<div style="position: absolute; left: 0px; top: 250px; z-index: 1; " class="composited">
	<img style="position: absolute; left: 10px; top: 10px; z-index: 0;">
	<div style="position: absolute; left: 500px; top: 100px; z-index: 1; visibility: hidden;">
	stuff
	<!-- Ideally this layer wouldn't affect the bounds of its composited ancestor. -->
	<div class="composited inner box"></div>
	</div>
	</div>

	<pre id="layers">Layer tree goes here in DRT</pre>
	</body>