src/third_party/webgl/src/sdk/tests/conformance/resources/tex-image-and-sub-image-2d-with-canvas.js

   1 /*
   2 ** Copyright (c) 2012 The Khronos Group Inc.
   3 **
   4 ** Permission is hereby granted, free of charge, to any person obtaining a
   5 ** copy of this software and/or associated documentation files (the
   6 ** "Materials"), to deal in the Materials without restriction, including
   7 ** without limitation the rights to use, copy, modify, merge, publish,
   8 ** distribute, sublicense, and/or sell copies of the Materials, and to
   9 ** permit persons to whom the Materials are furnished to do so, subject to
  10 ** the following conditions:
  11 **
  12 ** The above copyright notice and this permission notice shall be included
  13 ** in all copies or substantial portions of the Materials.
  14 **
  15 ** THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  16 ** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  17 ** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
  18 ** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
  19 ** CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
  20 ** TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
  21 ** MATERIALS OR THE USE OR OTHER DEALINGS IN THE MATERIALS.
  22 */
  23
  24 function generateTest(pixelFormat, pixelType, prologue) {
  25     var wtu = WebGLTestUtils;
  26     var gl = null;
  27     var successfullyParsed = false;
  28
  29     var init = function()
  30     {
  31         description('Verify texImage2D and texSubImage2D code paths taking canvas elements (' + pixelFormat + '/' + pixelType + ')');
  32
  33         gl = wtu.create3DContext("example");
  34
  35         if (!prologue(gl)) {
  36             finishTest();
  37             return;
  38         }
  39
  40         var program = wtu.setupTexturedQuad(gl);
  41
  42         gl.clearColor(0,0,0,1);
  43         gl.clearDepth(1);
  44
  45         var testCanvas = document.createElement('canvas');
  46         runTest(testCanvas);
  47         //document.body.appendChild(testCanvas);
  48     }
  49
  50     function setCanvasToRedGreen(ctx) {
  51       var width = ctx.canvas.width;
  52       var height = ctx.canvas.height;
  53       var halfHeight = Math.floor(height / 2);
  54       ctx.fillStyle = "#ff0000";
  55       ctx.fillRect(0, 0, width, halfHeight);
  56       ctx.fillStyle = "#00ff00";
  57       ctx.fillRect(0, halfHeight, width, height - halfHeight);
  58     }
  59
  60     function drawTextInCanvas(ctx) {
  61       var width = ctx.canvas.width;
  62       var height = ctx.canvas.height;
  63       ctx.fillStyle = "#ffffff";
  64       ctx.fillRect(0, 0, width, height);
  65       ctx.font = '20pt Arial';
  66       ctx.fillStyle = 'black';
  67       ctx.textAlign = "center";
  68       ctx.textBaseline = "middle";
  69       ctx.fillText("1234567890", width / 2, height / 4);
  70     }
  71
  72     function setCanvasTo257x257(ctx) {
  73       ctx.canvas.width = 257;
  74       ctx.canvas.height = 257;
  75       setCanvasToRedGreen(ctx);
  76     }
  77
  78     function setCanvasTo1x2(ctx) {
  79       ctx.canvas.width = 1;
  80       ctx.canvas.height = 2;
  81       setCanvasToRedGreen(ctx);
  82     }
  83
  84     function runOneIteration(canvas, useTexSubImage2D, flipY, opt_texture, opt_fontTest)
  85     {
  86         debug('Testing ' + (useTexSubImage2D ? 'texSubImage2D' : 'texImage2D') +
  87               ' with flipY=' + flipY + ' canvas size: ' + canvas.width + 'x' + canvas.height +
  88               (opt_fontTest ? " with fonts" : " with red-green"));
  89         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  90         if (!opt_texture) {
  91             var texture = gl.createTexture();
  92             // Bind the texture to texture unit 0
  93             gl.bindTexture(gl.TEXTURE_2D, texture);
  94             // Set up texture parameters
  95             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  96             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  97             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  98             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  99         } else {
 100             var texture = opt_texture;
 101         }
 102         // Set up pixel store parameters
 103         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
 104         gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
 105         gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
 106         // Upload the image into the texture
 107         if (useTexSubImage2D) {
 108             // Initialize the texture to black first
 109             gl.texImage2D(gl.TEXTURE_2D, 0, gl[pixelFormat], canvas.width, canvas.height, 0,
 110                           gl[pixelFormat], gl[pixelType], null);
 111             gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl[pixelFormat], gl[pixelType], canvas);
 112         } else {
 113             gl.texImage2D(gl.TEXTURE_2D, 0, gl[pixelFormat], gl[pixelFormat], gl[pixelType], canvas);
 114         }
 115
 116         // Draw the triangles
 117         wtu.clearAndDrawUnitQuad(gl, [0, 255, 0, 255]);
 118
 119         var width = gl.canvas.width;
 120         var height = gl.canvas.height;
 121         var halfHeight = Math.floor(height / 2);
 122         var top = flipY ? 0 : (height - halfHeight);
 123         var bottom = flipY ? (height - halfHeight) : 0;
 124
 125         if (opt_fontTest) {
 126             // check half is a solid color.
 127             wtu.checkCanvasRect(
 128                   gl, 0, top, width, halfHeight,
 129                   [255, 255, 255, 255],
 130                   "should be white");
 131             // check other half is not a solid color.
 132             wtu.checkCanvasRectColor(
 133                   gl, 0, bottom, width, halfHeight,
 134                   [255, 255, 255, 255], 0,
 135                   function() {
 136                     testFailed("font missing");
 137                   },
 138                   function() {
 139                     testPassed("font renderered");
 140                   },
 141                   debug);
 142         } else {
 143             // Check the top and bottom halves and make sure they have the right color.
 144             var red = [255, 0, 0];
 145             var green = [0, 255, 0];
 146             debug("Checking " + (flipY ? "top" : "bottom"));
 147             wtu.checkCanvasRect(gl, 0, bottom, width, halfHeight, red,
 148                                 "shouldBe " + red);
 149             debug("Checking " + (flipY ? "bottom" : "top"));
 150             wtu.checkCanvasRect(gl, 0, top, width, halfHeight, green,
 151                                 "shouldBe " + green);
 152         }
 153
 154         if (false) {
 155           var m = wtu.makeImageFromCanvas(gl.canvas);
 156           document.getElementById("console").appendChild(m);
 157           document.getElementById("console").appendChild(document.createElement("hr"));
 158         }
 159
 160         return texture;
 161     }
 162
 163     function runTest(canvas)
 164     {
 165         var ctx = canvas.getContext("2d");
 166
 167         var count = 4;
 168         var caseNdx = 0;
 169
 170         var cases = [
 171             { sub: false, flipY: true,  font: false, init: setCanvasTo1x2 },
 172             { sub: false, flipY: false, font: false },
 173             { sub: true,  flipY: true,  font: false },
 174             { sub: true,  flipY: false, font: false },
 175             { sub: false, flipY: true,  font: false, init: setCanvasTo257x257 },
 176             { sub: false, flipY: false, font: false },
 177             { sub: true,  flipY: true,  font: false },
 178             { sub: true,  flipY: false, font: false },
 179             { sub: false, flipY: true,  font: true, init: drawTextInCanvas },
 180             { sub: false, flipY: false, font: true },
 181             { sub: true,  flipY: true,  font: true },
 182             { sub: true,  flipY: false, font: true },
 183         ];
 184
 185         var texture;
 186         function runNextTest() {
 187             var c = cases[caseNdx];
 188             if (c.init) {
 189               c.init(ctx);
 190             }
 191             texture = runOneIteration(canvas, c.sub, c.flipY, texture, c.font);
 192             // for the first 2 iterations always make a new texture.
 193             if (count > 2) {
 194               texture = undefined;
 195             }
 196             ++caseNdx;
 197             if (caseNdx == cases.length) {
 198                 caseNdx = 0;
 199                 --count;
 200                 if (!count) {
 201                     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
 202                     finishTest();
 203                     return;
 204                 }
 205             }
 206             wtu.waitForComposite(gl, runNextTest);
 207         }
 208         runNextTest();
 209     }
 210
 211     return init;
 212 }