blob: f4ba76dc78b12a8e5c158e14a1d4a8484ab43171 [file] [log] [blame]
<!DOCTYPE HTML>
<style>
div {
width: 100px;
height: 100px;
}
.container {
background-color: lime;
isolation: isolate;
margin: 10px;
}
.child {
background-color: blue;
-webkit-mask-image: url('resources/blue-circle.svg');
mix-blend-mode: difference;
}
.accelerated {
will-change: transform;
}
</style>
<div class="container">
<div class="child"></div>
</div>
<div class="container">
<div class="accelerated child"></div>
</div>