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

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