LayoutTests/compositing/layer-creation/overlap-animation.html - WebKit - Git at Google

 <!DOCTYPE html>

 <html>
 <head>
   <style>
     .container {
       height: 240px;
       width: 120px;
       overflow: hidden;
       position: relative;
       z-index: 0; /* create stacking context */
       border: 1px solid black;
     }

     .box {
       position: relative;
       width: 100px;
       height: 100px;
       margin: 10px;
       background-color: blue;
     }

     .animating {
       -webkit-animation: spin 2s infinite linear;
     }

     @-webkit-keyframes spin {
       from { -webkit-transform: rotate(0); }
       to   { -webkit-transform: rotate(360deg); }
     }
   </style>
   <script>
     if (window.testRunner) {
       testRunner.dumpAsText();
       testRunner.waitUntilDone();
     }

     function runTest()
     {
       var box = document.getElementById('to-animate');
       box.addEventListener('webkitAnimationStart', animationStarted, false);
       box.className = 'animating box';
     }

     function animationStarted()
     {
       if (window.testRunner) {
         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
         testRunner.notifyDone();
       }
     }
     window.addEventListener('load', runTest, false);
   </script>
 </head>
 <body>
   <div class="container">
     <div id="to-animate" class="box"></div>
     <!-- This div will get a layer -->
     <div class="box"></div>
   </div>
   <!-- This div should not get a layer -->
   <div class="box"></div>
 <pre id="layers">Layer tree goes here in DRT</pre>
 </body>
 </html>
	<!DOCTYPE html>

	<html>
	<head>
	<style>
	.container {
	height: 240px;
	width: 120px;
	overflow: hidden;
	position: relative;
	z-index: 0; /* create stacking context */
	border: 1px solid black;
	}

	.box {
	position: relative;
	width: 100px;
	height: 100px;
	margin: 10px;
	background-color: blue;
	}

	.animating {
	-webkit-animation: spin 2s infinite linear;
	}

	@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0); }
	to { -webkit-transform: rotate(360deg); }
	}
	</style>
	<script>
	if (window.testRunner) {
	testRunner.dumpAsText();
	testRunner.waitUntilDone();
	}

	function runTest()
	{
	var box = document.getElementById('to-animate');
	box.addEventListener('webkitAnimationStart', animationStarted, false);
	box.className = 'animating box';
	}

	function animationStarted()
	{
	if (window.testRunner) {
	document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
	testRunner.notifyDone();
	}
	}
	window.addEventListener('load', runTest, false);
	</script>
	</head>
	<body>
	<div class="container">
	<div id="to-animate" class="box"></div>
	<!-- This div will get a layer -->
	<div class="box"></div>
	</div>
	<!-- This div should not get a layer -->
	<div class="box"></div>
	<pre id="layers">Layer tree goes here in DRT</pre>
	</body>
	</html>