mix-blend-mode-isolation-layer.html

<html>
<head>
<script>
  if (window.testRunner) {
    testRunner.dumpAsText();
    window.addEventListener('load', function () {
     document.getElementById('layers').textContent = internals.layerTreeAsText(document);
     document.getElementById('test').style.display = 'none';
    }, false);
  }
</script>
<style>
.stacking-context {
  position: absolute;
  z-index: -1;
}
.accelerated {
  transform: rotateX(0deg);
  will-change: transform;
}
.blended {
  mix-blend-mode: multiply;
}
</style>
</head>
<body>
  <div id="test">
    <!--This test makes sure that in the layer tree img has blending property
        set to multiply and its parent element gets accelerated and
        has isolated set to true-->
    <div class="stacking-context" style="background-color: green">
      <img class="accelerated blended" src="resources/reference.png">
    </div>
  </div>
  <pre id="layers">Layer tree goes here when testing.</pre>
</body>
</html>

chromium/third_party/blink/web_tests/css3/blending/mix-blend-mode-isolation-layer.html