1 files changed, 56 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/compositing/text-with-svg-background.html b/testing/web-platform/tests/css/compositing/text-with-svg-background.html
new file mode 100644
index 0000000000..2297cf9d5e
--- /dev/null
+++ b/testing/web-platform/tests/css/compositing/text-with-svg-background.html
@@ -0,0 +1,56 @@
+<!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>