mix-blend-mode-isolation-remove.html

<html>
<head>
<script>
  if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
  }

  function done() {
    if (window.testRunner)
      testRunner.notifyDone();
  }

  function dumpTreeAsText() {
    if (!window.internals)
      return;
    document.getElementById('layers').textContent =
        internals.layerTreeAsText(document);
    document.getElementById('test').style.display = 'none';
    done();
  }

  function removeStackingContext() {
    var intermediary = document.getElementById("intermediary");
    intermediary.setAttribute("class", "accelerated-no-stacking-context");
    if (window.testRunner)
      window.setTimeout(dumpTreeAsText, 0);
  }

  window.addEventListener('load', function () {
    window.setTimeout(removeStackingContext, 100);
  }, false);
</script>
<style>
.accelerated,
.accelerated-stacking-context {
  transform: rotateX(0deg);
}
.accelerated-no-stacking-context {
  backface-visibility: hidden;
}
.blended {
  mix-blend-mode: multiply;
}
</style>
</head>
<body>
  <div id="test">
    <!--This test checks that isolation property is removed when the element
        no longer requires stacking context and it remains accelerated. -->
    <div class="accelerated-stacking-context" style="background-color: blue;">
      <div id="intermediary" class="accelerated-stacking-context"
          style="background-color: green; height: 90px;">
        <img class="accelerated blended" src="resources/reference.png">
      </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-isolation-remove.html
