LayoutTests/compositing/geometry/layer-due-to-layer-children-switch.html - WebKit - Git at Google

 <!DOCTYPE html>

 <html>
 <head>
   <style type="text/css" media="screen">
     body {
       position: relative;
     }
     .parent {
       position: relative;
       width: 200px;
       height: 150px;
       padding: 20px;
       border: 1px solid black;
       -webkit-transform: translate(0px, 0px);
     }

     .child {
       position: relative;
       left: 100px;
       width: 250px;
       height: 100px;
       background-color: green;
     }

   </style>
   <script type="text/javascript" charset="utf-8">
     if (window.testRunner) {
         testRunner.dumpAsText();
         testRunner.waitUntilDone();
     }

     var text = "";
     function showTree(which)
     {
         setTimeout(function() {
             if (window.testRunner) {
                 text += "\n" + which + " dump layer tree:\n";
                 text += window.internals.layerTreeAsText(document);
                 document.getElementById('layers').innerText = text;
             }
         }, 0);
     }

     function doTest()
     {
         if (window.testRunner)
             //document.getElementById('layers').innerText = "";
         showTree("First");

         //Put child in compositing mode
         setTimeout(function() {
             document.getElementById("child").style.webkitTransform = "perspective(600) translate3D(-50px, 10px, 100px) rotateY(45deg)";
             showTree("Second");

             // Take it back out of compositing mode
             setTimeout(function() {
                 document.getElementById("child").style.webkitTransform = "";
                 showTree("Third");

                 setTimeout(function() {
                     testRunner.notifyDone();
                 }, 0);
             }, 100);
         }, 100);
     }

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

 <body>

   <!-- Normally we skip making a compositing layer on a parent, even if its children are composited -->
   <!-- But if the parent has a 2D transform it should get a compositing layer -->
   <!-- Should see a green box in perspective. Layer tree should show nested layers-->
   <div id="parent" class="parent">
       This content is in the parent
       <div id="child" class="child">
           Box should switch between perspective and flat
       </div>
   </div>

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

	<html>
	<head>
	<style type="text/css" media="screen">
	body {
	position: relative;
	}
	.parent {
	position: relative;
	width: 200px;
	height: 150px;
	padding: 20px;
	border: 1px solid black;
	-webkit-transform: translate(0px, 0px);
	}

	.child {
	position: relative;
	left: 100px;
	width: 250px;
	height: 100px;
	background-color: green;
	}

	</style>
	<script type="text/javascript" charset="utf-8">
	if (window.testRunner) {
	testRunner.dumpAsText();
	testRunner.waitUntilDone();
	}

	var text = "";
	function showTree(which)
	{
	setTimeout(function() {
	if (window.testRunner) {
	text += "\n" + which + " dump layer tree:\n";
	text += window.internals.layerTreeAsText(document);
	document.getElementById('layers').innerText = text;
	}
	}, 0);
	}

	function doTest()
	{
	if (window.testRunner)
	//document.getElementById('layers').innerText = "";
	showTree("First");

	//Put child in compositing mode
	setTimeout(function() {
	document.getElementById("child").style.webkitTransform = "perspective(600) translate3D(-50px, 10px, 100px) rotateY(45deg)";
	showTree("Second");

	// Take it back out of compositing mode
	setTimeout(function() {
	document.getElementById("child").style.webkitTransform = "";
	showTree("Third");

	setTimeout(function() {
	testRunner.notifyDone();
	}, 0);
	}, 100);
	}, 100);
	}

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

	<body>

	<!-- Normally we skip making a compositing layer on a parent, even if its children are composited -->
	<!-- But if the parent has a 2D transform it should get a compositing layer -->
	<!-- Should see a green box in perspective. Layer tree should show nested layers-->
	<div id="parent" class="parent">
	This content is in the parent
	<div id="child" class="child">
	Box should switch between perspective and flat
	</div>
	</div>

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