mix-blend-mode-composited-layers.html

<!DOCTYPE HTML>
<html>
<head>
<style>
    div {
        width: 10px;
        height: 10px;
    }
</style>
</head>
<body>

<!-- Mix-blend-mode should not create a composited layer -->
<div style="background-color: green">
    <div style="background-color: blue; mix-blend-mode: multiply"></div>
</div>

<!-- Mix-blend-mode should create a composited layer when having composited descendants-->
<div style="background-color: green">
    <div style="background-color: blue; mix-blend-mode: multiply">
        <div style="background-color: yellow; transform: translatez(0); will-change: transform;"></div>
    </div>
</div>

<pre id="layers">Layer tree appears here in DRT.</pre>

<script type="text/javascript">
    if (window.testRunner) {
        testRunner.dumpAsText();
        document.getElementById('layers').innerHTML = internals.layerTreeAsText(document);
    }
</script>
</body>
</html>

chromium/third_party/blink/web_tests/css3/blending/mix-blend-mode-composited-layers.html