direct-image-mask.html | Explore in Territory

<!DOCTYPE>

<html>
<head>
  <title>Simple composited reflections</title>
  <style type="text/css" media="screen">

      img {
        margin: 20px;
      }

      .compositing {
        will-change: transform, opacity, filter;
      }

      .masked {
        -webkit-mask-image: url(../resources/alpha-gradient.png);
        -webkit-mask-repeat: repeat-y;
      }

  </style>
</head>
<body>

  <p>Testing reflections on directly composited images. Left and right sides should look the same.</p>
  <img class="masked" src="../resources/thiswayup.png" width="184" height="124">
  <img class="compositing masked" src="../resources/thiswayup.png" width="184" height="124">

</body>
</html>

chromium/third_party/blink/web_tests/compositing/masks/direct-image-mask.html