| 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         opacity: 0.99; | 
 |  18         float: left; | 
 |  19         background: violet; | 
 |  20     } | 
 |  21  | 
 |  22     .child { | 
 |  23         background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, green; | 
 |  24     } | 
 |  25  | 
 |  26 </style> | 
 |  27 <!-- Test to ensure that blending is performed only with the contents of the ele
    ment's nearest ancestor stacking context. | 
 |  28     Test this with a parent element that has opacity set. --> | 
 |  29 <body> | 
 |  30     <div class="parent"> | 
 |  31         <div class="child" style="mix-blend-mode: normal;"></div> | 
 |  32     </div> | 
 |  33     <div class="parent"> | 
 |  34         <div class="child" style="mix-blend-mode: multiply;"></div> | 
 |  35     </div> | 
 |  36     <div class="parent"> | 
 |  37         <div class="child" style="mix-blend-mode: screen;"></div> | 
 |  38     </div> | 
 |  39     <div class="parent"> | 
 |  40         <div class="child" style="mix-blend-mode: overlay;"></div> | 
 |  41     </div> | 
 |  42     <div class="parent"> | 
 |  43         <div class="child" style="mix-blend-mode: darken;"></div> | 
 |  44     </div> | 
 |  45     <div class="parent"> | 
 |  46         <div class="child" style="mix-blend-mode: lighten;"></div> | 
 |  47     </div> | 
 |  48     <div class="parent"> | 
 |  49         <div class="child" style="mix-blend-mode: color-dodge;"></div> | 
 |  50     </div> | 
 |  51     <div class="parent"> | 
 |  52         <div class="child" style="mix-blend-mode: color-burn;"></div> | 
 |  53     </div> | 
 |  54     <div class="parent"> | 
 |  55         <div class="child" style="mix-blend-mode: hard-light;"></div> | 
 |  56     </div> | 
 |  57     <div class="parent"> | 
 |  58         <div class="child" style="mix-blend-mode: soft-light;"></div> | 
 |  59     </div> | 
 |  60     <div class="parent"> | 
 |  61         <div class="child" style="mix-blend-mode: difference;"></div> | 
 |  62     </div> | 
 |  63     <div class="parent"> | 
 |  64         <div class="child" style="mix-blend-mode: exclusion;"></div> | 
 |  65     </div> | 
 |  66     <div class="parent"> | 
 |  67         <div class="child" style="mix-blend-mode: hue;"></div> | 
 |  68     </div> | 
 |  69     <div class="parent"> | 
 |  70         <div class="child" style="mix-blend-mode: saturation;"></div> | 
 |  71     </div> | 
 |  72     <div class="parent"> | 
 |  73         <div class="child" style="mix-blend-mode: color;"></div> | 
 |  74     </div> | 
 |  75     <div class="parent"> | 
 |  76         <div class="child" style="mix-blend-mode: luminosity;"></div> | 
 |  77     </div> | 
 |  78 </body> | 
 |  79 </html> | 
| OLD | NEW |