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

   1 <!DOCTYPE HTML>
   2 <title>WebGL test: Hidden alpha on no-alpha contexts</title>
   3 <script src='/tests/SimpleTest/SimpleTest.js'></script>
   4 <link rel='stylesheet' href='/tests/SimpleTest/test.css'>
   5 <script src='driver-info.js'></script>
   6 <script src='webgl-util.js'></script>
   7 <body>
   8 <script id='vs' type='x-shader/x-vertex'>
   9   attribute vec2 aPosCoord;
  10
  11   void main(void) {
  12     gl_Position = vec4(aPosCoord, 0.0, 1.0);
  13   }
  14 </script>
  15
  16 <script id='fs' type='x-shader/x-fragment'>
  17   precision mediump float;
  18
  19   void main(void) {
  20     gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  21   }
  22 </script>
  23 <canvas id='canvas' style='border: none;' width='100' height='100'></canvas>
  24 <script>
  25
  26 var posCoords_arr = new Float32Array(2 * 4);
  27 var posCoords_buff = null;
  28 function DrawQuad(gl, prog, x0, y0, x1, y1) {
  29   gl.useProgram(prog);
  30
  31   if (!posCoords_buff) {
  32     posCoords_buff = gl.createBuffer();
  33   }
  34   gl.bindBuffer(gl.ARRAY_BUFFER, posCoords_buff);
  35   posCoords_arr[0] = x0;
  36   posCoords_arr[1] = y0;
  37
  38   posCoords_arr[2] = x1;
  39   posCoords_arr[3] = y0;
  40
  41   posCoords_arr[4] = x0;
  42   posCoords_arr[5] = y1;
  43
  44   posCoords_arr[6] = x1;
  45   posCoords_arr[7] = y1;
  46   gl.bufferData(gl.ARRAY_BUFFER, posCoords_arr, gl.STREAM_DRAW);
  47
  48   gl.enableVertexAttribArray(prog.aPosCoord);
  49   gl.vertexAttribPointer(prog.aPosCoord, 2, gl.FLOAT, false, 0, 0);
  50
  51   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  52 }
  53
  54 function DrawSquare(gl, prog, size) {
  55   DrawQuad(gl, prog, -size, -size, size, size);
  56 }
  57
  58 function Reset(gl) {
  59   gl.canvas.width += 1;
  60   gl.canvas.width -= 1;
  61 }
  62
  63 function ReadCenterPixel(gl) {
  64   var w = gl.drawingbufferWidth;
  65   var h = gl.drawingbufferHeight;
  66   var ret = new Uint8Array(4);
  67   gl.readPixels(w/2, h/2, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, ret);
  68   return ret;
  69 }
  70
  71 function Test(gl, prog) {
  72   gl.enable(gl.BLEND);
  73   gl.blendFunc(gl.ZERO, gl.DST_ALPHA);
  74
  75   var iColor = 64;
  76   var fColor = iColor / 255.0;
  77
  78   //////////////////
  79
  80   ok(true, 'clear(R,G,B,0)');
  81
  82   Reset(gl);
  83
  84   gl.clearColor(fColor, fColor, fColor, 0.0);
  85   gl.clear(gl.COLOR_BUFFER_BIT);
  86
  87   var dataURL_pre = gl.canvas.toDataURL();
  88   //console.log('Before blending: ' + dataURL_pre);
  89
  90   DrawSquare(gl, prog, 0.7);
  91
  92   var pixel = ReadCenterPixel(gl);
  93   ok(pixel[0] == iColor &&
  94      pixel[1] == iColor &&
  95      pixel[2] == iColor, 'Color should be the same.');
  96   ok(pixel[3] == 255, 'No-alpha should always readback as 1.0 alpha.');
  97
  98   var dataURL_post = gl.canvas.toDataURL();
  99   //console.log('After blending: ' + dataURL_post);
 100   ok(dataURL_post == dataURL_pre,
 101      'toDataURL should be unchanged after blending.');
 102
 103   //////////////////
 104
 105   ok(true, 'mask(R,G,B,0), clear(R,G,B,1)');
 106
 107   Reset(gl);
 108
 109   gl.colorMask(true, true, true, false);
 110   gl.clearColor(fColor, fColor, fColor, 1.0);
 111   gl.clear(gl.COLOR_BUFFER_BIT);
 112   gl.colorMask(true, true, true, true);
 113
 114   dataURL_pre = gl.canvas.toDataURL();
 115   //console.log('Before blending: ' + dataURL_pre);
 116
 117   DrawSquare(gl, prog, 0.7);
 118
 119   var pixel = ReadCenterPixel(gl);
 120   ok(pixel[0] == iColor &&
 121      pixel[1] == iColor &&
 122      pixel[2] == iColor, 'Color should be the same.');
 123   ok(pixel[3] == 255, 'No-alpha should always readback as 1.0 alpha.');
 124   ok(gl.getError() == 0, 'Should have no errors.');
 125
 126   dataURL_post = gl.canvas.toDataURL();
 127   //console.log('After blending: ' + dataURL_post);
 128   ok(dataURL_post == dataURL_pre,
 129      'toDataURL should be unchanged after blending.');
 130
 131   ok(true, 'Test complete.');
 132   SimpleTest.finish();
 133 }
 134
 135 (function(){
 136   var canvas = document.getElementById('canvas');
 137   var attribs = {
 138     alpha: false,
 139     antialias: false,
 140     premultipliedAlpha: false,
 141   };
 142   var gl = canvas.getContext('experimental-webgl', attribs);
 143   ok(gl, 'WebGL should work.');
 144   ok(gl.getParameter(gl.ALPHA_BITS) == 0, 'Shouldn\'t have alpha bits.');
 145
 146   var prog = WebGLUtil.createProgramByIds(gl, 'vs', 'fs');
 147   ok(prog, 'Program should link.');
 148   prog.aPosCoord = gl.getAttribLocation(prog, 'aPosCoord');
 149
 150   SimpleTest.waitForExplicitFinish();
 151   SimpleTest.requestFlakyTimeout("untriaged");
 152   setTimeout(function(){ Test(gl, prog); }, 500);
 153 })();
 154
 155 </script>
 156 </body>