third_party/WebKit/LayoutTests/compositing/masks/mask-of-clipped-layer.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css" media="screen">
   5       .hidesOverflow {
   6         background-color: blue;
   7         width: 200px;
   8         height: 200px;
   9         overflow: hidden;
  10       }
  11
  12       .shouldNotBeVisible {
  13         background-color: red;
  14         width: 140px;
  15         height: 140px;
  16       }
  17
  18       .composited {
  19         transform: translatez(0);
  20       }
  21
  22       .masked {
  23         -webkit-mask-box-image: url(../resources/alpha-blocks.png);
  24         background-color: lime;
  25         width: 300px;
  26         height: 300px;
  27       }
  28   </style>
  29 </head>
  30 <body>
  31 <!--
  32  https://bugs.webkit.org/show_bug.cgi?id=93558
  33
  34  Scenario: The alpha-blocks mask has a checkerboard pattern of opaque/transparent
  35  sections. The top-left section of the mask should be opaque, so the red div should not be
  36  visible underneath the mask. However, in chromium there was a bug where the mask was
  37  accidentally being resized to the clip area, incorrectly exposing the red div.
  38 -->
  39   <div class="hidesOverflow">
  40     <div class="shouldNotBeVisible">
  41     <div class="composited masked">
  42     </div>
  43   </div>
  44 </body>
  45 </html>