mix-blend-mode-with-opacity-change-js.html

<!DOCTYPE HTML>
<html>
<head>
<style>
  .container {
    width: 100px;
    height: 100px;
    background-color: green;
  }
  .parent {
    width: 90px;
    height: 90px;
    isolation: isolate;
    border: 5px solid red;
  }
  #child {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: -5px;
    opacity: 0.99;
  }
</style>
<script>
  function applyBlendMode() {
    document.getElementById("child").style["mix-blend-mode"] = "multiply";
  }
</script>
</head>
<body onload="applyBlendMode()">
  <p>Test that mix-blend-mode multiply set from javascript on an element<br />
  having opacity uses the backdrop limited to its stacking context.</p>
  <p>This test passes if you can see a blue square with black border.</p>
  <div class="container">
    <div class="parent">
      <div id="child"></div>
    </div>
  </div>
</body>
</html>

chromium/third_party/blink/web_tests/css3/blending/mix-blend-mode-with-opacity-change-js.html