How to use blend method in Playwright Internal

Best JavaScript code snippet using playwright-internal

seriously.blend.js

Source:seriously.blend.js Github

copy

Full Screen

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 });...

Full Screen

Full Screen

SVGFEBlendElement-dom-in2-attr.js

Source:SVGFEBlendElement-dom-in2-attr.js Github

copy

Full Screen

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}...

Full Screen

Full Screen

SVGFEBlendElement-dom-mode-attr.js

Source:SVGFEBlendElement-dom-mode-attr.js Github

copy

Full Screen

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}...

Full Screen

Full Screen

SVGFEBlendElement-svgdom-in-prop.js

Source:SVGFEBlendElement-svgdom-in-prop.js Github

copy

Full Screen

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}...

Full Screen

Full Screen

SVGFEBlendElement-svgdom-in2-prop.js

Source:SVGFEBlendElement-svgdom-in2-prop.js Github

copy

Full Screen

1// [Name] SVGFEBlendElement-svgdom-in2-prop.js2// [Expected rendering result] Seven blended rectangles in a gradient - and a series of PASS messages3description("Tests dynamic updates of the 'in2' 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", "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.in2.baseVal", "lightenImg");179shouldBeEqualToString("multiplyBlend.in2.baseVal", "normalImg");180shouldBeEqualToString("screenBlend.in2.baseVal", "multiplyImg");181shouldBeEqualToString("darkenBlend.in2.baseVal", "screenImg");182shouldBeEqualToString("lightenBlend.in2.baseVal", "darkenImg");183function repaintTest() {184 normalBlend.in2.baseVal = "normalImg";185 multiplyBlend.in2.baseVal = "multiplyImg";186 screenBlend.in2.baseVal = "screenImg";187 darkenBlend.in2.baseVal = "darkenImg";188 lightenBlend.in2.baseVal = "lightenImg";189 shouldBeEqualToString("normalBlend.in2.baseVal", "normalImg");190 shouldBeEqualToString("multiplyBlend.in2.baseVal", "multiplyImg");191 shouldBeEqualToString("screenBlend.in2.baseVal", "screenImg");192 shouldBeEqualToString("darkenBlend.in2.baseVal", "darkenImg");193 shouldBeEqualToString("lightenBlend.in2.baseVal", "lightenImg");194 completeTest();195}...

Full Screen

Full Screen

WebGLState.js

Source:WebGLState.js Github

copy

Full Screen

1/**2* @author mrdoob / http://mrdoob.com/3*/4THREE.WebGLState = function ( gl, paramThreeToGL ) {5 var newAttributes = new Uint8Array( 16 );6 var enabledAttributes = new Uint8Array( 16 );7 var currentBlending = null;8 var currentBlendEquation = null;9 var currentBlendSrc = null;10 var currentBlendDst = null;11 var currentBlendEquationAlpha = null;12 var currentBlendSrcAlpha = null;13 var currentBlendDstAlpha = null;14 var currentDepthTest = null;15 var currentDepthWrite = null;16 var currentColorWrite = null;17 var currentDoubleSided = null;18 var currentFlipSided = null;19 var currentLineWidth = null;20 var currentPolygonOffset = null;21 var currentPolygonOffsetFactor = null;22 var currentPolygonOffsetUnits = null;23 this.initAttributes = function () {24 for ( var i = 0, l = newAttributes.length; i < l; i ++ ) {25 newAttributes[ i ] = 0;26 }27 };28 this.enableAttribute = function ( attribute ) {29 newAttributes[ attribute ] = 1;30 if ( enabledAttributes[ attribute ] === 0 ) {31 gl.enableVertexAttribArray( attribute );32 enabledAttributes[ attribute ] = 1;33 }34 };35 this.disableUnusedAttributes = function () {36 for ( var i = 0, l = enabledAttributes.length; i < l; i ++ ) {37 if ( enabledAttributes[ i ] !== newAttributes[ i ] ) {38 gl.disableVertexAttribArray( i );39 enabledAttributes[ i ] = 0;40 }41 }42 };43 this.setBlending = function ( blending, blendEquation, blendSrc, blendDst, blendEquationAlpha, blendSrcAlpha, blendDstAlpha ) {44 if ( blending !== currentBlending ) {45 if ( blending === THREE.NoBlending ) {46 gl.disable( gl.BLEND );47 } else if ( blending === THREE.AdditiveBlending ) {48 gl.enable( gl.BLEND );49 gl.blendEquation( gl.FUNC_ADD );50 gl.blendFunc( gl.SRC_ALPHA, gl.ONE );51 } else if ( blending === THREE.SubtractiveBlending ) {52 // TODO: Find blendFuncSeparate() combination53 gl.enable( gl.BLEND );54 gl.blendEquation( gl.FUNC_ADD );55 gl.blendFunc( gl.ZERO, gl.ONE_MINUS_SRC_COLOR );56 } else if ( blending === THREE.MultiplyBlending ) {57 // TODO: Find blendFuncSeparate() combination58 gl.enable( gl.BLEND );59 gl.blendEquation( gl.FUNC_ADD );60 gl.blendFunc( gl.ZERO, gl.SRC_COLOR );61 } else if ( blending === THREE.CustomBlending ) {62 gl.enable( gl.BLEND );63 } else {64 gl.enable( gl.BLEND );65 gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );66 gl.blendFuncSeparate( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA );67 }68 currentBlending = blending;69 }70 if ( blending === THREE.CustomBlending ) {71 blendEquationAlpha = blendEquationAlpha || blendEquation;72 blendSrcAlpha = blendSrcAlpha || blendSrc;73 blendDstAlpha = blendDstAlpha || blendDst;74 if ( blendEquation !== currentBlendEquation || blendEquationAlpha !== currentBlendEquationAlpha ) {75 gl.blendEquationSeparate( paramThreeToGL( blendEquation ), paramThreeToGL( blendEquationAlpha ) );76 currentBlendEquation = blendEquation;77 currentBlendEquationAlpha = blendEquationAlpha;78 }79 if ( blendSrc !== currentBlendSrc || blendDst !== currentBlendDst || blendSrcAlpha !== currentBlendSrcAlpha || blendDstAlpha !== currentBlendDstAlpha ) {80 gl.blendFuncSeparate( paramThreeToGL( blendSrc ), paramThreeToGL( blendDst ), paramThreeToGL( blendSrcAlpha ), paramThreeToGL( blendDstAlpha ) );81 currentBlendSrc = blendSrc;82 currentBlendDst = blendDst;83 currentBlendSrcAlpha = blendSrcAlpha;84 currentBlendDstAlpha = blendDstAlpha;85 }86 } else {87 currentBlendEquation = null;88 currentBlendSrc = null;89 currentBlendDst = null;90 currentBlendEquationAlpha = null;91 currentBlendSrcAlpha = null;92 currentBlendDstAlpha = null;93 }94 };95 this.setDepthTest = function ( depthTest ) {96 if ( currentDepthTest !== depthTest ) {97 if ( depthTest ) {98 gl.enable( gl.DEPTH_TEST );99 } else {100 gl.disable( gl.DEPTH_TEST );101 }102 currentDepthTest = depthTest;103 }104 };105 this.setDepthWrite = function ( depthWrite ) {106 if ( currentDepthWrite !== depthWrite ) {107 gl.depthMask( depthWrite );108 currentDepthWrite = depthWrite;109 }110 };111 this.setColorWrite = function ( colorWrite ) {112 if ( currentColorWrite !== colorWrite ) {113 gl.colorMask( colorWrite, colorWrite, colorWrite, colorWrite );114 currentColorWrite = colorWrite;115 }116 };117 this.setDoubleSided = function ( doubleSided ) {118 if ( currentDoubleSided !== doubleSided ) {119 if ( doubleSided ) {120 gl.disable( gl.CULL_FACE );121 } else {122 gl.enable( gl.CULL_FACE );123 }124 currentDoubleSided = doubleSided;125 }126 };127 this.setFlipSided = function ( flipSided ) {128 if ( currentFlipSided !== flipSided ) {129 if ( flipSided ) {130 gl.frontFace( gl.CW );131 } else {132 gl.frontFace( gl.CCW );133 }134 currentFlipSided = flipSided;135 }136 };137 this.setLineWidth = function ( width ) {138 if ( width !== currentLineWidth ) {139 gl.lineWidth( width );140 currentLineWidth = width;141 }142 };143 this.setPolygonOffset = function ( polygonoffset, factor, units ) {144 if ( currentPolygonOffset !== polygonoffset ) {145 if ( polygonoffset ) {146 gl.enable( gl.POLYGON_OFFSET_FILL );147 } else {148 gl.disable( gl.POLYGON_OFFSET_FILL );149 }150 currentPolygonOffset = polygonoffset;151 }152 if ( polygonoffset && ( currentPolygonOffsetFactor !== factor || currentPolygonOffsetUnits !== units ) ) {153 gl.polygonOffset( factor, units );154 currentPolygonOffsetFactor = factor;155 currentPolygonOffsetUnits = units;156 }157 };158 this.reset = function () {159 for ( var i = 0; i < enabledAttributes.length; i ++ ) {160 enabledAttributes[ i ] = 0;161 }162 currentBlending = null;163 currentDepthTest = null;164 currentDepthWrite = null;165 currentColorWrite = null;166 currentDoubleSided = null;167 currentFlipSided = null;168 };...

Full Screen

Full Screen

alphaCullingState.js

Source:alphaCullingState.js Github

copy

Full Screen

1/**2 * @hidden3 **/4class AlphaState {5 /**6 * Initializes the state.7 */8 constructor() {9 this._blendFunctionParameters = new Array(4);10 this._blendEquationParameters = new Array(2);11 this._blendConstants = new Array(4);12 this._isBlendConstantsDirty = false;13 this._alphaBlend = false;14 this._isAlphaBlendDirty = false;15 this._isBlendFunctionParametersDirty = false;16 this._isBlendEquationParametersDirty = false;17 this.reset();18 }19 get isDirty() {20 return this._isAlphaBlendDirty || this._isBlendFunctionParametersDirty || this._isBlendEquationParametersDirty;21 }22 get alphaBlend() {23 return this._alphaBlend;24 }25 set alphaBlend(value) {26 if (this._alphaBlend === value) {27 return;28 }29 this._alphaBlend = value;30 this._isAlphaBlendDirty = true;31 }32 setAlphaBlendConstants(r, g, b, a) {33 if (this._blendConstants[0] === r &&34 this._blendConstants[1] === g &&35 this._blendConstants[2] === b &&36 this._blendConstants[3] === a) {37 return;38 }39 this._blendConstants[0] = r;40 this._blendConstants[1] = g;41 this._blendConstants[2] = b;42 this._blendConstants[3] = a;43 this._isBlendConstantsDirty = true;44 }45 setAlphaBlendFunctionParameters(value0, value1, value2, value3) {46 if (this._blendFunctionParameters[0] === value0 &&47 this._blendFunctionParameters[1] === value1 &&48 this._blendFunctionParameters[2] === value2 &&49 this._blendFunctionParameters[3] === value3) {50 return;51 }52 this._blendFunctionParameters[0] = value0;53 this._blendFunctionParameters[1] = value1;54 this._blendFunctionParameters[2] = value2;55 this._blendFunctionParameters[3] = value3;56 this._isBlendFunctionParametersDirty = true;57 }58 setAlphaEquationParameters(rgb, alpha) {59 if (this._blendEquationParameters[0] === rgb &&60 this._blendEquationParameters[1] === alpha) {61 return;62 }63 this._blendEquationParameters[0] = rgb;64 this._blendEquationParameters[1] = alpha;65 this._isBlendEquationParametersDirty = true;66 }67 reset() {68 this._alphaBlend = false;69 this._blendFunctionParameters[0] = null;70 this._blendFunctionParameters[1] = null;71 this._blendFunctionParameters[2] = null;72 this._blendFunctionParameters[3] = null;73 this._blendEquationParameters[0] = null;74 this._blendEquationParameters[1] = null;75 this._blendConstants[0] = null;76 this._blendConstants[1] = null;77 this._blendConstants[2] = null;78 this._blendConstants[3] = null;79 this._isAlphaBlendDirty = true;80 this._isBlendFunctionParametersDirty = false;81 this._isBlendEquationParametersDirty = false;82 this._isBlendConstantsDirty = false;83 }84 apply(gl) {85 if (!this.isDirty) {86 return;87 }88 // Alpha blend89 if (this._isAlphaBlendDirty) {90 if (this._alphaBlend) {91 gl.enable(gl.BLEND);92 }93 else {94 gl.disable(gl.BLEND);95 }96 this._isAlphaBlendDirty = false;97 }98 // Alpha function99 if (this._isBlendFunctionParametersDirty) {100 gl.blendFuncSeparate(this._blendFunctionParameters[0], this._blendFunctionParameters[1], this._blendFunctionParameters[2], this._blendFunctionParameters[3]);101 this._isBlendFunctionParametersDirty = false;102 }103 // Alpha equation104 if (this._isBlendEquationParametersDirty) {105 gl.blendEquationSeparate(this._blendEquationParameters[0], this._blendEquationParameters[1]);106 this._isBlendEquationParametersDirty = false;107 }108 // Constants109 if (this._isBlendConstantsDirty) {110 gl.blendColor(this._blendConstants[0], this._blendConstants[1], this._blendConstants[2], this._blendConstants[3]);111 this._isBlendConstantsDirty = false;112 }113 }114}...

Full Screen

Full Screen

bot_randomExpression.js

Source:bot_randomExpression.js Github

copy

Full Screen

1//2// bot_randomExpression.js3// examples4//5// Created by Ben Arnold on 7/23/14.6// Copyright 2014 High Fidelity, Inc.7//8// This is an example script that demonstrates an NPC avatar with9// random facial expressions.10//11// Distributed under the Apache License, Version 2.0.12// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html13//14HIFI_PUBLIC_BUCKET = "http://s3.amazonaws.com/hifi-public/";15function getRandomFloat(min, max) {16 return Math.random() * (max - min) + min;17}18function getRandomInt (min, max) {19 return Math.floor(Math.random() * (max - min + 1)) + min;20}21function printVector(string, vector) {22 print(string + " " + vector.x + ", " + vector.y + ", " + vector.z);23}24var timePassed = 0.0;25var updateSpeed = 3.0;26var X_MIN = 5.0;27var X_MAX = 15.0;28var Z_MIN = 5.0;29var Z_MAX = 15.0;30var Y_PELVIS = 1.0;31// pick an integer between 1 and 100 for the body model for this bot32botNumber = getRandomInt(1, 100);33newFaceFilePrefix = "ron";34newBodyFilePrefix = "bot" + botNumber;35// set the face model fst using the bot number36// there is no need to change the body model - we're using the default37Avatar.faceModelURL = HIFI_PUBLIC_BUCKET + "meshes/" + newFaceFilePrefix + ".fst";38Avatar.skeletonModelURL = HIFI_PUBLIC_BUCKET + "meshes/" + newBodyFilePrefix + ".fst";39Avatar.billboardURL = HIFI_PUBLIC_BUCKET + "meshes/billboards/bot" + botNumber + ".png";40Agent.isAvatar = true;41Agent.isListeningToAudioStream = true;42// change the avatar's position to the random one43Avatar.position = { x: getRandomFloat(X_MIN, X_MAX), y: Y_PELVIS, z: getRandomFloat(Z_MIN, Z_MAX) };; 44printVector("New bot, position = ", Avatar.position);45var allBlendShapes = [];46var targetBlendCoefficient = [];47var currentBlendCoefficient = [];48function addBlendShape(s) {49 allBlendShapes[allBlendShapes.length] = s;50}51//It is imperative that the following blendshapes are all present and are in the correct order52addBlendShape("EyeBlink_L");53addBlendShape("EyeBlink_R");54addBlendShape("EyeSquint_L");55addBlendShape("EyeSquint_R");56addBlendShape("EyeDown_L");57addBlendShape("EyeDown_R");58addBlendShape("EyeIn_L");59addBlendShape("EyeIn_R");60addBlendShape("EyeOpen_L");61addBlendShape("EyeOpen_R");62addBlendShape("EyeOut_L");63addBlendShape("EyeOut_R");64addBlendShape("EyeUp_L");65addBlendShape("EyeUp_R");66addBlendShape("BrowsD_L");67addBlendShape("BrowsD_R");68addBlendShape("BrowsU_C");69addBlendShape("BrowsU_L");70addBlendShape("BrowsU_R");71addBlendShape("JawFwd");72addBlendShape("JawLeft");73addBlendShape("JawOpen");74addBlendShape("JawChew");75addBlendShape("JawRight");76addBlendShape("MouthLeft");77addBlendShape("MouthRight");78addBlendShape("MouthFrown_L");79addBlendShape("MouthFrown_R");80addBlendShape("MouthSmile_L");81addBlendShape("MouthSmile_R");82addBlendShape("MouthDimple_L");83addBlendShape("MouthDimple_R");84addBlendShape("LipsStretch_L");85addBlendShape("LipsStretch_R");86addBlendShape("LipsUpperClose");87addBlendShape("LipsLowerClose");88addBlendShape("LipsUpperUp");89addBlendShape("LipsLowerDown");90addBlendShape("LipsUpperOpen");91addBlendShape("LipsLowerOpen");92addBlendShape("LipsFunnel");93addBlendShape("LipsPucker");94addBlendShape("ChinLowerRaise");95addBlendShape("ChinUpperRaise");96addBlendShape("Sneer");97addBlendShape("Puff");98addBlendShape("CheekSquint_L");99addBlendShape("CheekSquint_R");100for (var i = 0; i < allBlendShapes.length; i++) {101 targetBlendCoefficient[i] = 0;102 currentBlendCoefficient[i] = 0;103}104function setRandomExpression() {105 for (var i = 0; i < allBlendShapes.length; i++) {106 targetBlendCoefficient[i] = Math.random();107 }108}109var expressionChangeSpeed = 0.1;110function updateBlendShapes(deltaTime) {111 112 for (var i = 0; i < allBlendShapes.length; i++) {113 currentBlendCoefficient[i] += (targetBlendCoefficient[i] - currentBlendCoefficient[i]) * expressionChangeSpeed;114 Avatar.setBlendshape(allBlendShapes[i], currentBlendCoefficient[i]);115 }116}117function update(deltaTime) {118 timePassed += deltaTime;119 if (timePassed > updateSpeed) {120 timePassed = 0;121 setRandomExpression();122 }123 updateBlendShapes(deltaTime);124}...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.screenshot({ path: 'google.png' });7 await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11 const browser = await chromium.launch();12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.screenshot({ path: 'google.png' });15 await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19 const browser = await chromium.launch();20 const context = await browser.newContext();21 const page = await context.newPage();22 await page.screenshot({ path: 'google.png' });23 await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27 const browser = await chromium.launch();28 const context = await browser.newContext();29 const page = await context.newPage();30 await page.screenshot({ path: 'google.png' });31 await browser.close();32})();33const { chromium } = require('playwright');34(async () => {35 const browser = await chromium.launch();36 const context = await browser.newContext();37 const page = await context.newPage();38 await page.screenshot({ path: 'google.png' });39 await browser.close();40})();41const { chromium } = require('playwright');42(async () => {43 const browser = await chromium.launch();44 const context = await browser.newContext();45 const page = await context.newPage();46 await page.screenshot({ path

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require("playwright");2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.screenshot({ path: "example.png" });7 await browser.close();8})();9const { chromium } = require("playwright");10(async () => {11 const browser = await chromium.launch();12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.screenshot({ path: "example.png" });15 await browser.close();16})();17const { chromium } = require("playwright");18(async () => {19 const browser = await chromium.launch();20 const context = await browser.newContext();21 const page = await context.newPage();22 await page.screenshot({ path: "example.png" });23 await browser.close();24})();25const { chromium } = require("playwright");26(async () => {27 const browser = await chromium.launch();28 const context = await browser.newContext();29 const page = await context.newPage();30 await page.screenshot({ path: "example.png" });31 await browser.close();32})();33const { chromium } = require("playwright");34(async () => {35 const browser = await chromium.launch();36 const context = await browser.newContext();37 const page = await context.newPage();38 await page.screenshot({ path: "example.png" });39 await browser.close();40})();41const { chromium } = require("playwright");42(async () => {43 const browser = await chromium.launch();44 const context = await browser.newContext();45 const page = await context.newPage();46 await page.screenshot({ path: "example.png"

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.setViewportSize({ width: 1280, height: 800 });7 await page.screenshot({ path: 'example.png' });8 await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12 const browser = await chromium.launch();13 const context = await browser.newContext();14 const page = await context.newPage();15 await page.setViewportSize({ width: 1280, height: 800 });16 await page.screenshot({ path: 'example.png' });17 await browser.close();18})();19const { chromium } = require('playwright');20(async () => {21 const browser = await chromium.launch();22 const context = await browser.newContext();23 const page = await context.newPage();24 await page.setViewportSize({ width: 1280, height: 800 });25 await page.screenshot({ path: 'example.png' });26 await browser.close();27})();28const { chromium } = require('playwright');29(async () => {30 const browser = await chromium.launch();31 const context = await browser.newContext();32 const page = await context.newPage();33 await page.setViewportSize({ width: 1280, height: 800 });34 await page.screenshot({ path: 'example.png' });35 await browser.close();36})();37const { chromium } = require('playwright');38(async () => {39 const browser = await chromium.launch();40 const context = await browser.newContext();41 const page = await context.newPage();42 await page.setViewportSize({ width: 1280, height: 800 });43 await page.screenshot({ path: '

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.screenshot({ path: 'google.png' });6 await page.screenshot({ path: 'google-blend.png', blend: true });7 await browser.close();8})();9const playwright = require('playwright');10(async () => {11 const browser = await playwright.chromium.launch();12 const page = await browser.newPage();13 await page.screenshot({ path: 'google.png' });14 await page.screenshot({ path: 'google-blend.png', blend: true });15 await browser.close();16})();17const playwright = require('playwright');18(async () => {19 const browser = await playwright.chromium.launch();20 const page = await browser.newPage();21 await page.screenshot({ path: 'google.png' });22 await page.screenshot({ path: 'google-blend.png', blend: true });23 await browser.close();24})();25const playwright = require('playwright');26(async () => {27 const browser = await playwright.chromium.launch();28 const page = await browser.newPage();29 await page.screenshot({ path: 'google.png' });30 await page.screenshot({ path: 'google-blend.png', blend: true });31 await browser.close();32})();33const playwright = require('playwright');34(async () => {35 const browser = await playwright.chromium.launch();36 const page = await browser.newPage();37 await page.screenshot({ path: 'google.png' });38 await page.screenshot({ path: 'google-blend.png', blend: true });39 await browser.close();40})();41const playwright = require('playwright');42(async () => {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.screenshot({ path: 'google.png' });6 await browser.close();7})();8const { chromium } = require('playwright');9(async () => {10 const browser = await chromium.launch();11 const page = await browser.newPage();12 await page.screenshot({ path: 'google.png' });13 await browser.close();14})();15const { chromium } = require('playwright');16(async () => {17 const browser = await chromium.launch();18 const page = await browser.newPage();19 await page.screenshot({ path: 'google.png' });20 await browser.close();21})();22const { chromium } = require('playwright');23(async () => {24 const browser = await chromium.launch();25 const page = await browser.newPage();26 await page.screenshot({ path: 'google.png' });27 await browser.close();28})();29const { chromium } = require('playwright');30(async () => {31 const browser = await chromium.launch();32 const page = await browser.newPage();33 await page.screenshot({ path: 'google.png' });34 await browser.close();35})();36const { chromium } = require('playwright');37(async () => {38 const browser = await chromium.launch();39 const page = await browser.newPage();40 await page.screenshot({ path: 'google.png' });41 await browser.close();42})();43const { chromium } = require('playwright');44(async () => {45 const browser = await chromium.launch();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const {chromium} = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 const element = await page.$('input[name="q"]');6 await element.evaluate(element => element.blend(0.5));7 await browser.close();8})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const {chromium} = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 const image = await page.screenshot({ fullPage: true });6 await page.close();7 await browser.close();8 const blend = require('playwright/lib/utils/blend');9 const blended = blend(image, 0.5);10 console.log(blended);11})();12{ width: 1920,

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 const image = await page.screenshot();6 const blend = await image.blend({ r: 0, g: 0, b: 0, a: 0.5 });7 await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11 const browser = await chromium.launch();12 const page = await browser.newPage();13 const image = await page.screenshot();14 const blend = await image.blend({ r: 0, g: 0, b: 0, a: 0.5 });15 await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19 const browser = await chromium.launch();20 const page = await browser.newPage();21 const image = await page.screenshot();22 const blend = await image.blend({ r: 0, g: 0, b: 0, a: 0.5 });23 await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27 const browser = await chromium.launch();28 const page = await browser.newPage();29 const image = await page.screenshot();30 const blend = await image.blend({ r: 0, g: 0, b: 0, a: 0.5 });31 await browser.close();32})();33const { chromium } = require('playwright');34(async () => {35 const browser = await chromium.launch();36 const page = await browser.newPage();37 const image = await page.screenshot();38 const blend = await image.blend({ r: 0, g: 0, b: 0, a: 0.5 });39 await browser.close();40})();41const { chromium } = require('playwright');42(async () => {43 const browser = await chromium.launch();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright-chromium');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 const elementHandle = await page.$('input[name="q"]');6 await elementHandle.screenshot({ path: 'google.png' });7 await elementHandle.screenshot({ path: 'google-blend.png', blend: '#ff00ff' });8 await browser.close();9})();10const { chromium } = require('playwright-chromium');11(async () => {12 const browser = await chromium.launch();13 const page = await browser.newPage();14 const elementHandle = await page.$('input[name="q"]');15 await elementHandle.screenshot({ path: 'google.png' });16 await elementHandle.screenshot({ path: 'google-blend.png', blend: '#ff00ff' });17 await browser.close();18})();19const { chromium } = require('playwright-chromium');20(async () => {21 const browser = await chromium.launch();22 const page = await browser.newPage();23 const elementHandle = await page.$('input[name="q"]');24 await elementHandle.screenshot({ path: 'google.png' });25 await elementHandle.screenshot({ path: 'google-blend.png', blend: '#ff00ff' });26 await browser.close();27})();28const { chromium } = require('playwright-chromium');29(async () => {30 const browser = await chromium.launch();31 const page = await browser.newPage();32 const elementHandle = await page.$('input[name="q"]');33 await elementHandle.screenshot({ path: 'google.png' });34 await elementHandle.screenshot({ path: 'google-blend.png', blend: '#ff00ff' });35 await browser.close();36})();

Full Screen

Full Screen

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

  1. What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
  2. How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
  3. Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
  4. What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
  7. Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
  8. Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
  9. Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
  10. Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
  11. Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful