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

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