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

   1 <html>
   2 <head>
   3 <script src="../../js/resources/js-test-pre.js"></script>
   4 <script src="resources/webgl-test.js"></script>
   5 <script id="vshader" type="x-shader/x-vertex">
   6 attribute vec3 pos;
   7 attribute vec4 colorIn;
   8 varying vec4 color;
   9
  10 void main()
  11 {
  12     color = colorIn;
  13     gl_Position = vec4(pos.xyz, 1.0);
  14 }
  15 </script>
  16
  17 <script id="fshader" type="x-shader/x-fragment">
  18 #ifdef GL_ES
  19 precision highp float;
  20 #endif
  21 varying vec4 color;
  22
  23 void main()
  24 {
  25     gl_FragColor = color;
  26 }
  27 </script>
  28
  29 <script>
  30
  31 // These four declarations need to be global for "shouldBe" to see them
  32 var webGL = null;
  33 var contextAttribs = null;
  34 var pixel = [0, 0, 0, 1];
  35 var correctColor = null;
  36
  37 function init()
  38 {
  39     if (window.initNonKhronosFramework) {
  40         window.initNonKhronosFramework(true);
  41     }
  42
  43     description('Verify WebGLContextAttributes are working as specified, including alpha, depth, stencil, antialias, but not premultipliedAlpha');
  44
  45     runTest();
  46 }
  47
  48 function getWebGL(canvasName, contextAttribs, clearColor, clearDepth, clearStencil)
  49 {
  50     var canvas = document.getElementById(canvasName);
  51     var gl = canvas.getContext("experimental-webgl", contextAttribs);
  52     if (!gl) {
  53         alert("No WebGL context found");
  54         return null;
  55     }
  56
  57     // Add a console
  58     gl.console = ("console" in window) ? window.console : { log: function() { } };
  59
  60     // create our shaders
  61     var vertexShader = loadShader(gl, "vshader");
  62     var fragmentShader = loadShader(gl, "fshader");
  63
  64     if (!vertexShader || !fragmentShader)
  65         return null;
  66
  67     // Create the program object
  68     gl.program = gl.createProgram();
  69
  70     if (!gl.program)
  71         return null;
  72
  73     // Attach our two shaders to the program
  74     gl.attachShader(gl.program, vertexShader);
  75     gl.attachShader(gl.program, fragmentShader);
  76
  77     // Bind attributes
  78     var attribs = [ "pos", "colorIn" ];
  79     for (var i in attribs)
  80         gl.bindAttribLocation(gl.program, parseInt(i), attribs[i]);
  81
  82     // Link the program
  83     gl.linkProgram(gl.program);
  84
  85     // Check the link status
  86     var linked = gl.getProgramParameter(gl.program, gl.LINK_STATUS);
  87     if (!linked) {
  88         // something went wrong with the link
  89         var error = gl.getProgramInfoLog (gl.program);
  90         gl.console.log("Error in program linking:"+error);
  91
  92         gl.deleteProgram(gl.program);
  93         gl.deleteProgram(fragmentShader);
  94         gl.deleteProgram(vertexShader);
  95
  96         return null;
  97     }
  98
  99     gl.useProgram(gl.program);
 100
 101     gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
 102     gl.clearDepth(clearDepth);
 103     gl.clearStencil(clearStencil);
 104     gl.enable(gl.DEPTH_TEST);
 105     gl.enable(gl.STENCIL_TEST);
 106     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
 107
 108     return gl;
 109 }
 110
 111 function drawAndReadPixel(gl, vertices, colors, x, y)
 112 {
 113     var colorOffset = vertices.byteLength;
 114
 115     var vbo = gl.createBuffer();
 116     gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
 117     gl.bufferData(gl.ARRAY_BUFFER, colorOffset + colors.byteLength, gl.STATIC_DRAW);
 118     gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertices);
 119     gl.bufferSubData(gl.ARRAY_BUFFER, colorOffset, colors);
 120
 121     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
 122     gl.enableVertexAttribArray(0);
 123     gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, true, 0, colorOffset);
 124     gl.enableVertexAttribArray(1);
 125
 126     gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 3);
 127
 128     var buf = new Uint8Array(1 * 1 * 4);
 129     gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, buf);
 130     return buf;
 131 }
 132
 133 function testAlpha(alpha)
 134 {
 135     debug("Testing alpha = " + alpha);
 136     if (alpha)
 137         shouldBeNonNull("webGL = getWebGL('alphaOn', { alpha: true, depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 0 ], 1, 0)");
 138     else
 139         shouldBeNonNull("webGL = getWebGL('alphaOff', { alpha: false, depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 0 ], 1, 0)");
 140     shouldBeNonNull("contextAttribs = webGL.getContextAttributes()");
 141     shouldBeDefined("contextAttribs.alpha");
 142     shouldBeDefined("contextAttribs.depth");
 143     shouldBeDefined("contextAttribs.stencil");
 144     shouldBeDefined("contextAttribs.antialias");
 145     shouldBeDefined("contextAttribs.premultipliedAlpha");
 146
 147     var buf = new Uint8Array(1 * 1 * 4);
 148     webGL.readPixels(0, 0, 1, 1, webGL.RGBA, webGL.UNSIGNED_BYTE, buf);
 149     pixel[0] = buf[0];
 150     pixel[1] = buf[1];
 151     pixel[2] = buf[2];
 152     pixel[3] = buf[3];
 153     correctColor = (contextAttribs.alpha ? [0, 0, 0, 0] : [0, 0, 0, 255]);
 154     shouldBe("pixel", "correctColor");
 155 }
 156
 157 function testDepth(depth)
 158 {
 159     debug("Testing depth = " + depth);
 160     if (depth)
 161         shouldBeNonNull("webGL = getWebGL('depthOn', { stencil: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
 162     else
 163         shouldBeNonNull("webGL = getWebGL('depthOff', { depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
 164     shouldBeNonNull("contextAttribs = webGL.getContextAttributes()");
 165     shouldBeDefined("contextAttribs.depth");
 166     shouldBeDefined("contextAttribs.alpha");
 167     shouldBeDefined("contextAttribs.stencil");
 168     shouldBeDefined("contextAttribs.antialias");
 169     shouldBeDefined("contextAttribs.premultipliedAlpha");
 170
 171     webGL.depthFunc(webGL.NEVER);
 172
 173     var vertices = new Float32Array([
 174          1.0,  1.0, 0.0,
 175         -1.0,  1.0, 0.0,
 176         -1.0, -1.0, 0.0,
 177          1.0,  1.0, 0.0,
 178         -1.0, -1.0, 0.0,
 179          1.0, -1.0, 0.0]);
 180     var colors = new Uint8Array([
 181         255, 0, 0, 255,
 182         255, 0, 0, 255,
 183         255, 0, 0, 255,
 184         255, 0, 0, 255,
 185         255, 0, 0, 255,
 186         255, 0, 0, 255]);
 187
 188     var buf = drawAndReadPixel(webGL, vertices, colors, 0, 0);
 189     pixel[0] = buf[0];
 190     pixel[1] = buf[1];
 191     pixel[2] = buf[2];
 192     pixel[3] = buf[3];
 193     correctColor = (contextAttribs.depth ? [0, 0, 0, 255] : [255, 0, 0, 255]);
 194     shouldBe("pixel", "correctColor");
 195 }
 196
 197 function testStencil(stencil)
 198 {
 199     debug("Testing stencil = " + stencil);
 200     if (stencil)
 201         shouldBeNonNull("webGL = getWebGL('stencilOn', { depth: false, stencil: true, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
 202     else
 203         shouldBeNonNull("webGL = getWebGL('stencilOff', { depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
 204     shouldBeNonNull("contextAttribs = webGL.getContextAttributes()");
 205     shouldBeDefined("contextAttribs.depth");
 206     shouldBeDefined("contextAttribs.alpha");
 207     shouldBeDefined("contextAttribs.stencil");
 208     shouldBeDefined("contextAttribs.antialias");
 209     shouldBeDefined("contextAttribs.premultipliedAlpha");
 210
 211     webGL.depthFunc(webGL.ALWAYS);
 212
 213     webGL.stencilFunc(webGL.NEVER, 1, 1);
 214     webGL.stencilOp(webGL.KEEP, webGL.KEEP, webGL.KEEP);
 215
 216     var vertices = new Float32Array([
 217          1.0, 1.0, 0.0,
 218         -1.0, 1.0, 0.0,
 219         -1.0, -1.0, 0.0,
 220          1.0, 1.0, 0.0,
 221         -1.0, -1.0, 0.0,
 222          1.0, -1.0, 0.0]);
 223     var colors = new Uint8Array([
 224         255, 0, 0, 255,
 225         255, 0, 0, 255,
 226         255, 0, 0, 255,
 227         255, 0, 0, 255,
 228         255, 0, 0, 255,
 229         255, 0, 0, 255]);
 230
 231     var buf = drawAndReadPixel(webGL, vertices, colors, 0, 0);
 232     pixel[0] = buf[0];
 233     pixel[1] = buf[1];
 234     pixel[2] = buf[2];
 235     pixel[3] = buf[3];
 236     correctColor = (contextAttribs.stencil ? [0, 0, 0, 255] : [255, 0, 0, 255]);
 237     shouldBe("pixel", "correctColor");
 238 }
 239
 240 function testAntialias(antialias)
 241 {
 242     debug("Testing antialias = " + antialias);
 243     if (antialias)
 244         shouldBeNonNull("webGL = getWebGL('antialiasOn', { depth: false, stencil: false, alpha: false, antialias: true }, [ 0, 0, 0, 1 ], 1, 0)");
 245     else
 246         shouldBeNonNull("webGL = getWebGL('antialiasOff', { depth: false, stencil: false, alpha: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
 247     shouldBeNonNull("contextAttribs = webGL.getContextAttributes()");
 248     shouldBeDefined("contextAttribs.depth");
 249     shouldBeDefined("contextAttribs.alpha");
 250     shouldBeDefined("contextAttribs.stencil");
 251     shouldBeDefined("contextAttribs.antialias");
 252     shouldBeDefined("contextAttribs.premultipliedAlpha");
 253
 254     var vertices = new Float32Array([
 255          1.0, 1.0, 0.0,
 256         -1.0, 1.0, 0.0,
 257         -1.0, -1.0, 0.0]);
 258     var colors = new Uint8Array([
 259         255, 0, 0, 255,
 260         255, 0, 0, 255,
 261         255, 0, 0, 255]);
 262     var buf = drawAndReadPixel(webGL, vertices, colors, 0, 0);
 263     pixel[0] = buf[0];
 264     shouldBe("pixel[0] != 255 && pixel[0] != 0", "contextAttribs.antialias");
 265 }
 266
 267 function runTest()
 268 {
 269
 270     testAlpha(true);
 271     testAlpha(false);
 272     testDepth(true);
 273     testDepth(false);
 274     testStencil(true);
 275     testStencil(false);
 276     testAntialias(true);
 277     testAntialias(false);
 278     var epilogue = document.createElement("script");
 279     epilogue.onload = finish;
 280     epilogue.src = "../../js/resources/js-test-post.js";
 281     document.body.appendChild(epilogue);
 282 }
 283
 284 function finish() {
 285     if (window.nonKhronosFrameworkNotifyDone) {
 286         window.nonKhronosFrameworkNotifyDone();
 287     }
 288 }
 289 </script>
 290 </head>
 291 <body onload="init()">
 292 <canvas id="alphaOn" width="1px" height="1px"></canvas>
 293 <canvas id="alphaOff" width="1px" height="1px"></canvas>
 294 <canvas id="depthOn" width="1px" height="1px"></canvas>
 295 <canvas id="depthOff" width="1px" height="1px"></canvas>
 296 <canvas id="stencilOn" width="1px" height="1px"></canvas>
 297 <canvas id="stencilOff" width="1px" height="1px"></canvas>
 298 <canvas id="antialiasOn" width="2px" height="2px"></canvas>
 299 <canvas id="antialiasOff" width="2px" height="2px"></canvas>
 300 <div id="description"></div>
 301 <div id="console"></div>
 302 </body>
 303 </html>