<!DOCTYPE html>
<html><head>
<title>CSS filter blur occlusion test.</title>
<style type="text/css">
  .composited {
    -webkit-transform: translateZ(0);
  }
  .green-parent {
    width: 800px;
    height:  800px;
  }
  .centered {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 200px;
    top: 200px;
  }
  .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.
   This version of the test causes part of the boxes to be out of view, testing the interaction
   between their visible region with culling.
  -->
<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>