LayoutTests/compositing/filters/sw-nested-shadow-overlaps-hw-nested-shadow.html - WebKit - Git at Google

 <!doctype html>
 <html>
 <head>
     <title>
         This test verifies that a software layer will be promoted to a composited layer
         if its nested drop shadow intersects a composited layer's nested drop shadow.
     </title>
     <!-- If the test passes, the light green drop shadow should appear over the the gray drop shadow where they intersect. -->
     <style>
         #software-parent {
             background-color: green;
             -webkit-filter: drop-shadow(25px 25px 0 lightgreen);

             position: absolute;
             top: 0;
             left: 0;
             width: 100px;
             height: 100px;
         }
         #software-child {
             background-color: blue;
             -webkit-filter: drop-shadow(50px 50px 0 lightblue);

             position: absolute;
             top: 100px;
             left: 100px;
             width: 50px;
             height: 50px;
         }
         #composited-parent {
             background-color: black;
             -webkit-filter: drop-shadow(-25px -25px 0 gray);

             position: absolute;
             top: 330px;
             left: 330px;
             width: 100px;
             height: 100px;
             -webkit-transform: translate3d(0, 0, 0);
         }
         #composited-child {
             background-color: blue;
             -webkit-filter: drop-shadow(-50px -50px 0 lightblue);

             position: absolute;
             top: -50px;
             left: -50px;
             width: 50px;
             height: 50px;
         }
     </style>
 </head>
 <body>
     <div id="composited-parent">
         <div id="composited-child"></div>
     </div>
     <div id="software-parent">
         <div id="software-child"></div>
     </div>
     <pre id="console"></pre>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             document.getElementById("console").appendChild(document.createTextNode(window.internals.layerTreeAsText(document)));
         }
     </script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>
	This test verifies that a software layer will be promoted to a composited layer
	if its nested drop shadow intersects a composited layer's nested drop shadow.
	</title>
	<!-- If the test passes, the light green drop shadow should appear over the the gray drop shadow where they intersect. -->
	<style>
	#software-parent {
	background-color: green;
	-webkit-filter: drop-shadow(25px 25px 0 lightgreen);

	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
	}
	#software-child {
	background-color: blue;
	-webkit-filter: drop-shadow(50px 50px 0 lightblue);

	position: absolute;
	top: 100px;
	left: 100px;
	width: 50px;
	height: 50px;
	}
	#composited-parent {
	background-color: black;
	-webkit-filter: drop-shadow(-25px -25px 0 gray);

	position: absolute;
	top: 330px;
	left: 330px;
	width: 100px;
	height: 100px;
	-webkit-transform: translate3d(0, 0, 0);
	}
	#composited-child {
	background-color: blue;
	-webkit-filter: drop-shadow(-50px -50px 0 lightblue);

	position: absolute;
	top: -50px;
	left: -50px;
	width: 50px;
	height: 50px;
	}
	</style>
	</head>
	<body>
	<div id="composited-parent">
	<div id="composited-child"></div>
	</div>
	<div id="software-parent">
	<div id="software-child"></div>
	</div>
	<pre id="console"></pre>
	<script>
	if (window.testRunner) {
	testRunner.dumpAsText();
	document.getElementById("console").appendChild(document.createTextNode(window.internals.layerTreeAsText(document)));
	}
	</script>
	</body>
	</html>