Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(21)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/fast/canvas/canvas-blend-image.html

Issue 2670353002: Use testharness.js instead of js-test.js in LayoutTests/fast/canvas tests. (Closed)
Patch Set: Addressing comments Created 3 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/canvas/canvas-bezier-same-endpoint-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/canvas/canvas-blend-image-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/fast/canvas/canvas-blend-image.html
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-blend-image.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-blend-image.html
index 3a237cebbde2f3b1864c254e9b98b1049c77ab37..b71084887684b88098c854219d488f7630e37b26 100644
--- a/third_party/WebKit/LayoutTests/fast/canvas/canvas-blend-image.html
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-blend-image.html
@@ -1,8 +1,179 @@
-<!doctype html>
-<html>
-<head>
-<script src="../../resources/js-test.js"></script>
-</head>
-<body>
-<script src="script-tests/canvas-blend-image.js"></script>
-</body>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script>
+var canvas = document.createElement('canvas');
+canvas.width = 200;
+canvas.height = 200;
+ctx = canvas.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, 64, 127, 255],[0, 0, 255, 255]],
+ [[85, 0, 170, 191],[85, 85, 170, 191],[0, 42, 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],[4, 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, index helper]]
+testScenario = [
+ ['solid on solid', [1, 1, 0]],
+ ['solid on alpha', [1, 0.5, 1]],
+ ['alpha on solid', [0.5, 1, 2]],
+ ['alpha on alpha', [0.5, 0.5, 3]]
+];
+
+testBlendMode = blendModes[0];
+
+testPoints = [{x: 50, y: 50}, {x: 150, y: 50}, {x: 150, y: 150}, {x: 50, y: 150}];
+
+function pixelDataAtPoint(i)
+{
+ return ctx.getImageData(testPoints[i].x, testPoints[i].y , 1, 1).data;
+}
+
+function checkBlendModeResult(expectedColors, sigma) {
+ for (var i = 0; i < testPoints.length; i++) {
+ var resultColor = pixelDataAtPoint(i);
+ assert_approx_equals(resultColor[0], expectedColors[i][0], sigma);
+ assert_approx_equals(resultColor[1], expectedColors[i][1], sigma);
+ assert_approx_equals(resultColor[2], expectedColors[i][2], sigma);
+ assert_approx_equals(resultColor[3], expectedColors[i][3], sigma);
+ }
+}
+
+function testBlending(parameters) {
+ alpha = parameters[0];
+ globalAlpha = parameters[1];
+ testIndex = parameters[2];
+
+ ctx.clearRect(0,0,200,200);
+ ctx.save();
+
+ // Draw backdrop.
+ ctx.fillStyle = 'rgba(0, 0, 255, ' + alpha + ')';
+ ctx.fillRect(0,0,200,200);
+
+ // Apply blend mode.
+ ctx.globalCompositeOperation = testBlendMode[0];
+ ctx.globalAlpha = globalAlpha;
+ ctx.drawImage(img, 0, 0);
+ checkBlendModeResult(testBlendMode[testIndex+1], 5);
+ ctx.restore();
+}
+
+test(function(t) {
+ // Run test and allow variation of results.
+ // Check each blend mode individually.
+ for (var i = 0; i < blendModes.length; i++) {
+ testBlendMode = blendModes[i];
+ generate_tests(testBlending, testScenario);
+ }
+}, 'Series of tests to ensure correct results on applying different blend modes.');
+</script>
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/canvas/canvas-bezier-same-endpoint-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/canvas/canvas-blend-image-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698