mask-with-removed-filters.html | Explore in Territory

<!DOCTYPE html>
<style>
div {
  display: inline-block;
  height: 560px;
  width: 260px;
  border: 1px solid black;
}

img {
  width: 100%;
  height: 100%;
}

.composited {
  will-change: transform, filter;
}

.alpha-color {
  -webkit-mask-image: url(../resources/star.svg);
}
</style>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
runAfterLayoutAndPaint(function() {
  var image = document.getElementById('blur-image');
  image.style.filter = "";
  var imageComposited = document.getElementById('blur-image-composited');
  imageComposited.style.filter="";
}, true);
</script>

<p>Testing masks with filters on compositing layers. Left and right columns should look the same.</p>
<div>
  <img id="blur-image" src="../resources/alpha-gradient-diagonal.png" class="alpha-color">
</div>
<div>
  <img id="blur-image-composited" src="../resources/alpha-gradient-diagonal.png" class="alpha-color composited">
</div>

chromium/third_party/blink/web_tests/compositing/masks/mask-with-removed-filters.html