layout/reftests/css-blending/mix-blend-mode-and-filter-ref.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       position: relative;
  11       width: 100px;
  12       height: 100px;
  13     }
  14
  15     .child {
  16       filter: blur(3px);
  17       background: #0f0;
  18       width: 100px;
  19       height: 100px;
  20     }
  21
  22     .black-rect {
  23       position: absolute;
  24       top: 50px;
  25       width: 100px;
  26       height: 50px;
  27       background: #000;
  28     }
  29   </style>
  30 </head>
  31 <body>
  32   <!--
  33     You should see a blurred green square, with its bottom half mostly
  34     covered by a black rectangle.
  35   -->
  36   <div class="parent">
  37     <div class="child"></div>
  38     <div class="black-rect"></div>
  39   </div>
  40 </body>
  41 </html>