| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>WebGL Canvas Conformance Tests</title> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="resources/webgl-test.js"></script> |
| <script src="resources/webgl-test-utils.js"></script> |
| </head> |
| <body> |
| <div id="description"></div> |
| <div id="console"></div> |
| <script id="vshaderGrid" type="x-shader/x-vertex"> |
| attribute vec4 a_position; |
| void main() |
| { |
| gl_Position = a_position; |
| } |
| </script> |
| |
| <script id="fshaderGrid" type="x-shader/x-fragment"> |
| precision mediump float; |
| void main() |
| { |
| float r = mod(gl_FragCoord.x, 2.0) < 1.0 ? 0.0 : 1.0; |
| float g = mod(gl_FragCoord.y, 2.0) < 1.0 ? 0.0 : 1.0; |
| gl_FragColor = vec4(r, g, 0, 1); |
| } |
| </script> |
| <script> |
| description("This test ensures WebGL implementations correctly implement drawingbufferWidth/Height."); |
| |
| function getMaxViewportDimensions() { |
| // create a fresh canvas. This canvas will be discarded |
| // after exiting this function. |
| var canvas = document.createElement("canvas"); |
| gl = wtu.create3DContext(canvas, {antialias: false}); |
| if (!gl) { |
| testFailed("context does not exist"); |
| return [0, 0]; |
| } else { |
| testPassed("context exists"); |
| |
| // For a default size canvas these should be equal. |
| // WebGL contexts are not allowed to change the size of the drawingBuffer |
| // for things like hi-res displays. |
| shouldBe('gl.drawingBufferWidth', 'gl.canvas.width'); |
| shouldBe('gl.drawingBufferHeight', 'gl.canvas.height'); |
| return gl.getParameter(gl.MAX_VIEWPORT_DIMS); |
| } |
| } |
| |
| // This uses gl_FragCoord to draw a device pixel relavent pattern. |
| // If drawBufferWidth or drawBufferHeight are not in device pixels |
| // this test should fail. |
| function checkGrid(gl) { |
| var program = wtu.setupProgram(gl, ["vshaderGrid", "fshaderGrid"], ["a_position"]); |
| wtu.setupUnitQuad(gl); |
| gl.useProgram(program); |
| shouldBe('gl.getError()', 'gl.NO_ERROR'); |
| |
| wtu.drawQuad(gl); |
| |
| var pixels = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4); |
| gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels); |
| |
| var colors = [ |
| [ { color: [0, 0, 0, 255], name: "black" }, { color: [255, 0, 0, 255], name: "red" } ], |
| [ { color: [0, 255, 0, 255], name: "green" }, { color: [255, 255, 0, 255], name: "yellow" } ], |
| ]; |
| |
| for (var yy = 0; yy < gl.drawingBufferHeight; ++yy) { |
| for (var xx = 0; xx < gl.drawingBufferWidth; ++xx) { |
| var info = colors[yy % 2][xx % 2]; |
| var color = info.color; |
| var offset = (yy * gl.drawingBufferWidth + xx) * 4; |
| for (var jj = 0; jj < 4; ++jj) { |
| if (pixels[offset + jj] != color[jj]) { |
| var actual = [pixels[offset], pixels[offset + 1], pixels[offset + 2], pixels[offset + 3]]; |
| testFailed("at " + xx + ", " + yy + " expected " + color + "(" + info.name + ") was " + actual); |
| return; |
| } |
| } |
| } |
| } |
| testPassed("grid rendered correctly"); |
| } |
| |
| // This passes device coordinate vertices in to make sure gl.viewport is not being mucked with. |
| function checkQuad(gl) { |
| var deviceToClipSpace = function(value, range) { |
| return value / range * 2 - 1; |
| } |
| |
| var program = wtu.setupColorQuad(gl); |
| |
| // draw a small green square in the top right corner. |
| var deviceX1 = gl.drawingBufferWidth - 4; |
| var deviceX2 = gl.drawingBufferWidth; |
| var deviceY1 = gl.drawingBufferHeight - 4; |
| var deviceY2 = gl.drawingBufferHeight; |
| |
| var clipX1 = deviceToClipSpace(deviceX1, gl.drawingBufferWidth); |
| var clipX2 = deviceToClipSpace(deviceX2, gl.drawingBufferWidth); |
| var clipY1 = deviceToClipSpace(deviceY1, gl.drawingBufferHeight); |
| var clipY2 = deviceToClipSpace(deviceY2, gl.drawingBufferHeight); |
| |
| var vertexObject = gl.createBuffer(); |
| gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject); |
| gl.bufferData( |
| gl.ARRAY_BUFFER, |
| new Float32Array( |
| [ clipX2, clipY2, |
| clipX1, clipY2, |
| clipX1, clipY1, |
| clipX2, clipY2, |
| clipX1, clipY1, |
| clipX2, clipY1]), |
| gl.STATIC_DRAW); |
| gl.enableVertexAttribArray(0); |
| gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); |
| |
| var green = [0, 255, 0, 255]; |
| var black = [0, 0, 0, 0]; |
| gl.clearColor(0, 0, 0, 0); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| wtu.drawUByteColorQuad(gl, [0, 255, 0, 255]); |
| |
| var squareWidth = deviceX2 - deviceX1; |
| var squareHeight = deviceY2 - deviceY1; |
| |
| // check the square. |
| wtu.checkCanvasRect(gl, deviceX1, deviceY1, squareWidth, squareHeight, green, "should be green"); |
| // check outside the square. |
| wtu.checkCanvasRect(gl, 0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight - squareHeight, black, "should be black"); |
| wtu.checkCanvasRect(gl, 0, gl.drawingBufferHeight - squareHeight, gl.drawingBufferWidth - squareWidth, squareHeight, black, "should be black"); |
| } |
| |
| |
| function test(desiredWidth, desiredHeight) { |
| debug(""); |
| debug("Checking drawingBufferWidth/drawingBufferHeight"); |
| |
| // Make a fresh canvas. |
| var canvas = document.createElement("canvas"); |
| canvas.width = desiredWidth; |
| canvas.height = desiredHeight; |
| |
| // This 'gl' must be global for shouldBe to work. |
| gl = wtu.create3DContext(canvas, {antialias: false}); |
| if (!gl) { |
| testFailed("context does not exist"); |
| } else { |
| testPassed("context exists"); |
| |
| // Verify these stats didn't change since they come from a different |
| // context. |
| shouldBe('gl.getParameter(gl.MAX_VIEWPORT_DIMS)[0]', 'maxSize[0]'); |
| shouldBe('gl.getParameter(gl.MAX_VIEWPORT_DIMS)[1]', 'maxSize[1]'); |
| |
| // check the initial viewport matches the drawingBufferWidth and drawingBufferHeight |
| shouldBe('gl.getParameter(gl.VIEWPORT)[0]', '0'); |
| shouldBe('gl.getParameter(gl.VIEWPORT)[1]', '0'); |
| shouldBe('gl.getParameter(gl.VIEWPORT)[2]', 'gl.drawingBufferWidth'); |
| shouldBe('gl.getParameter(gl.VIEWPORT)[3]', 'gl.drawingBufferHeight'); |
| |
| // Draw a pixel grid using a shader that draws in device coordinates |
| checkGrid(gl); |
| // Draw a quad in the top right corner. |
| checkQuad(gl); |
| |
| shouldBe('gl.getError()', 'gl.NO_ERROR'); |
| |
| debug(""); |
| debug("Testing resizing canvas"); |
| |
| oldViewport = gl.getParameter(gl.VIEWPORT); |
| |
| // flip width and height |
| canvas.width = desiredHeight; |
| canvas.height = desiredWidth; |
| |
| // Verify the viewport didn't change. |
| shouldBe('gl.getParameter(gl.VIEWPORT)[0]', 'oldViewport[0]'); |
| shouldBe('gl.getParameter(gl.VIEWPORT)[1]', 'oldViewport[1]'); |
| shouldBe('gl.getParameter(gl.VIEWPORT)[2]', 'oldViewport[2]'); |
| shouldBe('gl.getParameter(gl.VIEWPORT)[3]', 'oldViewport[3]'); |
| |
| // fix the viewport |
| gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); |
| |
| // Draw a pixel grid using a shader that draws in device coordinates |
| checkGrid(gl); |
| |
| // Draw a quad in the top right corner. |
| checkQuad(gl); |
| shouldBe('gl.getError()', 'gl.NO_ERROR'); |
| } |
| } |
| |
| var wtu = WebGLTestUtils; |
| var maxSize = getMaxViewportDimensions(); |
| |
| shouldBeTrue('maxSize[0] > 0'); |
| shouldBeTrue('maxSize[1] > 0'); |
| |
| // test a small size to make sure it works at all. |
| test(16, 32); |
| |
| // Make a canvas slightly larger than the max size WebGL can handle. |
| // From section 2.2 of the spec the WebGL implementation should allow this to work. |
| |
| // test a size larger than MAX_VIEWPORT_DIMS in both dimensions |
| test(maxSize[0] + 32, 8); |
| |
| debug("") |
| </script> |
| </body> |
| </html> |
