summaryrefslogtreecommitdiffstats
path: root/third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-blend-solid.js
diff options
context:
space:
mode:
authorcommit-queue@webkit.org <commit-queue@webkit.org@bbb929c8-8fbe-4397-9dbb-9b2b20218538>2012-12-21 02:09:54 +0000
committercommit-queue@webkit.org <commit-queue@webkit.org@bbb929c8-8fbe-4397-9dbb-9b2b20218538>2012-12-21 02:09:54 +0000
commit13f3fca56a1340758b7dd003eda5413f15b3f672 (patch)
tree6eb6db871d49400b834bab208ff3a1d69dc1eefd /third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-blend-solid.js
parentaf7a262e664f790825084f8d356e99c01547767a (diff)
downloadchromium_src-13f3fca56a1340758b7dd003eda5413f15b3f672.zip
chromium_src-13f3fca56a1340758b7dd003eda5413f15b3f672.tar.gz
chromium_src-13f3fca56a1340758b7dd003eda5413f15b3f672.tar.bz2
Add canvas blending modes using Core Graphics
https://bugs.webkit.org/show_bug.cgi?id=100070 Patch by Rik Cabanier <cabanier@adobe.com> on 2012-12-20 Reviewed by Dirk Schulze. Source/WebCore: globalCompositeOperation is extended so it takes blend modes as well as compositing operators. This patch adds an implementation for the Core Graphics port. Tests: fast/canvas/canvas-blend-image.html fast/canvas/canvas-blend-solid.html * html/canvas/CanvasRenderingContext2D.cpp: (WebCore::CanvasRenderingContext2D::setGlobalCompositeOperation): Passed blendMode to underlying layer. (WebCore::CanvasRenderingContext2D::drawImage): Passed blendMode to underlying drawImage call. (WebCore::CanvasRenderingContext2D::drawImageFromRect): Passed blendMode to platofrm layer. * html/canvas/CanvasRenderingContext2D.h: (CanvasRenderingContext2D): Eextended drawImage with new blendmode parameter. * platform/graphics/cg/GraphicsContextCG.cpp: (WebCore::GraphicsContext::setPlatformCompositeOperation): Passed blendmode to Core Graphics API. LayoutTests: Added test files for the new blending modes in Canvas * fast/canvas/canvas-blend-image-expected.txt: Added. * fast/canvas/canvas-blend-image.html: Added. * fast/canvas/canvas-blend-solid-expected.txt: Added. * fast/canvas/canvas-blend-solid.html: Added. * fast/canvas/script-tests/canvas-blend-image.js: Added. (myGetImageData): (checkBlendModeResult): (prepareTestScenario): * fast/canvas/script-tests/canvas-blend-solid.js: Added. (myGetImageData): (checkBlendModeResult): (prepareTestScenario): * platform/chromium/TestExpectations: * platform/efl/TestExpectations: * platform/gtk/TestExpectations: * platform/qt/TestExpectations: git-svn-id: svn://svn.chromium.org/blink/trunk@138334 bbb929c8-8fbe-4397-9dbb-9b2b20218538
Diffstat (limited to 'third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-blend-solid.js')
-rw-r--r--third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-blend-solid.js189
1 files changed, 189 insertions, 0 deletions
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-blend-solid.js b/third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-blend-solid.js
new file mode 100644
index 0000000..3c3cab0
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-blend-solid.js
@@ -0,0 +1,189 @@
+description("Series of tests to ensure correct results on applying different blend modes.");
+if (self.testRunner)
+ testRunner.overridePreference("WebKitCanvasUsesAcceleratedDrawing", 0);
+
+var tmpimg = document.createElement('canvas');
+tmpimg.width = 200;
+tmpimg.height = 200;
+ctx = tmpimg.getContext('2d');
+
+// Create the image for blending test with images.
+var img = document.createElement('canvas');
+img.width = 200;
+img.height = 200;
+var imgCtx = img.getContext('2d');
+imgCtx.fillStyle = "red";
+imgCtx.fillRect(0,0,100,100);
+imgCtx.fillStyle = "yellow";
+imgCtx.fillRect(100,0,100,100);
+imgCtx.fillStyle = "green";
+imgCtx.fillRect(100,100,100,100);
+imgCtx.fillStyle = "blue";
+imgCtx.fillRect(0,100,100,100);
+
+
+// Create expected results.
+var blendModes =
+// [blendMode, expectations solid on solid, expectations solid on alpha, expectations alpha on solid, expectations alpha on alpha]
+[
+ ['source-over',
+ [[255, 0, 0, 255],[255, 255, 0, 255],[0, 128, 0, 255],[0, 0, 255, 255]],
+ [[128, 0, 127, 255],[128, 128, 127, 255],[0, 64, 127, 255],[0, 0, 255, 255]],
+ [[255, 0, 0, 255],[255, 255, 0, 255],[0, 128, 0, 255],[0, 0, 255, 255]],
+ [[171, 0, 84, 191],[171, 171, 84, 191],[0, 85, 84, 191],[0, 0, 255, 191]]
+ ],
+ ['multiply',
+ [[0, 0, 0, 255],[0, 0, 0, 255],[0, 0, 0, 255],[0, 0, 255, 255]],
+ [[0, 0, 127, 255],[0, 0, 127, 255],[0, 0, 127, 255],[0, 0, 255, 255]],
+ [[128, 0, 0, 255],[128, 128, 0, 255],[0, 64, 0, 255],[0, 0, 255, 255]],
+ [[85, 0, 84, 191],[85, 85, 84, 191],[0, 43, 84, 191],[0, 0, 255, 191]]
+ ],
+ ['screen',
+ [[255, 0, 255, 255],[255, 255, 255, 255],[0, 128, 255, 255],[0, 0, 255, 255]],
+ [[128, 0, 255, 255],[128, 128, 255, 255],[0, 64, 255, 255],[0, 0, 255, 255]],
+ [[255, 0, 127, 255],[255, 255, 127, 255],[0, 128, 127, 255],[0, 0, 255, 255]],
+ [[171, 0, 170, 191],[171, 171, 170, 191],[0, 85, 170, 191],[0, 0, 255, 191]]
+ ],
+ ['overlay',
+ [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
+ [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
+ [[128, 0, 127, 255],[128, 128, 127, 255],[0, 64, 127, 255],[0, 0, 255, 255]],
+ [[85, 0, 170, 191],[85, 85, 170, 191],[0, 43, 170, 191],[0, 0, 255, 191]]
+ ],
+ ['darken',
+ [[0, 0, 0, 255],[0, 0, 0, 255],[0, 0, 0, 255],[0, 0, 255, 255]],
+ [[0, 0, 127, 255],[0, 0, 127, 255],[0, 0, 127, 255],[0, 0, 255, 255]],
+ [[128, 0, 0, 255],[128, 128, 0, 255],[0, 64, 0, 255],[0, 0, 255, 255]],
+ [[85, 0, 84, 191],[85, 85, 84, 191],[0, 43, 84, 191],[0, 0, 255, 191]]
+ ],
+ ['lighten',
+ [[255, 0, 255, 255],[255, 255, 255, 255],[0, 128, 255, 255],[0, 0, 255, 255]],
+ [[128, 0, 255, 255],[128, 128, 255, 255],[0, 64, 255, 255],[0, 0, 255, 255]],
+ [[255, 0, 127, 255],[255, 255, 127, 255],[0, 128, 127, 255],[0, 0, 255, 255]],
+ [[171, 0, 170, 191],[171, 171, 170, 191],[0, 85, 170, 191],[0, 0, 255, 191]]
+ ],
+ ['color-dodge',
+ [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
+ [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
+ [[128, 0, 127, 255],[128, 128, 127, 255],[0, 64, 127, 255],[0, 0, 255, 255]],
+ [[85, 0, 170, 191],[85, 85, 170, 191],[0, 43, 170, 191],[0, 0, 255, 191]]
+ ],
+ ['color-burn',
+ [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
+ [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
+ [[128, 0, 127, 255],[128, 128, 127, 255],[0, 0, 127, 255],[0, 0, 255, 255]],
+ [[85, 0, 170, 191],[85, 85, 170, 191],[0, 0, 170, 191],[0, 0, 255, 191]]
+
+ ],
+ ['hard-light',
+ [[255, 0, 0, 255],[255, 255, 0, 255],[0, 1, 0, 255],[0, 0, 255, 255]],
+ [[128, 0, 127, 255],[128, 128, 127, 255],[0, 0, 127, 255],[0, 0, 255, 255]],
+ [[255, 0, 0, 255],[255, 255, 0, 255],[0, 65, 0, 255],[0, 0, 255, 255]],
+ [[171, 0, 84, 191],[171, 171, 84, 191],[0, 43, 84, 191],[0, 0, 255, 191]]
+ ],
+ ['soft-light',
+ [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
+ [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
+ [[128, 0, 127, 255],[128, 128, 127, 255],[0, 64, 127, 255],[0, 0, 255, 255]],
+ [[85, 0, 170, 191],[85, 85, 170, 191],[0, 43, 170, 191],[0, 0, 255, 191]]
+ ],
+ ['difference',
+ [[255, 0, 255, 255],[255, 255, 255, 255],[0, 128, 255, 255],[0, 0, 0, 255]],
+ [[128, 0, 255, 255],[128, 128, 255, 255],[0, 64, 255, 255],[0, 0, 127, 255]],
+ [[255, 0, 127, 255],[255, 255, 127, 255],[0, 128, 127, 255],[0, 0, 128, 255]],
+ [[171, 0, 170, 191],[171, 171, 170, 191],[0, 85, 170, 191],[0, 0, 171, 191]]
+ ],
+ ['exclusion',
+ [[255, 0, 255, 255],[255, 255, 255, 255],[0, 128, 255, 255],[0, 0, 0, 255]],
+ [[128, 0, 255, 255],[128, 128, 255, 255],[0, 64, 255, 255],[0, 0, 127, 255]],
+ [[255, 0, 127, 255],[255, 255, 127, 255],[0, 128, 127, 255],[0, 0, 128, 255]],
+ [[171, 0, 170, 191],[171, 171, 170, 191],[0, 85, 170, 191],[0, 0, 171, 191]]
+ ],
+ ['hue',
+ [[93, 0, 0, 255],[31, 31, 0, 255],[0, 46, 0, 255],[0, 0, 255, 255]],
+ [[49, 0, 127, 255],[16, 16, 127, 255],[0, 25, 127, 255],[0, 0, 255, 255]],
+ [[175, 0, 0, 255],[144, 144, 0, 255],[0, 88, 0, 255],[0, 0, 255, 255]],
+ [[116, 0, 84, 191],[96, 96, 84, 191],[0, 58, 84, 191],[0, 0, 255, 191]]
+ ],
+ ['saturation',
+ [[0, 0, 255, 255],[0, 0, 255, 255],[14, 14, 142, 255],[0, 0, 255, 255]],
+ [[0, 0, 255, 255],[0, 0, 255, 255],[7, 7, 198, 255],[0, 0, 255, 255]],
+ [[128, 0, 127, 255],[128, 128, 127, 255],[7, 71, 70, 255],[0, 0, 255, 255]],
+ [[85, 0, 167, 191],[85, 85, 167, 191],[0, 48, 130, 191],[0, 0, 255, 191]]
+ ],
+ ['color',
+ [[93, 0, 0, 255],[31, 31, 0, 255],[0, 47, 0, 255],[0, 0, 255, 255]],
+ [[49, 0, 127, 255],[16, 16, 127, 255],[0, 24, 127, 255],[0, 0, 255, 255]],
+ [[175, 0, 0, 255],[144, 144, 0, 255],[0, 88, 0, 255],[0, 0, 255, 255]],
+ [[116, 0, 84, 191],[96, 96, 84, 191],[0, 58, 84, 191],[0, 0, 255, 191]]
+ ],
+ ['luminosity',
+ [[55, 55, 255, 255],[224, 224, 255, 255],[54, 54, 255, 255],[0, 0, 255, 255]],
+ [[28, 28, 255, 255],[112, 112, 255, 255],[27, 27, 255, 255],[0, 0, 255, 255]],
+ [[155, 27, 127, 255],[239, 239, 127, 255],[26, 90, 127, 255],[0, 0, 255, 255]],
+ [[104, 19, 167, 191],[158, 158, 167, 191],[16, 58, 167, 191],[0, 0, 255, 191]]
+ ]];
+
+// [Scenario, alpha on background, alpha on foreground]
+var testScenario = [
+ ['solid on solid', 1, 1],
+ ['solid on alpha', 1, 0.5],
+ ['alpha on solid', 0.5, 1],
+ ['alpha on alpha', 0.5, 0.5]
+];
+
+testPoints = [{x: 50, y: 50}, {x: 150, y: 50}, {x: 150, y: 150}, {x: 50, y: 150}];
+
+function pixelDataAtPoint(i, blend)
+{
+ return ctx.getImageData(testPoints[i].x, testPoints[i].y , 1, 1).data;
+}
+
+function checkBlendModeResult(blendMode, testScenario, expectedColors, sigma) {
+ debug(testScenario);
+ for (var i = 0; i < testPoints.length; i++) {
+ var resultColor = "pixelDataAtPoint(" + i + ")";
+ shouldBeCloseTo(resultColor +"[0]", expectedColors[i][0], sigma);
+ shouldBeCloseTo(resultColor +"[1]", expectedColors[i][1], sigma);
+ shouldBeCloseTo(resultColor +"[2]", expectedColors[i][2], sigma);
+ shouldBeCloseTo(resultColor +"[3]", expectedColors[i][3], sigma);
+ }
+}
+
+// Execute test.
+function prepareTestScenario(sigma) {
+ // Check each blend mode individually.
+ for (var i = 0; i < blendModes.length; i++) {
+ debug('Testing blend mode "' + blendModes[i][0] + '"');
+ for (var j = 0; j < testScenario.length; j++) {
+ ctx.globalCompositeOperation = 'clear';
+ ctx.fillRect(0,0,200,200);
+ ctx.globalCompositeOperation = 'source-over';
+ ctx.save();
+
+ // Draw backdrop.
+ ctx.fillStyle = 'rgba(0, 0, 255, ' + testScenario[j][1] + ')';
+ ctx.fillRect(0,0,200,200);
+
+ // Apply blend mode.
+ ctx.globalCompositeOperation = blendModes[i][0];
+ ctx.globalAlpha = testScenario[j][2];
+ ctx.fillStyle = "red";
+ ctx.fillRect(0,0,100,100);
+ ctx.fillStyle = "yellow";
+ ctx.fillRect(100,0,100,100);
+ ctx.fillStyle = "green";
+ ctx.fillRect(100,100,100,100);
+ ctx.fillStyle = "blue";
+ ctx.fillRect(0,100,100,100);
+ ctx.restore();
+
+ checkBlendModeResult(blendModes[i][0], testScenario[j][0], blendModes[i][j+1], sigma);
+ ctx.restore();
+ }
+ debug('');
+ }
+}
+
+// Run test and allow variation of results.
+prepareTestScenario(5);
generated by cgit v1.1 at 2025-04-02 19:15:31 +0000