| 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 |