third_party/WebKit/LayoutTests/fast/canvas/webgl/context-attributes-alpha-depth-stencil-antialias.html

   1
   2 <!DOCTYPE html>
   3 <html>
   4 <head>
   5 <meta charset="utf-8">
   6 <script src="../../../resources/js-test.js"></script>
   7 <script src="resources/webgl-test.js"></script>
   8 <script id="vshader" type="x-shader/x-vertex">
   9 attribute vec3 pos;
  10 attribute vec4 colorIn;
  11 varying vec4 color;
  12
  13 void main()
  14 {
  15     color = colorIn;
  16     gl_Position = vec4(pos.xyz, 1.0);
  17 }
  18 </script>
  19
  20 <script id="fshader" type="x-shader/x-fragment">
  21 precision mediump float;
  22
  23 varying vec4 color;
  24
  25 void main()
  26 {
  27     gl_FragColor = color;
  28 }
  29 </script>
  30
  31 <script>
  32 var successfullyParsed = false;
  33
  34 // These four declarations need to be global for "shouldBe" to see them
  35 var gl;
  36 var contextAttribs = null;
  37 var pixel = [0, 0, 0, 1];
  38 var correctColor = null;
  39 var framebuffer;
  40 var fbHasColor;
  41 var fbHasDepth;
  42 var fbHasStencil;
  43
  44 function init()
  45 {
  46     if (window.initNonKhronosFramework) {
  47         window.initNonKhronosFramework(true);
  48     }
  49
  50     if (window.internals)
  51         window.internals.settings.setWebGLErrorsToConsoleEnabled(false);
  52
  53     description('Verify WebGLContextAttributes are working as specified, including alpha, depth, stencil, antialias, but not premultipliedAlpha');
  54
  55     runTest();
  56 }
  57
  58 function getWebGL(canvasWidth, canvasHeight, contextAttribs, clearColor, clearDepth, clearStencil)
  59 {
  60     var canvas = document.createElement("canvas");
  61     if (!canvas)
  62         return null;
  63     canvas.width = canvasWidth;
  64     canvas.height = canvasHeight;
  65
  66     gl = create3DContext(canvas, contextAttribs);
  67     if (!gl)
  68         return null;
  69
  70     var program = createProgram(gl, "vshader", "fshader", ["pos", "colorIn"]);
  71     if (!program)
  72         return null;
  73
  74     gl.useProgram(program);
  75
  76     gl.enable(gl.DEPTH_TEST);
  77     gl.enable(gl.STENCIL_TEST);
  78     gl.disable(gl.BLEND);
  79
  80     gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
  81     gl.clearDepth(clearDepth);
  82     gl.clearStencil(clearStencil);
  83     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
  84
  85     framebuffer = gl.createFramebuffer();
  86     gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  87     var texture = gl.createTexture();
  88     gl.bindTexture(gl.TEXTURE_2D, texture);
  89     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.canvas.width, gl.canvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  90     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
  91     fbHasStencil = false;
  92     fbHasDepth = false;
  93     fbHasColor = gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE;
  94     if (fbHasColor) {
  95       var depthStencil = gl.createRenderbuffer();
  96       gl.bindRenderbuffer(gl.RENDERBUFFER, depthStencil);
  97       gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, gl.canvas.width, gl.canvas.height);
  98       gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, depthStencil);
  99       fbHasDepth = gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE;
 100       if (!fbHasDepth) {
 101         gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, null);
 102         shouldBe('gl.checkFramebufferStatus(gl.FRAMEBUFFER)', 'gl.FRAMEBUFFER_COMPLETE');
 103       } else {
 104         fbHasStencil = true;
 105       }
 106     }
 107     gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 108     glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
 109
 110     return gl;
 111 }
 112
 113 function drawAndReadPixel(gl, vertices, colors, x, y)
 114 {
 115     var colorOffset = vertices.byteLength;
 116
 117     var vbo = gl.createBuffer();
 118     gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
 119     gl.bufferData(gl.ARRAY_BUFFER, colorOffset + colors.byteLength, gl.STATIC_DRAW);
 120     gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertices);
 121     gl.bufferSubData(gl.ARRAY_BUFFER, colorOffset, colors);
 122
 123     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
 124     gl.enableVertexAttribArray(0);
 125     gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, true, 0, colorOffset);
 126     gl.enableVertexAttribArray(1);
 127
 128     gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 3);
 129
 130     var buf = new Uint8Array(1 * 1 * 4);
 131     gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, buf);
 132     return buf;
 133 }
 134
 135 function testDefault()
 136 {
 137     debug("Testing default attributes: { stencil:false }");
 138     shouldBeNonNull("gl = getWebGL(1, 1, null, [ 0, 0, 0, 0 ], 1, 0)");
 139     shouldBeFalse("gl.getContextAttributes().stencil");
 140     shouldBeTrue("gl.getParameter(gl.STENCIL_BITS) == 0");
 141 }
 142
 143 function testAlpha(alpha)
 144 {
 145     debug("Testing alpha = " + alpha);
 146     if (alpha) {
 147         shouldBeNonNull("gl = getWebGL(1, 1, { alpha: true, depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 0 ], 1, 0)");
 148         shouldBeTrue("gl.getParameter(gl.ALPHA_BITS) >= 8");
 149     } else {
 150         shouldBeNonNull("gl = getWebGL(1, 1, { alpha: false, depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 0 ], 1, 0)");
 151         shouldBeTrue("gl.getParameter(gl.ALPHA_BITS) == 0");
 152     }
 153     shouldBeTrue("gl.getParameter(gl.RED_BITS) >= 8");
 154     shouldBeTrue("gl.getParameter(gl.GREEN_BITS) >= 8");
 155     shouldBeTrue("gl.getParameter(gl.BLUE_BITS) >= 8");
 156     shouldBeTrue("gl.getParameter(gl.DEPTH_BITS) == 0");
 157     shouldBeTrue("gl.getParameter(gl.STENCIL_BITS) == 0");
 158
 159     shouldBeNonNull("contextAttribs = gl.getContextAttributes()");
 160     shouldBeTrue("contextAttribs.alpha == " + alpha);
 161
 162     var buf = new Uint8Array(1 * 1 * 4);
 163     gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, buf);
 164     pixel[0] = buf[0];
 165     pixel[1] = buf[1];
 166     pixel[2] = buf[2];
 167     pixel[3] = buf[3];
 168     correctColor = (contextAttribs.alpha ? [0, 0, 0, 0] : [0, 0, 0, 255]);
 169     shouldBe("pixel", "correctColor");
 170
 171     if (fbHasColor) {
 172       gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
 173       gl.clearColor(0.5, 0.5, 0.5, 0.5);
 174       gl.clear(gl.COLOR_BUFFER_BIT);
 175       gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, buf);
 176       pixel[0] = buf[0];
 177       pixel[1] = buf[1];
 178       pixel[2] = buf[2];
 179       pixel[3] = buf[3];
 180       shouldBeTrue("Math.abs(pixel[0] - 127) <= 1 && Math.abs(pixel[1] - 127) <= 1 && Math.abs(pixel[2] - 127) <= 1 && Math.abs(pixel[3] - 127) <= 1");
 181       gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 182     }
 183 }
 184
 185 function testDepth(depth)
 186 {
 187     debug("Testing depth = " + depth);
 188     if (depth) {
 189         shouldBeNonNull("gl = getWebGL(1, 1, { stencil: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
 190         shouldBeTrue("gl.getParameter(gl.DEPTH_BITS) >= 16");
 191     } else {
 192         shouldBeNonNull("gl = getWebGL(1, 1, { depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
 193         shouldBeTrue("gl.getParameter(gl.DEPTH_BITS) == 0");
 194     }
 195     shouldBeTrue("gl.getParameter(gl.RED_BITS) >= 8");
 196     shouldBeTrue("gl.getParameter(gl.GREEN_BITS) >= 8");
 197     shouldBeTrue("gl.getParameter(gl.BLUE_BITS) >= 8");
 198     shouldBeTrue("gl.getParameter(gl.ALPHA_BITS) >= 8");
 199
 200     shouldBeNonNull("contextAttribs = gl.getContextAttributes()");
 201
 202     gl.depthFunc(gl.NEVER);
 203
 204     var vertices = new Float32Array([
 205          1.0,  1.0, 0.0,
 206         -1.0,  1.0, 0.0,
 207         -1.0, -1.0, 0.0,
 208          1.0,  1.0, 0.0,
 209         -1.0, -1.0, 0.0,
 210          1.0, -1.0, 0.0]);
 211     var colors = new Uint8Array([
 212         255, 0, 0, 255,
 213         255, 0, 0, 255,
 214         255, 0, 0, 255,
 215         255, 0, 0, 255,
 216         255, 0, 0, 255,
 217         255, 0, 0, 255]);
 218
 219     var buf = drawAndReadPixel(gl, vertices, colors, 0, 0);
 220     pixel[0] = buf[0];
 221     pixel[1] = buf[1];
 222     pixel[2] = buf[2];
 223     pixel[3] = buf[3];
 224     correctColor = (contextAttribs.depth ? [0, 0, 0, 255] : [255, 0, 0, 255]);
 225     shouldBe("pixel", "correctColor");
 226
 227     if (fbHasDepth) {
 228       gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
 229       gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 230       var buf = drawAndReadPixel(gl, vertices, colors, 0, 0);
 231       pixel[0] = buf[0];
 232       pixel[1] = buf[1];
 233       pixel[2] = buf[2];
 234       pixel[3] = buf[3];
 235       shouldBe("pixel", "[0, 0, 0, 255]");
 236       gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 237     }
 238 }
 239
 240 function testStencilAndDepth(stencil, depth)
 241 {
 242     debug("Testing stencil = " + stencil + ", depth = " + depth);
 243     var creationString =
 244         "gl = getWebGL(1, 1, { depth: " + depth + ", stencil: " + stencil + ", antialias: false }, [ 0, 0, 0, 1 ], 1, 0)";
 245     shouldBeNonNull(creationString);
 246
 247     shouldBeTrue("gl.getParameter(gl.RED_BITS) >= 8");
 248     shouldBeTrue("gl.getParameter(gl.GREEN_BITS) >= 8");
 249     shouldBeTrue("gl.getParameter(gl.BLUE_BITS) >= 8");
 250     shouldBeTrue("gl.getParameter(gl.ALPHA_BITS) >= 8");
 251     if (depth)
 252         shouldBeTrue("gl.getParameter(gl.DEPTH_BITS) >= 16");
 253     else
 254         shouldBeTrue("gl.getParameter(gl.DEPTH_BITS) == 0");
 255
 256     if (stencil)
 257         shouldBeTrue("gl.getParameter(gl.STENCIL_BITS) >= 8");
 258     else
 259         shouldBeTrue("gl.getParameter(gl.STENCIL_BITS) == 0");
 260
 261     shouldBeNonNull("contextAttribs = gl.getContextAttributes()");
 262     if (!depth && contextAttribs.depth) {
 263         testFailed("WebGL implementation provided a depth buffer when it should not have");
 264     }
 265     if (!contextAttribs.depth)
 266         depth = false;
 267     if (!stencil && contextAttribs.stencil) {
 268         testFailed("WebGL implementation provided a stencil buffer when it should not have");
 269     }
 270     if (!contextAttribs.stencil)
 271         stencil = false;
 272
 273     gl.depthFunc(gl.ALWAYS);
 274
 275     gl.stencilFunc(gl.NEVER, 1, 1);
 276     gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
 277
 278     var vertices = new Float32Array([
 279          1.0, 1.0, 0.0,
 280         -1.0, 1.0, 0.0,
 281         -1.0, -1.0, 0.0,
 282          1.0, 1.0, 0.0,
 283         -1.0, -1.0, 0.0,
 284          1.0, -1.0, 0.0]);
 285     var colors = new Uint8Array([
 286         255, 0, 0, 255,
 287         255, 0, 0, 255,
 288         255, 0, 0, 255,
 289         255, 0, 0, 255,
 290         255, 0, 0, 255,
 291         255, 0, 0, 255]);
 292
 293     var buf = drawAndReadPixel(gl, vertices, colors, 0, 0);
 294     pixel[0] = buf[0];
 295     pixel[1] = buf[1];
 296     pixel[2] = buf[2];
 297     pixel[3] = buf[3];
 298     correctColor = (stencil ? [0, 0, 0, 255] : [255, 0, 0, 255]);
 299     shouldBe("pixel", "correctColor");
 300
 301     if (fbHasStencil) {
 302       gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
 303       gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 304       var buf = drawAndReadPixel(gl, vertices, colors, 0, 0);
 305       pixel[0] = buf[0];
 306       pixel[1] = buf[1];
 307       pixel[2] = buf[2];
 308       pixel[3] = buf[3];
 309       shouldBe("pixel", "[0, 0, 0, 255]");
 310       gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 311     }
 312 }
 313
 314 function testAntialias(antialias)
 315 {
 316     debug("Testing antialias = " + antialias);
 317     if (antialias)
 318         shouldBeNonNull("gl = getWebGL(2, 2, { depth: false, stencil: false, alpha: false, antialias: true }, [ 0, 0, 0, 1 ], 1, 0)");
 319     else
 320         shouldBeNonNull("gl = getWebGL(2, 2, { depth: false, stencil: false, alpha: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
 321     shouldBeNonNull("contextAttribs = gl.getContextAttributes()");
 322
 323     var vertices = new Float32Array([
 324          1.0, 1.0, 0.0,
 325         -1.0, 1.0, 0.0,
 326         -1.0, -1.0, 0.0]);
 327     var colors = new Uint8Array([
 328         255, 0, 0, 255,
 329         255, 0, 0, 255,
 330         255, 0, 0, 255]);
 331     var buf = drawAndReadPixel(gl, vertices, colors, 0, 0);
 332     pixel[0] = buf[0];
 333     shouldBe("pixel[0] != 255 && pixel[0] != 0", "contextAttribs.antialias");
 334 }
 335
 336 function runTest()
 337 {
 338     testDefault();
 339     testAlpha(true);
 340     testAlpha(false);
 341     testDepth(true);
 342     testDepth(false);
 343     testStencilAndDepth(true, false);
 344     testStencilAndDepth(false, false);
 345     testStencilAndDepth(true, true);
 346     testStencilAndDepth(false, true);
 347     testAntialias(true);
 348     testAntialias(false);
 349
 350     finishTest();
 351 }
 352
 353 </script>
 354 </head>
 355 <body onload="init()">
 356 <div id="description"></div>
 357 <div id="console"></div>
 358 </body>
 359 </html>