text-with-svg-background-ref.html (1899B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS mix-blend-mode API Test</title> 5 <link rel="author" title="dmyang" href="mailto:yangdemo@gmail.com"> 6 <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"><!-- 11-09-2013 @TestTWF Shenzhen --> 7 <meta name="flags" content="svg"> 8 <style type="text/css"> 9 .svg { 10 background-color: #888; 11 width: 500px; 12 display: block; 13 height: 60px; 14 margin: 10px auto; 15 } 16 .svg text { 17 font-size: 25px; 18 line-height: 50px; 19 mix-blend-mode: normal; 20 } 21 </style> 22 <style id="insert"></style> 23 </head> 24 <body> 25 <svg class="svg"> 26 <text class="multiply" x="10" y="20">mix-blend-mode: multiply;</text> 27 </svg> 28 <svg class="svg"> 29 <text class="screen" x="10" y="20">mix-blend-mode: screen;</text> 30 </svg> 31 <svg class="svg"> 32 <text class="overlay" x="10" y="20">mix-blend-mode: overlay;</text> 33 </svg> 34 <svg class="svg"> 35 <text class="darken" x="10" y="20">mix-blend-mode: darken;</text> 36 </svg> 37 <svg class="svg"> 38 <text class="lighten" x="10" y="20">mix-blend-mode: lighten;</text> 39 </svg> 40 <svg class="svg"> 41 <text class="color-dodge" x="10" y="20">mix-blend-mode: color-dodge;</text> 42 </svg> 43 <svg class="svg"> 44 <text class="color-burn" x="10" y="20">mix-blend-mode: color-burn;</text> 45 </svg> 46 <svg class="svg"> 47 <text class="hard-light" x="10" y="20">mix-blend-mode: hard-light;</text> 48 </svg> 49 <svg class="svg"> 50 <text class="soft-light" x="10" y="20">mix-blend-mode: soft-light;</text> 51 </svg> 52 <svg class="svg"> 53 <text class="difference" x="10" y="20">mix-blend-mode: difference;</text> 54 </svg> 55 <svg class="svg"> 56 <text class="exclusion" x="10" y="20">mix-blend-mode: exclusion;</text> 57 </svg> 58 </body> 59 </html>