LayoutTests/compositing/layer-creation/no-compositing-for-preserve-3d.html - WebKit - Git at Google

 <!DOCTYPE html>

 <html>
 <head>
   <style>
     .box {
       position: relative;
       height: 100px;
       width: 100px;
       margin: 10px;
       left: 0;
       top: 0;
       background-color: silver;
     }

     .preserve3d {
       width: 300px;
       border: 1px solid black;
       padding: 20px;
       margin: 10px;
       -webkit-transform-style: preserve-3d;
     }
   </style>

   <script>
   if (window.testRunner)
     testRunner.dumpAsText();

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

   }
   window.addEventListener('load', dumpLayers, false)
   </script>

 </head>
 <body>

   <div class="preserve3d">
     This layer should not be composited.
     <div class="box"></div>
     </div>
   </div>

   <div class="preserve3d">
     This layer should not be composited.
     <div class="box" style="-webkit-transform: rotate(10deg)"></div>
     </div>
   </div>

   <div class="preserve3d">
     This layer should be composited.
     <div class="box" style="-webkit-transform: rotateY(10deg)"></div>
   </div>
 <pre id="layers">Layer tree goes here in DRT</pre>

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

	<html>
	<head>
	<style>
	.box {
	position: relative;
	height: 100px;
	width: 100px;
	margin: 10px;
	left: 0;
	top: 0;
	background-color: silver;
	}

	.preserve3d {
	width: 300px;
	border: 1px solid black;
	padding: 20px;
	margin: 10px;
	-webkit-transform-style: preserve-3d;
	}
	</style>

	<script>
	if (window.testRunner)
	testRunner.dumpAsText();

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

	}
	window.addEventListener('load', dumpLayers, false)
	</script>

	</head>
	<body>

	<div class="preserve3d">
	This layer should not be composited.
	<div class="box"></div>
	</div>
	</div>

	<div class="preserve3d">
	This layer should not be composited.
	<div class="box" style="-webkit-transform: rotate(10deg)"></div>
	</div>
	</div>

	<div class="preserve3d">
	This layer should be composited.
	<div class="box" style="-webkit-transform: rotateY(10deg)"></div>
	</div>
	<pre id="layers">Layer tree goes here in DRT</pre>

	</body>
	</html>