dom/canvas/test/webgl-mochitest/regress/test_bug_1268096.html

   1 <!DOCTYPE HTML>
   2 <html>
   3   <head>
   4     <meta charset='UTF-8'/>
   5     <script src='/tests/SimpleTest/SimpleTest.js'></script>
   6     <link rel='stylesheet' href='/tests/SimpleTest/test.css'>
   7     <script src='../webgl-util.js'></script>
   8     <script id='vs' type='x-shader/x-vertex'>
   9
  10 attribute vec2 aPosition;
  11
  12 void main(void) {
  13   gl_PointSize = 16.0;
  14   gl_Position = vec4(aPosition, 0, 1);
  15 }
  16
  17     </script>
  18     <script id='fs' type='x-shader/x-fragment'>
  19
  20 precision mediump float;
  21
  22 uniform vec4 uColor;
  23
  24 void main(void) {
  25   gl_FragColor = uColor;
  26 }
  27
  28     </script>
  29   </head>
  30   <body>
  31     <script>
  32
  33 function GetPixel(gl, x, y) {
  34   var pixel = new Uint8Array(4);
  35   gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
  36   return pixel;
  37 }
  38
  39 function ColorStr(arr) {
  40   return '{' + arr.map(function(x) { return '' + x; }).join(', ') + '}';
  41 }
  42
  43 function PixelShouldBe(gl, x, y, ref, prefix) {
  44   if (prefix) {
  45     prefix += ': ';
  46   }
  47
  48   var test = GetPixel(gl, x, y);
  49
  50   var testStr = ColorStr(test);
  51   var refStr = ColorStr(ref.map(value => value * 255));
  52   ok(testStr == refStr, prefix + 'Should be ' + refStr + ', was ' + testStr + '.');
  53 }
  54
  55 function GetProgram(gl) {
  56   var prog = WebGLUtil.createProgramByIds(gl, 'vs', 'fs');
  57
  58   prog.aPosition = gl.getAttribLocation(prog, 'aPosition');
  59   ok(prog.aPosition >= 0, '`aPosition` should be valid.');
  60
  61   prog.uColor = gl.getUniformLocation(prog, 'uColor');
  62   ok(prog.uColor, '`uColor` should be valid.');
  63
  64   return prog;
  65 }
  66
  67 // Give ourselves a scope to return early from:
  68 (function () {
  69   var c = document.createElement('canvas');
  70   document.body.appendChild(c);
  71   var gl = c.getContext('webgl', { depth: false, antialias: false });
  72   if (!gl) {
  73     todo(false, 'WebGL is unavailable.');
  74     return;
  75   }
  76
  77   ////////
  78
  79   // With default culling, it works fine.
  80   // The problem seems to be that the virtual quads generated from points are wound 'backwards'.
  81   gl.enable(gl.CULL_FACE);
  82   gl.cullFace(gl.BACK); // Cull back faces.
  83
  84   ////////
  85
  86   var vertArr = new Float32Array([
  87     -1, -1,
  88     +1, -1,
  89     -1, +1,
  90   ]);
  91
  92   var vbo = gl.createBuffer();
  93   gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
  94   gl.bufferData(gl.ARRAY_BUFFER, vertArr, gl.STATIC_DRAW);
  95
  96   ////////
  97
  98   var triProg = GetProgram(gl);
  99   var pointProg = GetProgram(gl);
 100   if (!triProg || !pointProg) {
 101     ok(false, 'Program linking should succeed.');
 102     return;
 103   }
 104
 105   ok(triProg.aPosition == pointProg.aPosition, 'aPosition should match.');
 106   gl.enableVertexAttribArray(triProg.aPosition);
 107   gl.vertexAttribPointer(triProg.aPosition, 2, gl.FLOAT, false, 0, 0);
 108
 109   ////////
 110
 111   gl.useProgram(triProg);
 112   var triColor = [1, 0, 0, 1];
 113   gl.uniform4fv(triProg.uColor, triColor);
 114
 115   gl.useProgram(pointProg);
 116   var pointColor = [0, 1, 0, 1];
 117   gl.uniform4fv(pointProg.uColor, pointColor);
 118
 119   ////////
 120
 121   gl.clearColor(0, 0, 0, 1);
 122   gl.clear(gl.COLOR_BUFFER_BIT);
 123
 124   gl.useProgram(triProg);
 125   gl.drawArrays(gl.TRIANGLES, 0, 3);
 126
 127   gl.useProgram(pointProg);
 128   gl.drawArrays(gl.POINTS, 0, 3);
 129
 130   ////////
 131
 132   PixelShouldBe(gl, 32, 32, triColor, 'Tri');
 133   PixelShouldBe(gl, 0, 0, pointColor, 'Point');
 134
 135   ok(true, 'Test complete');
 136 })();
 137
 138     </script>
 139   </body>
 140 </html>