LayoutTests/compositing/culling/filter-occlusion-alpha-large.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html><head>
 <title>CSS filter blur occlusion test.</title>
 <style type="text/css">
   .composited {
     -webkit-transform: translateZ(0);
   }
   .green-parent {
     width: 800px;
     height:  800px;
   }
   .centered {
     width: 400px;
     height: 400px;
     position: absolute;
     left: 200px;
     top: 200px;
   }
   .alpha {
     -webkit-filter: opacity(0%);
   }
 </style>
 <script type="text/javascript">
   if (window.testRunner) {
     testRunner.dumpAsText(true);
   }
 </script>
 </head>
 <body>
 <!--
    This test guards against culling behind filters that change opacity. The red box is given
    an opacity of 0% with a CSS filter, so only the green box behind it should be visible.
    This version of the test causes part of the boxes to be out of view, testing the interaction
    between their visible region with culling.
   -->
 <div class="green-parent composited" style="position:absolute; left:0; top:0">
   <div class="centered composited" style="background-color: green;">
   </div>
 </div>
 <div class="composited centered alpha" style="background-color: red;">
 </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html><head>
	<title>CSS filter blur occlusion test.</title>
	<style type="text/css">
	.composited {
	-webkit-transform: translateZ(0);
	}
	.green-parent {
	width: 800px;
	height: 800px;
	}
	.centered {
	width: 400px;
	height: 400px;
	position: absolute;
	left: 200px;
	top: 200px;
	}
	.alpha {
	-webkit-filter: opacity(0%);
	}
	</style>
	<script type="text/javascript">
	if (window.testRunner) {
	testRunner.dumpAsText(true);
	}
	</script>
	</head>
	<body>
	<!--
	This test guards against culling behind filters that change opacity. The red box is given
	an opacity of 0% with a CSS filter, so only the green box behind it should be visible.
	This version of the test causes part of the boxes to be out of view, testing the interaction
	between their visible region with culling.
	-->
	<div class="green-parent composited" style="position:absolute; left:0; top:0">
	<div class="centered composited" style="background-color: green;">
	</div>
	</div>
	<div class="composited centered alpha" style="background-color: red;">
	</div>
	</body>
	</html>