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