<!DOCTYPE html>
<html><head>
<title>CSS filter blur occlusion test.</title>
<style type="text/css">
  .composited {
    -webkit-transform: translateZ(0);
  }
  .yellow-parent {
    width: 800px;
    height:  800px;
    -webkit-filter: blur(10px);
  }
  .centered {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 200px;
    top: 200px;
  }
</style>
<script type="text/javascript">
  if (window.testRunner) {
    testRunner.dumpAsText(true);
  }
</script>
</head>
<body>
<!--
   This test guards against over-culling of the "hidden" yellow box. Since the yellow box is blurred,
   it becomes visible around the outside of the green box. This test causes part of the green and
   yellow boxes to be out of view, testing the interaction of their visible region with the culling.
  -->
<div class="yellow-parent composited" style="position:absolute; left:0; top:0">
  <div class="centered composited" style="background-color: yellow;">
  </div>
</div>
<div class="composited centered" style="background-color: green;">
</div>
</body>
</html>