third_party/WebKit/LayoutTests/fast/canvas/webgl/drawingbuffer-test.html

   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 drawingbufferWidth/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_position"]);
  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 being 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.drawingBufferWidth - 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 drawingBufferHeight
 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 work.
 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>