third_party/WebKit/LayoutTests/fast/canvas/webgl/read-pixels-test.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2   "http://www.w3.org/TR/html4/loose.dtd">
   3 <html>
   4 <head>
   5 <title>WebGL ReadPixels conformance test.</title>
   6 <script src="../../../resources/js-test.js"></script>
   7 <script src="resources/webgl-test.js"> </script>
   8 <script src="resources/webgl-test-utils.js"> </script>
   9 </head>
  10 <body>
  11 <canvas id="example" width="200" height="200" style="width: 20px; height: 20px"></canvas>
  12 <div id="description"></div>
  13 <div id="console"></div>
  14 <script>
  15 description("Checks that ReadPixels works as expected.");
  16
  17 if (window.internals)
  18     window.internals.settings.setWebGLErrorsToConsoleEnabled(false);
  19
  20 var wtu = WebGLTestUtils;
  21 var canvas = document.getElementById("example");
  22 var gl = create3DContext(canvas);
  23
  24 if (window.initNonKhronosFramework) {
  25    window.initNonKhronosFramework(true);
  26 }
  27
  28 var actual;
  29 var expected;
  30 var width = 2;
  31 var height = 2;
  32 var continueTestFunc = continueTestPart1;
  33
  34 gl.clearColor(1, 1, 1, 1);
  35 gl.clear(gl.COLOR_BUFFER_BIT);
  36
  37 // Resize the canvas to 2x2. This is an attempt to get stuff in the backbuffer.
  38 // that shouldn't be there.
  39 canvas.addEventListener("webglcontextrestored", continueTestAfterContextRestored, false);
  40 canvas.width = width;
  41 canvas.height = height;
  42 if (gl.getError() != gl.CONTEXT_LOST_WEBGL) {
  43   continueTestPart1();
  44 }
  45
  46 function continueTestAfterContextRestored() {
  47   window.gl = create3DContext(canvas);
  48   var func = continueTestFunc;
  49   window.continueTestFunc = function() { testFailed("should not be here"); };
  50   func();
  51 }
  52
  53 function continueTestPart1() {
  54   gl.clearColor(0.5, 0.7, 1.0, 1);
  55   gl.clear(gl.COLOR_BUFFER_BIT);
  56
  57   var innerColor = [0.5, 0.7, 1.0, 1];
  58   var outerColor = [0, 0, 0, 0];
  59
  60   var tests = [
  61     { msg: 'in range', checkColor: innerColor, x:  0, y:  0,
  62       oneColor: innerColor, oneX: 0, oneY: 0},
  63     { msg: 'off top left', checkColor: outerColor, x: -1, y: -1,
  64       oneColor: innerColor, oneX: 1, oneY: 1},
  65     { msg: 'off bottom right', checkColor: outerColor, x:  1, y:  1,
  66       oneColor: innerColor, oneX: 0, oneY: 0},
  67     { msg: 'completely off top ', checkColor: outerColor, x:  0, y: -2,
  68       oneColor: outerColor, oneX: 0, oneY: 0},
  69     { msg: 'completely off bottom', checkColor: outerColor, x:  0, y:  2,
  70       oneColor: outerColor, oneX: 0, oneY: 0},
  71     { msg: 'completely off left', checkColor: outerColor, x: -2, y:  0,
  72       oneColor: outerColor, oneX: 0, oneY: 0},
  73     { msg: 'completeley off right', checkColor: outerColor, x:  2, y:  0,
  74       oneColor: outerColor, oneX: 0, oneY: 0}
  75   ];
  76
  77   for (var tt = 0; tt < tests.length; ++tt) {
  78     var test = tests[tt];
  79     debug("");
  80     debug("checking: " + test.msg);
  81     checkBuffer(test.checkColor, test.x, test.y,
  82                 test.oneColor, test.oneX, test.oneY);
  83   }
  84
  85   glErrorShouldBe(gl, gl.NO_ERROR, "there should be no GL errors");
  86
  87   function checkBuffer(checkColor, x, y, oneColor, oneX, oneY) {
  88     var buf = new Uint8Array(width * height * 4);
  89     gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
  90     for (var yy = 0; yy < height; ++yy) {
  91       for (var xx = 0; xx < width; ++xx) {
  92         var offset = (yy * width + xx) * 4;
  93         var expectedColors = (oneX == xx && oneY == yy) ? oneColor : checkColor;
  94         for (var cc = 0; cc < 4; ++cc) {
  95           var expectedColor = expectedColors[cc] * 255;
  96           var color = buf[offset + cc];
  97           var diff = Math.abs(expectedColor - color);
  98           assertMsg(diff < 3,
  99                     "color pixel at " + xx + ", " + yy + " should be about " + expectedColor);
 100         }
 101       }
 102     }
 103   }
 104
 105   var badFormats = [
 106     {
 107       format: gl.RGB,
 108       type: gl.UNSIGNED_BYTE,
 109       dest: new Uint8Array(3),
 110       error: gl.INVALID_OPERATION
 111     },
 112     {
 113       format: gl.RGB,
 114       type: gl.UNSIGNED_SHORT_5_6_5,
 115       dest: new Uint8Array(3),
 116       error: gl.INVALID_OPERATION
 117     },
 118     {
 119       format: gl.RGBA,
 120       type: gl.UNSIGNED_SHORT_5_5_5_1,
 121       dest: new Uint16Array(1),
 122       error: gl.INVALID_OPERATION
 123     },
 124     {
 125       format: gl.RGBA,
 126       type: gl.UNSIGNED_SHORT_4_4_4_4,
 127       dest: new Uint16Array(1),
 128       error: gl.INVALID_OPERATION
 129     },
 130     {
 131       format: gl.ALPHA,
 132       type: gl.UNSIGNED_BYTE,
 133       dest: new Uint8Array(1),
 134       error: gl.INVALID_OPERATION
 135     },
 136     {
 137       format: gl.LUMINANCE,
 138       type: gl.UNSIGNED_BYTE,
 139       dest: new Uint8Array(1),
 140       error: gl.INVALID_ENUM
 141     },
 142     {
 143       format: gl.LUMINANCE_ALPHA,
 144       type: gl.UNSIGNED_BYTE,
 145       dest: new Uint8Array(2),
 146       error: gl.INVALID_ENUM
 147     }
 148   ];
 149   debug("");
 150   debug("check disallowed formats");
 151   for (var tt = 0; tt < badFormats.length; ++ tt) {
 152     var info = badFormats[tt]
 153     var format = info.format;
 154     var type = info.type;
 155     var dest = info.dest;
 156     var error = info.error;
 157     gl.readPixels(0, 0, 1, 1, format, type, dest);
 158     // note that the GL error is INVALID_OPERATION if both format and type are invalid, but
 159     // INVALID_ENUM if only one is.
 160     glErrorShouldBe(
 161         gl, error,
 162         "Should not be able to read as " + wtu.glEnumToString(gl, format) +
 163         " / " + wtu.glEnumToString(gl, type));
 164   }
 165
 166   debug("");
 167   debug("check reading with lots of drawing");
 168   continueTestFunc = continueTestPart2;
 169   width = 1024;
 170   height = 1024;
 171   canvas.width = width;
 172   canvas.height = height;
 173   if (gl.getError() != gl.CONTEXT_LOST_WEBGL) {
 174     continueTestPart2();
 175   }
 176 }
 177
 178 function continueTestPart2() {
 179   gl.viewport(0, 0, 1024, 1024);
 180   var program = wtu.setupTexturedQuad(gl);
 181   var loc = gl.getUniformLocation(program, "tex");
 182   gl.disable(gl.BLEND);
 183   gl.disable(gl.DEPTH_TEST);
 184   var colors = [[255, 0, 0, 255], [0, 255, 0, 255], [0, 0, 255, 255]];
 185   var textures = [];
 186   var results = [];
 187   for (var ii = 0; ii < colors.length; ++ii) {
 188     gl.activeTexture(gl.TEXTURE0 + ii);
 189     var tex = gl.createTexture();
 190     wtu.fillTexture(gl, tex, 1, 1, colors[ii]);
 191     textures.push(tex);
 192   }
 193   for (var ii = 0; ii < colors.length; ++ii) {
 194     for (var jj = 0; jj < 0 + ii + 1; ++jj) {
 195       gl.uniform1i(loc, jj % 3);
 196       gl.drawArrays(gl.TRIANGLES, 0, 6);
 197     }
 198     var buf = new Uint8Array(4);
 199     gl.readPixels(512, 512, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, buf);
 200     results.push(buf);
 201     for (var kk = 0; kk < 1; ++kk) {
 202       gl.uniform1i(loc, (jj + kk) % 3);
 203       gl.drawArrays(gl.TRIANGLES, 0, 6);
 204     }
 205   }
 206   for (var ii = 0; ii < colors.length; ++ii) {
 207     var buf = results[ii];
 208     var color = colors[ii];
 209     actual = [buf[0], buf[1], buf[2], buf[3]];
 210     expected = [color[0], color[1], color[2], color[3]];
 211     shouldBe("actual", "expected");
 212   }
 213   glErrorShouldBe(gl, gl.NO_ERROR, "there should be no GL errors");
 214
 215   debug("");
 216   finishTest();
 217 }
 218 </script>
 219 </body>
 220 </html>
 221