LayoutTests/fast/canvas/webgl/gl-teximage.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <title>WebGL texImage2D conformance test.</title>
 <script src="../../../resources/js-test.js"></script>
 <script src="resources/webgl-test.js"> </script>
 <script src="resources/webgl-test-utils.js"> </script>
 </head>
 <body>
 <canvas id="example" width="256" height="16" style="width: 256px; height: 48px;"></canvas>
 <div id="description"></div>
 <div id="console"></div>
 <script>
 description("Test texImage2D conversions.");
 var wtu = WebGLTestUtils;
 var canvas = document.getElementById("example");
 var gl = wtu.create3DContext(canvas);
 var program = wtu.setupTexturedQuad(gl);

 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");

 var imgURLs = [
   'resources/gray-ramp-256-with-128-alpha.png',
   'resources/gray-ramp-256.png',
   'resources/gray-ramp-default-gamma.png',
   'resources/gray-ramp-gamma0.1.png',
   'resources/gray-ramp-gamma1.0.png',
   'resources/gray-ramp-gamma2.0.png',
   'resources/gray-ramp-gamma4.0.png',
   'resources/gray-ramp-gamma9.0.png',
   'resources/gray-ramp.png',
   'resources/zero-alpha.png',
   'resources/3x3.png',
   'resources/blue-1x1.jpg',
   'resources/red-indexed.png',
   'resources/green-2x2-16bit.png',
   'resources/small-square-with-colorspin-profile.jpg',
   'resources/small-square-with-colorspin-profile.png',
   'resources/small-square-with-cie-rgb-profile.png',
   'resources/small-square-with-colormatch-profile.png',
   'resources/small-square-with-e-srgb-profile.png',
   'resources/small-square-with-smpte-c-profile.png',
   'resources/small-square-with-srgb-iec61966-2.1-profile.png'];


 wtu.loadImagesAsync(imgURLs, runTests);

 function runTests(imgs) {
   var loc = gl.getUniformLocation(program, "tex");
   gl.uniform1i(loc, 0);

   gl.disable(gl.BLEND);
   gl.disable(gl.DEPTH_TEST);

   var width = canvas.width;
   var height = canvas.height;

   function checkPixel(buf, x, y, color) {
     var off = (y * width + x) * 4;
     var msg = "pixel " + x + ", " + y + " should be " +
               color[0] + ", " +
               color[1] + ", " +
               color[2] + ", " +
               color[3] + " was " +
               buf[off + 0] + ", " +
               buf[off + 1] + ", " +
               buf[off + 2] + ", " +
               buf[off + 3];

     for (var ii = 0; ii < 4; ++ii) {
       if (buf[off + ii] != color[ii]) {
         testFailed(msg);
         return;
       }
     }
     testPassed(msg);
   }

   function checkPixelRange(buf, x, y, color, allowedRange) {
     var off = (y * width + x) * 4;
     var msg = "pixel " + x + ", " + y + " should be within " +
               allowedRange + " units of " +
               color[0] + ", " +
               color[1] + ", " +
               color[2] + ", " +
               color[3];
     var subMsg = " was " +
               buf[off + 0] + ", " +
               buf[off + 1] + ", " +
               buf[off + 2] + ", " +
               buf[off + 3];
     // When running in WebKit's test harness, we don't want to print the
     // pixel value when the test passes, because different machines might
     // have different results and we record the text output.
     var inDumpRenderTree = window.testRunner;
     for (var ii = 0; ii < 4; ++ii) {
       if (Math.abs(buf[off + ii] - color[ii]) > allowedRange) {
         testFailed(msg + subMsg);
         return;
       }
     }
     testPassed(msg + (inDumpRenderTree ? "" : subMsg));
   }

   var tex = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, tex);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

   var buf = new Uint8Array(width * height * 4);

   debug("");
   debug("check pixels are NOT pre-multiplied");
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
                 imgs['resources/zero-alpha.png']);
   glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
   wtu.drawQuad(gl);
   gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);

   var left = 0;
   var middle = Math.floor(width / 2);
   var right = width - 1;
   var bottom = 0;
   var center = Math.floor(height / 2);
   var top = height - 1;
   checkPixel(buf, left,   top,    [  0,   0,   0, 255]);
   checkPixel(buf, middle, top,    [255,   0, 255, 255]);
   checkPixel(buf, right,  top,    [  0,   0, 255, 255]);
   checkPixel(buf, left,   center, [128, 128, 128, 255]);
   checkPixel(buf, middle, center, [255, 255, 255, 255]);
   checkPixel(buf, right,  center, [  0, 255, 255, 255]);
   checkPixel(buf, left,   bottom, [255,   0,   0, 255]);
   checkPixel(buf, middle, bottom, [255, 255,   0, 255]);
   checkPixel(buf, right,  bottom, [  0, 255,   0, 255]);

   debug("");
   debug("check quantization");
   var quantInfo = [
     {format: gl.RGBA, type: gl.UNSIGNED_BYTE,          counts: [256, 256, 256, 256]},
     {format: gl.RGBA, type: gl.UNSIGNED_SHORT_4_4_4_4, counts: [ 16,  16,  16,  16]},
     {format: gl.RGB,  type: gl.UNSIGNED_SHORT_5_6_5,   counts: [ 32,  64,  32,   1]},
     {format: gl.RGBA, type: gl.UNSIGNED_SHORT_5_5_5_1, counts: [ 32,  32,  32,   2]}];
   for (var qq = 0; qq < quantInfo.length; ++qq) {
     var info = quantInfo[qq];
     gl.texImage2D(
         gl.TEXTURE_2D, 0, info.format, info.format, info.type,
         imgs['resources/gray-ramp-256.png']);
     glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");
     wtu.drawQuad(gl);
     gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
     var counts = [{ }, { }, { }, { }];
     var numUniqueValues = [0, 0, 0, 0];
     // Count the number of unique values in each channel.
     for (var ii = 0; ii < width * height * 4; ii += 4) {
       for (var jj = 0; jj < 4; ++jj) {
         var v = buf[ii + jj];
         if (!counts[jj][v]) {
           counts[jj][v] = 1;
           ++numUniqueValues[jj];
         } else {
           ++counts[jj][v];
         }
       }
     }
     for (var ii = 0; ii < 4; ++ii) {
       assertMsg(numUniqueValues[ii] == info.counts[ii],
                 "There should be " + info.counts[ii] +
                 " unique values in channel " + ii + ". Found " +
                 numUniqueValues[ii]);
     }
   }

   debug("");
   debug("Check that gamma settings don't effect 8bit pngs");
   gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
                 imgs['resources/gray-ramp-default-gamma.png']);
   glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");
   wtu.drawQuad(gl);
   var ref = new Uint8Array(width * height * 4);
   gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, ref);

   var gammaImages = [
     'resources/gray-ramp-gamma0.1.png',
     'resources/gray-ramp-gamma1.0.png',
     'resources/gray-ramp-gamma2.0.png',
     'resources/gray-ramp-gamma4.0.png',
     'resources/gray-ramp-gamma9.0.png'];
   for (var ii = 0; ii < gammaImages.length; ++ii) {
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
                   imgs[gammaImages[ii]]);
     wtu.drawQuad(gl);
     gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
     var same = true;
     for (var jj = 0; jj < width * height * 4; ++jj) {
       if (buf[jj] != ref[jj]) {
         same = false;
         break;
       }
     }
     assertMsg(same, "pixels should be same regardless of gamma settings.");
   }

   debug("");
   debug("check pixels are UN pre-multiplied");
   for (var ii = 0; ii < 2; ++ii) {
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
     if (ii == 0) {
       var canvas2d = document.createElement("canvas");
       canvas2d.width = 256;
       canvas2d.height = 1;
       var ctx = canvas2d.getContext("2d");
       ctx.drawImage(imgs['resources/gray-ramp-256-with-128-alpha.png'], 0, 0);
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, canvas2d);
     } else {
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
                     imgs['resources/gray-ramp-256-with-128-alpha.png']);
     }
     glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");
     wtu.drawQuad(gl);
     var buf = new Uint8Array(width * height * 4);
     gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
     var lt128Count = [0, 0, 0];
     var ge128Count = [0, 0, 0];
     for (var jj = 0; jj < width; ++jj) {
       var off = jj * 4;
       for (var cc = 0; cc < 3; ++cc) {
         if (buf[off + cc] < 128) {
           ++lt128Count[cc];
         } else {
           ++ge128Count[cc];
         }
       }
     }
     // Not sure the exact count here because gamma does effect drawing into the
     // canvas but it should be close to 50% so I'll pass 45%
     for (var jj = 0; jj < 3; ++jj) {
       // Only display the actual percentage string when outside of the test
       // harness, to prevent safe variation from causing failures.
       var inDumpRenderTree = window.testRunner;
       assertMsg(ge128Count[jj] > 256 * 0.45,
                 "Half the pixels in channel " + jj +
                 " should be >= 128,128,128. " +
                 (!inDumpRenderTree ? "found " +
                     ((ge128Count[jj] / 256) * 100).toFixed() + "%" : ""));
       assertMsg(lt128Count[jj] > 256 * 0.45,
                 "Half the pixels in channel " + jj +
                 " should be < 128,128,128. " +
                 (!inDumpRenderTree ? "found " +
                     ((lt128Count[jj] / 256) * 100).toFixed() + "%" : ""));
     }
   }

   debug("");
   debug("check canvas pixels are UN pre-multiplied");
   var canvas2d = document.createElement("canvas");
   canvas2d.width = 1;
   canvas2d.height = 1;
   var ctx = canvas2d.getContext("2d");
   ctx.fillStyle ="rgba(255,255,255,0.5)";
   ctx.fillRect(0, 0, 256, 1);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d);
   wtu.drawQuad(gl);
   gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
   glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");
   checkPixelRange(buf, 0, 0, [255, 255, 255, 127], 4);

   debug("");
   debug("check canvas pixels are pre-multiplied");
   gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d);
   wtu.drawQuad(gl);
   gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
   glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");
   checkPixelRange(buf, 0, 0, [127, 127, 127, 127], 4);


   debug("");
   debug("check pixels are pre-multiplied");
   gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
   // TODO(gman): use different texture that won't pass on failure
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE,
                 imgs['resources/zero-alpha.png']);
   glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
   wtu.drawQuad(gl);
   gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);

   var same = true;
   for (var jj = 0; jj < width * height * 4; ++jj) {
     if (buf[jj] != 0) {
       same = false;
       break;
     }
   }
   assertMsg(same, "pixels should all be 0.");

   debug("");
   debug("check pixels are flipped");
   gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
   gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
                 imgs['resources/3x3.png']);
   glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
   wtu.drawQuad(gl);
   gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);

   checkPixel(buf, left,   top,    [255,   0,   0, 255]);
   checkPixel(buf, middle, top,    [255, 255,   0, 255]);
   checkPixel(buf, right,  top,    [255,   0,   0, 255]);
   checkPixel(buf, left,   center, [255,   0, 255, 255]);
   checkPixel(buf, middle, center, [255,   0,   0, 255]);
   checkPixel(buf, right,  center, [  0, 255,   0, 255]);
   checkPixel(buf, left,   bottom, [  0,   0,   0, 255]);
   checkPixel(buf, middle, bottom, [  0,   0, 255, 255]);
   checkPixel(buf, right,  bottom, [255,   0,   0, 255]);

   debug("");
   debug("check uploading of images with no alpha channel works");
   gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
   gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
                 imgs['resources/blue-1x1.jpg']);
   glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
   wtu.drawQuad(gl);
   gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
   checkPixelRange(buf, middle, center, [   0,   0, 255, 255], 10);
   glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors");

   debug("");
   debug("check uploading of 16-bit images");
   gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
   gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
                 imgs['resources/green-2x2-16bit.png']);
   glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
   wtu.drawQuad(gl);
   gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
   checkPixelRange(buf, middle, center, [   15, 121,   0, 255], 10);
   glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors");

   debug("");
   debug("check uploading of images with ICC profiles");
   gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
   gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
   gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);

   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
                 imgs['resources/small-square-with-colorspin-profile.jpg']);
   glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
   wtu.drawQuad(gl);
   gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
   // The image is red.  However, if we ignore the color profile, it is blue.
   checkPixelRange(buf, middle, center, [ 0, 0, 255, 255], 10);

   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
                 imgs['resources/small-square-with-colorspin-profile.png']);
   glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
   wtu.drawQuad(gl);
   gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
   // The image is red.  However, if we ignore the color profile, it is blue.
   checkPixelRange(buf, middle, center, [ 0, 0, 255, 255], 10);

   var iccPNGs = [
     'resources/small-square-with-cie-rgb-profile.png',
     'resources/small-square-with-colormatch-profile.png',
     'resources/small-square-with-e-srgb-profile.png',
     'resources/small-square-with-smpte-c-profile.png',
     'resources/small-square-with-srgb-iec61966-2.1-profile.png'];
   for (var ii = 0; ii < iccPNGs.length; ++ii) {
     var buf2 = new Uint8Array(width * height * 4);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
                   imgs[iccPNGs[ii]]);
     glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
     wtu.drawQuad(gl);
     gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf2);
     glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors");
     var same = true;
     for (var jj = 0; jj < buf.length; ++jj) {
       if (buf[jj] != buf2[jj]) {
         same = false;
         break;
       }
     }
     assertMsg(same, "uploading PNGs with same data but various ICC profiles should generate the same results");
   }

   debug("");
   debug("check uploading of indexed PNG images");
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
                 imgs['resources/red-indexed.png']);
   glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
   wtu.drawQuad(gl);
   gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
   // The image should be red.
   checkPixelRange(buf, middle, center, [ 255, 0, 0, 255 ], 10);

   debug("");
 }

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>WebGL texImage2D conformance test.</title>
	<script src="../../../resources/js-test.js"></script>
	<script src="resources/webgl-test.js"> </script>
	<script src="resources/webgl-test-utils.js"> </script>
	</head>
	<body>
	<canvas id="example" width="256" height="16" style="width: 256px; height: 48px;"></canvas>
	<div id="description"></div>
	<div id="console"></div>
	<script>
	description("Test texImage2D conversions.");
	var wtu = WebGLTestUtils;
	var canvas = document.getElementById("example");
	var gl = wtu.create3DContext(canvas);
	var program = wtu.setupTexturedQuad(gl);

	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");

	var imgURLs = [
	'resources/gray-ramp-256-with-128-alpha.png',
	'resources/gray-ramp-256.png',
	'resources/gray-ramp-default-gamma.png',
	'resources/gray-ramp-gamma0.1.png',
	'resources/gray-ramp-gamma1.0.png',
	'resources/gray-ramp-gamma2.0.png',
	'resources/gray-ramp-gamma4.0.png',
	'resources/gray-ramp-gamma9.0.png',
	'resources/gray-ramp.png',
	'resources/zero-alpha.png',
	'resources/3x3.png',
	'resources/blue-1x1.jpg',
	'resources/red-indexed.png',
	'resources/green-2x2-16bit.png',
	'resources/small-square-with-colorspin-profile.jpg',
	'resources/small-square-with-colorspin-profile.png',
	'resources/small-square-with-cie-rgb-profile.png',
	'resources/small-square-with-colormatch-profile.png',
	'resources/small-square-with-e-srgb-profile.png',
	'resources/small-square-with-smpte-c-profile.png',
	'resources/small-square-with-srgb-iec61966-2.1-profile.png'];


	wtu.loadImagesAsync(imgURLs, runTests);

	function runTests(imgs) {
	var loc = gl.getUniformLocation(program, "tex");
	gl.uniform1i(loc, 0);

	gl.disable(gl.BLEND);
	gl.disable(gl.DEPTH_TEST);

	var width = canvas.width;
	var height = canvas.height;

	function checkPixel(buf, x, y, color) {
	var off = (y * width + x) * 4;
	var msg = "pixel " + x + ", " + y + " should be " +
	color[0] + ", " +
	color[1] + ", " +
	color[2] + ", " +
	color[3] + " was " +
	buf[off + 0] + ", " +
	buf[off + 1] + ", " +
	buf[off + 2] + ", " +
	buf[off + 3];

	for (var ii = 0; ii < 4; ++ii) {
	if (buf[off + ii] != color[ii]) {
	testFailed(msg);
	return;
	}
	}
	testPassed(msg);
	}

	function checkPixelRange(buf, x, y, color, allowedRange) {
	var off = (y * width + x) * 4;
	var msg = "pixel " + x + ", " + y + " should be within " +
	allowedRange + " units of " +
	color[0] + ", " +
	color[1] + ", " +
	color[2] + ", " +
	color[3];
	var subMsg = " was " +
	buf[off + 0] + ", " +
	buf[off + 1] + ", " +
	buf[off + 2] + ", " +
	buf[off + 3];
	// When running in WebKit's test harness, we don't want to print the
	// pixel value when the test passes, because different machines might
	// have different results and we record the text output.
	var inDumpRenderTree = window.testRunner;
	for (var ii = 0; ii < 4; ++ii) {
	if (Math.abs(buf[off + ii] - color[ii]) > allowedRange) {
	testFailed(msg + subMsg);
	return;
	}
	}
	testPassed(msg + (inDumpRenderTree ? "" : subMsg));
	}

	var tex = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, tex);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

	var buf = new Uint8Array(width * height * 4);

	debug("");
	debug("check pixels are NOT pre-multiplied");
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
	imgs['resources/zero-alpha.png']);
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
	wtu.drawQuad(gl);
	gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);

	var left = 0;
	var middle = Math.floor(width / 2);
	var right = width - 1;
	var bottom = 0;
	var center = Math.floor(height / 2);
	var top = height - 1;
	checkPixel(buf, left, top, [ 0, 0, 0, 255]);
	checkPixel(buf, middle, top, [255, 0, 255, 255]);
	checkPixel(buf, right, top, [ 0, 0, 255, 255]);
	checkPixel(buf, left, center, [128, 128, 128, 255]);
	checkPixel(buf, middle, center, [255, 255, 255, 255]);
	checkPixel(buf, right, center, [ 0, 255, 255, 255]);
	checkPixel(buf, left, bottom, [255, 0, 0, 255]);
	checkPixel(buf, middle, bottom, [255, 255, 0, 255]);
	checkPixel(buf, right, bottom, [ 0, 255, 0, 255]);

	debug("");
	debug("check quantization");
	var quantInfo = [
	{format: gl.RGBA, type: gl.UNSIGNED_BYTE, counts: [256, 256, 256, 256]},
	{format: gl.RGBA, type: gl.UNSIGNED_SHORT_4_4_4_4, counts: [ 16, 16, 16, 16]},
	{format: gl.RGB, type: gl.UNSIGNED_SHORT_5_6_5, counts: [ 32, 64, 32, 1]},
	{format: gl.RGBA, type: gl.UNSIGNED_SHORT_5_5_5_1, counts: [ 32, 32, 32, 2]}];
	for (var qq = 0; qq < quantInfo.length; ++qq) {
	var info = quantInfo[qq];
	gl.texImage2D(
	gl.TEXTURE_2D, 0, info.format, info.format, info.type,
	imgs['resources/gray-ramp-256.png']);
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");
	wtu.drawQuad(gl);
	gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
	var counts = [{ }, { }, { }, { }];
	var numUniqueValues = [0, 0, 0, 0];
	// Count the number of unique values in each channel.
	for (var ii = 0; ii < width * height * 4; ii += 4) {
	for (var jj = 0; jj < 4; ++jj) {
	var v = buf[ii + jj];
	if (!counts[jj][v]) {
	counts[jj][v] = 1;
	++numUniqueValues[jj];
	} else {
	++counts[jj][v];
	}
	}
	}
	for (var ii = 0; ii < 4; ++ii) {
	assertMsg(numUniqueValues[ii] == info.counts[ii],
	"There should be " + info.counts[ii] +
	" unique values in channel " + ii + ". Found " +
	numUniqueValues[ii]);
	}
	}

	debug("");
	debug("Check that gamma settings don't effect 8bit pngs");
	gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
	imgs['resources/gray-ramp-default-gamma.png']);
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");
	wtu.drawQuad(gl);
	var ref = new Uint8Array(width * height * 4);
	gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, ref);

	var gammaImages = [
	'resources/gray-ramp-gamma0.1.png',
	'resources/gray-ramp-gamma1.0.png',
	'resources/gray-ramp-gamma2.0.png',
	'resources/gray-ramp-gamma4.0.png',
	'resources/gray-ramp-gamma9.0.png'];
	for (var ii = 0; ii < gammaImages.length; ++ii) {
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
	imgs[gammaImages[ii]]);
	wtu.drawQuad(gl);
	gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
	var same = true;
	for (var jj = 0; jj < width * height * 4; ++jj) {
	if (buf[jj] != ref[jj]) {
	same = false;
	break;
	}
	}
	assertMsg(same, "pixels should be same regardless of gamma settings.");
	}

	debug("");
	debug("check pixels are UN pre-multiplied");
	for (var ii = 0; ii < 2; ++ii) {
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
	if (ii == 0) {
	var canvas2d = document.createElement("canvas");
	canvas2d.width = 256;
	canvas2d.height = 1;
	var ctx = canvas2d.getContext("2d");
	ctx.drawImage(imgs['resources/gray-ramp-256-with-128-alpha.png'], 0, 0);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, canvas2d);
	} else {
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
	imgs['resources/gray-ramp-256-with-128-alpha.png']);
	}
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");
	wtu.drawQuad(gl);
	var buf = new Uint8Array(width * height * 4);
	gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
	var lt128Count = [0, 0, 0];
	var ge128Count = [0, 0, 0];
	for (var jj = 0; jj < width; ++jj) {
	var off = jj * 4;
	for (var cc = 0; cc < 3; ++cc) {
	if (buf[off + cc] < 128) {
	++lt128Count[cc];
	} else {
	++ge128Count[cc];
	}
	}
	}
	// Not sure the exact count here because gamma does effect drawing into the
	// canvas but it should be close to 50% so I'll pass 45%
	for (var jj = 0; jj < 3; ++jj) {
	// Only display the actual percentage string when outside of the test
	// harness, to prevent safe variation from causing failures.
	var inDumpRenderTree = window.testRunner;
	assertMsg(ge128Count[jj] > 256 * 0.45,
	"Half the pixels in channel " + jj +
	" should be >= 128,128,128. " +
	(!inDumpRenderTree ? "found " +
	((ge128Count[jj] / 256) * 100).toFixed() + "%" : ""));
	assertMsg(lt128Count[jj] > 256 * 0.45,
	"Half the pixels in channel " + jj +
	" should be < 128,128,128. " +
	(!inDumpRenderTree ? "found " +
	((lt128Count[jj] / 256) * 100).toFixed() + "%" : ""));
	}
	}

	debug("");
	debug("check canvas pixels are UN pre-multiplied");
	var canvas2d = document.createElement("canvas");
	canvas2d.width = 1;
	canvas2d.height = 1;
	var ctx = canvas2d.getContext("2d");
	ctx.fillStyle ="rgba(255,255,255,0.5)";
	ctx.fillRect(0, 0, 256, 1);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d);
	wtu.drawQuad(gl);
	gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");
	checkPixelRange(buf, 0, 0, [255, 255, 255, 127], 4);

	debug("");
	debug("check canvas pixels are pre-multiplied");
	gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d);
	wtu.drawQuad(gl);
	gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");
	checkPixelRange(buf, 0, 0, [127, 127, 127, 127], 4);


	debug("");
	debug("check pixels are pre-multiplied");
	gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
	// TODO(gman): use different texture that won't pass on failure
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE,
	imgs['resources/zero-alpha.png']);
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
	wtu.drawQuad(gl);
	gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);

	var same = true;
	for (var jj = 0; jj < width * height * 4; ++jj) {
	if (buf[jj] != 0) {
	same = false;
	break;
	}
	}
	assertMsg(same, "pixels should all be 0.");

	debug("");
	debug("check pixels are flipped");
	gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
	imgs['resources/3x3.png']);
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
	wtu.drawQuad(gl);
	gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);

	checkPixel(buf, left, top, [255, 0, 0, 255]);
	checkPixel(buf, middle, top, [255, 255, 0, 255]);
	checkPixel(buf, right, top, [255, 0, 0, 255]);
	checkPixel(buf, left, center, [255, 0, 255, 255]);
	checkPixel(buf, middle, center, [255, 0, 0, 255]);
	checkPixel(buf, right, center, [ 0, 255, 0, 255]);
	checkPixel(buf, left, bottom, [ 0, 0, 0, 255]);
	checkPixel(buf, middle, bottom, [ 0, 0, 255, 255]);
	checkPixel(buf, right, bottom, [255, 0, 0, 255]);

	debug("");
	debug("check uploading of images with no alpha channel works");
	gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
	imgs['resources/blue-1x1.jpg']);
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
	wtu.drawQuad(gl);
	gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
	checkPixelRange(buf, middle, center, [ 0, 0, 255, 255], 10);
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors");

	debug("");
	debug("check uploading of 16-bit images");
	gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
	imgs['resources/green-2x2-16bit.png']);
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
	wtu.drawQuad(gl);
	gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
	checkPixelRange(buf, middle, center, [ 15, 121, 0, 255], 10);
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors");

	debug("");
	debug("check uploading of images with ICC profiles");
	gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
	gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);

	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
	imgs['resources/small-square-with-colorspin-profile.jpg']);
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
	wtu.drawQuad(gl);
	gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
	// The image is red. However, if we ignore the color profile, it is blue.
	checkPixelRange(buf, middle, center, [ 0, 0, 255, 255], 10);

	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
	imgs['resources/small-square-with-colorspin-profile.png']);
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
	wtu.drawQuad(gl);
	gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
	// The image is red. However, if we ignore the color profile, it is blue.
	checkPixelRange(buf, middle, center, [ 0, 0, 255, 255], 10);

	var iccPNGs = [
	'resources/small-square-with-cie-rgb-profile.png',
	'resources/small-square-with-colormatch-profile.png',
	'resources/small-square-with-e-srgb-profile.png',
	'resources/small-square-with-smpte-c-profile.png',
	'resources/small-square-with-srgb-iec61966-2.1-profile.png'];
	for (var ii = 0; ii < iccPNGs.length; ++ii) {
	var buf2 = new Uint8Array(width * height * 4);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
	imgs[iccPNGs[ii]]);
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
	wtu.drawQuad(gl);
	gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf2);
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors");
	var same = true;
	for (var jj = 0; jj < buf.length; ++jj) {
	if (buf[jj] != buf2[jj]) {
	same = false;
	break;
	}
	}
	assertMsg(same, "uploading PNGs with same data but various ICC profiles should generate the same results");
	}

	debug("");
	debug("check uploading of indexed PNG images");
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
	imgs['resources/red-indexed.png']);
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup");
	wtu.drawQuad(gl);
	gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
	// The image should be red.
	checkPixelRange(buf, middle, center, [ 255, 0, 0, 255 ], 10);

	debug("");
	}

	</script>
	</body>
	</html>