src/third_party/WebKit/LayoutTests/compositing/culling/filter-occlusion-blur.html

   1 <!DOCTYPE html>
   2 <html><head>
   3 <title>CSS filter blur occlusion test.</title>
   4 <style type="text/css">
   5   .composited {
   6     -webkit-transform: translateZ(0);
   7   }
   8   .yellow-parent {
   9     width: 600px;
  10     height:  600px;
  11     -webkit-filter: blur(10px);
  12   }
  13   .centered {
  14     width: 200px;
  15     height: 200px;
  16     position: absolute;
  17     left: 100px;
  18     top: 100px;
  19   }
  20 </style>
  21 <script type="text/javascript">
  22   if (window.testRunner) {
  23     testRunner.dumpAsTextWithPixelResults();
  24   }
  25 </script>
  26 </head>
  27 <body>
  28 <!--
  29    This test guards against over-culling of the "hidden" yellow box. Since the yellow box is blurred,
  30    it becomes visible around the outside of the green box.
  31   -->
  32 <div class="yellow-parent composited" style="position:absolute; left:0; top:0">
  33   <div class="centered composited" style="background-color: yellow;">
  34   </div>
  35 </div>
  36 <div class="composited centered" style="background-color: green;">
  37 </div>
  38 </body>
  39 </html>