| 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         border: 5px navy; | 
|   7         width: 130px; |   7         border-style: dotted double; | 
|   8         height: 130px; |   8         background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3d
    y53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgogIDxja
    XJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIiBmaWxsPSJyZWQiLz4KPC9zdmc+'), green; | 
|   9         background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, url('re
    sources/blue-circle.svg'); |   9         width: 200px; | 
|  10         float: left; |  10         height: 200px; | 
|  11     } |  11     } | 
|  12 </style> |  12 </style> | 
|  13 <!-- This file should contain a duck on top of an svg with every type of blendin
    g. --> |  13 <!-- This file should contain an svg circle on top of a solid color green backgr
    ound, with every type of blending. The container should have a visible border. -
    -> | 
|  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  |  32  | 
| OLD | NEW |