third_party/WebKit/LayoutTests/css3/blending/mix-blend-mode-with-masking.html

   1 <!DOCTYPE HTML>
   2 <style>
   3   div {
   4     width: 100px;
   5     height: 100px;
   6   }
   7   .container {
   8     background-color: lime;
   9     isolation: isolate;
  10     margin: 10px;
  11   }
  12   .child {
  13     background-color: blue;
  14     -webkit-mask-image: url('resources/blue-circle.svg');
  15     mix-blend-mode: difference;
  16   }
  17   .accelerated {
  18     will-change: transform;
  19   }
  20 </style>
  21
  22 <div class="container">
  23   <div class="child"></div>
  24 </div>
  25
  26 <div class="container">
  27   <div class="accelerated child"></div>
  28 </div>