mix-blend-mode-composited-reason-children.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 a blending element having accelerated
        descendants will get accelerated and its stacking context element
        will get accelerated as well-->
    <div class="stacking-context" style="background-color:red">
      <div class="stacking-context" style="background-color: green">
        <div class="blended" style="background-color: blue">
          <img class="accelerated" src="resources/reference.png">
        </div>
      </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-composited-reason-children.html