| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS mix-blend-mode API Test</title> |
| <link rel="author" title="dmyang" href="mailto:yangdemo@gmail.com"> |
| <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"><!-- 11-09-2013 @TestTWF Shenzhen --> |
| <link rel="help" href="http://www.w3.org/TR/compositing-1/#mix-blend-mode"> |
| <meta name="flags" content="svg"> |
| <style type="text/css"> |
| .svg { |
| background-color: #888; |
| width: 500px; |
| display: block; |
| height: 60px; |
| margin: 10px auto; |
| } |
| .svg text { |
| font-size: 25px; |
| line-height: 50px; |
| } |
| .multiply {mix-blend-mode: multiply;} |
| .screen {mix-blend-mode: screen;} |
| .overlay {mix-blend-mode: overlay;} |
| .darken {mix-blend-mode: darken;} |
| .color-dodge {mix-blend-mode: color-dodge;} |
| .color-burn {mix-blend-mode: color-burn;} |
| .hard-light {mix-blend-mode: hard-light;} |
| .soft-light {mix-blend-mode: soft-light;} |
| .difference {mix-blend-mode: difference;} |
| .exclusion {mix-blend-mode: exclusion;} |
| </style> |
| </head> |
| <body> |
| <svg class="svg"> |
| <line class="multiply" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> |
| </svg> |
| <svg class="svg"> |
| <line class="screen" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> |
| </svg> |
| <svg class="svg"> |
| <line class="overlay" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> |
| </svg> |
| <svg class="svg"> |
| <line class="darken" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> |
| </svg> |
| <svg class="svg"> |
| <line class="lighten" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> |
| </svg> |
| <svg class="svg"> |
| <line class="color-dodge" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> |
| </svg> |
| <svg class="svg"> |
| <line class="hard-light" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> |
| </svg> |
| <svg class="svg"> |
| <line class="soft-light" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> |
| </svg> |
| <svg class="svg"> |
| <line class="difference" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> |
| </svg> |
| <svg class="svg"> |
| <line class="exclusion" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> |
| </svg> |
| </body> |
| </html> |