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

   1 <!DOCTYPE HTML>
   2 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   3 <title>WebGL2 test: Alpha and Luminance Textures</title>
   4 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   5 <link rel="stylesheet" href="/tests/SimpleTest/test.css">
   6 <script src="driver-info.js"></script>
   7 <script src="webgl-util.js"></script>
   8 <script id="vs" type="x-shader/x-vertex"
   9 >#version 300 es
  10
  11 in vec2 aTexCoord;
  12 out vec2 vTexCoord;
  13
  14 void main() {
  15   vec2 pos = vec2(2.0)*aTexCoord - vec2(1.0);
  16   gl_Position = vec4(pos, 0.0, 1.0);
  17   vTexCoord = aTexCoord;
  18 }
  19 </script>
  20 <script id="fs" type="x-shader/x-fragment"
  21 >#version 300 es
  22 precision mediump float;
  23
  24 in vec2 vTexCoord;
  25 uniform sampler2D uTex;
  26 out vec4 oFragColor;
  27
  28 void main() {
  29   oFragColor = texture(uTex, vTexCoord);
  30 }
  31 </script>
  32 <body>
  33 <canvas id="c" width="32" height="32"></canvas>
  34 <script>
  35   WebGLUtil.withWebGL2('c', function(gl) {
  36
  37     function testPixel(x, y, refData, infoPrefix) {
  38       var pixel = new Uint8Array(4);
  39       gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
  40
  41       var pixelMatches = (pixel[0] == refData[0] &&
  42                           pixel[1] == refData[1] &&
  43                           pixel[2] == refData[2] &&
  44                           pixel[3] == refData[3]);
  45       var expectedStr = '[' + refData.join(', ') + ']';
  46       var actualStr   = '[' +   pixel.join(', ') + ']';
  47
  48       if (pixelMatches) {
  49         ok(true, infoPrefix + 'Expected ' + expectedStr + '.');
  50       } else {
  51         ok(false, infoPrefix + 'Expected ' + expectedStr + ', was ' + actualStr + '.');
  52       }
  53     }
  54
  55     function testTexture(details, prog) {
  56       prog.aTexCoord = gl.getAttribLocation(prog, "aTexCoord");
  57       ok(prog.aTexCoord >= 0, '`aTexCoord` should be valid.');
  58
  59       var tex = gl.createTexture();
  60       gl.bindTexture(gl.TEXTURE_2D, tex);
  61       gl.texImage2D(gl.TEXTURE_2D, 0, details.format, 1, 1, 0,
  62                     details.format, gl.UNSIGNED_BYTE, details.texData);
  63       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  64       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  65       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  66       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  67
  68       gl.useProgram(prog);
  69       gl.vertexAttribPointer(prog.aTexCoord, 2, gl.FLOAT, false, 0, 0);
  70       gl.enableVertexAttribArray(prog.aTexCoord);
  71
  72       gl.clear(gl.COLOR_BUFFER_BIT);
  73       gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  74
  75       testPixel(0, 0, details.result, details.info + ': ');
  76       return true;
  77     }
  78
  79     var prog = WebGLUtil.createProgramByIds(gl, 'vs', 'fs');
  80     if (!prog) {
  81       ok(false, 'Program linking should succeed.');
  82       return;
  83     }
  84
  85     gl.disable(gl.DEPTH_TEST);
  86
  87     var vertData = gl.createBuffer();
  88     gl.bindBuffer(gl.ARRAY_BUFFER, vertData);
  89     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0, 0, 1, 0, 0, 1, 1, 1 ]), gl.STATIC_DRAW);
  90
  91     gl.clearColor(0, 0, 1, 1);
  92     gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
  93
  94     var details = [
  95       { info: 'Luminance8', format: gl.LUMINANCE, texData: new Uint8Array([ 128 ]),
  96         result: [128, 128, 128, 255] },
  97       { info: 'Alpha8', format: gl.ALPHA, texData: new Uint8Array([ 128 ]),
  98         result: [0, 0, 0, 128] },
  99       { info: 'Luminance8Alpha8', format: gl.LUMINANCE_ALPHA, texData: new Uint8Array([ 128, 128 ]),
 100         result: [128, 128, 128, 128] },
 101     ];
 102
 103     for (var i = 0; i < details.length; i++) {
 104       if (!testTexture(details[i], prog)) {
 105         return;
 106       }
 107     }
 108     ok(true, 'Test complete.');
 109   }, function() {
 110     SimpleTest.finish();
 111   });
 112
 113   SimpleTest.waitForExplicitFinish();
 114 </script>