| Index: LayoutTests/svg/filters/feBlend-all-modes.html
|
| diff --git a/LayoutTests/svg/filters/feBlend-all-modes.html b/LayoutTests/svg/filters/feBlend-all-modes.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..75b03176e5685a546fe076c865cd4f1ca08116c4
|
| --- /dev/null
|
| +++ b/LayoutTests/svg/filters/feBlend-all-modes.html
|
| @@ -0,0 +1,57 @@
|
| +<!DOCTYPE html>
|
| +<style>
|
| +.group {
|
| + width: 400px;
|
| +}
|
| +</style>
|
| +<body></body>
|
| +<script>
|
| +function createSvgElement(name, attributes) {
|
| + var element = document.createElementNS('http://www.w3.org/2000/svg', name);
|
| + for (var attrName in attributes)
|
| + element.setAttribute(attrName, attributes[attrName]);
|
| + return element;
|
| +}
|
| +
|
| +const blendModes = [
|
| + "normal",
|
| + "multiply",
|
| + "screen",
|
| + "darken",
|
| + "lighten",
|
| + "overlay",
|
| + "color-dodge",
|
| + "color-burn",
|
| + "hard-light",
|
| + "soft-light",
|
| + "difference",
|
| + "exclusion",
|
| + "hue",
|
| + "saturation",
|
| + "color",
|
| + "luminosity"
|
| +];
|
| +
|
| +[
|
| + {a: 'rgb(255,0,0)', b: 'rgb(0,255,0)' },
|
| + {a: 'rgb(51,64,204)', b: 'rgb(153,192,102)' },
|
| + {a: 'rgba(51,64,204,0.5)', b: 'rgba(153,192,102,0.5)' },
|
| +].forEach(function(colors) {
|
| + var group = document.createElement('div');
|
| + group.className = 'group';
|
| + document.body.appendChild(group);
|
| +
|
| + blendModes.forEach(function(mode, i) {
|
| + var filterId = 'f_' + mode;
|
| + var filter = createSvgElement('filter', { id: filterId, x: 0, y: 0, width: 1, height: 1 });
|
| + filter.appendChild(createSvgElement('feFlood', { result: 'a', 'flood-color': colors.a }));
|
| + filter.appendChild(createSvgElement('feFlood', { result: 'b', 'flood-color': colors.b }));
|
| + filter.appendChild(createSvgElement('feBlend', { in: 'a', in2: 'b', mode: mode }));
|
| + var svgRoot = createSvgElement('svg', { width: '50', height: '50' });
|
| + var rect = createSvgElement('rect', { width: 50, height: 50, filter: 'url(#' + filterId + ')' });
|
| + svgRoot.appendChild(filter);
|
| + svgRoot.appendChild(rect);
|
| + group.appendChild(svgRoot);
|
| + });
|
| +});
|
| +</script>
|
|
|
Chromium Code Reviews
Issue 447193002:
Add support for additional blend modes to SVGFEBlendElement (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master