LayoutTests/fast/canvas/webgl/tex-image-and-sub-image-2d-with-image-data.html

   1 <html>
   2 <head>
   3 <script src="../../js/resources/js-test-pre.js"></script>
   4 <script src="resources/webgl-test.js"></script>
   5 <script src="resources/webgl-test-utils.js"></script>
   6 <script>
   7 var wtu = WebGLTestUtils;
   8 var gl = null;
   9 var textureLoc = null;
  10 var imageData = null;
  11
  12 function init()
  13 {
  14     if (window.initNonKhronosFramework) {
  15         window.initNonKhronosFramework(true);
  16     }
  17
  18     description('Verify texImage2D and texSubImage2D code paths taking ImageData');
  19
  20     var canvas2d = document.getElementById("texcanvas");
  21     var context2d = canvas2d.getContext("2d");
  22     imageData = context2d.createImageData(1, 2);
  23     var data = imageData.data;
  24     data[0] = 255;
  25     data[1] = 0;
  26     data[2] = 0;
  27     data[3] = 255;
  28     data[4] = 0;
  29     data[5] = 255;
  30     data[6] = 0;
  31     data[7] = 0;
  32
  33     wtu = WebGLTestUtils;
  34     var canvas = document.getElementById("example");
  35     gl = wtu.create3DContext(canvas);
  36     var program = wtu.setupTexturedQuad(gl);
  37     gl.clearColor(0,0,0,1);
  38     gl.clearDepth(1);
  39     gl.disable(gl.BLEND);
  40
  41     textureLoc = gl.getUniformLocation(program, "tex");
  42
  43     runTest();
  44 }
  45
  46 // These two declarations need to be global for "shouldBe" to see them
  47 var buf = null;
  48 var idx = 0;
  49 var pixel = [0, 0, 0, 1];
  50 var correctColor = null;
  51
  52 function runOneIteration(useTexSubImage2D, flipY, premultiplyAlpha, topColor, bottomColor)
  53 {
  54     debug('Testing ' + (useTexSubImage2D ? 'texSubImage2D' : 'texImage2D') +
  55           ' with flipY=' + flipY + ' and premultiplyAlpha=' + premultiplyAlpha);
  56     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  57     // Enable writes to the RGBA channels
  58     gl.colorMask(1, 1, 1, 0);
  59     var texture = gl.createTexture();
  60     // Bind the texture to texture unit 0
  61     gl.bindTexture(gl.TEXTURE_2D, texture);
  62     // Set up texture parameters
  63     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  64     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  65     // Set up pixel store parameters
  66     gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
  67     gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, premultiplyAlpha);
  68     // Upload the image into the texture
  69     if (useTexSubImage2D) {
  70         // Initialize the texture to black first
  71         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 2, 0,
  72                       gl.RGBA, gl.UNSIGNED_BYTE, null);
  73         gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, imageData);
  74     } else {
  75         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageData);
  76     }
  77
  78     // Point the uniform sampler to texture unit 0
  79     gl.uniform1i(textureLoc, 0);
  80     // Draw the triangles
  81     wtu.drawQuad(gl, [0, 0, 0, 255]);
  82
  83     // Read back the rendering results
  84     buf = new Uint8Array(1 * 2 * 4);
  85     gl.readPixels(0, 0, 1, 2, gl.RGBA, gl.UNSIGNED_BYTE, buf);
  86     // Check the top pixel and bottom pixel and make sure they have
  87     // the right color.
  88     debug("Checking bottom pixel");
  89     wtu.checkCanvasRect(gl, 0, 0, 1, 1, bottomColor, "shouldBe " + bottomColor);
  90     debug("Checking top pixel");
  91     wtu.checkCanvasRect(gl, 0, 1, 1, 1, topColor, "shouldBe " + topColor);
  92 }
  93
  94 function runTest()
  95 {
  96     var red = [255, 0, 0, 255];
  97     var green = [0, 255, 0, 255];
  98     var redPremultiplyAlpha = [255, 0, 0, 255];
  99     var greenPremultiplyAlpha = [0, 0, 0, 255];
 100
 101     runOneIteration(false, true, false,
 102                     red, green);
 103     runOneIteration(false, false, false,
 104                     green, red);
 105     runOneIteration(false, true, true,
 106                     redPremultiplyAlpha, greenPremultiplyAlpha);
 107     runOneIteration(false, false, true,
 108                     greenPremultiplyAlpha, redPremultiplyAlpha);
 109     runOneIteration(true, true, false,
 110                     red, green);
 111     runOneIteration(true, false, false,
 112                     green, red);
 113     runOneIteration(true, true, true,
 114                     redPremultiplyAlpha, greenPremultiplyAlpha);
 115     runOneIteration(true, false, true,
 116                     greenPremultiplyAlpha, redPremultiplyAlpha);
 117     var epilogue = document.createElement("script");
 118     epilogue.onload = finish;
 119     epilogue.src = "../../js/resources/js-test-post.js";
 120     document.body.appendChild(epilogue);
 121 }
 122
 123 function finish() {
 124     if (window.nonKhronosFrameworkNotifyDone) {
 125         window.nonKhronosFrameworkNotifyDone();
 126     }
 127 }
 128 </script>
 129 </head>
 130 <body onload="init()">
 131 <canvas id="texcanvas" width="1px" height="2px"></canvas>
 132 <canvas id="example" width="1px" height="2px"></canvas>
 133 <div id="description"></div>
 134 <div id="console"></div>
 135 </body>
 136 </html>