dom/canvas/test/webgl-mochitest/test_draw.html

   1 <!DOCTYPE HTML>
   2 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   3
   4 <title>WebGL test: Basic drawing</title>
   5
   6 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   7 <link rel="stylesheet" href="/tests/SimpleTest/test.css">
   8 <script src="driver-info.js"></script>
   9 <script src="webgl-util.js"></script>
  10
  11
  12 <script id="vs" type="x-shader/x-vertex">
  13
  14 attribute vec2 aVertCoord;
  15
  16 void main(void) {
  17   gl_Position = vec4(aVertCoord, 0.0, 1.0);
  18 }
  19
  20 </script>
  21 <script id="fs" type="x-shader/x-fragment">
  22
  23 precision mediump float;
  24
  25 void main(void) {
  26   gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
  27 }
  28
  29 </script>
  30 <body>
  31 <canvas id="c" width="64" height="64"></canvas>
  32 <script>
  33
  34 // Give ourselves a scope to return early from:
  35 (function() {
  36   var gl = c.getContext('webgl');
  37   if (!gl) {
  38     todo(false, 'WebGL is unavailable.');
  39     return;
  40   }
  41
  42   gl.disable(gl.DEPTH_TEST);
  43
  44   var prog   = WebGLUtil.createProgramByIds(gl, 'vs', 'fs');
  45   if (!prog) {
  46     ok(false, 'Program linking should succeed.');
  47     return;
  48   }
  49
  50   prog.aVertCoord = gl.getAttribLocation(prog, "aVertCoord");
  51   ok(prog.aVertCoord >= 0, '`aVertCoord` should be valid.');
  52
  53   function checkGLError(func, info, refValue) {
  54     if (!refValue)
  55       refValue = 0;
  56
  57     var error = gl.getError();
  58     func(error == refValue,
  59          '[' + info + '] gl.getError should be 0x' + refValue.toString(16) +
  60                                         ', was 0x' + error.toString(16) + '.');
  61   }
  62
  63   var vertCoordArr = new Float32Array([
  64     -1, -1,
  65      1, -1,
  66     -1,  1,
  67      1,  1,
  68   ]);
  69   var vertCoordBuff = gl.createBuffer();
  70   gl.bindBuffer(gl.ARRAY_BUFFER, vertCoordBuff);
  71   gl.bufferData(gl.ARRAY_BUFFER, vertCoordArr, gl.STATIC_DRAW);
  72
  73   var indexArr = new Uint16Array([
  74     0, 1, 2,
  75     3,
  76   ]);
  77   var indexBuff = gl.createBuffer();
  78   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuff);
  79   gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexArr, gl.STATIC_DRAW);
  80
  81
  82   function testPixel(x, y, refData, func, infoString) {
  83     var pixel = new Uint8Array(4);
  84     gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
  85
  86     var pixelMatches = pixel[0] == refData[0] &&
  87                        pixel[1] == refData[1] &&
  88                        pixel[2] == refData[2] &&
  89                        pixel[3] == refData[3];
  90     func(pixelMatches, infoString);
  91   }
  92
  93   function preDraw(info) {
  94     gl.clearColor(1.0, 0.0, 0.0, 1.0);
  95     gl.clear(gl.COLOR_BUFFER_BIT);
  96
  97     testPixel(0, 0, [255, 0, 0, 255], ok, '[' + info + '] Should be red before drawing.');
  98   }
  99
 100   function postDraw(info) {
 101     testPixel(0, 0, [0, 255, 0, 255], ok, '[' + info + '] Should be green before drawing.');
 102   }
 103
 104   gl.useProgram(prog);
 105   gl.enableVertexAttribArray(prog.aVertCoord);
 106   gl.vertexAttribPointer(prog.aVertCoord, 2, gl.FLOAT, false, 0, 0);
 107
 108   // Start drawing
 109   checkGLError(ok, 'after setup');
 110
 111   preDraw('DrawArrays');
 112   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 113   postDraw('DrawArrays');
 114   checkGLError(ok, 'after DrawArrays');
 115
 116   preDraw('DrawElements');
 117   gl.drawElements(gl.TRIANGLE_STRIP, 4, gl.UNSIGNED_SHORT, 0);
 118   postDraw('DrawElements');
 119   checkGLError(ok, 'after DrawElements');
 120
 121   ok(true, 'Test complete.');
 122 })();
 123
 124 </script>
 125