third_party/WebKit/LayoutTests/css3/blending/background-blend-mode-gradient-image.html

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