| <!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: 20px; |
| } |
| </style> |
| <style id="insert" type="text/css"></style> |
| </head> |
| <body> |
| <script> |
| var SVG_NS = 'http://www.w3.org/2000/svg'; |
| var modes = [ |
| 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', |
| 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion' |
| ]; |
| var mode; |
| var i = 0; |
| var flagment = document.createDocumentFragment(); |
| var style = ''; |
| |
| while(mode = modes[i++]) { |
| var svg = document.createElementNS(SVG_NS, 'svg'); |
| var text = document.createElementNS(SVG_NS, 'text'); |
| |
| svg.setAttribute('class', 'svg'); |
| text.setAttribute('x', 10); |
| text.setAttribute('y', 20); |
| text.setAttribute('class', mode); |
| text.textContent = 'mix-blend-mode: ' + mode + ';'; |
| |
| svg.appendChild(text); |
| flagment.appendChild(svg); |
| |
| style += '.' + mode + ' {mix-blend-mode: ' + mode + ';}'; |
| } |
| |
| document.getElementById('insert').innerHTML = style; |
| document.body.appendChild(flagment); |
| </script> |
| </body> |
| </html> |
