summaryrefslogtreecommitdiffstats
path: root/dom/canvas/test/webgl-mochitest/test_webgl2_alpha_luminance.html
blob: 3ec6c1909e7fdea88be1644ea2e9deaf7e2c7bb2 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE HTML>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>WebGL2 test: Alpha and Luminance Textures</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css">
<script src="driver-info.js"></script>
<script src="webgl-util.js"></script>
<script id="vs" type="x-shader/x-vertex"
>#version 300 es

in vec2 aTexCoord;
out vec2 vTexCoord;

void main() {
  vec2 pos = vec2(2.0)*aTexCoord - vec2(1.0);
  gl_Position = vec4(pos, 0.0, 1.0);
  vTexCoord = aTexCoord;
}
</script>
<script id="fs" type="x-shader/x-fragment"
>#version 300 es
precision mediump float;

in vec2 vTexCoord;
uniform sampler2D uTex;
out vec4 oFragColor;

void main() {
  oFragColor = texture(uTex, vTexCoord);
}
</script>
<body>
<canvas id="c" width="32" height="32"></canvas>
<script>
  WebGLUtil.withWebGL2('c', function(gl) {

    function testPixel(x, y, refData, infoPrefix) {
      var pixel = new Uint8Array(4);
      gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);

      var pixelMatches = (pixel[0] == refData[0] &&
                          pixel[1] == refData[1] &&
                          pixel[2] == refData[2] &&
                          pixel[3] == refData[3]);
      var expectedStr = '[' + refData.join(', ') + ']';
      var actualStr   = '[' +   pixel.join(', ') + ']';

      if (pixelMatches) {
        ok(true, infoPrefix + 'Expected ' + expectedStr + '.');
      } else {
        ok(false, infoPrefix + 'Expected ' + expectedStr + ', was ' + actualStr + '.');
      }
    }

    function testTexture(details, prog) {
      prog.aTexCoord = gl.getAttribLocation(prog, "aTexCoord");
      ok(prog.aTexCoord >= 0, '`aTexCoord` should be valid.');

      var tex = gl.createTexture();
      gl.bindTexture(gl.TEXTURE_2D, tex);
      gl.texImage2D(gl.TEXTURE_2D, 0, details.format, 1, 1, 0,
                    details.format, gl.UNSIGNED_BYTE, details.texData);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

      gl.useProgram(prog);
      gl.vertexAttribPointer(prog.aTexCoord, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(prog.aTexCoord);

      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

      testPixel(0, 0, details.result, details.info + ': ');
      return true;
    }

    var prog = WebGLUtil.createProgramByIds(gl, 'vs', 'fs');
    if (!prog) {
      ok(false, 'Program linking should succeed.');
      return false;
    }

    gl.disable(gl.DEPTH_TEST);

    var vertData = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertData);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0, 0, 1, 0, 0, 1, 1, 1 ]), gl.STATIC_DRAW);

    gl.clearColor(0, 0, 1, 1);
    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);

    var details = [
      { info: 'Luminance8', format: gl.LUMINANCE, texData: new Uint8Array([ 128 ]),
        result: [128, 128, 128, 255] },
      { info: 'Alpha8', format: gl.ALPHA, texData: new Uint8Array([ 128 ]),
        result: [0, 0, 0, 128] },
      { info: 'Luminance8Alpha8', format: gl.LUMINANCE_ALPHA, texData: new Uint8Array([ 128, 128 ]),
        result: [128, 128, 128, 128] },
    ];

    for (var i = 0; i < details.length; i++) {
      if (!testTexture(details[i], prog)) {
        return;
      }
    }
    ok(true, 'Test complete.');
  }, function() {
    SimpleTest.finish();
  });

  SimpleTest.waitForExplicitFinish();
</script>