LayoutTests/compositing/layer-creation/overlap-transformed-and-clipped.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <style>
     div {
         width: 100px;
         height: 100px;
     }

     .composited {
         -webkit-transform: translateZ(0px);
     }

     .clips {
         overflow: hidden;
     }

     .container {
         position: absolute;
         left: 0px;
         top: 0px;
         overflow: hidden;
         -webkit-transform: translateX(110px);
     }

     .under {
         background-color: red;
         position:absolute;
         left: 0px;
         top: 0px;
     }

     .over {
         background-color: green;
         position: absolute;
         left: 0px;
         top: 0px;
     }

     #layertree {
         position: absolute;
         left: 10000px;
         top: 0px;
     }

     body {
         overflow: hidden;
     }
 </style>

 <script>
     if (window.testRunner) {
         testRunner.dumpAsText(true);
         window.addEventListener('load', function() {
             document.getElementById("layertree").innerText = testRunner.layerTreeAsText();
         }, false);
     }
 </script>
 </head>

 <body>
   <!-- Tests that CSS transforms and clipping work properly together. -->
   <!-- This reproduces an error reported in https://bugs.webkit.org/show_bug.cgi?id=76486
        where the clipRect was not accounting for transforms. As a result, in the overlapMap,
        the intersection of clipRect and layer bounds becomes empty, and layers on top do not
        get properly composited. If this happens, the red "under composited" layer will be
        exposed, because the "over" div does not become a composited layer. -->
   <div class="container clips">
     <div class="under composited"></div>
     <div class="over"></div>
   </div>

   <pre id="layertree"></pre>

 </body>

 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	div {
	width: 100px;
	height: 100px;
	}

	.composited {
	-webkit-transform: translateZ(0px);
	}

	.clips {
	overflow: hidden;
	}

	.container {
	position: absolute;
	left: 0px;
	top: 0px;
	overflow: hidden;
	-webkit-transform: translateX(110px);
	}

	.under {
	background-color: red;
	position:absolute;
	left: 0px;
	top: 0px;
	}

	.over {
	background-color: green;
	position: absolute;
	left: 0px;
	top: 0px;
	}

	#layertree {
	position: absolute;
	left: 10000px;
	top: 0px;
	}

	body {
	overflow: hidden;
	}
	</style>

	<script>
	if (window.testRunner) {
	testRunner.dumpAsText(true);
	window.addEventListener('load', function() {
	document.getElementById("layertree").innerText = testRunner.layerTreeAsText();
	}, false);
	}
	</script>
	</head>

	<body>
	<!-- Tests that CSS transforms and clipping work properly together. -->
	<!-- This reproduces an error reported in https://bugs.webkit.org/show_bug.cgi?id=76486
	where the clipRect was not accounting for transforms. As a result, in the overlapMap,
	the intersection of clipRect and layer bounds becomes empty, and layers on top do not
	get properly composited. If this happens, the red "under composited" layer will be
	exposed, because the "over" div does not become a composited layer. -->
	<div class="container clips">
	<div class="under composited"></div>
	<div class="over"></div>
	</div>

	<pre id="layertree"></pre>

	</body>

	</html>