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

   1 <!DOCTYPE html>
   2 <html><head>
   3 <title>CSS filter blur occlusion test.</title>
   4 <style type="text/css">
   5   .composited {
   6     transform: translateZ(0);
   7   }
   8   .green-parent {
   9     width: 600px;
  10     height:  600px;
  11   }
  12   .centered {
  13     width: 200px;
  14     height: 200px;
  15     position: absolute;
  16     left: 100px;
  17     top: 100px;
  18   }
  19   .alpha {
  20     -webkit-filter: opacity(0%);
  21   }
  22 </style>
  23 <script type="text/javascript">
  24   if (window.testRunner) {
  25     testRunner.dumpAsTextWithPixelResults();
  26   }
  27 </script>
  28 </head>
  29 <body>
  30 <!--
  31    This test guards against culling behind filters that change opacity. The red box is given
  32    an opacity of 0% with a CSS filter, so only the green box behind it should be visible.
  33   -->
  34 <div class="green-parent composited" style="position:absolute; left:0; top:0">
  35   <div class="centered composited" style="background-color: green;">
  36   </div>
  37 </div>
  38 <div class="composited centered alpha" style="background-color: red;">
  39 </div>
  40 </body>
  41 </html>