third_party/WebKit/LayoutTests/fast/canvas/webgl/tex-image-and-sub-image-2d-with-array-buffer-view.html

   1 <html>
   2 <head>
   3 <script src="../../../resources/js-test.js"></script>
   4 <script src="resources/webgl-test.js"></script>
   5 <script src="resources/webgl-test-utils.js"></script>
   6 </head>
   7 <body>
   8 <canvas id="example" width="1px" height="2px"></canvas>
   9 <div id="description"></div>
  10 <div id="console"></div>
  11 <script>
  12 description('Verifies texImage2D and texSubImage2D code paths taking ArrayBufferView');
  13
  14 var wtu = WebGLTestUtils;
  15 var gl = null;
  16 var textureLoc = null;
  17
  18 // These two declarations need to be global for "shouldBe" to see them
  19 var buf = null;
  20 var idx = 0;
  21 var pixel = [0, 0, 0, 1];
  22 var correctColor = null;
  23
  24 function generateRGBAData(type, unpackAlignment)
  25 {
  26     var sourceData = [ 255,   0,   0, 255,
  27                        0,   255,   0,   0 ];
  28     switch (type) {
  29     case gl.UNSIGNED_BYTE: {
  30         var rowWidth = Math.max(unpackAlignment, 4);
  31         var data = new Uint8Array(2 * rowWidth);
  32         for (var y = 0; y < 2; ++y) {
  33             var index = y * rowWidth;
  34             for (var element = 0; element < 4; ++element) {
  35                 data[index + element] = sourceData[4 * y + element];
  36             }
  37         }
  38         return data;
  39     }
  40     case gl.UNSIGNED_SHORT_4_4_4_4: {
  41         var rowWidth = Math.max(unpackAlignment, 2) / 2;
  42         var data = new Uint16Array(2 * rowWidth);
  43         for (var y = 0; y < 2; ++y) {
  44             var index = y * rowWidth;
  45             data[index] = (((sourceData[4 * y] & 0xF0) << 8)
  46                            | ((sourceData[4 * y + 1] & 0xF0) << 4)
  47                            | (sourceData[4 * y + 2] & 0xF0)
  48                            | (sourceData[4 * y + 3] >> 4));
  49         }
  50         return data;
  51     }
  52     case gl.UNSIGNED_SHORT_5_5_5_1: {
  53         var rowWidth = Math.max(unpackAlignment, 2) / 2;
  54         var data = new Uint16Array(2 * rowWidth);
  55         for (var y = 0; y < 2; ++y) {
  56             var index = y * rowWidth;
  57             data[index] = (((sourceData[4 * y] & 0xF8) << 8)
  58                            | ((sourceData[4 * y + 1] & 0xF8) << 3)
  59                            | ((sourceData[4 * y + 2] & 0xF8) >> 2)
  60                            | (sourceData[4 * y + 3] >> 7));
  61         }
  62         return data;
  63     }
  64     }
  65 }
  66
  67 function typeToString(type)
  68 {
  69     switch (type) {
  70     case gl.UNSIGNED_BYTE:  return 'UNSIGNED_BYTE';
  71     case gl.UNSIGNED_SHORT_5_5_5_1:  return 'UNSIGNED_SHORT_5_5_5_1';
  72     case gl.UNSIGNED_SHORT_4_4_4_4:  return 'UNSIGNED_SHORT_4_4_4_4';
  73     }
  74     return 'Unknown type ' + type;
  75 }
  76
  77 function runOneIteration(useTexSubImage2D, type, unpackAlignment, flipY, premultiplyAlpha, topColor, bottomColor)
  78 {
  79     debug('Testing ' + (useTexSubImage2D ? 'texSubImage2D' : 'texImage2D') +
  80           ' with type=' + typeToString(type) +
  81           ', unpackAlignment=' + unpackAlignment +
  82           ', flipY=' + flipY + ', premultiplyAlpha=' + premultiplyAlpha);
  83     gl.colorMask(true, true, true, true);
  84     gl.clearColor(0, 0, 0, 1.0);
  85     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  86     // Enable writes to the RGB channels
  87     gl.colorMask(true, true, true, false);
  88     var texture = gl.createTexture();
  89     // Bind the texture to texture unit 0
  90     gl.bindTexture(gl.TEXTURE_2D, texture);
  91     // Set up texture parameters
  92     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  93     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  94     // Set up pixel store parameters
  95     gl.pixelStorei(gl.UNPACK_ALIGNMENT, unpackAlignment);
  96     gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
  97     gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, premultiplyAlpha);
  98     // Generate the data
  99     var data = generateRGBAData(type, unpackAlignment);
 100     if (gl.getError() != gl.NO_ERROR)
 101         testFailed("GL error before texture upload");
 102     // Upload the image into the texture
 103     if (useTexSubImage2D) {
 104         // Initialize the texture to black first
 105         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 2, 0,
 106                       gl.RGBA, type, null);
 107         if (gl.getError() != gl.NO_ERROR)
 108             testFailed("GL error after texImage2D(null)");
 109         gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 1, 2, gl.RGBA, type, data);
 110         if (gl.getError() != gl.NO_ERROR)
 111             testFailed("GL error after texSubImage2D");
 112     } else {
 113         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 2, 0, gl.RGBA, type, data);
 114         if (gl.getError() != gl.NO_ERROR)
 115             testFailed("GL error after texImage2D");
 116     }
 117
 118     // Point the uniform sampler to texture unit 0
 119     gl.uniform1i(textureLoc, 0);
 120     // Draw the triangles
 121     wtu.drawQuad(gl, [0, 0, 0, 255]);
 122
 123     // Read back the rendering results
 124     buf = new Uint8Array(1 * 2 * 4);
 125     gl.readPixels(0, 0, 1, 2, gl.RGBA, gl.UNSIGNED_BYTE, buf);
 126     // Check the top pixel and bottom pixel and make sure they have
 127     // the right color.
 128     debug("Checking bottom pixel");
 129     wtu.checkCanvasRect(gl, 0, 0, 1, 1, bottomColor, "shouldBe " + bottomColor);
 130     debug("Checking top pixel");
 131     wtu.checkCanvasRect(gl, 0, 1, 1, 1, topColor, "shouldBe " + topColor);
 132 }
 133
 134 function runTest()
 135 {
 136     var red = [255, 0, 0, 255];
 137     var green = [0, 255, 0, 255];
 138     var redPremultiplyAlpha = [255, 0, 0, 255];
 139     var greenPremultiplyAlpha = [0, 0, 0, 255];
 140
 141     var types = [ gl.UNSIGNED_BYTE, gl.UNSIGNED_SHORT_5_5_5_1, gl.UNSIGNED_SHORT_4_4_4_4 ];
 142     var unpackAlignments = [ 1, 2, 4, 8 ];
 143
 144     for (var i = 0; i < types.length; ++i) {
 145         var type = types[i];
 146         for (var j = 0; j < unpackAlignments.length; ++j) {
 147             var unpackAlignment = unpackAlignments[j];
 148             runOneIteration(false, type, unpackAlignment, true, false,
 149                             red, green);
 150             runOneIteration(false, type, unpackAlignment, false, false,
 151                             green, red);
 152             runOneIteration(false, type, unpackAlignment, true, true,
 153                             redPremultiplyAlpha, greenPremultiplyAlpha);
 154             runOneIteration(false, type, unpackAlignment, false, true,
 155                             greenPremultiplyAlpha, redPremultiplyAlpha);
 156             runOneIteration(true, type, unpackAlignment, true, false,
 157                             red, green);
 158             runOneIteration(true, type, unpackAlignment, false, false,
 159                             green, red);
 160             runOneIteration(true, type, unpackAlignment, true, true,
 161                             redPremultiplyAlpha, greenPremultiplyAlpha);
 162             runOneIteration(true, type, unpackAlignment, false, true,
 163                             greenPremultiplyAlpha, redPremultiplyAlpha);
 164         }
 165     }
 166
 167 }
 168
 169 var canvas = document.getElementById("example");
 170 gl = wtu.create3DContext(canvas);
 171 var program = wtu.setupTexturedQuad(gl);
 172 gl.disable(gl.BLEND);
 173
 174 gl.clearColor(0,0,0,1);
 175 gl.clearDepth(1);
 176
 177 textureLoc = gl.getUniformLocation(program, "tex");
 178
 179 runTest();
 180 </script>
 181 </body>
 182 </html>