mix-blend-mode-with-masking.html | Explore in Territory

<!DOCTYPE HTML>
<style>
  div {
    width: 100px;
    height: 100px;
  }
  .container {
    background-color: lime;
    isolation: isolate;
    margin: 10px;
  }
  .child {
    background-color: blue;
    -webkit-mask-image: url('resources/blue-circle.svg');
    mix-blend-mode: difference;
  }
  .accelerated {
    will-change: transform;
  }
</style>

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="accelerated child"></div>
</div>

chromium/third_party/blink/web_tests/css3/blending/mix-blend-mode-with-masking.html