mask-not-clipped.html | Explore in Territory

<!DOCTYPE html>
<style>
#mask {
  width: 200px;
  height: 200px;
  background-color: red;
  -webkit-mask-image: linear-gradient(black, black), linear-gradient(90deg, black, black);
  -webkit-mask-size: 50% 100%, 100% 50%;
  -webkit-mask-repeat: no-repeat;
}
#cover {
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;
  left: 0;
  top: 0;
}
div {
  display: inline-block;
}
</style>
<p>There should be 2 green squares and a green rectangle below and no red.</p>
<div style="position: absolute">
  <div>
    <div id="mask" style="-webkit-mask-composite: source-in;"></div>
    <div id="cover"></div>
  </div>
  <div>
    <div id="mask" style="-webkit-mask-composite: source-out;"></div>
    <div id="cover" style="left: 204px;top:100px;"></div>
  </div>
  <div>
    <div id="mask" style="-webkit-mask-composite: source-out; -webkit-mask-size: 50px; -webkit-mask-position: bottom right, top left;"></div>
    <div id="cover" style="left: 558px; top:0px; height: 200px; width: 50px;"></div>
  </div>
</div>

chromium/third_party/blink/web_tests/css3/masking/mask-not-clipped.html