2010-08-16 Paul Sawaya <psawaya@apple.com>
[WebKit-https.git] / LayoutTests / fast / canvas / webgl / texture-transparent-pixels-initialized.html
1 <html>
2 <head>
3 <link rel="stylesheet" href="../../js/resources/js-test-style.css"/>
4 <script src="../../js/resources/js-test-pre.js"></script>
5 <script src="resources/webgl-test.js"></script>
6 <script id="vshader" type="x-shader/x-vertex">
7 attribute vec3 g_Position;
8 attribute vec2 g_TexCoord0;
9
10 varying vec2 texCoord;
11
12 void main()
13 {
14     gl_Position = vec4(g_Position.x, g_Position.y, g_Position.z, 1.0);
15     texCoord = g_TexCoord0;
16 }
17 </script>
18
19 <script id="fshader" type="x-shader/x-fragment">
20 uniform sampler2D tex;
21 varying highp vec2 texCoord;
22
23 void main()
24 {
25     gl_FragColor = texture2D(tex, texCoord);
26 }
27 </script>
28
29 <script>
30 var gl = null;
31 var textureLoc = null;
32 var successfullyParsed = false;
33
34 function init()
35 {
36     if (window.initNonKhronosFramework) {
37         window.initNonKhronosFramework(true);
38     }
39
40     description('Tests there is no garbage in transparent regions of images uploaded as textures');
41
42     gl = initWebGL("example", "vshader", "fshader", [ "g_Position", "g_TexCoord0" ], [ 0, 0, 0, 1 ], 1);
43
44     textureLoc = gl.getUniformLocation(gl.program, "tex");
45
46     var vertices = new Float32Array([
47          1.0,  1.0, 0.0,
48         -1.0,  1.0, 0.0,
49         -1.0, -1.0, 0.0,
50          1.0,  1.0, 0.0,
51         -1.0, -1.0, 0.0,
52          1.0, -1.0, 0.0]);
53     // The input texture has 8 characters; take the leftmost one
54     var coeff = 1.0 / 8.0;
55     var texCoords = new Float32Array([
56         coeff, 1.0,
57         0.0, 1.0,
58         0.0, 0.0,
59         coeff, 1.0,
60         0.0, 0.0,
61         coeff, 0.0]);
62     var texCoordOffset = vertices.byteLength;
63
64     var vbo = gl.createBuffer();
65     gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
66     gl.bufferData(gl.ARRAY_BUFFER,
67                   texCoordOffset + texCoords.byteLength,
68                   gl.STATIC_DRAW);
69     gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertices);
70     gl.bufferSubData(gl.ARRAY_BUFFER, texCoordOffset, texCoords);
71
72     gl.enableVertexAttribArray(0);
73     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
74     gl.enableVertexAttribArray(1);
75     gl.vertexAttribPointer(1, 2, gl.FLOAT, gl.FALSE, 0, texCoordOffset);
76
77     texture = loadTexture("resources/bug-32888-texture.png");
78 }
79
80 function loadTexture(src) {
81     var texture = gl.createTexture();
82     gl.bindTexture(gl.TEXTURE_2D, texture);
83     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
84     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
85     var image = new Image();
86     image.onload = function() {
87         gl.bindTexture(gl.TEXTURE_2D, texture);
88         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
89         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
90         runTest();
91     };
92     image.src = src;
93     return texture;
94 }
95
96 // These two declarations need to be global for "shouldBe" to see them
97 var buf = null;
98 var idx = 0;
99
100 function runTest()
101 {
102     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
103     // Bind the texture to texture unit 0
104     gl.bindTexture(gl.TEXTURE_2D, texture);
105     // Point the uniform sampler to texture unit 0
106     gl.uniform1i(textureLoc, 0);
107     // Draw the triangles
108     gl.drawArrays(gl.TRIANGLES, 0, 6);
109
110     // Read back the rendering results
111     var width = 32;
112     var height = 32;
113     buf = new Uint8Array(width * height * 4);
114     gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
115     // Spot check a couple of 2x2 regions in the upper and lower left
116     // corners; they should be the background color rather than
117     // garbage
118     var queryWidth = 2;
119     var queryHeight = 2;
120     debug("Checking lower left corner");
121     var xoff = 1;
122     var yoff = height - 3;
123     for (var y = 0; y < queryHeight; y++) {
124         for (var x = 0; x < queryWidth; x++) {
125             idx = ((yoff + y) * width * 4 +
126                    (xoff + x) * 4);
127             shouldBe("buf[idx] == 0 && buf[idx + 1] == 0 && buf[idx + 2] == 0", "true");
128         }
129     }
130     debug("Checking upper left corner");
131     yoff = 1;
132     for (var y = 0; y < queryHeight; y++) {
133         for (var x = 0; x < queryWidth; x++) {
134             idx = ((yoff + y) * width * 4 +
135                    (xoff + x) * 4);
136             shouldBe("buf[idx] == 0 && buf[idx + 1] == 0 && buf[idx + 2] == 0", "true");
137         }
138     }
139
140     successfullyParsed = true;
141     var epilogue = document.createElement("script");
142     epilogue.onload = finish;
143     epilogue.src = "../../js/resources/js-test-post.js";
144     document.body.appendChild(epilogue);
145 }
146
147 function finish() {
148     if (window.nonKhronosFrameworkNotifyDone) {
149         window.nonKhronosFrameworkNotifyDone();
150     }
151 }
152 </script>
153 </head>
154 <body onload="init()">
155 <canvas id="example" width="32px" height="32px"></canvas>
156 <div id="description"></div>
157 <div id="console"></div>
158 </body>
159 </html>