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