2010-08-16 Paul Sawaya <psawaya@apple.com>
[WebKit-https.git] / LayoutTests / fast / canvas / webgl / texImage2DImageDataTest.html
1 <!DOCTYPE html>
2 <html>
3   <head>
4     <title>texImage2D ImageData Test</title>
5     <script src="resources/webgl-test.js"> </script>
6     <script id="vshader" type="x-shader/x-vertex">
7         attribute vec3 vPosition;
8         attribute vec2 vTexCoord0;
9         varying vec2 texCoord;
10         void main()
11         {
12             gl_Position = vec4(vPosition.x, vPosition.y, vPosition.z, 1.0);
13             texCoord = vTexCoord0;
14         }
15     </script>
16
17     <script id="fshader" type="x-shader/x-fragment">
18         uniform sampler2D tex;
19         varying highp vec2 texCoord;
20         void main()
21         {
22             gl_FragColor = texture2D(tex, texCoord);
23         }
24     </script>
25
26     <script>
27         function fail(x,y, buf, shouldBe)
28         {
29             var i = (y*64+x) * 4;
30             var reason = "pixel at ("+x+","+y+") is ("+buf[i]+","+buf[i+1]+","+buf[i+2]+","+buf[i+3]+"), should be "+shouldBe;
31             document.getElementById("results").innerHTML = "Test <span style='color:red'>FAILED</span> "+reason;
32         }
33         
34         function pass()
35         {
36             document.getElementById("results").innerHTML = "Test <span style='color:green'>PASSED</span>";
37         }
38         
39         function checkGLError()
40         {
41             var error = gl.getError();
42             if (error != gl.NO_ERROR) {
43                 var str = "GL Error: " + error;
44                 document.body.appendChild(document.createTextNode(str));
45                 throw str;
46             }
47         }
48         
49         function init()
50         {
51             if (window.layoutTestController) {
52                 layoutTestController.overridePreference("WebKitWebGLEnabled", "1");
53                 layoutTestController.dumpAsText();
54             }
55             // Set up a canvas to get image data from
56             var canvas2d = document.getElementById("texcanvas");
57             var context2d = canvas2d.getContext("2d");
58             context2d.fillStyle = 'red';
59             context2d.fillRect(0,0,64,64);
60                         
61             gl = initWebGL("example", "vshader", "fshader", [ "vPosition", "vTexCoord0"], [ 1, 0, 1, 1 ], 100);
62             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
63             
64             var vertexObject = gl.createBuffer();
65             gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
66             var vertices = new Float32Array([
67                 -1,  1, 0,
68                 -1, -1, 0,
69                  1,  1, 0,
70                  1, -1, 0,
71                  1,  1, 0,
72                 -1, -1, 0]);
73             var texCoords = new Float32Array([
74                  0, 1,
75                  0, 0,
76                  1, 1,
77                  1, 0,
78                  1, 1,
79                  0, 0]);
80             g_texCoordOffset = vertices.byteLength;
81             gl.bufferData(gl.ARRAY_BUFFER, g_texCoordOffset + texCoords.byteLength, gl.STATIC_DRAW);
82             gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertices);
83             gl.bufferSubData(gl.ARRAY_BUFFER, g_texCoordOffset, texCoords);
84             
85             gl.enableVertexAttribArray(0);
86             gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 0, 0);
87             gl.enableVertexAttribArray(1);
88             gl.vertexAttribPointer(1, 2, gl.FLOAT, gl.FALSE, 0, g_texCoordOffset);
89
90             // Create a texture from the canvas's image data
91             var tex = gl.createTexture();
92             gl.bindTexture(gl.TEXTURE_2D, tex);
93             gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, context2d.getImageData(0, 0, 64, 64));
94             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
95             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
96             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
97             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
98             
99             g_textureLoc = gl.getUniformLocation(gl.program, "tex");
100             gl.uniform1i(g_textureLoc, 0);
101             
102             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
103             gl.drawArrays(gl.TRIANGLES, 0, 6);
104             
105             checkGLError();
106
107             // Test several locations
108             // Each line should be all red 
109             var buf = new Uint8Array(64 * 64 * 4);
110             gl.readPixels(0, 0, 64, 64, gl.RGBA, gl.UNSIGNED_BYTE, buf);
111             
112             var offset15 = 3840; // (15*64) * 4
113             var offset40 = 10240; // (40*64) * 4
114             var offset63 = 16128; // (63*64) * 4
115             for (var i = 0; i < 64; ++i) {
116                 var test0 = (buf[i*4] != 255 || buf[i*4+1] != 0 || buf[i*4+2] != 0 || buf[i*4+3] != 255);
117                 var test15 = (buf[offset15+i*4] != 255 || buf[offset15+i*4+1] != 0 || buf[offset15+i*4+2] != 0 || buf[offset15+i*4+3] != 255);
118                 var test40 = (buf[offset40+i*4] != 255 || buf[offset40+i*4+1] != 0 || buf[offset40+i*4+2] != 0 || buf[offset40+i*4+3] != 255);
119                 var test63 = (buf[offset63+i*4] != 255 || buf[offset63+i*4+1] != 0 || buf[offset63+i*4+2] != 0 || buf[offset63+i*4+3] != 255);
120                 if (test0) {
121                     fail(i, 0, buf, "(255,0,0,255)");
122                     return;
123                 }
124                 if (test15) {
125                     fail(i, 15, buf, "(255,0,0,255)");
126                     return;
127                 }
128                 if (test40) {
129                     fail(i, 40, buf, "(255,0,0,255)");
130                     return;
131                 }
132                 if (test63) {
133                     fail(i, 63, buf, "(255,0,0,255)");
134                     return;
135                 }
136             }
137             pass();
138        }
139     </script>
140   </head>
141   <body onload="init()">
142     <canvas id="texcanvas" width="64px" height="64px"></canvas>
143     <canvas id="example" width="64px" height="64px">
144     There is supposed to be an example drawing here, but it's not important.
145     </canvas>
146     <div id="results">Test <span style="color:red">FAILED</span></div>
147   </body>
148 </html>