mix-blend-mode-has-ancestor-clipping-layer.html

<!DOCTYPE HTML>
<html>
<head>
<style>
  .content {
    isolation: isolate;
  }
  .content > div {
    float: left;
    margin: 10px;
    width: 100px;
    height: 100px;
    background-color: green;
    overflow: hidden;
  }
  .content > div > div {
    mix-blend-mode: multiply;
    width: 300px;
    height: 300px;
    background-color: red;
    transform: rotateX(0deg);
  }
</style>
</head>
<body>
  <p>Test that mix-blend-mode multiply works for layers that are clipped with overflow hidden.</p>
  <p>This test passes if you can see two black squares.</p>
  <div class="content">
    <div id="green1">
      <div id="red1"></div>
    </div>
    <div id="green2" style="transform: rotateX(0deg);">
      <div id="red2"></div>
    </div>
  </div>
</body>
</html>

chromium/third_party/blink/web_tests/css3/blending/mix-blend-mode-has-ancestor-clipping-layer.html