filtered-compositing-descendant.html

<!DOCTYPE html>

<html>
<head>
  <style>
    body {
      overflow: hidden;
    }
    .box {
      width: 100px;
      height: 100px;
    }
    .filtered {
      filter: saturate(0);
      padding: 20px;
      border: 2px solid black;
    }
    .compositing {
      transform: translateZ(1px);
      background-color: red;
    }
    
    pre {
      opacity: 0; /* hide in pixel result */
    }
  </style>
  <script>
    if (window.testRunner)
      testRunner.dumpAsTextWithPixelResults();

    window.addEventListener('load', function () {
      if (window.testRunner)
        document.getElementById('layer-tree').innerText = internals.layerTreeAsText(document);
    }, false);
  </script>
</head>
<body>
  <!-- You should see no red below -->
  <div class="filtered box">
    <div class="compositing box"></div>
  </div>
<pre id="layer-tree">Layer tree goes here in DRT</pre>
</body>
</html>

chromium/third_party/blink/web_tests/css3/filters/filtered-compositing-descendant.html