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

 <!DOCTYPE html>

 <html>
 <head>
     <style>
         .box {
             width: 120px;
             height: 100px;
             background-color: blue;
             margin: 270px 200px;
             position: relative;
             box-shadow: 0 0 10px black;
             -webkit-transform-origin: 80% 20%;
             transition: -webkit-transform 10s;
         }

         .dot {
             position: absolute;
             top: 0;
             left: 0;
             height: 4px;
             width: 4px;
             background-color: silver;
         }

         body.changed .box {
             animation: move 10s linear;
         }

         @keyframes move {
             from {
                 -webkit-transform: translatex(10px) scale(1) rotate(0);
             }

             30% {
                 -webkit-transform: translateX(150px) scale(1.3) rotate(10deg);
             }

             60% {
                 -webkit-transform: translateX(-20px) scale(0.5) rotate(0);
             }

             to {
                 -webkit-transform: translateX(100px) scale(1.3) rotate(0);
             }
         }
     </style>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }

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

         function makeDots()
         {
             const width = 60;
             const height = 60;

             const spacing = 10;

             for (var row = 0; row < height; ++row) {
                 for (var col = 0; col < width; ++col) {
                     var dot = document.createElement('div');
                     dot.className = 'dot';
                     dot.style.left = spacing * col + 'px';
                     dot.style.top = spacing * row + 'px';
                     document.body.appendChild(dot);
                 }
             }

             window.setTimeout(function() {
                 document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
                 document.body.classList.add('changed');
             }, 0);
         }

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

     <div id="target" class="box">
     </div>
 <pre id="layers"></pre>
 </body>
 </html>
	<!DOCTYPE html>

	<html>
	<head>
	<style>
	.box {
	width: 120px;
	height: 100px;
	background-color: blue;
	margin: 270px 200px;
	position: relative;
	box-shadow: 0 0 10px black;
	-webkit-transform-origin: 80% 20%;
	transition: -webkit-transform 10s;
	}

	.dot {
	position: absolute;
	top: 0;
	left: 0;
	height: 4px;
	width: 4px;
	background-color: silver;
	}

	body.changed .box {
	animation: move 10s linear;
	}

	@keyframes move {
	from {
	-webkit-transform: translatex(10px) scale(1) rotate(0);
	}

	30% {
	-webkit-transform: translateX(150px) scale(1.3) rotate(10deg);
	}

	60% {
	-webkit-transform: translateX(-20px) scale(0.5) rotate(0);
	}

	to {
	-webkit-transform: translateX(100px) scale(1.3) rotate(0);
	}
	}
	</style>
	<script>
	if (window.testRunner) {
	testRunner.dumpAsText();
	testRunner.waitUntilDone();
	}

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

	function makeDots()
	{
	const width = 60;
	const height = 60;

	const spacing = 10;

	for (var row = 0; row < height; ++row) {
	for (var col = 0; col < width; ++col) {
	var dot = document.createElement('div');
	dot.className = 'dot';
	dot.style.left = spacing * col + 'px';
	dot.style.top = spacing * row + 'px';
	document.body.appendChild(dot);
	}
	}

	window.setTimeout(function() {
	document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
	document.body.classList.add('changed');
	}, 0);
	}

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

	<div id="target" class="box">
	</div>
	<pre id="layers"></pre>
	</body>
	</html>