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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/canvas/canvas-blend-solid.html

Issue 2673013003: Use testharness.js instead of js-test.js in LayoutTests/fast/canvas tests. (Closed)
Patch Set: Reverting canvas-blending-text.html 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 unified diff | Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/canvas/canvas-blend-solid-expected.txt » ('j') | third_party/WebKit/LayoutTests/fast/canvas/canvas-blending-image-over-pattern.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!doctype html> 1 <script src="../../resources/testharness.js"></script>
2 <html> 2 <script src="../../resources/testharnessreport.js"></script>
3 <head>
4 <script src="../../resources/js-test.js"></script>
5 </head>
6 <body> 3 <body>
7 <script src="script-tests/canvas-blend-solid.js"></script> 4 <script>
5 var canvas = document.createElement('canvas');
6 canvas.width = 200;
7 canvas.height = 200;
8 ctx = canvas.getContext('2d');
9
10 // Create the image for blending test with images.
11 var img = document.createElement('canvas');
12 img.width = 200;
13 img.height = 200;
14 var imgCtx = img.getContext('2d');
15 imgCtx.fillStyle = "red";
16 imgCtx.fillRect(0,0,100,100);
17 imgCtx.fillStyle = "yellow";
18 imgCtx.fillRect(100,0,100,100);
19 imgCtx.fillStyle = "green";
20 imgCtx.fillRect(100,100,100,100);
21 imgCtx.fillStyle = "blue";
22 imgCtx.fillRect(0,100,100,100);
23
24 // Create expected results.
25 var blendModes =
26 // [blendMode, expectations solid on solid, expectations solid on alpha, expecta tions alpha on solid, expectations alpha on alpha]
27 [
28 ['source-over',
29 [[255, 0, 0, 255],[255, 255, 0, 255],[0, 128, 0, 255],[0, 0, 255, 255]],
30 [[128, 0, 127, 255],[128, 128, 127, 255],[0, 64, 127, 255],[0, 0, 255, 255] ],
31 [[255, 0, 0, 255],[255, 255, 0, 255],[0, 128, 0, 255],[0, 0, 255, 255]],
32 [[171, 0, 84, 191],[171, 171, 84, 191],[0, 85, 84, 191],[0, 0, 255, 191]]
33 ],
34 ['multiply',
35 [[0, 0, 0, 255],[0, 0, 0, 255],[0, 0, 0, 255],[0, 0, 255, 255]],
36 [[0, 0, 127, 255],[0, 0, 127, 255],[0, 0, 127, 255],[0, 0, 255, 255]],
37 [[128, 0, 0, 255],[128, 128, 0, 255],[0, 64, 0, 255],[0, 0, 255, 255]],
38 [[85, 0, 84, 191],[85, 85, 84, 191],[0, 43, 84, 191],[0, 0, 255, 191]]
39 ],
40 ['screen',
41 [[255, 0, 255, 255],[255, 255, 255, 255],[0, 128, 255, 255],[0, 0, 255, 255 ]],
42 [[128, 0, 255, 255],[128, 128, 255, 255],[0, 64, 255, 255],[0, 0, 255, 255] ],
43 [[255, 0, 127, 255],[255, 255, 127, 255],[0, 128, 127, 255],[0, 0, 255, 255 ]],
44 [[171, 0, 170, 191],[171, 171, 170, 191],[0, 85, 170, 191],[0, 0, 255, 191] ]
45 ],
46 ['overlay',
47 [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
48 [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
49 [[128, 0, 127, 255],[128, 128, 127, 255],[0, 64, 127, 255],[0, 0, 255, 255] ],
50 [[85, 0, 170, 191],[85, 85, 170, 191],[0, 43, 170, 191],[0, 0, 255, 191]]
51 ],
52 ['darken',
53 [[0, 0, 0, 255],[0, 0, 0, 255],[0, 0, 0, 255],[0, 0, 255, 255]],
54 [[0, 0, 127, 255],[0, 0, 127, 255],[0, 0, 127, 255],[0, 0, 255, 255]],
55 [[128, 0, 0, 255],[128, 128, 0, 255],[0, 64, 0, 255],[0, 0, 255, 255]],
56 [[85, 0, 84, 191],[85, 85, 84, 191],[0, 43, 84, 191],[0, 0, 255, 191]]
57 ],
58 ['lighten',
59 [[255, 0, 255, 255],[255, 255, 255, 255],[0, 128, 255, 255],[0, 0, 255, 255 ]],
60 [[128, 0, 255, 255],[128, 128, 255, 255],[0, 64, 255, 255],[0, 0, 255, 255] ],
61 [[255, 0, 127, 255],[255, 255, 127, 255],[0, 128, 127, 255],[0, 0, 255, 255 ]],
62 [[171, 0, 170, 191],[171, 171, 170, 191],[0, 85, 170, 191],[0, 0, 255, 191] ]
63 ],
64 ['color-dodge',
65 [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
66 [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
67 [[128, 0, 127, 255],[128, 128, 127, 255],[0, 64, 127, 255],[0, 0, 255, 255] ],
68 [[85, 0, 170, 191],[85, 85, 170, 191],[0, 43, 170, 191],[0, 0, 255, 191]]
69 ],
70 ['color-burn',
71 [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
72 [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
73 [[128, 0, 127, 255],[128, 128, 127, 255],[0, 64, 127, 255],[0, 0, 255, 255]],
74 [[85, 0, 170, 191],[85, 85, 170, 191],[0, 42, 170, 191],[0, 0, 255, 191 ]]
75
76 ],
77 ['hard-light',
78 [[255, 0, 0, 255],[255, 255, 0, 255],[0, 1, 0, 255],[0, 0, 255, 255]],
79 [[128, 0, 127, 255],[128, 128, 127, 255],[0, 0, 127, 255],[0, 0, 255, 255]] ,
80 [[255, 0, 0, 255],[255, 255, 0, 255],[0, 65, 0, 255],[0, 0, 255, 255]],
81 [[171, 0, 84, 191],[171, 171, 84, 191],[0, 43, 84, 191],[0, 0, 255, 191]]
82 ],
83 ['soft-light',
84 [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
85 [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
86 [[128, 0, 127, 255],[128, 128, 127, 255],[0, 64, 127, 255],[0, 0, 255, 255] ],
87 [[85, 0, 170, 191],[85, 85, 170, 191],[0, 43, 170, 191],[0, 0, 255, 191]]
88 ],
89 ['difference',
90 [[255, 0, 255, 255],[255, 255, 255, 255],[0, 128, 255, 255],[0, 0, 0, 255]] ,
91 [[128, 0, 255, 255],[128, 128, 255, 255],[0, 64, 255, 255],[0, 0, 127, 255] ],
92 [[255, 0, 127, 255],[255, 255, 127, 255],[0, 128, 127, 255],[0, 0, 128, 255 ]],
93 [[171, 0, 170, 191],[171, 171, 170, 191],[0, 85, 170, 191],[0, 0, 171, 191] ]
94 ],
95 ['exclusion',
96 [[255, 0, 255, 255],[255, 255, 255, 255],[0, 128, 255, 255],[0, 0, 0, 255]] ,
97 [[128, 0, 255, 255],[128, 128, 255, 255],[0, 64, 255, 255],[0, 0, 127, 255] ],
98 [[255, 0, 127, 255],[255, 255, 127, 255],[0, 128, 127, 255],[0, 0, 128, 255 ]],
99 [[171, 0, 170, 191],[171, 171, 170, 191],[0, 85, 170, 191],[0, 0, 171, 191] ]
100 ],
101 ['hue',
102 [[93, 0, 0, 255],[31, 31, 0, 255],[0, 46, 0, 255],[0, 0, 255, 255]],
103 [[49, 0, 127, 255],[16, 16, 127, 255],[0, 25, 127, 255],[0, 0, 255, 255]],
104 [[175, 0, 0, 255],[144, 144, 0, 255],[0, 88, 0, 255],[0, 0, 255, 255]],
105 [[116, 0, 84, 191],[96, 96, 84, 191],[0, 58, 84, 191],[0, 0, 255, 191]]
106 ],
107 ['saturation',
108 [[0, 0, 255, 255],[0, 0, 255, 255],[14, 14, 142, 255],[0, 0, 255, 255]],
109 [[0, 0, 255, 255],[0, 0, 255, 255],[7, 7, 198, 255],[0, 0, 255, 255]],
110 [[128, 0, 127, 255],[128, 128, 127, 255],[7, 71, 70, 255],[0, 0, 255, 255]] ,
111 [[85, 0, 167, 191],[85, 85, 167, 191],[0, 48, 130, 191],[0, 0, 255, 191]]
112 ],
113 ['color',
114 [[93, 0, 0, 255],[31, 31, 0, 255],[0, 47, 0, 255],[0, 0, 255, 255]],
115 [[49, 0, 127, 255],[16, 16, 127, 255],[0, 24, 127, 255],[0, 0, 255, 255]],
116 [[175, 0, 0, 255],[144, 144, 0, 255],[0, 88, 0, 255],[0, 0, 255, 255]],
117 [[116, 0, 84, 191],[96, 96, 84, 191],[0, 58, 84, 191],[0, 0, 255, 191]]
118 ],
119 ['luminosity',
120 [[55, 55, 255, 255],[224, 224, 255, 255],[54, 54, 255, 255],[0, 0, 255, 255 ]],
121 [[28, 28, 255, 255],[112, 112, 255, 255],[27, 27, 255, 255],[0, 0, 255, 255 ]],
122 [[155, 27, 127, 255],[239, 239, 127, 255],[26, 90, 127, 255],[0, 0, 255, 25 5]],
123 [[104, 19, 167, 191],[158, 158, 167, 191],[16, 58, 167, 191],[0, 0, 255, 19 1]]
124 ]];
125
126 // [Scenario, alpha on background, alpha on foreground]
127 var testScenario = [
128 ['solid on solid', 1, 1],
129 ['solid on alpha', 1, 0.5],
130 ['alpha on solid', 0.5, 1],
131 ['alpha on alpha', 0.5, 0.5]
132 ];
133
134 testPoints = [{x: 50, y: 50}, {x: 150, y: 50}, {x: 150, y: 150}, {x: 50, y: 150} ];
135
136 function pixelDataAtPoint(i, blend)
137 {
138 return ctx.getImageData(testPoints[i].x, testPoints[i].y , 1, 1).data;
139 }
140
141 function checkBlendModeResult(blendMode, testScenario, expectedColors, sigma) {
142 for (var i = 0; i < testPoints.length; i++) {
143 var resultColor = pixelDataAtPoint(i);
144 assert_approx_equals(resultColor[0], expectedColors[i][0], sigma);
145 assert_approx_equals(resultColor[1], expectedColors[i][1], sigma);
146 assert_approx_equals(resultColor[2], expectedColors[i][2], sigma);
147 assert_approx_equals(resultColor[3], expectedColors[i][3], sigma);
148 }
149 }
150
151 // Execute test.
152 function prepareTestScenario(sigma) {
153 // Check each blend mode individually.
154 for (var i = 0; i < blendModes.length; i++) {
Justin Novosad 2017/02/07 19:03:38 Nit: could use generate_tests here
zakerinasab 2017/02/07 21:41:27 Tried this, but makes the code complicated due to
155 for (var j = 0; j < testScenario.length; j++) {
156 ctx.globalCompositeOperation = 'clear';
157 ctx.fillRect(0,0,200,200);
158 ctx.globalCompositeOperation = 'source-over';
159 ctx.save();
160
161 // Draw backdrop.
162 ctx.fillStyle = 'rgba(0, 0, 255, ' + testScenario[j][1] + ')';
163 ctx.fillRect(0,0,200,200);
164
165 // Apply blend mode.
166 ctx.globalCompositeOperation = blendModes[i][0];
167 ctx.globalAlpha = testScenario[j][2];
168 ctx.fillStyle = "red";
169 ctx.fillRect(0,0,100,100);
170 ctx.fillStyle = "yellow";
171 ctx.fillRect(100,0,100,100);
172 ctx.fillStyle = "green";
173 ctx.fillRect(100,100,100,100);
174 ctx.fillStyle = "blue";
175 ctx.fillRect(0,100,100,100);
176 ctx.restore();
177
178 checkBlendModeResult(blendModes[i][0], testScenario[j][0], blendModes[i][j +1], sigma);
179 ctx.restore();
180 }
181 }
182 }
183
184 // Run test and allow variation of results.
185 test(function(t) {
186 prepareTestScenario(5);
187 }, "Series of tests to ensure correct results on applying different blend modes. ");
188 </script>
8 </body> 189 </body>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/canvas/canvas-blend-solid-expected.txt » ('j') | third_party/WebKit/LayoutTests/fast/canvas/canvas-blending-image-over-pattern.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698