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