OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <meta charset="utf-8"> | |
5 <title>WebGL Canvas Conformance Tests</title> | |
6 <script src="../../../resources/js-test.js"></script> | |
7 <script src="resources/webgl-test.js"></script> | |
8 <script src="resources/webgl-test-utils.js"></script> | |
9 </head> | |
10 <body> | |
11 <div id="description"></div> | |
12 <div id="console"></div> | |
13 <script id="vshaderGrid" type="x-shader/x-vertex"> | |
14 attribute vec4 a_position; | |
15 void main() | |
16 { | |
17 gl_Position = a_position; | |
18 } | |
19 </script> | |
20 | |
21 <script id="fshaderGrid" type="x-shader/x-fragment"> | |
22 precision mediump float; | |
23 void main() | |
24 { | |
25 float r = mod(gl_FragCoord.x, 2.0) < 1.0 ? 0.0 : 1.0; | |
26 float g = mod(gl_FragCoord.y, 2.0) < 1.0 ? 0.0 : 1.0; | |
27 gl_FragColor = vec4(r, g, 0, 1); | |
28 } | |
29 </script> | |
30 <script> | |
31 description("This test ensures WebGL implementations correctly implement drawing
bufferWidth/Height."); | |
32 | |
33 function getMaxViewportDimensions() { | |
34 // create a fresh canvas. This canvas will be discarded | |
35 // after exiting this function. | |
36 var canvas = document.createElement("canvas"); | |
37 gl = wtu.create3DContext(canvas, {antialias: false}); | |
38 if (!gl) { | |
39 testFailed("context does not exist"); | |
40 return [0, 0]; | |
41 } else { | |
42 testPassed("context exists"); | |
43 | |
44 // For a default size canvas these should be equal. | |
45 // WebGL contexts are not allowed to change the size of the drawingBuffer | |
46 // for things like hi-res displays. | |
47 shouldBe('gl.drawingBufferWidth', 'gl.canvas.width'); | |
48 shouldBe('gl.drawingBufferHeight', 'gl.canvas.height'); | |
49 return gl.getParameter(gl.MAX_VIEWPORT_DIMS); | |
50 } | |
51 } | |
52 | |
53 // This uses gl_FragCoord to draw a device pixel relavent pattern. | |
54 // If drawBufferWidth or drawBufferHeight are not in device pixels | |
55 // this test should fail. | |
56 function checkGrid(gl) { | |
57 var program = wtu.setupProgram(gl, ["vshaderGrid", "fshaderGrid"], ["a_positio
n"]); | |
58 wtu.setupUnitQuad(gl); | |
59 gl.useProgram(program); | |
60 shouldBe('gl.getError()', 'gl.NO_ERROR'); | |
61 | |
62 wtu.drawQuad(gl); | |
63 | |
64 var pixels = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4
); | |
65 gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl
.UNSIGNED_BYTE, pixels); | |
66 | |
67 var colors = [ | |
68 [ { color: [0, 0, 0, 255], name: "black" }, { color: [255, 0, 0, 255],
name: "red" } ], | |
69 [ { color: [0, 255, 0, 255], name: "green" }, { color: [255, 255, 0, 255],
name: "yellow" } ], | |
70 ]; | |
71 | |
72 for (var yy = 0; yy < gl.drawingBufferHeight; ++yy) { | |
73 for (var xx = 0; xx < gl.drawingBufferWidth; ++xx) { | |
74 var info = colors[yy % 2][xx % 2]; | |
75 var color = info.color; | |
76 var offset = (yy * gl.drawingBufferWidth + xx) * 4; | |
77 for (var jj = 0; jj < 4; ++jj) { | |
78 if (pixels[offset + jj] != color[jj]) { | |
79 var actual = [pixels[offset], pixels[offset + 1], pixels[offset + 2],
pixels[offset + 3]]; | |
80 testFailed("at " + xx + ", " + yy + " expected " + color + "(" + info.
name + ") was " + actual); | |
81 return; | |
82 } | |
83 } | |
84 } | |
85 } | |
86 testPassed("grid rendered correctly"); | |
87 } | |
88 | |
89 // This passes device coordinate vertices in to make sure gl.viewport is not bei
ng mucked with. | |
90 function checkQuad(gl) { | |
91 var deviceToClipSpace = function(value, range) { | |
92 return value / range * 2 - 1; | |
93 } | |
94 | |
95 var program = wtu.setupColorQuad(gl); | |
96 | |
97 // draw a small green square in the top right corner. | |
98 var deviceX1 = gl.drawingBufferWidth - 4; | |
99 var deviceX2 = gl.drawingBufferWidth; | |
100 var deviceY1 = gl.drawingBufferHeight - 4; | |
101 var deviceY2 = gl.drawingBufferHeight; | |
102 | |
103 var clipX1 = deviceToClipSpace(deviceX1, gl.drawingBufferWidth); | |
104 var clipX2 = deviceToClipSpace(deviceX2, gl.drawingBufferWidth); | |
105 var clipY1 = deviceToClipSpace(deviceY1, gl.drawingBufferHeight); | |
106 var clipY2 = deviceToClipSpace(deviceY2, gl.drawingBufferHeight); | |
107 | |
108 var vertexObject = gl.createBuffer(); | |
109 gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject); | |
110 gl.bufferData( | |
111 gl.ARRAY_BUFFER, | |
112 new Float32Array( | |
113 [ clipX2, clipY2, | |
114 clipX1, clipY2, | |
115 clipX1, clipY1, | |
116 clipX2, clipY2, | |
117 clipX1, clipY1, | |
118 clipX2, clipY1]), | |
119 gl.STATIC_DRAW); | |
120 gl.enableVertexAttribArray(0); | |
121 gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); | |
122 | |
123 var green = [0, 255, 0, 255]; | |
124 var black = [0, 0, 0, 0]; | |
125 gl.clearColor(0, 0, 0, 0); | |
126 gl.clear(gl.COLOR_BUFFER_BIT); | |
127 wtu.drawUByteColorQuad(gl, [0, 255, 0, 255]); | |
128 | |
129 var squareWidth = deviceX2 - deviceX1; | |
130 var squareHeight = deviceY2 - deviceY1; | |
131 | |
132 // check the square. | |
133 wtu.checkCanvasRect(gl, deviceX1, deviceY1, squareWidth, squareHeight, green,
"should be green"); | |
134 // check outside the square. | |
135 wtu.checkCanvasRect(gl, 0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight -
squareHeight, black, "should be black"); | |
136 wtu.checkCanvasRect(gl, 0, gl.drawingBufferHeight - squareHeight, gl.drawingBu
fferWidth - squareWidth, squareHeight, black, "should be black"); | |
137 } | |
138 | |
139 | |
140 function test(desiredWidth, desiredHeight) { | |
141 debug(""); | |
142 debug("Checking drawingBufferWidth/drawingBufferHeight"); | |
143 | |
144 // Make a fresh canvas. | |
145 var canvas = document.createElement("canvas"); | |
146 canvas.width = desiredWidth; | |
147 canvas.height = desiredHeight; | |
148 | |
149 // This 'gl' must be global for shouldBe to work. | |
150 gl = wtu.create3DContext(canvas, {antialias: false}); | |
151 if (!gl) { | |
152 testFailed("context does not exist"); | |
153 } else { | |
154 testPassed("context exists"); | |
155 | |
156 // Verify these stats didn't change since they come from a different | |
157 // context. | |
158 shouldBe('gl.getParameter(gl.MAX_VIEWPORT_DIMS)[0]', 'maxSize[0]'); | |
159 shouldBe('gl.getParameter(gl.MAX_VIEWPORT_DIMS)[1]', 'maxSize[1]'); | |
160 | |
161 // check the initial viewport matches the drawingBufferWidth and drawingBuff
erHeight | |
162 shouldBe('gl.getParameter(gl.VIEWPORT)[0]', '0'); | |
163 shouldBe('gl.getParameter(gl.VIEWPORT)[1]', '0'); | |
164 shouldBe('gl.getParameter(gl.VIEWPORT)[2]', 'gl.drawingBufferWidth'); | |
165 shouldBe('gl.getParameter(gl.VIEWPORT)[3]', 'gl.drawingBufferHeight'); | |
166 | |
167 // Draw a pixel grid using a shader that draws in device coordinates | |
168 checkGrid(gl); | |
169 // Draw a quad in the top right corner. | |
170 checkQuad(gl); | |
171 | |
172 shouldBe('gl.getError()', 'gl.NO_ERROR'); | |
173 | |
174 debug(""); | |
175 debug("Testing resizing canvas"); | |
176 | |
177 oldViewport = gl.getParameter(gl.VIEWPORT); | |
178 | |
179 // flip width and height | |
180 canvas.width = desiredHeight; | |
181 canvas.height = desiredWidth; | |
182 | |
183 // Verify the viewport didn't change. | |
184 shouldBe('gl.getParameter(gl.VIEWPORT)[0]', 'oldViewport[0]'); | |
185 shouldBe('gl.getParameter(gl.VIEWPORT)[1]', 'oldViewport[1]'); | |
186 shouldBe('gl.getParameter(gl.VIEWPORT)[2]', 'oldViewport[2]'); | |
187 shouldBe('gl.getParameter(gl.VIEWPORT)[3]', 'oldViewport[3]'); | |
188 | |
189 // fix the viewport | |
190 gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); | |
191 | |
192 // Draw a pixel grid using a shader that draws in device coordinates | |
193 checkGrid(gl); | |
194 | |
195 // Draw a quad in the top right corner. | |
196 checkQuad(gl); | |
197 shouldBe('gl.getError()', 'gl.NO_ERROR'); | |
198 } | |
199 } | |
200 | |
201 var wtu = WebGLTestUtils; | |
202 var maxSize = getMaxViewportDimensions(); | |
203 | |
204 shouldBeTrue('maxSize[0] > 0'); | |
205 shouldBeTrue('maxSize[1] > 0'); | |
206 | |
207 // test a small size to make sure it works at all. | |
208 test(16, 32); | |
209 | |
210 // Make a canvas slightly larger than the max size WebGL can handle. | |
211 // From section 2.2 of the spec the WebGL implementation should allow this to wo
rk. | |
212 | |
213 // test a size larger than MAX_VIEWPORT_DIMS in both dimensions | |
214 test(maxSize[0] + 32, 8); | |
215 | |
216 debug("") | |
217 </script> | |
218 </body> | |
219 </html> | |
OLD | NEW |