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