| OLD | NEW | 
|   1 <!DOCTYPE HTML> |   1 <!DOCTYPE HTML> | 
|   2 <html> |   2 <html> | 
|   3 <head> |   3 <head> | 
|   4 <style> |   4 <style> | 
|   5     div { |   5     div { | 
|   6         margin: 5px; |   6         margin: 5px; | 
|   7         width: 130px; |   7         width: 130px; | 
|   8         height: 130px; |   8         height: 130px; | 
|   9         background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, green; |   9         background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, url('re
    sources/blue-circle.svg'); | 
|  10         float: left; |  10         float: left; | 
|  11     } |  11     } | 
|  12 </style> |  12 </style> | 
|  13 <!-- This file should contain on image on top of a background color for every ty
    pe of blending --> |  13 <!-- This file should contain a duck on top of an svg with every type of blendin
    g. --> | 
|  14 <body> |  14 <body> | 
|  15     <div style="background-blend-mode: normal, normal"></div> |  15     <div style="background-blend-mode: normal, normal"></div> | 
|  16     <div style="background-blend-mode: multiply, normal"></div> |  16     <div style="background-blend-mode: multiply, normal"></div> | 
|  17     <div style="background-blend-mode: screen, normal"></div> |  17     <div style="background-blend-mode: screen, normal"></div> | 
|  18     <div style="background-blend-mode: overlay, normal"></div> |  18     <div style="background-blend-mode: overlay, normal"></div> | 
|  19     <div style="background-blend-mode: darken, normal"></div> |  19     <div style="background-blend-mode: darken, normal"></div> | 
|  20     <div style="background-blend-mode: lighten, normal"></div> |  20     <div style="background-blend-mode: lighten, normal"></div> | 
|  21     <div style="background-blend-mode: color-dodge, normal"></div> |  21     <div style="background-blend-mode: color-dodge, normal"></div> | 
|  22     <div style="background-blend-mode: color-burn, normal"></div> |  22     <div style="background-blend-mode: color-burn, normal"></div> | 
|  23     <div style="background-blend-mode: hard-light, normal"></div> |  23     <div style="background-blend-mode: hard-light, normal"></div> | 
|  24     <div style="background-blend-mode: soft-light, normal"></div> |  24     <div style="background-blend-mode: soft-light, normal"></div> | 
|  25     <div style="background-blend-mode: difference, normal"></div> |  25     <div style="background-blend-mode: difference, normal"></div> | 
|  26     <div style="background-blend-mode: exclusion, normal"></div> |  26     <div style="background-blend-mode: exclusion, normal"></div> | 
|  27     <div style="background-blend-mode: hue, normal;"></div> |  27     <div style="background-blend-mode: hue, normal;"></div> | 
|  28     <div style="background-blend-mode: saturation, normal"></div> |  28     <div style="background-blend-mode: saturation, normal"></div> | 
|  29     <div style="background-blend-mode: color, normal"></div> |  29     <div style="background-blend-mode: color, normal"></div> | 
|  30     <div style="background-blend-mode: luminosity, normal"></div> |  30     <div style="background-blend-mode: luminosity, normal"></div> | 
|  31 </body> |  31 </body> | 
|  32 </html> |  32  | 
| OLD | NEW |