| OLD | NEW | 
| (Empty) |  | 
 |   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 ele
    ment'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> | 
| OLD | NEW |