layout/reftests/css-blending/mix-blend-mode-and-filter.html

   1 <!--
   2      Any copyright is dedicated to the Public Domain.
   3      http://creativecommons.org/publicdomain/zero/1.0/
   4 -->
   5 <!DOCTYPE HTML>
   6 <html>
   7 <head>
   8   <style>
   9     .parent {
  10       /*
  11         With the darken blend mode, green will overwrite white parts of this
  12         background, while black parts of this background will show through.
  13       */
  14       background: linear-gradient(#fff 0%, #fff 50%, #000 50%, #000 100%);
  15       width: 100px;
  16       height: 100px;
  17     }
  18
  19     .child {
  20       filter: blur(3px);
  21       mix-blend-mode: darken;
  22       background: #0f0;
  23       width: 100px;
  24       height: 100px;
  25     }
  26   </style>
  27 </head>
  28 <body>
  29   <!--
  30     You should see a blurred green square, with its bottom half mostly
  31     covered by a black rectangle.
  32   -->
  33   <div class="parent">
  34     <div class="child"></div>
  35   </div>
  36 </body>
  37 </html>