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

 <!DOCTYPE html>

 <html>
 <head>
     <style>
         .box {
             width: 120px;
             height: 100px;
             background-color: blue;
             margin: 180px 100px;
             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 {
             -webkit-transform: scale(1.3) rotate(45deg);
         }
     </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 = 42;
             const height = 42;

             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.body.classList.add('changed');
                 window.setTimeout(dumpLayers, 0);
             }, 0);
         }

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

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

	<html>
	<head>
	<style>
	.box {
	width: 120px;
	height: 100px;
	background-color: blue;
	margin: 180px 100px;
	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 {
	-webkit-transform: scale(1.3) rotate(45deg);
	}
	</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 = 42;
	const height = 42;

	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.body.classList.add('changed');
	window.setTimeout(dumpLayers, 0);
	}, 0);
	}

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

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