third_party/WebKit/LayoutTests/fast/canvas/webgl/gl-pixelstorei.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2   "http://www.w3.org/TR/html4/loose.dtd">
   3 <html>
   4 <head>
   5 <title>WebGL pixelStorei Test</title>
   6 <script src="../../../resources/js-test.js"></script>
   7 <script src="resources/webgl-test.js"> </script>
   8 <script src="resources/desktop-gl-constants.js" type="text/javascript"></script>
   9 </head>
  10 <body>
  11 <canvas id="example" width="50" height="50"></canvas>
  12 <canvas id="2d00" width="50" height="50"></canvas>
  13 <canvas id="2d01" width="50" height="50"></canvas>
  14 <canvas id="2d02" width="50" height="50"></canvas>
  15 <canvas id="2d03" width="50" height="50"></canvas>
  16 <div id="description"></div>
  17 <div id="console"></div>
  18 <script id="vshader" type="x-shader/x-vertex">
  19 attribute vec4 vPosition;
  20 void main() {
  21   gl_Position = vPosition;
  22 }
  23 </script>
  24
  25 <script id="fshader" type="x-shader/x-fragment">
  26 void main() {
  27   gl_FragColor = vec4(1.0,0.0,0.0,1.0);
  28 }
  29 </script>
  30
  31 <script>
  32 function fail(x,y, name, buf, shouldBe) {
  33   var i = (y*50+x) * 4;
  34   var reason = "pixel in "+name+" at ("+x+","+y+") is ("+buf[i]+","+buf[i+1]+","+buf[i+2]+","+buf[i+3]+"), should be "+shouldBe;
  35   testFailed(reason);
  36 }
  37
  38 function pass(name) {
  39   testPassed("drawing is correct in " + name);
  40 }
  41
  42 function init() {
  43   debug("There should be 5 red triangles on 5 black squares above");
  44   debug("");
  45
  46   debug("This test checks that drawImage and readPixels are not effected by gl.Pixelstorei(gl.PACK_ALIGNMENT) and visa versa");
  47   debug("");
  48
  49   var canvas3d = document.getElementById("example");
  50   gl = initWebGL("example", "vshader", "fshader", [ "vPosition"], [ 0, 0, 0, 1 ], 1);
  51
  52   var vertexObject = gl.createBuffer();
  53   gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
  54   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0,0.5,0, -0.5,-0.5,0, 0.5,-0.5,0 ]), gl.STATIC_DRAW);
  55   gl.enableVertexAttribArray(0);
  56   gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
  57
  58   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  59   gl.drawArrays(gl.TRIANGLES, 0, 3);
  60
  61
  62   function checkData(buf, name) {
  63     // Test several locations
  64     // First line should be all black
  65     for (var i = 0; i < 50; ++i) {
  66       if (buf[i*4] != 0 || buf[i*4+1] != 0 || buf[i*4+2] != 0 || buf[i*4+3] != 255) {
  67         fail(i, 0, name, buf, "(0,0,0,255)");
  68         return;
  69       }
  70     }
  71
  72     // Line 25 should be red for at least 6 red pixels starting 22 pixels in
  73     var offset = (25*50+22) * 4;
  74     for (var i = 0; i < 6; ++i) {
  75       if (buf[offset+i*4] != 255 || buf[offset+i*4+1] != 0 || buf[offset+i*4+2] != 0 || buf[offset+i*4+3] != 255) {
  76         fail(22 + i, 25, name, buf, "(255,0,0,255)");
  77         return;
  78       }
  79     }
  80
  81     // Last line should be all black
  82     offset = (49*50) * 4;
  83     for (var i = 0; i < 50; ++i) {
  84       if (buf[offset+i*4] != 0 || buf[offset+i*4+1] != 0 || buf[offset+i*4+2] != 0 || buf[offset+i*4+3] != 255) {
  85         fail(i, 49, name, buf, "(0,0,0,255)");
  86         return;
  87       }
  88     }
  89
  90     pass(name);
  91   }
  92
  93   function checkColors() {
  94     var buf = new Uint8Array(50 * 50 * 4);
  95     gl.readPixels(0, 0, 50, 50, gl.RGBA, gl.UNSIGNED_BYTE, buf);
  96     checkData(buf, "3d context");
  97     var imgData = ctx2d.getImageData(0, 0, 50, 50);
  98     checkData(imgData.data, "2d context");
  99   }
 100
 101   var table = [1, 2, 4, 8];
 102   for (var ii = 0; ii < table.length; ++ii) {
 103     gl.pixelStorei(gl.PACK_ALIGNMENT, table[ii]);
 104     ctx2d = document.getElementById("2d0" + ii).getContext("2d");
 105     ctx2d.globalCompositeOperation = 'copy';
 106     ctx2d.drawImage(canvas3d, 0, 0);
 107     checkColors();
 108     assertMsg(gl.getParameter(gl.PACK_ALIGNMENT) == table[ii],
 109         "PACK_ALIGNMENT is " + table[ii]);
 110   }
 111 }
 112
 113 init();
 114 </script>
 115 </body>
 116
 117 <script>
 118 </script>
 119
 120 </body>
 121 </html>