content/canvas/test/webgl-conformance/conformance/textures/gl-teximage.html@8bccb770b82d
content/canvas/test/webgl-conformance/conformance/textures/gl-teximage.html
Wed, 31 Dec 2014 13:27:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 13:27:57 +0100
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
- permissions
- -rw-r--r--
Ignore runtime configuration files generated during quality assurance.
1 <!--
2 Copyright (c) 2011 The Chromium Authors. All rights reserved.
3 Use of this source code is governed by a BSD-style license that can be
4 found in the LICENSE file.
5 -->
6 <!DOCTYPE html>
7 <html>
8 <head>
9 <meta charset="utf-8">
10 <title>WebGL texImage2D conformance test.</title>
11 <link rel="stylesheet" href="../../resources/js-test-style.css"/>
12 <script src="../../resources/js-test-pre.js"></script>
13 <script src="../resources/webgl-test.js"> </script>
14 <script src="../resources/webgl-test-utils.js"> </script>
15 </head>
16 <body>
17 <canvas id="example" width="256" height="16" style="width: 256px; height: 48px;"></canvas>
18 <div id="description"></div>
19 <div id="console"></div>
20 <script>
21 description("Test texImage2D conversions.");
22 var wtu = WebGLTestUtils;
23 var gl = wtu.create3DContext("example");
24 gl.disable(gl.DITHER);
25 var program = wtu.setupTexturedQuad(gl);
27 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");
29 var imgURLs = [
30 '../resources/gray-ramp-256-with-128-alpha.png',
31 '../resources/gray-ramp-256.png',
32 '../resources/gray-ramp-default-gamma.png',
33 '../resources/gray-ramp-gamma0.1.png',
34 '../resources/gray-ramp-gamma1.0.png',
35 '../resources/gray-ramp-gamma2.0.png',
36 '../resources/gray-ramp-gamma4.0.png',
37 '../resources/gray-ramp-gamma9.0.png',
38 '../resources/gray-ramp.png',
39 '../resources/zero-alpha.png',
40 '../resources/3x3.png',
41 '../resources/blue-1x1.jpg',
42 '../resources/red-indexed.png',
43 '../resources/green-2x2-16bit.png',
44 '../resources/small-square-with-colorspin-profile.jpg',
45 '../resources/small-square-with-colorspin-profile.png',
46 '../resources/small-square-with-cie-rgb-profile.png',
47 '../resources/small-square-with-colormatch-profile.png',
48 '../resources/small-square-with-e-srgb-profile.png',
49 '../resources/small-square-with-smpte-c-profile.png',
50 '../resources/small-square-with-srgb-iec61966-2.1-profile.png'];
53 wtu.loadImagesAsync(imgURLs, runTests);
55 function runTests(imgs) {
56 var loc = gl.getUniformLocation(program, "tex");
57 gl.uniform1i(loc, 0);
59 gl.disable(gl.BLEND);
60 gl.disable(gl.DEPTH_TEST);
62 var width = gl.canvas.width;
63 var height = gl.canvas.height;
65 function checkPixel(buf, x, y, color) {
66 var off = (y * width + x) * 4;
67 var msg = "pixel " + x + ", " + y + " should be " +
68 color[0] + ", " +
69 color[1] + ", " +
70 color[2] + ", " +
71 color[3] + " was " +
72 buf[off + 0] + ", " +
73 buf[off + 1] + ", " +
74 buf[off + 2] + ", " +
75 buf[off + 3];
77 for (var ii = 0; ii < 4; ++ii) {
78 if (buf[off + ii] != color[ii]) {
79 testFailed(msg);
80 return;
81 }
82 }
83 testPassed(msg);
84 }
86 function checkPixelRange(buf, x, y, color, allowedRange) {
87 var off = (y * width + x) * 4;
88 var msg = "pixel " + x + ", " + y + " should be within " +
89 allowedRange + " units of " +
90 color[0] + ", " +
91 color[1] + ", " +
92 color[2] + ", " +
93 color[3];
94 var subMsg = " was " +
95 buf[off + 0] + ", " +
96 buf[off + 1] + ", " +
97 buf[off + 2] + ", " +
98 buf[off + 3];
99 // When running in WebKit's test harness, we don't want to print the
100 // pixel value when the test passes, because different machines might
101 // have different results and we record the text output.
102 var inDumpRenderTree = window.layoutTestController;
103 for (var ii = 0; ii < 4; ++ii) {
104 if (Math.abs(buf[off + ii] - color[ii]) > allowedRange) {
105 testFailed(msg + subMsg);
106 return;
107 }
108 }
109 testPassed(msg + (inDumpRenderTree ? "" : subMsg));
110 }
112 var tex = gl.createTexture();
113 gl.bindTexture(gl.TEXTURE_2D, tex);
114 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
115 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
116 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
117 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
119 var buf = new Uint8Array(width * height * 4);
121 debug("");
122 debug("check pixels are NOT pre-multiplied");
123 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
124 imgs['../resources/zero-alpha.png']);
125 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
126 wtu.drawQuad(gl);
127 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
129 var left = 0;
130 var middle = Math.floor(width / 2);
131 var right = width - 1;
132 var bottom = 0;
133 var center = Math.floor(height / 2);
134 var top = height - 1;
135 checkPixel(buf, left, top, [ 0, 0, 0, 255]);
136 checkPixel(buf, middle, top, [255, 0, 255, 255]);
137 checkPixel(buf, right, top, [ 0, 0, 255, 255]);
138 checkPixel(buf, left, center, [128, 128, 128, 255]);
139 checkPixel(buf, middle, center, [255, 255, 255, 255]);
140 checkPixel(buf, right, center, [ 0, 255, 255, 255]);
141 checkPixel(buf, left, bottom, [255, 0, 0, 255]);
142 checkPixel(buf, middle, bottom, [255, 255, 0, 255]);
143 checkPixel(buf, right, bottom, [ 0, 255, 0, 255]);
145 debug("");
146 debug("check quantization");
147 var quantInfo = [
148 {format: gl.RGBA, type: gl.UNSIGNED_BYTE, counts: [256, 256, 256, 256]},
149 {format: gl.RGBA, type: gl.UNSIGNED_SHORT_4_4_4_4, counts: [ 16, 16, 16, 16]},
150 {format: gl.RGB, type: gl.UNSIGNED_SHORT_5_6_5, counts: [ 32, 64, 32, 1]},
151 {format: gl.RGBA, type: gl.UNSIGNED_SHORT_5_5_5_1, counts: [ 32, 32, 32, 2]}];
152 for (var qq = 0; qq < quantInfo.length; ++qq) {
153 var info = quantInfo[qq];
154 gl.texImage2D(
155 gl.TEXTURE_2D, 0, info.format, info.format, info.type,
156 imgs['../resources/gray-ramp-256.png']);
157 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");
158 wtu.drawQuad(gl);
159 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
160 var counts = [{ }, { }, { }, { }];
161 var numUniqueValues = [0, 0, 0, 0];
162 // Count the number of unique values in each channel.
163 for (var ii = 0; ii < width * height * 4; ii += 4) {
164 for (var jj = 0; jj < 4; ++jj) {
165 var v = buf[ii + jj];
166 if (!counts[jj][v]) {
167 counts[jj][v] = 1;
168 ++numUniqueValues[jj];
169 } else {
170 ++counts[jj][v];
171 }
172 }
173 }
174 for (var ii = 0; ii < 4; ++ii) {
175 assertMsg(numUniqueValues[ii] == info.counts[ii],
176 "There should be " + info.counts[ii] +
177 " unique values in channel " + ii + ". Found " +
178 numUniqueValues[ii]);
179 }
180 }
182 debug("");
183 debug("Check that gamma settings don't effect 8bit pngs");
184 gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
185 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
186 imgs['../resources/gray-ramp-default-gamma.png']);
187 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");
188 wtu.drawQuad(gl);
189 var ref = new Uint8Array(width * height * 4);
190 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, ref);
192 var gammaImages = [
193 '../resources/gray-ramp-gamma0.1.png',
194 '../resources/gray-ramp-gamma1.0.png',
195 '../resources/gray-ramp-gamma2.0.png',
196 '../resources/gray-ramp-gamma4.0.png',
197 '../resources/gray-ramp-gamma9.0.png'];
198 for (var ii = 0; ii < gammaImages.length; ++ii) {
199 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
200 imgs[gammaImages[ii]]);
201 wtu.drawQuad(gl);
202 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
203 var same = true;
204 for (var jj = 0; jj < width * height * 4; ++jj) {
205 if (buf[jj] != ref[jj]) {
206 same = false;
207 break;
208 }
209 }
210 assertMsg(same, "pixels should be same regardless of gamma settings.");
211 }
213 debug("");
214 debug("check pixels are UN pre-multiplied");
215 for (var ii = 0; ii < 2; ++ii) {
216 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
217 if (ii == 0) {
218 var canvas2d = document.createElement("canvas");
219 canvas2d.width = 256;
220 canvas2d.height = 1;
221 var ctx = canvas2d.getContext("2d");
222 ctx.drawImage(imgs['../resources/gray-ramp-256-with-128-alpha.png'], 0, 0);
223 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, canvas2d);
224 } else {
225 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
226 imgs['../resources/gray-ramp-256-with-128-alpha.png']);
227 }
228 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");
229 wtu.drawQuad(gl);
230 var buf = new Uint8Array(width * height * 4);
231 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
232 var lt128Count = [0, 0, 0];
233 var ge128Count = [0, 0, 0];
234 for (var jj = 0; jj < width; ++jj) {
235 var off = jj * 4;
236 for (var cc = 0; cc < 3; ++cc) {
237 if (buf[off + cc] < 128) {
238 ++lt128Count[cc];
239 } else {
240 ++ge128Count[cc];
241 }
242 }
243 }
244 // Not sure the exact count here because gamma does effect drawing into the
245 // canvas but it should be close to 50% so I'll pass 45%
246 for (var jj = 0; jj < 3; ++jj) {
247 assertMsg(ge128Count[jj] > 256 * 0.45,
248 "Half the pixels in channel " + jj +
249 " should be >= 128,128,128. found " +
250 ((ge128Count[jj] / 256) * 100).toFixed() + "%");
251 assertMsg(lt128Count[jj] > 256 * 0.45,
252 "Half the pixels in channel " + jj +
253 " should be < 128,128,128. found " +
254 ((lt128Count[jj] / 256) * 100).toFixed() + "%");
255 }
256 }
258 debug("");
259 debug("check canvas pixels are UN pre-multiplied");
260 var canvas2d = document.createElement("canvas");
261 canvas2d.width = 1;
262 canvas2d.height = 1;
263 var ctx = canvas2d.getContext("2d");
264 ctx.fillStyle ="rgba(255,255,255,0.5)";
265 ctx.fillRect(0, 0, 256, 1);
266 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d);
267 wtu.drawQuad(gl);
268 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
269 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");
270 checkPixelRange(buf, 0, 0, [255, 255, 255, 127], 4);
272 debug("");
273 debug("check canvas pixels are pre-multiplied");
274 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
275 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d);
276 wtu.drawQuad(gl);
277 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
278 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");
279 checkPixelRange(buf, 0, 0, [127, 127, 127, 127], 4);
282 debug("");
283 debug("check pixels are pre-multiplied");
284 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
285 // TODO(gman): use different texture that won't pass on failure
286 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE,
287 imgs['../resources/zero-alpha.png']);
288 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
289 wtu.drawQuad(gl);
290 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
292 var same = true;
293 for (var jj = 0; jj < width * height * 4; ++jj) {
294 if (buf[jj] != 0) {
295 same = false;
296 break;
297 }
298 }
299 assertMsg(same, "pixels should all be 0.");
301 debug("");
302 debug("check pixels are flipped");
303 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
304 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
305 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
306 imgs['../resources/3x3.png']);
307 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
308 wtu.drawQuad(gl);
309 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
311 checkPixel(buf, left, top, [255, 0, 0, 255]);
312 checkPixel(buf, middle, top, [255, 255, 0, 255]);
313 checkPixel(buf, right, top, [255, 0, 0, 255]);
314 checkPixel(buf, left, center, [255, 0, 255, 255]);
315 checkPixel(buf, middle, center, [255, 0, 0, 255]);
316 checkPixel(buf, right, center, [ 0, 255, 0, 255]);
317 checkPixel(buf, left, bottom, [ 0, 0, 0, 255]);
318 checkPixel(buf, middle, bottom, [ 0, 0, 255, 255]);
319 checkPixel(buf, right, bottom, [255, 0, 0, 255]);
321 debug("");
322 debug("check uploading of images with no alpha channel works");
323 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
324 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
325 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
326 imgs['../resources/blue-1x1.jpg']);
327 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
328 wtu.drawQuad(gl);
329 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
330 checkPixelRange(buf, middle, center, [ 0, 0, 255, 255], 10);
331 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors");
333 debug("");
334 debug("check uploading of 16-bit images");
335 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
336 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
337 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
338 imgs['../resources/green-2x2-16bit.png']);
339 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
340 wtu.drawQuad(gl);
341 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
342 checkPixelRange(buf, middle, center, [ 15, 121, 0, 255], 10);
343 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors");
345 debug("");
346 debug("check uploading of images with ICC profiles");
347 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
348 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
349 gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
351 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
352 imgs['../resources/small-square-with-colorspin-profile.jpg']);
353 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
354 wtu.drawQuad(gl);
355 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
356 // The image is red. However, if we ignore the color profile, it is blue.
357 checkPixelRange(buf, middle, center, [ 0, 0, 255, 255], 10);
359 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
360 imgs['../resources/small-square-with-colorspin-profile.png']);
361 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
362 wtu.drawQuad(gl);
363 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
364 // The image is red. However, if we ignore the color profile, it is blue.
365 checkPixelRange(buf, middle, center, [ 0, 0, 255, 255], 10);
367 var iccPNGs = [
368 '../resources/small-square-with-cie-rgb-profile.png',
369 '../resources/small-square-with-colormatch-profile.png',
370 '../resources/small-square-with-e-srgb-profile.png',
371 '../resources/small-square-with-smpte-c-profile.png',
372 '../resources/small-square-with-srgb-iec61966-2.1-profile.png'];
373 for (var ii = 0; ii < iccPNGs.length; ++ii) {
374 var buf2 = new Uint8Array(width * height * 4);
375 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
376 imgs[iccPNGs[ii]]);
377 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
378 wtu.drawQuad(gl);
379 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf2);
380 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors");
381 var same = true;
382 for (var jj = 0; jj < buf.length; ++jj) {
383 if (buf[jj] != buf2[jj]) {
384 same = false;
385 break;
386 }
387 }
388 assertMsg(same, "uploading PNGs with same data but various ICC profiles should generate the same results");
389 }
391 debug("");
392 debug("check uploading of indexed PNG images");
393 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
394 imgs['../resources/red-indexed.png']);
395 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
396 wtu.drawQuad(gl);
397 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
398 // The image should be red.
399 checkPixelRange(buf, middle, center, [ 255, 0, 0, 255 ], 10);
401 debug("")
402 debug("check calling texImage2D with NULL clears the texture");
403 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB,
404 imgs['../resources/red-indexed.png'].width,
405 imgs['../resources/red-indexed.png'].height,
406 0, gl.RGB, gl.UNSIGNED_BYTE, null);
407 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
408 wtu.drawQuad(gl);
409 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
410 // The image should be white.
411 checkPixelRange(buf, middle, center, [ 0, 0, 0, 255 ], 10);
413 debug("");
414 successfullyParsed = true;
415 shouldBeTrue("successfullyParsed");
416 debug('<br /><span class="pass">TEST COMPLETE</span>');
417 notifyFinishedToHarness();
418 }
419 </script>
420 </body>
421 </html>
