text-with-svg-background.html (1605B)
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 <link rel="help" href="http://www.w3.org/TR/compositing-1/#mix-blend-mode"> 8 <meta name="flags" content="svg"> 9 <style type="text/css"> 10 .svg { 11 background-color: #888; 12 width: 500px; 13 display: block; 14 height: 60px; 15 margin: 10px auto; 16 } 17 .svg text { 18 font-size: 25px; 19 line-height: 20px; 20 } 21 </style> 22 <style id="insert" type="text/css"></style> 23 </head> 24 <body> 25 <script> 26 var SVG_NS = 'http://www.w3.org/2000/svg'; 27 var modes = [ 28 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 29 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion' 30 ]; 31 var mode; 32 var i = 0; 33 var flagment = document.createDocumentFragment(); 34 var style = ''; 35 36 while(mode = modes[i++]) { 37 var svg = document.createElementNS(SVG_NS, 'svg'); 38 var text = document.createElementNS(SVG_NS, 'text'); 39 40 svg.setAttribute('class', 'svg'); 41 text.setAttribute('x', 10); 42 text.setAttribute('y', 20); 43 text.setAttribute('class', mode); 44 text.textContent = 'mix-blend-mode: ' + mode + ';'; 45 46 svg.appendChild(text); 47 flagment.appendChild(svg); 48 49 style += '.' + mode + ' {mix-blend-mode: ' + mode + ';}'; 50 } 51 52 document.getElementById('insert').innerHTML = style; 53 document.body.appendChild(flagment); 54 </script> 55 </body> 56 </html>