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

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