| <!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> |
| <style id="insert"></style> |
| </head> |
| <body> |
| <svg class="svg"> |
| <text class="multiply" x="10" y="20">mix-blend-mode: multiply;</text> |
| </svg> |
| <svg class="svg"> |
| <text class="screen" x="10" y="20">mix-blend-mode: screen;</text> |
| </svg> |
| <svg class="svg"> |
| <text class="overlay" x="10" y="20">mix-blend-mode: overlay;</text> |
| </svg> |
| <svg class="svg"> |
| <text class="darken" x="10" y="20">mix-blend-mode: darken;</text> |
| </svg> |
| <svg class="svg"> |
| <text class="lighten" x="10" y="20">mix-blend-mode: lighten;</text> |
| </svg> |
| <svg class="svg"> |
| <text class="color-dodge" x="10" y="20">mix-blend-mode: color-dodge;</text> |
| </svg> |
| <svg class="svg"> |
| <text class="color-burn" x="10" y="20">mix-blend-mode: color-burn;</text> |
| </svg> |
| <svg class="svg"> |
| <text class="hard-light" x="10" y="20">mix-blend-mode: hard-light;</text> |
| </svg> |
| <svg class="svg"> |
| <text class="soft-light" x="10" y="20">mix-blend-mode: soft-light;</text> |
| </svg> |
| <svg class="svg"> |
| <text class="difference" x="10" y="20">mix-blend-mode: difference;</text> |
| </svg> |
| <svg class="svg"> |
| <text class="exclusion" x="10" y="20">mix-blend-mode: exclusion;</text> |
| </svg> |
| </body> |
| </html> |