<!DOCTYPE html>
<html><head>
<title>CSS filter blur occlusion test.</title>
<style type="text/css">
.composited {
will-change: transform;
}
.green-parent {
width: 600px;
height: 600px;
}
.centered {
width: 200px;
height: 200px;
position: absolute;
left: 100px;
top: 100px;
}
.alpha {
-webkit-filter: opacity(0%);
}
</style>
</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.
-->
<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>