| <!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 --> |
| <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; |
| mix-blend-mode: normal; |
| } |
| </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> |