LayoutTests/compositing/columns/composited-nested-columns.html - WebKit - Git at Google

 <!DOCTYPE html>

 <html>
 <head>
     <style>
         .columns {
             -webkit-column-width: 300px;
         }

         .columns > .columns {
             -webkit-column-width: 150px;
             border: 1px solid black;
         }
         .spacer {
           height: 250px;
           width: 100%;
           margin: 10px;
           background-color: silver;
         }
         .columns > .columns > .spacer {
             height: 150px;
         }

         .box {
           height: 100px;
           width: 100px;
           margin: 10px;
           background-color: blue;
         }
         .composited {
           -webkit-transform: translateZ(0);
         }
     </style>
     <script>
         if (window.testRunner)
           testRunner.dumpAsText();

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

 <div class="composited columns">
     <div class="spacer"></div>
     <div class="spacer"></div>
     <div class="columns">
         <div class="spacer"></div>
         <div class="spacer"></div>
         <div class="spacer"></div>
         <div class="composited box"></div>
     </div>
 </div>
 <pre id="layers">Layer tree goes here in DRT</pre>

 </body>
 </html>
	<!DOCTYPE html>

	<html>
	<head>
	<style>
	.columns {
	-webkit-column-width: 300px;
	}

	.columns > .columns {
	-webkit-column-width: 150px;
	border: 1px solid black;
	}
	.spacer {
	height: 250px;
	width: 100%;
	margin: 10px;
	background-color: silver;
	}
	.columns > .columns > .spacer {
	height: 150px;
	}

	.box {
	height: 100px;
	width: 100px;
	margin: 10px;
	background-color: blue;
	}
	.composited {
	-webkit-transform: translateZ(0);
	}
	</style>
	<script>
	if (window.testRunner)
	testRunner.dumpAsText();

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

	<div class="composited columns">
	<div class="spacer"></div>
	<div class="spacer"></div>
	<div class="columns">
	<div class="spacer"></div>
	<div class="spacer"></div>
	<div class="spacer"></div>
	<div class="composited box"></div>
	</div>
	</div>
	<pre id="layers">Layer tree goes here in DRT</pre>

	</body>
	</html>