blend-isolation.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
    <title>CSS Compositing and Blending: isolation applied to a group containing blending</title>
    <link rel="author" title="cabanier" href="mailto:[email protected]">
    <link rel="help" href="http://www.w3.org/TR/compositing-1/#isolation">
    <meta name="assert" content="Isolation on a group with blending">
<style>
.a {
  background-color: rgb(0,255,0);
}
#b {
  width: 200px;
  height: 210px;
}
.c {
  width: 100px;
  height: 100px;
  mix-blend-mode: difference;
}
#d {
  isolation: isolate;
}
</style>
<p>Test passes if you see a solid green rectangle</p>
<div id="b" class="a">
  <div id="d">
    <div class="a c"></div>
  </div>
</div>
</html>

chromium/third_party/blink/web_tests/external/wpt/css/compositing/isolation/blend-isolation.html