<!DOCTYPE html>
<html>
<head>
  <style type="text/css" media="screen">
      .hidesOverflow {
        background-color: blue;
        width: 200px;
        height: 200px;
        overflow: hidden;
      }

      .shouldNotBeVisible {
        background-color: red;
        width: 140px;
        height: 140px;
      }

      .composited {
        transform: translatez(0);
      }

      .masked {
        -webkit-mask-box-image: url(../resources/alpha-blocks.png);
        background-color: lime;
        width: 300px;
        height: 300px;
      }
  </style>
</head>
<body>
<!-- 
 https://bugs.webkit.org/show_bug.cgi?id=93558 

 Scenario: The alpha-blocks mask has a checkerboard pattern of opaque/transparent
 sections. The top-left section of the mask should be opaque, so the red div should not be
 visible underneath the mask. However, in chromium there was a bug where the mask was
 accidentally being resized to the clip area, incorrectly exposing the red div.
-->
  <div class="hidesOverflow">
    <div class="shouldNotBeVisible">
    <div class="composited masked">
    </div>
  </div>
</body>
</html>