mix-blend-mode-2nd-stacking-context-composited.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 mix-blend-mode property doesn't make
        the element or its stacking context to be accelerated-->
    <div class="accelerated stacking-context" style="background-color:red">
      <div class="stacking-context" style="background-color: green">
        <img class="blended" src="resources/reference.png">
      </div>
    </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-2nd-stacking-context-composited.html