<!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;
will-change: transform;
}
#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(internals.layerTreeAsText(document)));
}
</script>
</body>
</html>
Codebase Browser
chromium