The Tor Browser: content/canvas/test/webgl-conformance/conformance/resources/webgl-test-utils.js@6474c204b198 (annotated)

content/canvas/test/webgl-conformance/conformance/resources/webgl-test-utils.js@6474c204b198 (annotated)

content/canvas/test/webgl-conformance/conformance/resources/webgl-test-utils.js

Wed, 31 Dec 2014 06:09:35 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 06:09:35 +0100
changeset 0: 6474c204b198
permissions: -rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 WebGLTestUtils = (function() {
 /**
  * Wrapped logging function.
  * @param {string} msg The message to log.
  */
 var log = function(msg) {
   if (window.console && window.console.log) {
     window.console.log(msg);
   }
 };
 /**
  * Wrapped logging function.
  * @param {string} msg The message to log.
  */
 var error = function(msg) {
   if (window.console) {
     if (window.console.error) {
       window.console.error(msg);
     }
     else if (window.console.log) {
       window.console.log(msg);
     }
   }
 };
 /**
  * Turn off all logging.
  */
 var loggingOff = function() {
   log = function() {};
   error = function() {};
 };
 /**
  * Converts a WebGL enum to a string
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {number} value The enum value.
  * @return {string} The enum as a string.
  */
 var glEnumToString = function(gl, value) {
   for (var p in gl) {
     if (gl[p] == value) {
       return p;
     }
   }
   return "0x" + value.toString(16);
 };
 var lastError = "";
 /**
  * Returns the last compiler/linker error.
  * @return {string} The last compiler/linker error.
  */
 var getLastError = function() {
   return lastError;
 };
 /**
  * Whether a haystack ends with a needle.
  * @param {string} haystack String to search
  * @param {string} needle String to search for.
  * @param {boolean} True if haystack ends with needle.
  */
 var endsWith = function(haystack, needle) {
   return haystack.substr(haystack.length - needle.length) === needle;
 };
 /**
  * Whether a haystack starts with a needle.
  * @param {string} haystack String to search
  * @param {string} needle String to search for.
  * @param {boolean} True if haystack starts with needle.
  */
 var startsWith = function(haystack, needle) {
   return haystack.substr(0, needle.length) === needle;
 };
 /**
  * A vertex shader for a single texture.
  * @type {string}
  */
 var simpleTextureVertexShader = [
   'attribute vec4 vPosition;',
   'attribute vec2 texCoord0;',
   'varying vec2 texCoord;',
   'void main() {',
   '    gl_Position = vPosition;',
   '    texCoord = texCoord0;',
   '}'].join('\n');
 /**
  * A fragment shader for a single texture.
  * @type {string}
  */
 var simpleTextureFragmentShader = [
   'precision mediump float;',
   'uniform sampler2D tex;',
   'varying vec2 texCoord;',
   'void main() {',
   '    gl_FragData[0] = texture2D(tex, texCoord);',
   '}'].join('\n');
 /**
  * Creates a simple texture vertex shader.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @return {!WebGLShader}
  */
 var setupSimpleTextureVertexShader = function(gl) {
     return loadShader(gl, simpleTextureVertexShader, gl.VERTEX_SHADER);
 };
 /**
  * Creates a simple texture fragment shader.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @return {!WebGLShader}
  */
 var setupSimpleTextureFragmentShader = function(gl) {
     return loadShader(
         gl, simpleTextureFragmentShader, gl.FRAGMENT_SHADER);
 };
 /**
  * Creates a program, attaches shaders, binds attrib locations, links the
  * program and calls useProgram.
  * @param {!Array.<!WebGLShader|string>} shaders The shaders to
  *        attach, or the source, or the id of a script to get
  *        the source from.
  * @param {!Array.<string>} opt_attribs The attribs names.
  * @param {!Array.<number>} opt_locations The locations for the attribs.
  */
 var setupProgram = function(gl, shaders, opt_attribs, opt_locations) {
   var realShaders = [];
   var program = gl.createProgram();
   for (var ii = 0; ii < shaders.length; ++ii) {
     var shader = shaders[ii];
     if (typeof shader == 'string') {
       var element = document.getElementById(shader);
       if (element) {
         shader = loadShaderFromScript(gl, shader);
       } else {
         shader = loadShader(gl, shader, ii ? gl.FRAGMENT_SHADER : gl.VERTEX_SHADER);
       }
     }
     gl.attachShader(program, shader);
   }
   if (opt_attribs) {
     for (var ii = 0; ii < opt_attribs.length; ++ii) {
       gl.bindAttribLocation(
           program,
           opt_locations ? opt_locations[ii] : ii,
           opt_attribs[ii]);
     }
   }
   gl.linkProgram(program);
   // Check the link status
   var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
   if (!linked) {
       // something went wrong with the link
       lastError = gl.getProgramInfoLog (program);
       error("Error in program linking:" + lastError);
       gl.deleteProgram(program);
       return null;
   }
   gl.useProgram(program);
   return program;
 };
 /**
  * Creates a simple texture program.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {number} opt_positionLocation The attrib location for position.
  * @param {number} opt_texcoordLocation The attrib location for texture coords.
  * @return {WebGLProgram}
  */
 var setupSimpleTextureProgram = function(
     gl, opt_positionLocation, opt_texcoordLocation) {
   opt_positionLocation = opt_positionLocation || 0;
   opt_texcoordLocation = opt_texcoordLocation || 1;
   var vs = setupSimpleTextureVertexShader(gl);
   var fs = setupSimpleTextureFragmentShader(gl);
   if (!vs || !fs) {
     return null;
   }
   var program = setupProgram(
       gl,
       [vs, fs],
       ['vPosition', 'texCoord0'],
       [opt_positionLocation, opt_texcoordLocation]);
   if (!program) {
     gl.deleteShader(fs);
     gl.deleteShader(vs);
   }
   gl.useProgram(program);
   return program;
 };
 /**
  * Creates buffers for a textured unit quad and attaches them to vertex attribs.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {number} opt_positionLocation The attrib location for position.
  * @param {number} opt_texcoordLocation The attrib location for texture coords.
  * @return {!Array.<WebGLBuffer>} The buffer objects that were
  *      created.
  */
 var setupUnitQuad = function(gl, opt_positionLocation, opt_texcoordLocation) {
   return setupUnitQuadWithTexCoords(gl, [ 0.0, 0.0 ], [ 1.0, 1.0 ],
                                     opt_positionLocation, opt_texcoordLocation);
 };
 /**
  * Draws a previously setupUnitQuad.
  * @param {!WebGLContext} gl The WebGLContext to use.
  */
 var drawUnitQuad = function(gl) {
   gl.drawArrays(gl.TRIANGLES, 0, 6);
 };
 /**
  * Clears then Draws a previously setupUnitQuad.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {!Array.<number>} opt_color The color to fill clear with before
  * drawing. A 4 element array where each element is in the range 0 to
  * 255. Default [255, 255, 255, 255]
  */
 var clearAndDrawUnitQuad = function(gl, opt_color) {
   opt_color = opt_color || [255, 255, 255, 255];
   // Save and restore.
   var prevClearColor = gl.getParameter(gl.COLOR_CLEAR_VALUE);
   gl.clearColor(opt_color[0] / 255,
                 opt_color[1] / 255,
                 opt_color[2] / 255,
                 opt_color[3] / 255);
   gl.clear(gl.COLOR_BUFFER_BIT);
   drawUnitQuad(gl);
   gl.clearColor(prevClearColor[0],
                 prevClearColor[1],
                 prevClearColor[2],
                 prevClearColor[3]);
 };
 /**
  * Creates buffers for a textured unit quad with specified lower left
  * and upper right texture coordinates, and attaches them to vertex
  * attribs.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {!Array.<number>} lowerLeftTexCoords The texture coordinates for the lower left corner.
  * @param {!Array.<number>} upperRightTexCoords The texture coordinates for the upper right corner.
  * @param {number} opt_positionLocation The attrib location for position.
  * @param {number} opt_texcoordLocation The attrib location for texture coords.
  * @return {!Array.<WebGLBuffer>} The buffer objects that were
  *      created.
  */
 var setupUnitQuadWithTexCoords = function(
     gl, lowerLeftTexCoords, upperRightTexCoords,
     opt_positionLocation, opt_texcoordLocation) {
   opt_positionLocation = opt_positionLocation || 0;
   opt_texcoordLocation = opt_texcoordLocation || 1;
   var objects = [];
   var vertexObject = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
 .0,  1.0, 0.0,
       -1.0,  1.0, 0.0,
       -1.0, -1.0, 0.0,
 .0,  1.0, 0.0,
       -1.0, -1.0, 0.0,
 .0, -1.0, 0.0]), gl.STATIC_DRAW);
   gl.enableVertexAttribArray(opt_positionLocation);
   gl.vertexAttribPointer(opt_positionLocation, 3, gl.FLOAT, false, 0, 0);
   objects.push(vertexObject);
   var llx = lowerLeftTexCoords[0];
   var lly = lowerLeftTexCoords[1];
   var urx = upperRightTexCoords[0];
   var ury = upperRightTexCoords[1];
   var vertexObject = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
       urx, ury,
       llx, ury,
       llx, lly,
       urx, ury,
       llx, lly,
       urx, lly]), gl.STATIC_DRAW);
   gl.enableVertexAttribArray(opt_texcoordLocation);
   gl.vertexAttribPointer(opt_texcoordLocation, 2, gl.FLOAT, false, 0, 0);
   objects.push(vertexObject);
   return objects;
 };
 /**
  * Creates a program and buffers for rendering a textured quad.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {number} opt_positionLocation The attrib location for position.
  * @param {number} opt_texcoordLocation The attrib location for texture coords.
  * @return {!WebGLProgram}
  */
 var setupTexturedQuad = function(
     gl, opt_positionLocation, opt_texcoordLocation) {
   var program = setupSimpleTextureProgram(
       gl, opt_positionLocation, opt_texcoordLocation);
   setupUnitQuad(gl, opt_positionLocation, opt_texcoordLocation);
   return program;
 };
 /**
  * Creates a program and buffers for rendering a textured quad with
  * specified lower left and upper right texture coordinates.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {!Array.<number>} lowerLeftTexCoords The texture coordinates for the lower left corner.
  * @param {!Array.<number>} upperRightTexCoords The texture coordinates for the upper right corner.
  * @param {number} opt_positionLocation The attrib location for position.
  * @param {number} opt_texcoordLocation The attrib location for texture coords.
  * @return {!WebGLProgram}
  */
 var setupTexturedQuadWithTexCoords = function(
     gl, lowerLeftTexCoords, upperRightTexCoords,
     opt_positionLocation, opt_texcoordLocation) {
   var program = setupSimpleTextureProgram(
       gl, opt_positionLocation, opt_texcoordLocation);
   setupUnitQuadWithTexCoords(gl, lowerLeftTexCoords, upperRightTexCoords,
                              opt_positionLocation, opt_texcoordLocation);
   return program;
 };
 /**
  * Creates a unit quad with only positions of a given resolution.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {number} gridRes The resolution of the mesh grid, expressed in the number of triangles across and down.
  * @param {number} opt_positionLocation The attrib location for position.
  */
 var setupQuad = function (
     gl, gridRes, opt_positionLocation, opt_flipOddTriangles) {
   var positionLocation = opt_positionLocation || 0;
   var objects = [];
   var vertsAcross = gridRes + 1;
   var numVerts = vertsAcross * vertsAcross;
   var positions = new Float32Array(numVerts * 3);
   var indices = new Uint16Array(6 * gridRes * gridRes);
   var poffset = 0;
   for (var yy = 0; yy <= gridRes; ++yy) {
     for (var xx = 0; xx <= gridRes; ++xx) {
       positions[poffset + 0] = -1 + 2 * xx / gridRes;
       positions[poffset + 1] = -1 + 2 * yy / gridRes;
       positions[poffset + 2] = 0;
       poffset += 3;
     }
   }
   var tbase = 0;
   for (var yy = 0; yy < gridRes; ++yy) {
     var index = yy * vertsAcross;
     for (var xx = 0; xx < gridRes; ++xx) {
       indices[tbase + 0] = index + 0;
       indices[tbase + 1] = index + 1;
       indices[tbase + 2] = index + vertsAcross;
       indices[tbase + 3] = index + vertsAcross;
       indices[tbase + 4] = index + 1;
       indices[tbase + 5] = index + vertsAcross + 1;
       if (opt_flipOddTriangles) {
         indices[tbase + 4] = index + vertsAcross + 1;
         indices[tbase + 5] = index + 1;
       }
       index += 1;
       tbase += 6;
     }
   }
   var buf = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, buf);
   gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
   gl.enableVertexAttribArray(positionLocation);
   gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
   objects.push(buf);
   var buf = gl.createBuffer();
   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buf);
   gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
   objects.push(buf);
   return objects;
 };
 /**
  * Fills the given texture with a solid color
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {!WebGLTexture} tex The texture to fill.
  * @param {number} width The width of the texture to create.
  * @param {number} height The height of the texture to create.
  * @param {!Array.<number>} color The color to fill with. A 4 element array
  *        where each element is in the range 0 to 255.
  * @param {number} opt_level The level of the texture to fill. Default = 0.
  */
 var fillTexture = function(gl, tex, width, height, color, opt_level) {
   opt_level = opt_level || 0;
   var numPixels = width * height;
   var size = numPixels * 4;
   var buf = new Uint8Array(size);
   for (var ii = 0; ii < numPixels; ++ii) {
     var off = ii * 4;
     buf[off + 0] = color[0];
     buf[off + 1] = color[1];
     buf[off + 2] = color[2];
     buf[off + 3] = color[3];
   }
   gl.bindTexture(gl.TEXTURE_2D, tex);
   gl.texImage2D(
       gl.TEXTURE_2D, opt_level, gl.RGBA, width, height, 0,
       gl.RGBA, gl.UNSIGNED_BYTE, buf);
   };
 /**
  * Creates a textures and fills it with a solid color
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {number} width The width of the texture to create.
  * @param {number} height The height of the texture to create.
  * @param {!Array.<number>} color The color to fill with. A 4 element array
  *        where each element is in the range 0 to 255.
  * @return {!WebGLTexture}
  */
 var createColoredTexture = function(gl, width, height, color) {
   var tex = gl.createTexture();
   fillTexture(gl, tex, width, height, color);
   return tex;
 };
 /**
  * Draws a previously setup quad.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {!Array.<number>} opt_color The color to fill clear with before
  *        drawing. A 4 element array where each element is in the range 0 to
  *        255. Default [255, 255, 255, 255]
  */
 var drawQuad = function(gl, opt_color) {
   opt_color = opt_color || [255, 255, 255, 255];
   gl.clearColor(
       opt_color[0] / 255,
       opt_color[1] / 255,
       opt_color[2] / 255,
       opt_color[3] / 255);
   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
   gl.drawArrays(gl.TRIANGLES, 0, 6);
 };
 /**
  * Checks that a portion of a canvas is 1 color.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {number} x left corner of region to check.
  * @param {number} y bottom corner of region to check.
  * @param {number} width width of region to check.
  * @param {number} height width of region to check.
  * @param {!Array.<number>} color The color to fill clear with before drawing. A
  *        4 element array where each element is in the range 0 to 255.
  * @param {string} msg Message to associate with success. Eg ("should be red").
  * @param {number} errorRange Optional. Acceptable error in
  *        color checking. 0 by default.
  */
 var checkCanvasRect = function(gl, x, y, width, height, color, msg, errorRange) {
   errorRange = errorRange || 0;
   var buf = new Uint8Array(width * height * 4);
   gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
   for (var i = 0; i < width * height; ++i) {
     var offset = i * 4;
     for (var j = 0; j < color.length; ++j) {
       if (Math.abs(buf[offset + j] - color[j]) > errorRange) {
         var was = buf[offset + 0].toString();
         for (j = 1; j < color.length; ++j) {
           was += "," + buf[offset + j];
         }
         var cv = document.createElement('canvas');
         cv.height = height;
         cv.width = width;
         var ctx = cv.getContext('2d');
         ctx.fillStyle="rgba(" + color[0] + ", " + color[1] + ", " + color[2] + ", 255)";
         ctx.fillRect(0, 0, width, height);
         testFailedRender(msg, ctx, buf, width, height);
         debug('at (' + (i % width) + ', ' + Math.floor(i / width) +
               ') expected: ' + color + ' was ' + was);
         return;
       }
     }
   }
   testPassed(msg);
 };
 /**
  * Checks that an entire canvas is 1 color.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {!Array.<number>} color The color to fill clear with before drawing. A
  *        4 element array where each element is in the range 0 to 255.
  * @param {string} msg Message to associate with success. Eg ("should be red").
  * @param {number} errorRange Optional. Acceptable error in
  *        color checking. 0 by default.
  */
 var checkCanvas = function(gl, color, msg, errorRange) {
   checkCanvasRect(gl, 0, 0, gl.canvas.width, gl.canvas.height, color, msg, errorRange);
 };
 /**
  * Loads a texture, calls callback when finished.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {string} url URL of image to load
  * @param {function(!Image): void} callback Function that gets called after
  *        image has loaded
  * @return {!WebGLTexture} The created texture.
  */
 var loadTexture = function(gl, url, callback) {
     var texture = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_2D, texture);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
     var image = new Image();
     image.onload = function() {
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
         callback(image);
     };
     image.src = url;
     return texture;
 };
 /**
  * Creates a webgl context.
  * @param {!Canvas|string} opt_canvas The canvas tag to get
  *     context from. If one is not passed in one will be
  *     created. If it's a string it's assumed to be the id of a
  *     canvas.
  * @return {!WebGLContext} The created context.
  */
 var create3DContext = function(opt_canvas, opt_attributes) {
   opt_canvas = opt_canvas || document.createElement("canvas");
   if (typeof opt_canvas == 'string') {
     opt_canvas = document.getElementById(opt_canvas);
   }
   var context = null;
   var names = ["webgl", "experimental-webgl"];
   for (var i = 0; i < names.length; ++i) {
     try {
       context = opt_canvas.getContext(names[i], opt_attributes);
     } catch (e) {
     }
     if (context) {
       break;
     }
   }
   if (!context) {
     testFailed("Unable to fetch WebGL rendering context for Canvas");
   }
   return context;
 }
 /**
  * Gets a GLError value as a string.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {number} err The webgl error as retrieved from gl.getError().
  * @return {string} the error as a string.
  */
 var getGLErrorAsString = function(gl, err) {
   if (err === gl.NO_ERROR) {
     return "NO_ERROR";
   }
   for (var name in gl) {
     if (gl[name] === err) {
       return name;
     }
   }
   return err.toString();
 };
 /**
  * Wraps a WebGL function with a function that throws an exception if there is
  * an error.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {string} fname Name of function to wrap.
  * @return {function} The wrapped function.
  */
 var createGLErrorWrapper = function(context, fname) {
   return function() {
     var rv = context[fname].apply(context, arguments);
     var err = context.getError();
     if (err != 0)
       throw "GL error " + getGLErrorAsString(err) + " in " + fname;
     return rv;
   };
 };
 /**
  * Creates a WebGL context where all functions are wrapped to throw an exception
  * if there is an error.
  * @param {!Canvas} canvas The HTML canvas to get a context from.
  * @return {!Object} The wrapped context.
  */
 function create3DContextWithWrapperThatThrowsOnGLError(canvas) {
   var context = create3DContext(canvas);
   var wrap = {};
   for (var i in context) {
     try {
       if (typeof context[i] == 'function') {
         wrap[i] = createGLErrorWrapper(context, i);
       } else {
         wrap[i] = context[i];
       }
     } catch (e) {
       error("createContextWrapperThatThrowsOnGLError: Error accessing " + i);
     }
   }
   wrap.getError = function() {
       return context.getError();
   };
   return wrap;
 };
 /**
  * Tests that an evaluated expression generates a specific GL error.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {number} glError The expected gl error.
  * @param {string} evalSTr The string to evaluate.
  */
 var shouldGenerateGLError = function(gl, glError, evalStr) {
   var exception;
   try {
     eval(evalStr);
   } catch (e) {
     exception = e;
   }
   if (exception) {
     testFailed(evalStr + " threw exception " + exception);
   } else {
     var err = gl.getError();
     if (err != glError) {
       testFailed(evalStr + " expected: " + getGLErrorAsString(gl, glError) + ". Was " + getGLErrorAsString(gl, err) + ".");
     } else {
       testPassed(evalStr + " was expected value: " + getGLErrorAsString(gl, glError) + ".");
     }
   }
 };
 /**
  * Tests that the first error GL returns is the specified error.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {number} glError The expected gl error.
  * @param {string} opt_msg
  */
 var glErrorShouldBe = function(gl, glError, opt_msg) {
   opt_msg = opt_msg || "";
   var err = gl.getError();
   if (err != glError) {
     testFailed("getError expected: " + getGLErrorAsString(gl, glError) +
                ". Was " + getGLErrorAsString(gl, err) + " : " + opt_msg);
   } else {
     testPassed("getError was expected value: " +
                 getGLErrorAsString(gl, glError) + " : " + opt_msg);
   }
 };
 /**
  * Links a WebGL program, throws if there are errors.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {!WebGLProgram} program The WebGLProgram to link.
  * @param {function(string): void) opt_errorCallback callback for errors.
  */
 var linkProgram = function(gl, program, opt_errorCallback) {
   errFn = opt_errorCallback || testFailed;
   // Link the program
   gl.linkProgram(program);
   // Check the link status
   var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
   if (!linked) {
     // something went wrong with the link
     var error = gl.getProgramInfoLog (program);
     errFn("Error in program linking:" + error);
     gl.deleteProgram(program);
   }
 };
 /**
  * Sets up WebGL with shaders.
  * @param {string} canvasName The id of the canvas.
  * @param {string} vshader The id of the script tag that contains the vertex
  *     shader source.
  * @param {string} fshader The id of the script tag that contains the fragment
  *     shader source.
  * @param {!Array.<string>} attribs An array of attrib names used to bind
  *     attribs to the ordinal of the name in this array.
  * @param {!Array.<number>} opt_clearColor The color to cla
  * @return {!WebGLContext} The created WebGLContext.
  */
 var setupWebGLWithShaders = function(
    canvasName, vshader, fshader, attribs) {
   var canvas = document.getElementById(canvasName);
   var gl = create3DContext(canvas);
   if (!gl) {
     testFailed("No WebGL context found");
   }
   // create our shaders
   var vertexShader = loadShaderFromScript(gl, vshader);
   var fragmentShader = loadShaderFromScript(gl, fshader);
   if (!vertexShader || !fragmentShader) {
     return null;
   }
   // Create the program object
   program = gl.createProgram();
   if (!program) {
     return null;
   }
   // Attach our two shaders to the program
   gl.attachShader (program, vertexShader);
   gl.attachShader (program, fragmentShader);
   // Bind attributes
   for (var i in attribs) {
     gl.bindAttribLocation (program, i, attribs[i]);
   }
   linkProgram(gl, program);
   gl.useProgram(program);
   gl.clearColor(0,0,0,1);
   gl.clearDepth(1);
   gl.enable(gl.DEPTH_TEST);
   gl.enable(gl.BLEND);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
   gl.program = program;
   return gl;
 };
 /**
  * Loads text from an external file. This function is synchronous.
  * @param {string} url The url of the external file.
  * @param {!function(bool, string): void} callback that is sent a bool for
  *     success and the string.
  */
 var loadTextFileAsync = function(url, callback) {
   log ("loading: " + url);
   var error = 'loadTextFileSynchronous failed to load url "' + url + '"';
   var request;
   if (window.XMLHttpRequest) {
     request = new XMLHttpRequest();
     if (request.overrideMimeType) {
       request.overrideMimeType('text/plain');
     }
   } else {
     throw 'XMLHttpRequest is disabled';
   }
   try {
     request.open('GET', url, true);
     request.onreadystatechange = function() {
       if (request.readyState == 4) {
         var text = '';
         // HTTP reports success with a 200 status. The file protocol reports
         // success with zero. HTTP does not use zero as a status code (they
         // start at 100).
         // https://developer.mozilla.org/En/Using_XMLHttpRequest
         var success = request.status == 200 || request.status == 0;
         if (success) {
           text = request.responseText;
         }
         log("loaded: " + url);
         callback(success, text);
       }
     };
     request.send(null);
   } catch (e) {
     log("failed to load: " + url);
     callback(false, '');
   }
 };
 // Add your prefix here.
 var browserPrefixes = [
   "",
   "MOZ_",
   "OP_",
   "WEBKIT_"
 ];
 /**
  * Given an extension name like WEBGL_compressed_texture_s3tc
  * returns the name of the supported version extension, like
  * WEBKIT_WEBGL_compressed_teture_s3tc
  * @param {string} name Name of extension to look for
  * @return {string} name of extension found or undefined if not
  *     found.
  */
 var getSupportedExtensionWithKnownPrefixes = function(gl, name) {
   var supported = gl.getSupportedExtensions();
   for (var ii = 0; ii < browserPrefixes.length; ++ii) {
     var prefixedName = browserPrefixes[ii] + name;
     if (supported.indexOf(prefixedName) >= 0) {
       return prefixedName;
     }
   }
 };
 /**
  * Given an extension name like WEBGL_compressed_texture_s3tc
  * returns the supported version extension, like
  * WEBKIT_WEBGL_compressed_teture_s3tc
  * @param {string} name Name of extension to look for
  * @return {WebGLExtension} The extension or undefined if not
  *     found.
  */
 var getExtensionWithKnownPrefixes = function(gl, name) {
   for (var ii = 0; ii < browserPrefixes.length; ++ii) {
     var prefixedName = browserPrefixes[ii] + name;
     var ext = gl.getExtension(prefixedName);
     if (ext) {
       return ext;
     }
   }
 };
 /**
  * Recursively loads a file as a list. Each line is parsed for a relative
  * path. If the file ends in .txt the contents of that file is inserted in
  * the list.
  *
  * @param {string} url The url of the external file.
  * @param {!function(bool, Array<string>): void} callback that is sent a bool
  *     for success and the array of strings.
  */
 var getFileListAsync = function(url, callback) {
   var files = [];
   var getFileListImpl = function(url, callback) {
     var files = [];
     if (url.substr(url.length - 4) == '.txt') {
       loadTextFileAsync(url, function() {
         return function(success, text) {
           if (!success) {
             callback(false, '');
             return;
           }
           var lines = text.split('\n');
           var prefix = '';
           var lastSlash = url.lastIndexOf('/');
           if (lastSlash >= 0) {
             prefix = url.substr(0, lastSlash + 1);
           }
           var fail = false;
           var count = 1;
           var index = 0;
           for (var ii = 0; ii < lines.length; ++ii) {
             var str = lines[ii].replace(/^\s\s*/, '').replace(/\s\s*$/, '');
             if (str.length > 4 &&
                 str[0] != '#' &&
                 str[0] != ";" &&
                 str.substr(0, 2) != "//") {
               var names = str.split(/ +/);
               new_url = prefix + str;
               if (names.length == 1) {
                 new_url = prefix + str;
                 ++count;
                 getFileListImpl(new_url, function(index) {
                   return function(success, new_files) {
                     log("got files: " + new_files.length);
                     if (success) {
                       files[index] = new_files;
                     }
                     finish(success);
                   };
                 }(index++));
               } else {
                 var s = "";
                 var p = "";
                 for (var jj = 0; jj < names.length; ++jj) {
                   s += p + prefix + names[jj];
                   p = " ";
                 }
                 files[index++] = s;
               }
             }
           }
           finish(true);
           function finish(success) {
             if (!success) {
               fail = true;
             }
             --count;
             log("count: " + count);
             if (!count) {
               callback(!fail, files);
             }
           }
         }
       }());
     } else {
       files.push(url);
       callback(true, files);
     }
   };
   getFileListImpl(url, function(success, files) {
     // flatten
     var flat = [];
     flatten(files);
     function flatten(files) {
       for (var ii = 0; ii < files.length; ++ii) {
         var value = files[ii];
         if (typeof(value) == "string") {
           flat.push(value);
         } else {
           flatten(value);
         }
       }
     }
     callback(success, flat);
   });
 };
 /**
  * Gets a file from a file/URL
  * @param {string} file the URL of the file to get.
  * @return {string} The contents of the file.
  */
 var readFile = function(file) {
   var xhr = new XMLHttpRequest();
   xhr.open("GET", file, false);
   xhr.send();
   return xhr.responseText.replace(/\r/g, "");
 };
 var readFileList = function(url) {
   var files = [];
   if (url.substr(url.length - 4) == '.txt') {
     var lines = readFile(url).split('\n');
     var prefix = '';
     var lastSlash = url.lastIndexOf('/');
     if (lastSlash >= 0) {
       prefix = url.substr(0, lastSlash + 1);
     }
     for (var ii = 0; ii < lines.length; ++ii) {
       var str = lines[ii].replace(/^\s\s*/, '').replace(/\s\s*$/, '');
       if (str.length > 4 &&
           str[0] != '#' &&
           str[0] != ";" &&
           str.substr(0, 2) != "//") {
         var names = str.split(/ +/);
         if (names.length == 1) {
           new_url = prefix + str;
           files = files.concat(readFileList(new_url));
         } else {
           var s = "";
           var p = "";
           for (var jj = 0; jj < names.length; ++jj) {
             s += p + prefix + names[jj];
             p = " ";
           }
           files.push(s);
         }
       }
     }
   } else {
     files.push(url);
   }
   return files;
 };
 /**
  * Loads a shader.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {string} shaderSource The shader source.
  * @param {number} shaderType The type of shader.
  * @param {function(string): void) opt_errorCallback callback for errors.
  * @return {!WebGLShader} The created shader.
  */
 var loadShader = function(gl, shaderSource, shaderType, opt_errorCallback) {
   var errFn = opt_errorCallback || error;
   // Create the shader object
   var shader = gl.createShader(shaderType);
   if (shader == null) {
     errFn("*** Error: unable to create shader '"+shaderSource+"'");
     return null;
   }
   // Load the shader source
   gl.shaderSource(shader, shaderSource);
   var err = gl.getError();
   if (err != gl.NO_ERROR) {
     errFn("*** Error loading shader '" + shader + "':" + glEnumToString(gl, err));
     return null;
   }
   // Compile the shader
   gl.compileShader(shader);
   // Check the compile status
   var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
   if (!compiled) {
     // Something went wrong during compilation; get the error
     lastError = gl.getShaderInfoLog(shader);
     errFn("*** Error compiling shader '" + shader + "':" + lastError);
     gl.deleteShader(shader);
     return null;
   }
   return shader;
 }
 /**
  * Loads a shader from a URL.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {file} file The URL of the shader source.
  * @param {number} type The type of shader.
  * @param {function(string): void) opt_errorCallback callback for errors.
  * @return {!WebGLShader} The created shader.
  */
 var loadShaderFromFile = function(gl, file, type, opt_errorCallback) {
   var shaderSource = readFile(file);
   return loadShader(gl, shaderSource, type, opt_errorCallback);
 };
 /**
  * Gets the content of script.
  */
 var getScript = function(scriptId) {
   var shaderScript = document.getElementById(scriptId);
   if (!shaderScript) {
     throw("*** Error: unknown script element" + scriptId);
   }
   return shaderScript.text;
 };
 /**
  * Loads a shader from a script tag.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {string} scriptId The id of the script tag.
  * @param {number} opt_shaderType The type of shader. If not passed in it will
  *     be derived from the type of the script tag.
  * @param {function(string): void) opt_errorCallback callback for errors.
  * @return {!WebGLShader} The created shader.
  */
 var loadShaderFromScript = function(
     gl, scriptId, opt_shaderType, opt_errorCallback) {
   var shaderSource = "";
   var shaderType;
   var shaderScript = document.getElementById(scriptId);
   if (!shaderScript) {
     throw("*** Error: unknown script element " + scriptId);
   }
   shaderSource = shaderScript.text;
   if (!opt_shaderType) {
     if (shaderScript.type == "x-shader/x-vertex") {
       shaderType = gl.VERTEX_SHADER;
     } else if (shaderScript.type == "x-shader/x-fragment") {
       shaderType = gl.FRAGMENT_SHADER;
     } else if (shaderType != gl.VERTEX_SHADER && shaderType != gl.FRAGMENT_SHADER) {
       throw("*** Error: unknown shader type");
       return null;
     }
   }
   return loadShader(
       gl, shaderSource, opt_shaderType ? opt_shaderType : shaderType,
       opt_errorCallback);
 };
 var loadStandardProgram = function(gl) {
   var program = gl.createProgram();
   gl.attachShader(program, loadStandardVertexShader(gl));
   gl.attachShader(program, loadStandardFragmentShader(gl));
   linkProgram(gl, program);
   return program;
 };
 /**
  * Loads shaders from files, creates a program, attaches the shaders and links.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {string} vertexShaderPath The URL of the vertex shader.
  * @param {string} fragmentShaderPath The URL of the fragment shader.
  * @param {function(string): void) opt_errorCallback callback for errors.
  * @return {!WebGLProgram} The created program.
  */
 var loadProgramFromFile = function(
     gl, vertexShaderPath, fragmentShaderPath, opt_errorCallback) {
   var program = gl.createProgram();
   gl.attachShader(
       program,
       loadShaderFromFile(
           gl, vertexShaderPath, gl.VERTEX_SHADER, opt_errorCallback));
   gl.attachShader(
       program,
       loadShaderFromFile(
           gl, fragmentShaderPath, gl.FRAGMENT_SHADER, opt_errorCallback));
   linkProgram(gl, program, opt_errorCallback);
   return program;
 };
 /**
  * Loads shaders from script tags, creates a program, attaches the shaders and
  * links.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {string} vertexScriptId The id of the script tag that contains the
  *        vertex shader.
  * @param {string} fragmentScriptId The id of the script tag that contains the
  *        fragment shader.
  * @param {function(string): void) opt_errorCallback callback for errors.
  * @return {!WebGLProgram} The created program.
  */
 var loadProgramFromScript = function loadProgramFromScript(
     gl, vertexScriptId, fragmentScriptId, opt_errorCallback) {
   var program = gl.createProgram();
   gl.attachShader(
       program,
       loadShaderFromScript(
           gl, vertexScriptId, gl.VERTEX_SHADER, opt_errorCallback));
   gl.attachShader(
       program,
       loadShaderFromScript(
           gl, fragmentScriptId,  gl.FRAGMENT_SHADER, opt_errorCallback));
   linkProgram(gl, program, opt_errorCallback);
   return program;
 };
 /**
  * Loads shaders from source, creates a program, attaches the shaders and
  * links.
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {string} vertexShader The vertex shader.
  * @param {string} fragmentShader The fragment shader.
  * @param {function(string): void) opt_errorCallback callback for errors.
  * @return {!WebGLProgram} The created program.
  */
 var loadProgram = function(
     gl, vertexShader, fragmentShader, opt_errorCallback) {
   var program = gl.createProgram();
   gl.attachShader(
       program,
       loadShader(
           gl, vertexShader, gl.VERTEX_SHADER, opt_errorCallback));
   gl.attachShader(
       program,
       loadShader(
           gl, fragmentShader, gl.FRAGMENT_SHADER, opt_errorCallback));
   linkProgram(gl, program, opt_errorCallback);
   return program;
 };
 /**
  * Loads shaders from source, creates a program, attaches the shaders and
  * links but expects error.
  *
  * GLSL 1.0.17 10.27 effectively says that compileShader can
  * always succeed as long as linkProgram fails so we can't
  * rely on compileShader failing. This function expects
  * one of the shader to fail OR linking to fail.
  *
  * @param {!WebGLContext} gl The WebGLContext to use.
  * @param {string} vertexShaderScriptId The vertex shader.
  * @param {string} fragmentShaderScriptId The fragment shader.
  * @return {WebGLProgram} The created program.
  */
 var loadProgramFromScriptExpectError = function(
     gl, vertexShaderScriptId, fragmentShaderScriptId) {
   var vertexShader = loadShaderFromScript(gl, vertexShaderScriptId);
   if (!vertexShader) {
     return null;
   }
   var fragmentShader = loadShaderFromScript(gl, fragmentShaderScriptId);
   if (!fragmentShader) {
     return null;
   }
   var linkSuccess = true;
   var program = gl.createProgram();
   gl.attachShader(program, vertexShader);
   gl.attachShader(program, fragmentShader);
   linkSuccess = true;
   linkProgram(gl, program, function() {
       linkSuccess = false;
     });
   return linkSuccess ? program : null;
 };
 var basePath;
 var getBasePath = function() {
   if (!basePath) {
     var expectedBase = "webgl-test-utils.js";
     var scripts = document.getElementsByTagName('script');
     for (var script, i = 0; script = scripts[i]; i++) {
       var src = script.src;
       var l = src.length;
       if (src.substr(l - expectedBase.length) == expectedBase) {
         basePath = src.substr(0, l - expectedBase.length);
       }
     }
   }
   return basePath;
 };
 var loadStandardVertexShader = function(gl) {
   return loadShaderFromFile(
       gl, getBasePath() + "vertexShader.vert", gl.VERTEX_SHADER);
 };
 var loadStandardFragmentShader = function(gl) {
   return loadShaderFromFile(
       gl, getBasePath() + "fragmentShader.frag", gl.FRAGMENT_SHADER);
 };
 /**
  * Loads an image asynchronously.
  * @param {string} url URL of image to load.
  * @param {!function(!Element): void} callback Function to call
  *     with loaded image.
  */
 var loadImageAsync = function(url, callback) {
   var img = document.createElement('img');
   img.onload = function() {
     callback(img);
   };
   img.src = url;
 };
 /**
  * Loads an array of images.
  * @param {!Array.<string>} urls URLs of images to load.
  * @param {!function(!{string, img}): void} callback. Callback
  *     that gets passed map of urls to img tags.
  */
 var loadImagesAsync = function(urls, callback) {
   var count = 1;
   var images = { };
   function countDown() {
     --count;
     if (count == 0) {
       callback(images);
     }
   }
   function imageLoaded(url) {
     return function(img) {
       images[url] = img;
       countDown();
     }
   }
   for (var ii = 0; ii < urls.length; ++ii) {
     ++count;
     loadImageAsync(urls[ii], imageLoaded(urls[ii]));
   }
   countDown();
 };
 var getUrlArguments = function() {
   var args = {};
   try {
     var s = window.location.href;
     var q = s.indexOf("?");
     var e = s.indexOf("#");
     if (e < 0) {
       e = s.length;
     }
     var query = s.substring(q + 1, e);
     var pairs = query.split("&");
     for (var ii = 0; ii < pairs.length; ++ii) {
       var keyValue = pairs[ii].split("=");
       var key = keyValue[0];
       var value = decodeURIComponent(keyValue[1]);
       args[key] = value;
     }
   } catch (e) {
     throw "could not parse url";
   }
   return args;
 };
 var makeImage = function(canvas) {
   var img = document.createElement('img');
   img.src = canvas.toDataURL();
   return img;
 };
 var insertImage = function(element, caption, img) {
   var div = document.createElement("div");
   div.appendChild(img);
   var label = document.createElement("div");
   label.appendChild(document.createTextNode(caption));
   div.appendChild(label);
    element.appendChild(div);
 };
 var addShaderSource = function(element, label, source) {
   var div = document.createElement("div");
   var s = document.createElement("pre");
   s.className = "shader-source";
   s.style.display = "none";
   var ol = document.createElement("ol");
   //s.appendChild(document.createTextNode(source));
   var lines = source.split("\n");
   for (var ii = 0; ii < lines.length; ++ii) {
     var line = lines[ii];
     var li = document.createElement("li");
     li.appendChild(document.createTextNode(line));
     ol.appendChild(li);
   }
   s.appendChild(ol);
   var l = document.createElement("a");
   l.href = "show-shader-source";
   l.appendChild(document.createTextNode(label));
   l.addEventListener('click', function(event) {
       if (event.preventDefault) {
         event.preventDefault();
       }
       s.style.display = (s.style.display == 'none') ? 'block' : 'none';
       return false;
     }, false);
   div.appendChild(l);
   div.appendChild(s);
   element.appendChild(div);
 }
 return {
   addShaderSource: addShaderSource,
   clearAndDrawUnitQuad : clearAndDrawUnitQuad,
   create3DContext: create3DContext,
   create3DContextWithWrapperThatThrowsOnGLError:
     create3DContextWithWrapperThatThrowsOnGLError,
   checkCanvas: checkCanvas,
   checkCanvasRect: checkCanvasRect,
   createColoredTexture: createColoredTexture,
   drawQuad: drawQuad,
   drawUnitQuad: drawUnitQuad,
   endsWith: endsWith,
   getExtensionWithKnownPrefixes: getExtensionWithKnownPrefixes,
   getFileListAsync: getFileListAsync,
   getLastError: getLastError,
   getScript: getScript,
   getSupportedExtensionWithKnownPrefixes: getSupportedExtensionWithKnownPrefixes,
   getUrlArguments: getUrlArguments,
   glEnumToString: glEnumToString,
   glErrorShouldBe: glErrorShouldBe,
   fillTexture: fillTexture,
   insertImage: insertImage,
   loadImageAsync: loadImageAsync,
   loadImagesAsync: loadImagesAsync,
   loadProgram: loadProgram,
   loadProgramFromFile: loadProgramFromFile,
   loadProgramFromScript: loadProgramFromScript,
   loadProgramFromScriptExpectError: loadProgramFromScriptExpectError,
   loadShader: loadShader,
   loadShaderFromFile: loadShaderFromFile,
   loadShaderFromScript: loadShaderFromScript,
   loadStandardProgram: loadStandardProgram,
   loadStandardVertexShader: loadStandardVertexShader,
   loadStandardFragmentShader: loadStandardFragmentShader,
   loadTextFileAsync: loadTextFileAsync,
   loadTexture: loadTexture,
   log: log,
   loggingOff: loggingOff,
   makeImage: makeImage,
   error: error,
   setupProgram: setupProgram,
   setupQuad: setupQuad,
   setupSimpleTextureFragmentShader: setupSimpleTextureFragmentShader,
   setupSimpleTextureProgram: setupSimpleTextureProgram,
   setupSimpleTextureVertexShader: setupSimpleTextureVertexShader,
   setupTexturedQuad: setupTexturedQuad,
   setupTexturedQuadWithTexCoords: setupTexturedQuadWithTexCoords,
   setupUnitQuad: setupUnitQuad,
   setupUnitQuadWithTexCoords: setupUnitQuadWithTexCoords,
   setupWebGLWithShaders: setupWebGLWithShaders,
   startsWith: startsWith,
   shouldGenerateGLError: shouldGenerateGLError,
   readFile: readFile,
   readFileList: readFileList,
   none: false
 };
 }());