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

 <!DOCTYPE html>

 <html>
   <style>
     body {
       overflow: hidden;
     }
     .container {
       width: 500px;
       height: 300px;
       -webkit-column-count: 2;
       border: 1px solid black;
     }

     .block {
       display: inline-block;
       width: 200px;
       height: 50px;
       margin: 10px;
       background-color: silver;
       outline: 5px solid transparent; /* increases compositing layer bounds to test bounds math */
     }

     .composited {
       -webkit-transform: translateZ(0);
       background-color: blue;
     }

     .box {
       height: 50px;
       width: 50px;
       background-color: green;
     }

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

     function dumpLayers()
     {
       if (window.testRunner)
         document.getElementById('layers').innerText = testRunner.layerTreeAsText();
     }

     window.addEventListener('load', dumpLayers, false);
   </script>
 <head>
 </head>
 <body>

   <div class="container">
     <div class="block"></div>
     <div class="block"></div>
     <div class="composited block">
       <div class="composited box"></div>
     </div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="composited block">
       <div class="composited box"></div>
     </div>
     <div class="block"></div>
     <div class="block"></div>
   </div>

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

	<html>
	<style>
	body {
	overflow: hidden;
	}
	.container {
	width: 500px;
	height: 300px;
	-webkit-column-count: 2;
	border: 1px solid black;
	}

	.block {
	display: inline-block;
	width: 200px;
	height: 50px;
	margin: 10px;
	background-color: silver;
	outline: 5px solid transparent; /* increases compositing layer bounds to test bounds math */
	}

	.composited {
	-webkit-transform: translateZ(0);
	background-color: blue;
	}

	.box {
	height: 50px;
	width: 50px;
	background-color: green;
	}

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

	function dumpLayers()
	{
	if (window.testRunner)
	document.getElementById('layers').innerText = testRunner.layerTreeAsText();
	}

	window.addEventListener('load', dumpLayers, false);
	</script>
	<head>
	</head>
	<body>

	<div class="container">
	<div class="block"></div>
	<div class="block"></div>
	<div class="composited block">
	<div class="composited box"></div>
	</div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="composited block">
	<div class="composited box"></div>
	</div>
	<div class="block"></div>
	<div class="block"></div>
	</div>

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