src/third_party/WebKit/LayoutTests/css3/blending/mix-blend-mode-simple.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <style>
   5     div {
   6         margin: 20px;
   7         width: 60px;
   8         height: 60px;
   9         float: left;
  10     }
  11 </style>
  12 <!-- Test blending of two elements with every blend mode. -->
  13 <body>
  14     <div style="background: green">
  15         <div style="mix-blend-mode: normal; background-color: blue;"></div>
  16     </div>
  17     <div style="background: green">
  18         <div style="mix-blend-mode: multiply; background-color: blue;"></div>
  19     </div>
  20     <div style="background: green">
  21         <div style="mix-blend-mode: screen; background-color: blue;"></div>
  22     </div>
  23     <div style="background: green">
  24         <div style="mix-blend-mode: overlay; background-color: blue;"></div>
  25     </div>
  26     <div style="background: green">
  27         <div style="mix-blend-mode: darken; background-color: blue;"></div>
  28     </div>
  29     <div style="background: green">
  30         <div style="mix-blend-mode: lighten; background-color: blue;"></div>
  31     </div>
  32     <div style="background: green">
  33         <div style="mix-blend-mode: color-dodge; background-color: blue;"></div>
  34     </div>
  35     <div style="background: green">
  36         <div style="mix-blend-mode: color-burn; background-color: blue;"></div>
  37     </div>
  38     <div style="background: green">
  39         <div style="mix-blend-mode: hard-light; background-color: blue;"></div>
  40     </div>
  41     <div style="background: green">
  42         <div style="mix-blend-mode: soft-light; background-color: blue;"></div>
  43     </div>
  44     <div style="background: green">
  45         <div style="mix-blend-mode: difference; background-color: blue;"></div>
  46     </div>
  47     <div style="background: green">
  48         <div style="mix-blend-mode: exclusion; background-color: blue;"></div>
  49     </div>
  50     <div style="background: green">
  51         <div style="mix-blend-mode: hue; background-color: blue;"></div>
  52     </div>
  53     <div style="background: green">
  54         <div style="mix-blend-mode: saturation; background-color: blue;"></div>
  55     </div>
  56     <div style="background: green">
  57         <div style="mix-blend-mode: color; background-color: blue;"></div>
  58     </div>
  59     <div style="background: green">
  60         <div style="mix-blend-mode: luminosity; background-color: blue;"></div>
  61     </div>
  62 </body>
  63 </html>