diff options
Diffstat (limited to 'testing/web-platform/tests/css/compositing/line-with-svg-background.html')
| -rw-r--r-- | testing/web-platform/tests/css/compositing/line-with-svg-background.html | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/compositing/line-with-svg-background.html b/testing/web-platform/tests/css/compositing/line-with-svg-background.html new file mode 100644 index 0000000000..194096e66c --- /dev/null +++ b/testing/web-platform/tests/css/compositing/line-with-svg-background.html @@ -0,0 +1,65 @@ +<!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: 50px; + } + .multiply {mix-blend-mode: multiply;} + .screen {mix-blend-mode: screen;} + .overlay {mix-blend-mode: overlay;} + .darken {mix-blend-mode: darken;} + .color-dodge {mix-blend-mode: color-dodge;} + .color-burn {mix-blend-mode: color-burn;} + .hard-light {mix-blend-mode: hard-light;} + .soft-light {mix-blend-mode: soft-light;} + .difference {mix-blend-mode: difference;} + .exclusion {mix-blend-mode: exclusion;} + </style> +</head> +<body> + <svg class="svg"> + <line class="multiply" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> + </svg> + <svg class="svg"> + <line class="screen" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> + </svg> + <svg class="svg"> + <line class="overlay" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> + </svg> + <svg class="svg"> + <line class="darken" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> + </svg> + <svg class="svg"> + <line class="lighten" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> + </svg> + <svg class="svg"> + <line class="color-dodge" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> + </svg> + <svg class="svg"> + <line class="hard-light" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> + </svg> + <svg class="svg"> + <line class="soft-light" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> + </svg> + <svg class="svg"> + <line class="difference" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> + </svg> + <svg class="svg"> + <line class="exclusion" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> + </svg> +</body> +</html> |