Test your AI Agents with the all-new Agent to Agent Testing Platform.Learn More

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.