mask-of-clipped-layer.html | Explore in Territory

<!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 {
        will-change: transform, opacity, filter;
      }

      .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>
  </div>
</body>
</html>

chromium/third_party/blink/web_tests/compositing/masks/mask-of-clipped-layer.html