third_party/WebKit/LayoutTests/css3/blending/mix-blend-mode-isolated-group-2.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <style>
   5
   6     body {
   7         background: red;
   8     }
   9
  10     div {
  11         margin: 20px;
  12         width: 60px;
  13         height: 60px;
  14     }
  15
  16     .parent {
  17         position: relative;
  18         z-index: -1;
  19         float: left;
  20         background: violet;
  21     }
  22
  23     .child {
  24         background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, green;
  25     }
  26
  27 </style>
  28 <!-- Test to ensure that blending is performed only with the contents of the element's nearest ancestor stacking context.
  29     Test this with a parent element that has zIndex set. -->
  30 <body>
  31     <div class="parent">
  32         <div class="child" style="mix-blend-mode: normal;"></div>
  33     </div>
  34     <div class="parent">
  35         <div class="child" style="mix-blend-mode: multiply;"></div>
  36     </div>
  37     <div class="parent">
  38         <div class="child" style="mix-blend-mode: screen;"></div>
  39     </div>
  40     <div class="parent">
  41         <div class="child" style="mix-blend-mode: overlay;"></div>
  42     </div>
  43     <div class="parent">
  44         <div class="child" style="mix-blend-mode: darken;"></div>
  45     </div>
  46     <div class="parent">
  47         <div class="child" style="mix-blend-mode: lighten;"></div>
  48     </div>
  49     <div class="parent">
  50         <div class="child" style="mix-blend-mode: color-dodge;"></div>
  51     </div>
  52     <div class="parent">
  53         <div class="child" style="mix-blend-mode: color-burn;"></div>
  54     </div>
  55     <div class="parent">
  56         <div class="child" style="mix-blend-mode: hard-light;"></div>
  57     </div>
  58     <div class="parent">
  59         <div class="child" style="mix-blend-mode: soft-light;"></div>
  60     </div>
  61     <div class="parent">
  62         <div class="child" style="mix-blend-mode: difference;"></div>
  63     </div>
  64     <div class="parent">
  65         <div class="child" style="mix-blend-mode: exclusion;"></div>
  66     </div>
  67     <div class="parent">
  68         <div class="child" style="mix-blend-mode: hue;"></div>
  69     </div>
  70     <div class="parent">
  71         <div class="child" style="mix-blend-mode: saturation;"></div>
  72     </div>
  73     <div class="parent">
  74         <div class="child" style="mix-blend-mode: color;"></div>
  75     </div>
  76     <div class="parent">
  77         <div class="child" style="mix-blend-mode: luminosity;"></div>
  78     </div>
  79 </body>
  80 </html>