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