|
1 <!-- |
|
2 Copyright (c) 2011 The Chromium Authors. All rights reserved. |
|
3 Use of this source code is governed by a BSD-style license that can be |
|
4 found in the LICENSE file. |
|
5 --> |
|
6 <!DOCTYPE html> |
|
7 <html> |
|
8 <head> |
|
9 <meta charset="utf-8"> |
|
10 <link rel="stylesheet" href="../../resources/js-test-style.css"/> |
|
11 <script src="../../resources/js-test-pre.js"></script> |
|
12 <script src="../resources/webgl-test.js"></script> |
|
13 <script id="vshader" type="x-shader/x-vertex"> |
|
14 attribute vec3 pos; |
|
15 attribute vec4 colorIn; |
|
16 varying vec4 color; |
|
17 |
|
18 void main() |
|
19 { |
|
20 color = colorIn; |
|
21 gl_Position = vec4(pos.xyz, 1.0); |
|
22 } |
|
23 </script> |
|
24 |
|
25 <script id="fshader" type="x-shader/x-fragment"> |
|
26 precision mediump float; |
|
27 |
|
28 varying vec4 color; |
|
29 |
|
30 void main() |
|
31 { |
|
32 gl_FragColor = color; |
|
33 } |
|
34 </script> |
|
35 |
|
36 <script> |
|
37 var successfullyParsed = false; |
|
38 |
|
39 // These four declarations need to be global for "shouldBe" to see them |
|
40 var webGL = null; |
|
41 var contextAttribs = null; |
|
42 var pixel = [0, 0, 0, 1]; |
|
43 var correctColor = null; |
|
44 var value; |
|
45 |
|
46 function init() |
|
47 { |
|
48 if (window.initNonKhronosFramework) { |
|
49 window.initNonKhronosFramework(true); |
|
50 } |
|
51 |
|
52 description('Verify WebGLContextAttributes are working as specified, including alpha, depth, stencil, antialias, but not premultipliedAlpha'); |
|
53 |
|
54 runTest(); |
|
55 } |
|
56 |
|
57 function getWebGL(canvasWidth, canvasHeight, contextAttribs, clearColor, clearDepth, clearStencil) |
|
58 { |
|
59 var canvas = document.createElement("canvas"); |
|
60 if (!canvas) |
|
61 return null; |
|
62 canvas.width = canvasWidth; |
|
63 canvas.height = canvasHeight; |
|
64 |
|
65 var context = create3DContext(canvas, contextAttribs); |
|
66 if (!context) |
|
67 return null; |
|
68 |
|
69 context.program = createProgram(context, "vshader", "fshader", ["pos", "colorIn"]); |
|
70 if (!context.program) |
|
71 return null; |
|
72 |
|
73 context.useProgram(context.program); |
|
74 |
|
75 context.enable(context.DEPTH_TEST); |
|
76 context.enable(context.STENCIL_TEST); |
|
77 context.disable(context.BLEND); |
|
78 |
|
79 context.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]); |
|
80 context.clearDepth(clearDepth); |
|
81 context.clearStencil(clearStencil); |
|
82 context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT | context.STENCIL_BUFFER_BIT); |
|
83 |
|
84 return context; |
|
85 } |
|
86 |
|
87 function drawAndReadPixel(gl, vertices, colors, x, y) |
|
88 { |
|
89 var colorOffset = vertices.byteLength; |
|
90 |
|
91 var vbo = gl.createBuffer(); |
|
92 gl.bindBuffer(gl.ARRAY_BUFFER, vbo); |
|
93 gl.bufferData(gl.ARRAY_BUFFER, colorOffset + colors.byteLength, gl.STATIC_DRAW); |
|
94 gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertices); |
|
95 gl.bufferSubData(gl.ARRAY_BUFFER, colorOffset, colors); |
|
96 |
|
97 gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); |
|
98 gl.enableVertexAttribArray(0); |
|
99 gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, true, 0, colorOffset); |
|
100 gl.enableVertexAttribArray(1); |
|
101 |
|
102 gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 3); |
|
103 |
|
104 var buf = new Uint8Array(1 * 1 * 4); |
|
105 gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, buf); |
|
106 return buf; |
|
107 } |
|
108 |
|
109 function testAlpha(alpha) |
|
110 { |
|
111 debug("Testing alpha = " + alpha); |
|
112 if (alpha) |
|
113 shouldBeNonNull("webGL = getWebGL(1, 1, { alpha: true, depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 0 ], 1, 0)"); |
|
114 else |
|
115 shouldBeNonNull("webGL = getWebGL(1, 1, { alpha: false, depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 0 ], 1, 0)"); |
|
116 shouldBeNonNull("contextAttribs = webGL.getContextAttributes()"); |
|
117 shouldBeTrue("contextAttribs.alpha == " + alpha); |
|
118 |
|
119 var buf = new Uint8Array(1 * 1 * 4); |
|
120 webGL.readPixels(0, 0, 1, 1, webGL.RGBA, webGL.UNSIGNED_BYTE, buf); |
|
121 pixel[0] = buf[0]; |
|
122 pixel[1] = buf[1]; |
|
123 pixel[2] = buf[2]; |
|
124 pixel[3] = buf[3]; |
|
125 correctColor = (contextAttribs.alpha ? [0, 0, 0, 0] : [0, 0, 0, 255]); |
|
126 shouldBe("pixel", "correctColor"); |
|
127 } |
|
128 |
|
129 function testDepth(depth) |
|
130 { |
|
131 debug("Testing depth = " + depth); |
|
132 if (depth) |
|
133 shouldBeNonNull("webGL = getWebGL(1, 1, { stencil: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)"); |
|
134 else |
|
135 shouldBeNonNull("webGL = getWebGL(1, 1, { depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)"); |
|
136 shouldBeNonNull("contextAttribs = webGL.getContextAttributes()"); |
|
137 |
|
138 webGL.depthFunc(webGL.NEVER); |
|
139 |
|
140 var vertices = new Float32Array([ |
|
141 1.0, 1.0, 0.0, |
|
142 -1.0, 1.0, 0.0, |
|
143 -1.0, -1.0, 0.0, |
|
144 1.0, 1.0, 0.0, |
|
145 -1.0, -1.0, 0.0, |
|
146 1.0, -1.0, 0.0]); |
|
147 var colors = new Uint8Array([ |
|
148 255, 0, 0, 255, |
|
149 255, 0, 0, 255, |
|
150 255, 0, 0, 255, |
|
151 255, 0, 0, 255, |
|
152 255, 0, 0, 255, |
|
153 255, 0, 0, 255]); |
|
154 |
|
155 var buf = drawAndReadPixel(webGL, vertices, colors, 0, 0); |
|
156 pixel[0] = buf[0]; |
|
157 pixel[1] = buf[1]; |
|
158 pixel[2] = buf[2]; |
|
159 pixel[3] = buf[3]; |
|
160 correctColor = (contextAttribs.depth ? [0, 0, 0, 255] : [255, 0, 0, 255]); |
|
161 shouldBe("pixel", "correctColor"); |
|
162 } |
|
163 |
|
164 function testStencil(stencil) |
|
165 { |
|
166 debug("Testing stencil = " + stencil); |
|
167 if (stencil) |
|
168 shouldBeNonNull("webGL = getWebGL(1, 1, { depth: false, stencil: true, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)"); |
|
169 else |
|
170 shouldBeNonNull("webGL = getWebGL(1, 1, { depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)"); |
|
171 shouldBeNonNull("contextAttribs = webGL.getContextAttributes()"); |
|
172 |
|
173 webGL.depthFunc(webGL.ALWAYS); |
|
174 |
|
175 webGL.stencilFunc(webGL.NEVER, 1, 1); |
|
176 webGL.stencilOp(webGL.KEEP, webGL.KEEP, webGL.KEEP); |
|
177 |
|
178 var vertices = new Float32Array([ |
|
179 1.0, 1.0, 0.0, |
|
180 -1.0, 1.0, 0.0, |
|
181 -1.0, -1.0, 0.0, |
|
182 1.0, 1.0, 0.0, |
|
183 -1.0, -1.0, 0.0, |
|
184 1.0, -1.0, 0.0]); |
|
185 var colors = new Uint8Array([ |
|
186 255, 0, 0, 255, |
|
187 255, 0, 0, 255, |
|
188 255, 0, 0, 255, |
|
189 255, 0, 0, 255, |
|
190 255, 0, 0, 255, |
|
191 255, 0, 0, 255]); |
|
192 |
|
193 var buf = drawAndReadPixel(webGL, vertices, colors, 0, 0); |
|
194 pixel[0] = buf[0]; |
|
195 pixel[1] = buf[1]; |
|
196 pixel[2] = buf[2]; |
|
197 pixel[3] = buf[3]; |
|
198 correctColor = (contextAttribs.stencil ? [0, 0, 0, 255] : [255, 0, 0, 255]); |
|
199 shouldBe("pixel", "correctColor"); |
|
200 } |
|
201 |
|
202 function testAntialias(antialias) |
|
203 { |
|
204 debug("Testing antialias = " + antialias); |
|
205 if (antialias) |
|
206 shouldBeNonNull("webGL = getWebGL(2, 2, { depth: false, stencil: false, alpha: false, antialias: true }, [ 0, 0, 0, 1 ], 1, 0)"); |
|
207 else |
|
208 shouldBeNonNull("webGL = getWebGL(2, 2, { depth: false, stencil: false, alpha: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)"); |
|
209 shouldBeNonNull("contextAttribs = webGL.getContextAttributes()"); |
|
210 |
|
211 var vertices = new Float32Array([ |
|
212 1.0, 1.0, 0.0, |
|
213 -1.0, 1.0, 0.0, |
|
214 -1.0, -1.0, 0.0]); |
|
215 var colors = new Uint8Array([ |
|
216 255, 0, 0, 255, |
|
217 255, 0, 0, 255, |
|
218 255, 0, 0, 255]); |
|
219 var buf = drawAndReadPixel(webGL, vertices, colors, 0, 0); |
|
220 pixel[0] = buf[0]; |
|
221 shouldBe("pixel[0] != 255 && pixel[0] != 0", "contextAttribs.antialias"); |
|
222 } |
|
223 |
|
224 function runTest() |
|
225 { |
|
226 |
|
227 testAlpha(true); |
|
228 testAlpha(false); |
|
229 testDepth(true); |
|
230 testDepth(false); |
|
231 testStencil(true); |
|
232 testStencil(false); |
|
233 testAntialias(true); |
|
234 testAntialias(false); |
|
235 |
|
236 finishTest() |
|
237 } |
|
238 |
|
239 </script> |
|
240 </head> |
|
241 <body onload="init()"> |
|
242 <div id="description"></div> |
|
243 <div id="console"></div> |
|
244 </body> |
|
245 </html> |