Unlock 30% off on Manual Testing Annual Plans this Holiday Season. 
Use Code: LCMYEARENDEXCL30
Use Code: LCMYEARENDEXCL30Check icon
Copied to Clipboard!
How to use blend method in prospector
Best Python code snippet using prospector_python
seriously.blend.js
Source:seriously.blend.js 
1/* global define, require */2(function (root, factory) {3 'use strict';4 if (typeof exports === 'object') {5 // Node/CommonJS6 factory(require('seriously'));7 } else if (typeof define === 'function' && define.amd) {8 // AMD. Register as an anonymous module.9 define(['seriously'], factory);10 } else {11 if (!root.Seriously) {12 root.Seriously = { plugin: function (name, opt) { this[name] = opt; } };13 }14 factory(root.Seriously);15 }16}(this, function (Seriously, undefined) {17 'use strict';18 /*19 todo: for prototype version, blend only handles two layers. this should handle multiple layers?20 todo: if transforms are used, do multiple passes and enable depth testing?21 todo: for now, only supporting float blend modes. Add complex ones22 todo: apply proper credit and license23 ** Romain Dura | Romz24 ** Blog: http://blog.mouaif.org25 ** Post: http://blog.mouaif.org/?p=9426 */27 var modes = {28 'normal': 'BlendNormal',29 'lighten': 'BlendLighten',30 'darken': 'BlendDarken',31 'multiply': 'BlendMultiply',32 'average': 'BlendAverage',33 'add': 'BlendAdd',34 'subtract': 'BlendSubtract',35 'difference': 'BlendDifference',36 'negation': 'BlendNegation',37 'exclusion': 'BlendExclusion',38 'screen': 'BlendScreen',39 'overlay': 'BlendOverlay',40 'softlight': 'BlendSoftLight',41 'hardlight': 'BlendHardLight',42 'colordodge': 'BlendColorDodge',43 'colorburn': 'BlendColorBurn',44 'lineardodge': 'BlendLinearDodge',45 'linearburn': 'BlendLinearBurn',46 'linearlight': 'BlendLinearLight',47 'vividlight': 'BlendVividLight',48 'pinlight': 'BlendPinLight',49 'hardmix': 'BlendHardMix',50 'reflect': 'BlendReflect',51 'glow': 'BlendGlow',52 'phoenix': 'BlendPhoenix'53 },54 nativeBlendModes = {55 normal: ['FUNC_ADD', 'SRC_ALPHA', 'ONE_MINUS_SRC_ALPHA', 'SRC_ALPHA', 'DST_ALPHA']/*,56 add: ['FUNC_ADD', 'SRC_ALPHA', 'ONE_MINUS_SRC_ALPHA', 'SRC_ALPHA', 'DST_ALPHA']*/57 },58 identity = new Float32Array([59 1, 0, 0, 0,60 0, 1, 0, 0,61 0, 0, 1, 0,62 0, 0, 0, 163 ]);64 Seriously.plugin('blend', function () {65 var topUniforms,66 bottomUniforms,67 topOpts = {68 clear: false69 };70 // custom resize method71 this.resize = function () {72 var width,73 height,74 mode = this.inputs.sizeMode,75 node,76 fn,77 i,78 bottom = this.inputs.bottom,79 top = this.inputs.top;80 if (mode === 'bottom' || mode === 'top') {81 node = this.inputs[mode];82 if (node) {83 width = node.width;84 height = node.height;85 } else {86 width = 1;87 height = 1;88 }89 } else {90 if (bottom) {91 if (top) {92 fn = (mode === 'union' ? Math.max : Math.min);93 width = fn(bottom.width, top.width);94 height = fn(bottom.height, top.height);95 } else {96 width = bottom.width;97 height = bottom.height;98 }99 } else if (top) {100 width = top.width;101 height = top.height;102 } else {103 width = 1;104 height = 1;105 }106 }107 if (this.width !== width || this.height !== height) {108 this.width = width;109 this.height = height;110 this.uniforms.resolution[0] = width;111 this.uniforms.resolution[1] = height;112 if (this.frameBuffer) {113 this.frameBuffer.resize(width, height);114 }115 this.emit('resize');116 this.setDirty();117 }118 if (topUniforms) {119 if (bottom) {120 bottomUniforms.resolution[0] = bottom.width;121 bottomUniforms.resolution[1] = bottom.height;122 }123 if (top) {124 topUniforms.resolution[0] = top.width;125 topUniforms.resolution[1] = top.height;126 }127 }128 for (i = 0; i < this.targets.length; i++) {129 this.targets[i].resize();130 }131 };132 return {133 shader: function (inputs, shaderSource) {134 var mode = inputs.mode || 'normal',135 node;136 mode = mode.toLowerCase();137 if (nativeBlendModes[mode]) {138 //todo: move this to an 'update' event for 'mode' input139 if (!topUniforms) {140 node = this.inputs.top;141 topUniforms = {142 resolution: [143 node && node.width || 1,144 node && node.height || 1145 ],146 targetRes: this.uniforms.resolution,147 source: node,148 transform: node && node.cumulativeMatrix || identity,149 opacity: 1150 };151 node = this.inputs.bottom;152 bottomUniforms = {153 resolution: [154 node && node.width || 1,155 node && node.height || 1156 ],157 targetRes: this.uniforms.resolution,158 source: node,159 transform: node && node.cumulativeMatrix || identity,160 opacity: 1161 };162 }163 shaderSource.vertex = [164 'precision mediump float;',165 'attribute vec4 position;',166 'attribute vec2 texCoord;',167 'uniform vec2 resolution;',168 'uniform vec2 targetRes;',169 'uniform mat4 transform;',170 'varying vec2 vTexCoord;',171 'varying vec4 vPosition;',172 'void main(void) {',173 // first convert to screen space174 ' vec4 screenPosition = vec4(position.xy * resolution / 2.0, position.z, position.w);',175 ' screenPosition = transform * screenPosition;',176 // convert back to OpenGL coords177 ' gl_Position.xy = screenPosition.xy * 2.0 / resolution;',178 ' gl_Position.z = screenPosition.z * 2.0 / (resolution.x / resolution.y);',179 ' gl_Position.xy *= resolution / targetRes;',180 ' gl_Position.w = screenPosition.w;',181 ' vTexCoord = texCoord;',182 ' vPosition = gl_Position;',183 '}\n'184 ].join('\n');185 shaderSource.fragment = [186 'precision mediump float;',187 'varying vec2 vTexCoord;',188 'varying vec4 vPosition;',189 'uniform sampler2D source;',190 'uniform float opacity;',191 'void main(void) {',192 ' gl_FragColor = texture2D(source, vTexCoord);',193 ' gl_FragColor.a *= opacity;',194 '}'195 ].join('\n');196 return shaderSource;197 }198 topUniforms = null;199 bottomUniforms = null;200 mode = modes[mode] || 'BlendNormal';201 shaderSource.fragment = '#define BlendFunction ' + mode + '\n' +202 '#ifdef GL_ES\n\n' +203 'precision mediump float;\n\n' +204 '#endif\n\n' +205 '\n' +206 '#define BlendLinearDodgef BlendAddf\n' +207 '#define BlendLinearBurnf BlendSubtractf\n' +208 '#define BlendAddf(base, blend) min(base + blend, 1.0)\n' +209 '#define BlendSubtractf(base, blend) max(base + blend - 1.0, 0.0)\n' +210 '#define BlendLightenf(base, blend) max(blend, base)\n' +211 '#define BlendDarkenf(base, blend) min(blend, base)\n' +212 '#define BlendLinearLightf(base, blend) (blend < 0.5 ? BlendLinearBurnf(base, (2.0 * blend)) : BlendLinearDodgef(base, (2.0 * (blend - 0.5))))\n' +213 '#define BlendScreenf(base, blend) (1.0 - ((1.0 - base) * (1.0 - blend)))\n' +214 '#define BlendOverlayf(base, blend) (base < 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)))\n' +215 '#define BlendSoftLightf(base, blend) ((blend < 0.5) ? (2.0 * base * blend + base * base * (1.0 - 2.0 * blend)) : (sqrt(base) * (2.0 * blend - 1.0) + 2.0 * base * (1.0 - blend)))\n' +216 '#define BlendColorDodgef(base, blend) ((blend == 1.0) ? blend : min(base / (1.0 - blend), 1.0))\n' +217 '#define BlendColorBurnf(base, blend) ((blend == 0.0) ? blend : max((1.0 - ((1.0 - base) / blend)), 0.0))\n' +218 '#define BlendVividLightf(base, blend) ((blend < 0.5) ? BlendColorBurnf(base, (2.0 * blend)) : BlendColorDodgef(base, (2.0 * (blend - 0.5))))\n' +219 '#define BlendPinLightf(base, blend) ((blend < 0.5) ? BlendDarkenf(base, (2.0 * blend)) : BlendLightenf(base, (2.0 *(blend - 0.5))))\n' +220 '#define BlendHardMixf(base, blend) ((BlendVividLightf(base, blend) < 0.5) ? 0.0 : 1.0)\n' +221 '#define BlendReflectf(base, blend) ((blend == 1.0) ? blend : min(base * base / (1.0 - blend), 1.0))\n' +222 /*223 ** Vector3 blending modes224 */225 // Component wise blending226 '#define Blend(base, blend, funcf) vec3(funcf(base.r, blend.r), funcf(base.g, blend.g), funcf(base.b, blend.b))\n' +227 '#define BlendNormal(base, blend) (blend)\n' +228 '#define BlendLighten BlendLightenf\n' +229 '#define BlendDarken BlendDarkenf\n' +230 '#define BlendMultiply(base, blend) (base * blend)\n' +231 '#define BlendAverage(base, blend) ((base + blend) / 2.0)\n' +232 '#define BlendAdd(base, blend) min(base + blend, vec3(1.0))\n' +233 '#define BlendSubtract(base, blend) max(base + blend - vec3(1.0), vec3(0.0))\n' +234 '#define BlendDifference(base, blend) abs(base - blend)\n' +235 '#define BlendNegation(base, blend) (vec3(1.0) - abs(vec3(1.0) - base - blend))\n' +236 '#define BlendExclusion(base, blend) (base + blend - 2.0 * base * blend)\n' +237 '#define BlendScreen(base, blend) Blend(base, blend, BlendScreenf)\n' +238 '#define BlendOverlay(base, blend) Blend(base, blend, BlendOverlayf)\n' +239 '#define BlendSoftLight(base, blend) Blend(base, blend, BlendSoftLightf)\n' +240 '#define BlendHardLight(base, blend) BlendOverlay(blend, base)\n' +241 '#define BlendColorDodge(base, blend) Blend(base, blend, BlendColorDodgef)\n' +242 '#define BlendColorBurn(base, blend) Blend(base, blend, BlendColorBurnf)\n' +243 '#define BlendLinearDodge BlendAdd\n' +244 '#define BlendLinearBurn BlendSubtract\n' +245 // Linear Light is another contrast-increasing mode246 // If the blend color is darker than midgray, Linear Light darkens the image by decreasing the brightness. If the blend color is lighter than midgray, the result is a brighter image due to increased brightness.247 '#define BlendLinearLight(base, blend) Blend(base, blend, BlendLinearLightf)\n' +248 '#define BlendVividLight(base, blend) Blend(base, blend, BlendVividLightf)\n' +249 '#define BlendPinLight(base, blend) Blend(base, blend, BlendPinLightf)\n' +250 '#define BlendHardMix(base, blend) Blend(base, blend, BlendHardMixf)\n' +251 '#define BlendReflect(base, blend) Blend(base, blend, BlendReflectf)\n' +252 '#define BlendGlow(base, blend) BlendReflect(blend, base)\n' +253 '#define BlendPhoenix(base, blend) (min(base, blend) - max(base, blend) + vec3(1.0))\n' +254 //'#define BlendOpacity(base, blend, F, O) (F(base, blend) * O + blend * (1.0 - O))\n' +255 '#define BlendOpacity(base, blend, BlendFn, Opacity, Alpha) ((BlendFn(base.rgb * blend.a * Opacity, blend.rgb * blend.a * Opacity) + base.rgb * base.a * (1.0 - blend.a * Opacity)) / Alpha)\n' +256 '\n' +257 'varying vec2 vTexCoord;\n' +258 'varying vec4 vPosition;\n' +259 '\n' +260 'uniform sampler2D top;\n' +261 '\n' +262 'uniform sampler2D bottom;\n' +263 '\n' +264 'uniform float opacity;\n' +265 '\n' +266 'void main(void) {\n' +267 ' vec3 color;\n' +268 ' vec4 topPixel = texture2D(top, vTexCoord);\n' +269 ' vec4 bottomPixel = texture2D(bottom, vTexCoord);\n' +270 ' float alpha = topPixel.a + bottomPixel.a * (1.0 - topPixel.a);\n' +271 ' if (alpha == 0.0) {\n' +272 ' color = vec3(0.0);\n' +273 ' } else {\n' +274 ' color = BlendOpacity(bottomPixel, topPixel, BlendFunction, opacity, alpha);\n' +275 ' }\n' +276 ' gl_FragColor = vec4(color, alpha);\n' +277 '}\n';278 return shaderSource;279 },280 draw: function (shader, model, uniforms, frameBuffer, draw) {281 if (nativeBlendModes[this.inputs.mode]) {282 if (this.inputs.bottom) {283 draw(shader, model, bottomUniforms, frameBuffer);284 }285 if (this.inputs.top) {286 draw(shader, model, topUniforms, frameBuffer, null, topOpts);287 }288 } else {289 draw(shader, model, uniforms, frameBuffer);290 }291 },292 inputs: {293 top: {294 type: 'image',295 uniform: 'top',296 update: function () {297 if (topUniforms) {298 topUniforms.source = this.inputs.top;299 topUniforms.transform = this.inputs.top.cumulativeMatrix || identity;300 }301 this.resize();302 }303 },304 bottom: {305 type: 'image',306 uniform: 'bottom',307 update: function () {308 if (bottomUniforms) {309 bottomUniforms.source = this.inputs.bottom;310 bottomUniforms.transform = this.inputs.bottom.cumulativeMatrix || identity;311 }312 this.resize();313 }314 },315 opacity: {316 type: 'number',317 uniform: 'opacity',318 defaultValue: 1,319 min: 0,320 max: 1,321 update: function (opacity) {322 if (topUniforms) {323 topUniforms.opacity = opacity;324 }325 }326 },327 sizeMode: {328 type: 'enum',329 defaultValue: 'bottom',330 options: [331 'bottom',332 'top',333 'union',334 'intersection'335 ],336 update: function () {337 this.resize();338 }339 },340 mode: {341 type: 'enum',342 shaderDirty: true,343 defaultValue: 'normal',344 options: [345 ['normal', 'Normal'],346 ['lighten', 'Lighten'],347 ['darken', 'Darken'],348 ['multiply', 'Multiply'],349 ['average', 'Average'],350 ['add', 'Add'],351 ['substract', 'Substract'],352 ['difference', 'Difference'],353 ['negation', 'Negation'],354 ['exclusion', 'Exclusion'],355 ['screen', 'Screen'],356 ['overlay', 'Overlay'],357 ['softlight', 'Soft Light'],358 ['hardlight', 'Hard Light'],359 ['colordodge', 'Color Dodge'],360 ['colorburn', 'Color Burn'],361 ['lineardodge', 'Linear Dodge'],362 ['linearburn', 'Linear Burn'],363 ['linearlight', 'Linear Light'],364 ['vividlight', 'Vivid Light'],365 ['pinlight', 'Pin Light'],366 ['hardmix', 'Hard Mix'],367 ['reflect', 'Reflect'],368 ['glow', 'Glow'],369 ['phoenix', 'Phoenix']370 ]371 }372 }373 };374 },375 {376 inPlace: function () {377 return !!nativeBlendModes[this.inputs.mode];378 },379 description: 'Blend two layers',380 title: 'Blend'381 });...
SVGFEBlendElement-dom-in2-attr.js
Source:SVGFEBlendElement-dom-in2-attr.js
1// [Name] SVGFEBlendElement-dom-in2-attr.js2// [Expected rendering result] Seven blended rectangles in a gradient - and a series of PASS messages3description("Tests dynamic updates of the 'in' attribute of the SVGFEBlendElement object")4createSVGTestCase();5var backgroundImage = createSVGElement("image");6backgroundImage.setAttribute("x", "35");7backgroundImage.setAttribute("y", "5");8backgroundImage.setAttribute("width", "220");9backgroundImage.setAttribute("height", "171");10backgroundImage.setAttribute("preserveAspectRatio", "none");11backgroundImage.setAttributeNS(xlinkNS, "xlink:href", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAABCAMAAAAfBfuPAAAABGdBTUEAAK/INwWK6QAAABl0RVh0 U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEsUExURfb/AK3/AAD/9/9sAIn/AN7/ABT/ AAB//zD/AP9GAAD/s1H/AAD/H/8AxwD/bn8A/1wA/wD/XJv/AP8Ai//MAGP/ABMA/wD/LP8A6P8K AP8AF/8A9QD/xAAA/wD1/9MA/wD/gABY/wD/Cf8ATJEA//+6AACT/wCn/+v/AAD/TAD/kf8AYKMA //8kAAAk/wAV/y0A/3b/AP80AAD/O/cA//8A/wD///8An/8A2QD/Ev8AAMQA/+0A/7MA////AP8A CuAA//8AJ24A/0sA//8AOAA0/wAK/wBF//8WAAgA/x8A///2AL//AP8AdTwA/wn/AP/bAP+AAP+U AM//AP+nAP8AtADp/wD/o0D/AP/qAADb/wC5/wDL/wD/AAD/7QD/0gD/4CH/AABr//9ZAG2IeB4A AABvSURBVHjaYrCyl3J0Udb2FTYP5bWQkDY1sXGQt7bVUeF3EnD2M/AS85R109dzdVdMYldTj46J CpMzY4pLiJfhCtdS4BPUNBbnsVSK9WdL5IjgFjVkEWL0CWbVYLDzjgwQUQ0JCmRO5jTS9ZAECDAA 3aQTV3E5iioAAAAASUVORK5CYII=");12rootSVGElement.appendChild(backgroundImage);13var normalFlood = createSVGElement("feFlood");14normalFlood.setAttribute("in", "BackgroundAlpha");15normalFlood.setAttribute("flood-color", "#0f0");16normalFlood.setAttribute("flood-opacity", "0.5");17normalFlood.setAttribute("result", "normalImg");18var multiplyFlood = createSVGElement("feFlood");19multiplyFlood.setAttribute("in", "SourceGraphic");20multiplyFlood.setAttribute("flood-color", "#0f0");21multiplyFlood.setAttribute("flood-opacity", "0.5");22multiplyFlood.setAttribute("result", "multiplyImg");23var screenFlood = createSVGElement("feFlood");24screenFlood.setAttribute("in", "SourceGraphic");25screenFlood.setAttribute("flood-color", "#0f0");26screenFlood.setAttribute("flood-opacity", "0.5");27screenFlood.setAttribute("result", "screenImg");28var darkenFlood = createSVGElement("feFlood");29darkenFlood.setAttribute("in", "SourceGraphic");30darkenFlood.setAttribute("flood-color", "#0f0");31darkenFlood.setAttribute("flood-opacity", "0.5");32darkenFlood.setAttribute("result", "darkenImg");33var lightenFlood = createSVGElement("feFlood");34lightenFlood.setAttribute("in", "SourceGraphic");35lightenFlood.setAttribute("flood-color", "#0f0");36lightenFlood.setAttribute("flood-opacity", "0.5");37lightenFlood.setAttribute("result", "lightenImg");38var normalBlend = createSVGElement("feBlend");39normalBlend.setAttribute("in", "SourceGraphic");40normalBlend.setAttribute("in2", "lightenImg");41normalBlend.setAttribute("mode", "normal");42var multiplyBlend = createSVGElement("feBlend");43multiplyBlend.setAttribute("in", "SourceGraphic");44multiplyBlend.setAttribute("in2", "normalImg");45multiplyBlend.setAttribute("mode", "multiply");46var screenBlend = createSVGElement("feBlend");47screenBlend.setAttribute("in", "SourceGraphic");48screenBlend.setAttribute("in2", "multiplyImg");49screenBlend.setAttribute("mode", "screen");50var darkenBlend = createSVGElement("feBlend");51darkenBlend.setAttribute("in", "SourceGraphic");52darkenBlend.setAttribute("in2", "screenImg");53darkenBlend.setAttribute("mode", "darken");54var lightenBlend = createSVGElement("feBlend");55lightenBlend.setAttribute("in", "SourceGraphic");56lightenBlend.setAttribute("in2", "darkenImg");57lightenBlend.setAttribute("mode", "lighten");58var normalBlendFilter = createSVGElement("filter");59normalBlendFilter.setAttribute("id", "normalFilter");60normalBlendFilter.setAttribute("filterUnits", "objectBoundingBox");61normalBlendFilter.setAttribute("x", "0%");62normalBlendFilter.setAttribute("y", "0%");63normalBlendFilter.setAttribute("width", "100%");64normalBlendFilter.setAttribute("height", "100%");65normalBlendFilter.appendChild(normalFlood);66normalBlendFilter.appendChild(normalBlend);67var multiplyBlendFilter = createSVGElement("filter");68multiplyBlendFilter.setAttribute("id", "multiplyFilter");69multiplyBlendFilter.setAttribute("filterUnits", "objectBoundingBox");70multiplyBlendFilter.setAttribute("x", "0%");71multiplyBlendFilter.setAttribute("y", "0%");72multiplyBlendFilter.setAttribute("width", "100%");73multiplyBlendFilter.setAttribute("height", "100%");74multiplyBlendFilter.appendChild(multiplyFlood);75multiplyBlendFilter.appendChild(multiplyBlend);76var screenBlendFilter = createSVGElement("filter");77screenBlendFilter.setAttribute("id", "screenFilter");78screenBlendFilter.setAttribute("filterUnits", "objectBoundingBox");79screenBlendFilter.setAttribute("x", "0%");80screenBlendFilter.setAttribute("y", "0%");81screenBlendFilter.setAttribute("width", "100%");82screenBlendFilter.setAttribute("height", "100%");83screenBlendFilter.appendChild(screenFlood);84screenBlendFilter.appendChild(screenBlend);85var darkenBlendFilter = createSVGElement("filter");86darkenBlendFilter.setAttribute("id", "darkenFilter");87darkenBlendFilter.setAttribute("filterUnits", "objectBoundingBox");88darkenBlendFilter.setAttribute("x", "0%");89darkenBlendFilter.setAttribute("y", "0%");90darkenBlendFilter.setAttribute("width", "100%");91darkenBlendFilter.setAttribute("height", "100%");92darkenBlendFilter.appendChild(darkenFlood);93darkenBlendFilter.appendChild(darkenBlend);94var lightenBlendFilter = createSVGElement("filter");95lightenBlendFilter.setAttribute("id", "lightenFilter");96lightenBlendFilter.setAttribute("filterUnits", "objectBoundingBox");97lightenBlendFilter.setAttribute("x", "0%");98lightenBlendFilter.setAttribute("y", "0%");99lightenBlendFilter.setAttribute("width", "100%");100lightenBlendFilter.setAttribute("height", "100%");101lightenBlendFilter.appendChild(lightenFlood);102lightenBlendFilter.appendChild(lightenBlend);103var defsElement = createSVGElement("defs");104defsElement.appendChild(normalBlendFilter);105defsElement.appendChild(multiplyBlendFilter);106defsElement.appendChild(screenBlendFilter);107defsElement.appendChild(darkenBlendFilter);108defsElement.appendChild(lightenBlendFilter);109rootSVGElement.appendChild(defsElement);110var normalRectElement = createSVGElement("rect");111normalRectElement.setAttribute("x", "25");112normalRectElement.setAttribute("y", "10");113normalRectElement.setAttribute("width", "240");114normalRectElement.setAttribute("height", "20");115normalRectElement.setAttribute("fill", "blue");116normalRectElement.setAttribute("opacity", "0.5");117normalRectElement.setAttribute("filter", "url(#normalFilter)");118rootSVGElement.appendChild(normalRectElement);119var multiplyRectElement = createSVGElement("rect");120multiplyRectElement.setAttribute("x", "25");121multiplyRectElement.setAttribute("y", "33");122multiplyRectElement.setAttribute("width", "240");123multiplyRectElement.setAttribute("height", "20");124multiplyRectElement.setAttribute("fill", "blue");125multiplyRectElement.setAttribute("opacity", "0.5");126multiplyRectElement.setAttribute("filter", "url(#multiplyFilter)");127rootSVGElement.appendChild(multiplyRectElement);128var gElement = createSVGElement("g");129gElement.setAttribute("filter", "url(#multiplyFilter)");130var embeddedMultiplyRectElement1 = createSVGElement("rect");131embeddedMultiplyRectElement1.setAttribute("x", "25");132embeddedMultiplyRectElement1.setAttribute("y", "56");133embeddedMultiplyRectElement1.setAttribute("width", "240");134embeddedMultiplyRectElement1.setAttribute("height", "20");135embeddedMultiplyRectElement1.setAttribute("fill", "blue");136embeddedMultiplyRectElement1.setAttribute("opacity", "0.5");137gElement.appendChild(embeddedMultiplyRectElement1);138var embeddedMultiplyRectElement2 = createSVGElement("rect");139embeddedMultiplyRectElement2.setAttribute("x", "25");140embeddedMultiplyRectElement2.setAttribute("y", "79");141embeddedMultiplyRectElement2.setAttribute("width", "240");142embeddedMultiplyRectElement2.setAttribute("height", "20");143embeddedMultiplyRectElement2.setAttribute("fill", "#ff0");144embeddedMultiplyRectElement2.setAttribute("opacity", "0.5");145gElement.appendChild(embeddedMultiplyRectElement2);146rootSVGElement.appendChild(gElement);147var screenRectElement = createSVGElement("rect");148screenRectElement.setAttribute("x", "25");149screenRectElement.setAttribute("y", "102");150screenRectElement.setAttribute("width", "240");151screenRectElement.setAttribute("height", "20");152screenRectElement.setAttribute("fill", "blue");153screenRectElement.setAttribute("opacity", "0.5");154screenRectElement.setAttribute("filter", "url(#screenFilter)");155rootSVGElement.appendChild(screenRectElement);156var darkenRectElement = createSVGElement("rect");157darkenRectElement.setAttribute("x", "25");158darkenRectElement.setAttribute("y", "125");159darkenRectElement.setAttribute("width", "240");160darkenRectElement.setAttribute("height", "20");161darkenRectElement.setAttribute("fill", "blue");162darkenRectElement.setAttribute("opacity", "0.5");163darkenRectElement.setAttribute("filter", "url(darkenFilter)");164rootSVGElement.appendChild(darkenRectElement);165var lightenRectElement = createSVGElement("rect");166lightenRectElement.setAttribute("x", "25");167lightenRectElement.setAttribute("y", "148");168lightenRectElement.setAttribute("width", "240");169lightenRectElement.setAttribute("height", "20");170lightenRectElement.setAttribute("fill", "blue");171lightenRectElement.setAttribute("opacity", "0.5");172lightenRectElement.setAttribute("filter", "url(#lightenFilter)");173rootSVGElement.appendChild(lightenRectElement);174rootSVGElement.setAttribute("fill", "#333");175rootSVGElement.setAttribute("font-size", "14");176rootSVGElement.setAttribute("width", "350");177rootSVGElement.setAttribute("height", "250");178shouldBeEqualToString("normalBlend.getAttribute('in2')", "lightenImg");179shouldBeEqualToString("multiplyBlend.getAttribute('in2')", "normalImg");180shouldBeEqualToString("screenBlend.getAttribute('in2')", "multiplyImg");181shouldBeEqualToString("darkenBlend.getAttribute('in2')", "screenImg");182shouldBeEqualToString("lightenBlend.getAttribute('in2')", "darkenImg");183function repaintTest() {184 normalBlend.setAttribute("in2", "normalImg");185 multiplyBlend.setAttribute("in2", "multiplyImg");186 screenBlend.setAttribute("in2", "screenImg");187 darkenBlend.setAttribute("in2", "darkenImg");188 lightenBlend.setAttribute("in2", "lightenImg");189 shouldBeEqualToString("normalBlend.getAttribute('in2')", "normalImg");190 shouldBeEqualToString("multiplyBlend.getAttribute('in2')", "multiplyImg");191 shouldBeEqualToString("screenBlend.getAttribute('in2')", "screenImg");192 shouldBeEqualToString("darkenBlend.getAttribute('in2')", "darkenImg");193 shouldBeEqualToString("lightenBlend.getAttribute('in2')", "lightenImg");194 completeTest();195}...
SVGFEBlendElement-dom-mode-attr.js
Source:SVGFEBlendElement-dom-mode-attr.js
1// [Name] SVGFEBlendElement-dom-mode-attr.js2// [Expected rendering result] Seven blended rectangles in a gradient - and a series of PASS messages3description("Tests dynamic updates of the 'mode' attribute of the SVGFEBlendElement object")4createSVGTestCase();5var backgroundImage = createSVGElement("image");6backgroundImage.setAttribute("x", "35");7backgroundImage.setAttribute("y", "5");8backgroundImage.setAttribute("width", "220");9backgroundImage.setAttribute("height", "171");10backgroundImage.setAttribute("preserveAspectRatio", "none");11backgroundImage.setAttributeNS(xlinkNS, "xlink:href", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAABCAMAAAAfBfuPAAAABGdBTUEAAK/INwWK6QAAABl0RVh0 U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEsUExURfb/AK3/AAD/9/9sAIn/AN7/ABT/ AAB//zD/AP9GAAD/s1H/AAD/H/8AxwD/bn8A/1wA/wD/XJv/AP8Ai//MAGP/ABMA/wD/LP8A6P8K AP8AF/8A9QD/xAAA/wD1/9MA/wD/gABY/wD/Cf8ATJEA//+6AACT/wCn/+v/AAD/TAD/kf8AYKMA //8kAAAk/wAV/y0A/3b/AP80AAD/O/cA//8A/wD///8An/8A2QD/Ev8AAMQA/+0A/7MA////AP8A CuAA//8AJ24A/0sA//8AOAA0/wAK/wBF//8WAAgA/x8A///2AL//AP8AdTwA/wn/AP/bAP+AAP+U AM//AP+nAP8AtADp/wD/o0D/AP/qAADb/wC5/wDL/wD/AAD/7QD/0gD/4CH/AABr//9ZAG2IeB4A AABvSURBVHjaYrCyl3J0Udb2FTYP5bWQkDY1sXGQt7bVUeF3EnD2M/AS85R109dzdVdMYldTj46J CpMzY4pLiJfhCtdS4BPUNBbnsVSK9WdL5IjgFjVkEWL0CWbVYLDzjgwQUQ0JCmRO5jTS9ZAECDAA 3aQTV3E5iioAAAAASUVORK5CYII=");12rootSVGElement.appendChild(backgroundImage);13var normalFlood = createSVGElement("feFlood");14normalFlood.setAttribute("in", "BackgroundAlpha");15normalFlood.setAttribute("flood-color", "#0f0");16normalFlood.setAttribute("flood-opacity", "0.5");17normalFlood.setAttribute("result", "normalImg");18var multiplyFlood = createSVGElement("feFlood");19multiplyFlood.setAttribute("in", "SourceGraphic");20multiplyFlood.setAttribute("flood-color", "#0f0");21multiplyFlood.setAttribute("flood-opacity", "0.5");22multiplyFlood.setAttribute("result", "multiplyImg");23var screenFlood = createSVGElement("feFlood");24screenFlood.setAttribute("in", "SourceGraphic");25screenFlood.setAttribute("flood-color", "#0f0");26screenFlood.setAttribute("flood-opacity", "0.5");27screenFlood.setAttribute("result", "screenImg");28var darkenFlood = createSVGElement("feFlood");29darkenFlood.setAttribute("in", "SourceGraphic");30darkenFlood.setAttribute("flood-color", "#0f0");31darkenFlood.setAttribute("flood-opacity", "0.5");32darkenFlood.setAttribute("result", "darkenImg");33var lightenFlood = createSVGElement("feFlood");34lightenFlood.setAttribute("in", "SourceGraphic");35lightenFlood.setAttribute("flood-color", "#0f0");36lightenFlood.setAttribute("flood-opacity", "0.5");37lightenFlood.setAttribute("result", "lightenImg");38var normalBlend = createSVGElement("feBlend");39normalBlend.setAttribute("in", "SourceGraphic");40normalBlend.setAttribute("in2", "normalImg");41normalBlend.setAttribute("mode", "lighten");42var multiplyBlend = createSVGElement("feBlend");43multiplyBlend.setAttribute("in", "SourceGraphic");44multiplyBlend.setAttribute("in2", "multiplyImg");45multiplyBlend.setAttribute("mode", "normal");46var screenBlend = createSVGElement("feBlend");47screenBlend.setAttribute("in", "SourceGraphic");48screenBlend.setAttribute("in2", "screenImg");49screenBlend.setAttribute("mode", "multiply");50var darkenBlend = createSVGElement("feBlend");51darkenBlend.setAttribute("in", "SourceGraphic");52darkenBlend.setAttribute("in2", "darkenImg");53darkenBlend.setAttribute("mode", "screen");54var lightenBlend = createSVGElement("feBlend");55lightenBlend.setAttribute("in", "SourceGraphic");56lightenBlend.setAttribute("in2", "lightenImg");57lightenBlend.setAttribute("mode", "darken");58var normalBlendFilter = createSVGElement("filter");59normalBlendFilter.setAttribute("id", "normalFilter");60normalBlendFilter.setAttribute("filterUnits", "objectBoundingBox");61normalBlendFilter.setAttribute("x", "0%");62normalBlendFilter.setAttribute("y", "0%");63normalBlendFilter.setAttribute("width", "100%");64normalBlendFilter.setAttribute("height", "100%");65normalBlendFilter.appendChild(normalFlood);66normalBlendFilter.appendChild(normalBlend);67var multiplyBlendFilter = createSVGElement("filter");68multiplyBlendFilter.setAttribute("id", "multiplyFilter");69multiplyBlendFilter.setAttribute("filterUnits", "objectBoundingBox");70multiplyBlendFilter.setAttribute("x", "0%");71multiplyBlendFilter.setAttribute("y", "0%");72multiplyBlendFilter.setAttribute("width", "100%");73multiplyBlendFilter.setAttribute("height", "100%");74multiplyBlendFilter.appendChild(multiplyFlood);75multiplyBlendFilter.appendChild(multiplyBlend);76var screenBlendFilter = createSVGElement("filter");77screenBlendFilter.setAttribute("id", "screenFilter");78screenBlendFilter.setAttribute("filterUnits", "objectBoundingBox");79screenBlendFilter.setAttribute("x", "0%");80screenBlendFilter.setAttribute("y", "0%");81screenBlendFilter.setAttribute("width", "100%");82screenBlendFilter.setAttribute("height", "100%");83screenBlendFilter.appendChild(screenFlood);84screenBlendFilter.appendChild(screenBlend);85var darkenBlendFilter = createSVGElement("filter");86darkenBlendFilter.setAttribute("id", "darkenFilter");87darkenBlendFilter.setAttribute("filterUnits", "objectBoundingBox");88darkenBlendFilter.setAttribute("x", "0%");89darkenBlendFilter.setAttribute("y", "0%");90darkenBlendFilter.setAttribute("width", "100%");91darkenBlendFilter.setAttribute("height", "100%");92darkenBlendFilter.appendChild(darkenFlood);93darkenBlendFilter.appendChild(darkenBlend);94var lightenBlendFilter = createSVGElement("filter");95lightenBlendFilter.setAttribute("id", "lightenFilter");96lightenBlendFilter.setAttribute("filterUnits", "objectBoundingBox");97lightenBlendFilter.setAttribute("x", "0%");98lightenBlendFilter.setAttribute("y", "0%");99lightenBlendFilter.setAttribute("width", "100%");100lightenBlendFilter.setAttribute("height", "100%");101lightenBlendFilter.appendChild(lightenFlood);102lightenBlendFilter.appendChild(lightenBlend);103var defsElement = createSVGElement("defs");104defsElement.appendChild(normalBlendFilter);105defsElement.appendChild(multiplyBlendFilter);106defsElement.appendChild(screenBlendFilter);107defsElement.appendChild(darkenBlendFilter);108defsElement.appendChild(lightenBlendFilter);109rootSVGElement.appendChild(defsElement);110var normalRectElement = createSVGElement("rect");111normalRectElement.setAttribute("x", "25");112normalRectElement.setAttribute("y", "10");113normalRectElement.setAttribute("width", "240");114normalRectElement.setAttribute("height", "20");115normalRectElement.setAttribute("fill", "blue");116normalRectElement.setAttribute("opacity", "0.5");117normalRectElement.setAttribute("filter", "url(#normalFilter)");118rootSVGElement.appendChild(normalRectElement);119var multiplyRectElement = createSVGElement("rect");120multiplyRectElement.setAttribute("x", "25");121multiplyRectElement.setAttribute("y", "33");122multiplyRectElement.setAttribute("width", "240");123multiplyRectElement.setAttribute("height", "20");124multiplyRectElement.setAttribute("fill", "blue");125multiplyRectElement.setAttribute("opacity", "0.5");126multiplyRectElement.setAttribute("filter", "url(#multiplyFilter)");127rootSVGElement.appendChild(multiplyRectElement);128var gElement = createSVGElement("g");129gElement.setAttribute("filter", "url(#multiplyFilter)");130var embeddedMultiplyRectElement1 = createSVGElement("rect");131embeddedMultiplyRectElement1.setAttribute("x", "25");132embeddedMultiplyRectElement1.setAttribute("y", "56");133embeddedMultiplyRectElement1.setAttribute("width", "240");134embeddedMultiplyRectElement1.setAttribute("height", "20");135embeddedMultiplyRectElement1.setAttribute("fill", "blue");136embeddedMultiplyRectElement1.setAttribute("opacity", "0.5");137gElement.appendChild(embeddedMultiplyRectElement1);138var embeddedMultiplyRectElement2 = createSVGElement("rect");139embeddedMultiplyRectElement2.setAttribute("x", "25");140embeddedMultiplyRectElement2.setAttribute("y", "79");141embeddedMultiplyRectElement2.setAttribute("width", "240");142embeddedMultiplyRectElement2.setAttribute("height", "20");143embeddedMultiplyRectElement2.setAttribute("fill", "#ff0");144embeddedMultiplyRectElement2.setAttribute("opacity", "0.5");145gElement.appendChild(embeddedMultiplyRectElement2);146rootSVGElement.appendChild(gElement);147var screenRectElement = createSVGElement("rect");148screenRectElement.setAttribute("x", "25");149screenRectElement.setAttribute("y", "102");150screenRectElement.setAttribute("width", "240");151screenRectElement.setAttribute("height", "20");152screenRectElement.setAttribute("fill", "blue");153screenRectElement.setAttribute("opacity", "0.5");154screenRectElement.setAttribute("filter", "url(#screenFilter)");155rootSVGElement.appendChild(screenRectElement);156var darkenRectElement = createSVGElement("rect");157darkenRectElement.setAttribute("x", "25");158darkenRectElement.setAttribute("y", "125");159darkenRectElement.setAttribute("width", "240");160darkenRectElement.setAttribute("height", "20");161darkenRectElement.setAttribute("fill", "blue");162darkenRectElement.setAttribute("opacity", "0.5");163darkenRectElement.setAttribute("filter", "url(#darkenFilter)");164rootSVGElement.appendChild(darkenRectElement);165var lightenRectElement = createSVGElement("rect");166lightenRectElement.setAttribute("x", "25");167lightenRectElement.setAttribute("y", "148");168lightenRectElement.setAttribute("width", "240");169lightenRectElement.setAttribute("height", "20");170lightenRectElement.setAttribute("fill", "blue");171lightenRectElement.setAttribute("opacity", "0.5");172lightenRectElement.setAttribute("filter", "url(#lightenFilter)");173rootSVGElement.appendChild(lightenRectElement);174rootSVGElement.setAttribute("fill", "#333");175rootSVGElement.setAttribute("font-size", "14");176rootSVGElement.setAttribute("width", "350");177rootSVGElement.setAttribute("height", "250");178shouldBeEqualToString("normalBlend.getAttribute('mode')", "lighten");179shouldBeEqualToString("multiplyBlend.getAttribute('mode')", "normal");180shouldBeEqualToString("screenBlend.getAttribute('mode')", "multiply");181shouldBeEqualToString("darkenBlend.getAttribute('mode')", "screen");182shouldBeEqualToString("lightenBlend.getAttribute('mode')", "darken");183function repaintTest() {184 normalBlend.setAttribute("mode", "normal");185 multiplyBlend.setAttribute("mode", "multiply");186 screenBlend.setAttribute("mode", "screen");187 darkenBlend.setAttribute("mode", "darken");188 lightenBlend.setAttribute("mode", "lighten");189 shouldBeEqualToString("normalBlend.getAttribute('mode')", "normal");190 shouldBeEqualToString("multiplyBlend.getAttribute('mode')", "multiply");191 shouldBeEqualToString("screenBlend.getAttribute('mode')", "screen");192 shouldBeEqualToString("darkenBlend.getAttribute('mode')", "darken");193 shouldBeEqualToString("lightenBlend.getAttribute('mode')", "lighten");194 completeTest();195}...
SVGFEBlendElement-svgdom-in-prop.js
Source:SVGFEBlendElement-svgdom-in-prop.js
1// [Name] SVGFEBlendElement-svgdom-in-prop.js2// [Expected rendering result] Seven blended rectangles in a gradient - and a series of PASS messages3description("Tests dynamic updates of the 'in' property of the SVGFEBlendElement object")4createSVGTestCase();5var backgroundImage = createSVGElement("image");6backgroundImage.setAttribute("x", "35");7backgroundImage.setAttribute("y", "5");8backgroundImage.setAttribute("width", "220");9backgroundImage.setAttribute("height", "171");10backgroundImage.setAttribute("preserveAspectRatio", "none");11backgroundImage.setAttributeNS(xlinkNS, "xlink:href", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAABCAMAAAAfBfuPAAAABGdBTUEAAK/INwWK6QAAABl0RVh0 U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEsUExURfb/AK3/AAD/9/9sAIn/AN7/ABT/ AAB//zD/AP9GAAD/s1H/AAD/H/8AxwD/bn8A/1wA/wD/XJv/AP8Ai//MAGP/ABMA/wD/LP8A6P8K AP8AF/8A9QD/xAAA/wD1/9MA/wD/gABY/wD/Cf8ATJEA//+6AACT/wCn/+v/AAD/TAD/kf8AYKMA //8kAAAk/wAV/y0A/3b/AP80AAD/O/cA//8A/wD///8An/8A2QD/Ev8AAMQA/+0A/7MA////AP8A CuAA//8AJ24A/0sA//8AOAA0/wAK/wBF//8WAAgA/x8A///2AL//AP8AdTwA/wn/AP/bAP+AAP+U AM//AP+nAP8AtADp/wD/o0D/AP/qAADb/wC5/wDL/wD/AAD/7QD/0gD/4CH/AABr//9ZAG2IeB4A AABvSURBVHjaYrCyl3J0Udb2FTYP5bWQkDY1sXGQt7bVUeF3EnD2M/AS85R109dzdVdMYldTj46J CpMzY4pLiJfhCtdS4BPUNBbnsVSK9WdL5IjgFjVkEWL0CWbVYLDzjgwQUQ0JCmRO5jTS9ZAECDAA 3aQTV3E5iioAAAAASUVORK5CYII=");12rootSVGElement.appendChild(backgroundImage);13var normalFlood = createSVGElement("feFlood");14normalFlood.setAttribute("in", "BackgroundAlpha");15normalFlood.setAttribute("flood-color", "#0f0");16normalFlood.setAttribute("flood-opacity", "0.5");17normalFlood.setAttribute("result", "normalImg");18var multiplyFlood = createSVGElement("feFlood");19multiplyFlood.setAttribute("in", "SourceGraphic");20multiplyFlood.setAttribute("flood-color", "#0f0");21multiplyFlood.setAttribute("flood-opacity", "0.5");22multiplyFlood.setAttribute("result", "multiplyImg");23var screenFlood = createSVGElement("feFlood");24screenFlood.setAttribute("in", "SourceGraphic");25screenFlood.setAttribute("flood-color", "#0f0");26screenFlood.setAttribute("flood-opacity", "0.5");27screenFlood.setAttribute("result", "screenImg");28var darkenFlood = createSVGElement("feFlood");29darkenFlood.setAttribute("in", "SourceGraphic");30darkenFlood.setAttribute("flood-color", "#0f0");31darkenFlood.setAttribute("flood-opacity", "0.5");32darkenFlood.setAttribute("result", "darkenImg");33var lightenFlood = createSVGElement("feFlood");34lightenFlood.setAttribute("in", "SourceGraphic");35lightenFlood.setAttribute("flood-color", "#0f0");36lightenFlood.setAttribute("flood-opacity", "0.5");37lightenFlood.setAttribute("result", "lightenImg");38var normalBlend = createSVGElement("feBlend");39normalBlend.setAttribute("in", "SourceAlpha");40normalBlend.setAttribute("in2", "normalImg");41normalBlend.setAttribute("mode", "normal");42var multiplyBlend = createSVGElement("feBlend");43multiplyBlend.setAttribute("in", "SourceAlpha");44multiplyBlend.setAttribute("in2", "multiplyImg");45multiplyBlend.setAttribute("mode", "multiply");46var screenBlend = createSVGElement("feBlend");47screenBlend.setAttribute("in", "SourceAlpha");48screenBlend.setAttribute("in2", "screenImg");49screenBlend.setAttribute("mode", "screen");50var darkenBlend = createSVGElement("feBlend");51darkenBlend.setAttribute("in", "SourceAlpha");52darkenBlend.setAttribute("in2", "darkenImg");53darkenBlend.setAttribute("mode", "darken");54var lightenBlend = createSVGElement("feBlend");55lightenBlend.setAttribute("in", "SourceAlpha");56lightenBlend.setAttribute("in2", "lightenImg");57lightenBlend.setAttribute("mode", "lighten");58var normalBlendFilter = createSVGElement("filter");59normalBlendFilter.setAttribute("id", "normalFilter");60normalBlendFilter.setAttribute("filterUnits", "objectBoundingBox");61normalBlendFilter.setAttribute("x", "0%");62normalBlendFilter.setAttribute("y", "0%");63normalBlendFilter.setAttribute("width", "100%");64normalBlendFilter.setAttribute("height", "100%");65normalBlendFilter.appendChild(normalFlood);66normalBlendFilter.appendChild(normalBlend);67var multiplyBlendFilter = createSVGElement("filter");68multiplyBlendFilter.setAttribute("id", "multiplyFilter");69multiplyBlendFilter.setAttribute("filterUnits", "objectBoundingBox");70multiplyBlendFilter.setAttribute("x", "0%");71multiplyBlendFilter.setAttribute("y", "0%");72multiplyBlendFilter.setAttribute("width", "100%");73multiplyBlendFilter.setAttribute("height", "100%");74multiplyBlendFilter.appendChild(multiplyFlood);75multiplyBlendFilter.appendChild(multiplyBlend);76var screenBlendFilter = createSVGElement("filter");77screenBlendFilter.setAttribute("id", "screenFilter");78screenBlendFilter.setAttribute("filterUnits", "objectBoundingBox");79screenBlendFilter.setAttribute("x", "0%");80screenBlendFilter.setAttribute("y", "0%");81screenBlendFilter.setAttribute("width", "100%");82screenBlendFilter.setAttribute("height", "100%");83screenBlendFilter.appendChild(screenFlood);84screenBlendFilter.appendChild(screenBlend);85var darkenBlendFilter = createSVGElement("filter");86darkenBlendFilter.setAttribute("id", "darkenFilter");87darkenBlendFilter.setAttribute("filterUnits", "objectBoundingBox");88darkenBlendFilter.setAttribute("x", "0%");89darkenBlendFilter.setAttribute("y", "0%");90darkenBlendFilter.setAttribute("width", "100%");91darkenBlendFilter.setAttribute("height", "100%");92darkenBlendFilter.appendChild(darkenFlood);93darkenBlendFilter.appendChild(darkenBlend);94var lightenBlendFilter = createSVGElement("filter");95lightenBlendFilter.setAttribute("id", "lightenFilter");96lightenBlendFilter.setAttribute("filterUnits", "objectBoundingBox");97lightenBlendFilter.setAttribute("x", "0%");98lightenBlendFilter.setAttribute("y", "0%");99lightenBlendFilter.setAttribute("width", "100%");100lightenBlendFilter.setAttribute("height", "100%");101lightenBlendFilter.appendChild(lightenFlood);102lightenBlendFilter.appendChild(lightenBlend);103var defsElement = createSVGElement("defs");104defsElement.appendChild(normalBlendFilter);105defsElement.appendChild(multiplyBlendFilter);106defsElement.appendChild(screenBlendFilter);107defsElement.appendChild(darkenBlendFilter);108defsElement.appendChild(lightenBlendFilter);109rootSVGElement.appendChild(defsElement);110var normalRectElement = createSVGElement("rect");111normalRectElement.setAttribute("x", "25");112normalRectElement.setAttribute("y", "10");113normalRectElement.setAttribute("width", "240");114normalRectElement.setAttribute("height", "20");115normalRectElement.setAttribute("fill", "blue");116normalRectElement.setAttribute("opacity", "0.5");117normalRectElement.setAttribute("filter", "url(#normalFilter)");118rootSVGElement.appendChild(normalRectElement);119var multiplyRectElement = createSVGElement("rect");120multiplyRectElement.setAttribute("x", "25");121multiplyRectElement.setAttribute("y", "33");122multiplyRectElement.setAttribute("width", "240");123multiplyRectElement.setAttribute("height", "20");124multiplyRectElement.setAttribute("fill", "blue");125multiplyRectElement.setAttribute("opacity", "0.5");126multiplyRectElement.setAttribute("filter", "url(#multiplyFilter)");127rootSVGElement.appendChild(multiplyRectElement);128var gElement = createSVGElement("g");129gElement.setAttribute("filter", "url(#multiplyFilter)");130var embeddedMultiplyRectElement1 = createSVGElement("rect");131embeddedMultiplyRectElement1.setAttribute("x", "25");132embeddedMultiplyRectElement1.setAttribute("y", "56");133embeddedMultiplyRectElement1.setAttribute("width", "240");134embeddedMultiplyRectElement1.setAttribute("height", "20");135embeddedMultiplyRectElement1.setAttribute("fill", "blue");136embeddedMultiplyRectElement1.setAttribute("opacity", "0.5");137gElement.appendChild(embeddedMultiplyRectElement1);138var embeddedMultiplyRectElement2 = createSVGElement("rect");139embeddedMultiplyRectElement2.setAttribute("x", "25");140embeddedMultiplyRectElement2.setAttribute("y", "79");141embeddedMultiplyRectElement2.setAttribute("width", "240");142embeddedMultiplyRectElement2.setAttribute("height", "20");143embeddedMultiplyRectElement2.setAttribute("fill", "#ff0");144embeddedMultiplyRectElement2.setAttribute("opacity", "0.5");145gElement.appendChild(embeddedMultiplyRectElement2);146rootSVGElement.appendChild(gElement);147var screenRectElement = createSVGElement("rect");148screenRectElement.setAttribute("x", "25");149screenRectElement.setAttribute("y", "102");150screenRectElement.setAttribute("width", "240");151screenRectElement.setAttribute("height", "20");152screenRectElement.setAttribute("fill", "blue");153screenRectElement.setAttribute("opacity", "0.5");154screenRectElement.setAttribute("filter", "url(#screenFilter)");155rootSVGElement.appendChild(screenRectElement);156var darkenRectElement = createSVGElement("rect");157darkenRectElement.setAttribute("x", "25");158darkenRectElement.setAttribute("y", "125");159darkenRectElement.setAttribute("width", "240");160darkenRectElement.setAttribute("height", "20");161darkenRectElement.setAttribute("fill", "blue");162darkenRectElement.setAttribute("opacity", "0.5");163darkenRectElement.setAttribute("filter", "url(#darkenFilter)");164rootSVGElement.appendChild(darkenRectElement);165var lightenRectElement = createSVGElement("rect");166lightenRectElement.setAttribute("x", "25");167lightenRectElement.setAttribute("y", "148");168lightenRectElement.setAttribute("width", "240");169lightenRectElement.setAttribute("height", "20");170lightenRectElement.setAttribute("fill", "blue");171lightenRectElement.setAttribute("opacity", "0.5");172lightenRectElement.setAttribute("filter", "url(#lightenFilter)");173rootSVGElement.appendChild(lightenRectElement);174rootSVGElement.setAttribute("fill", "#333");175rootSVGElement.setAttribute("font-size", "14");176rootSVGElement.setAttribute("width", "350");177rootSVGElement.setAttribute("height", "250");178shouldBeEqualToString("normalBlend.in1.baseVal", "SourceAlpha");179shouldBeEqualToString("multiplyBlend.in1.baseVal", "SourceAlpha");180shouldBeEqualToString("screenBlend.in1.baseVal", "SourceAlpha");181shouldBeEqualToString("darkenBlend.in1.baseVal", "SourceAlpha");182shouldBeEqualToString("lightenBlend.in1.baseVal", "SourceAlpha");183function repaintTest() {184 normalBlend.in1.baseVal = "SourceGraphic";185 multiplyBlend.in1.baseVal = "SourceGraphic";186 screenBlend.in1.baseVal = "SourceGraphic";187 darkenBlend.in1.baseVal = "SourceGraphic";188 lightenBlend.in1.baseVal = "SourceGraphic";189 shouldBeEqualToString("normalBlend.in1.baseVal", "SourceGraphic");190 shouldBeEqualToString("multiplyBlend.in1.baseVal", "SourceGraphic");191 shouldBeEqualToString("screenBlend.in1.baseVal", "SourceGraphic");192 shouldBeEqualToString("darkenBlend.in1.baseVal", "SourceGraphic");193 shouldBeEqualToString("lightenBlend.in1.baseVal", "SourceGraphic");194 completeTest();195}...
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run prospector automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
