LayoutTests/fast/canvas/webgl/premultiplyalpha-test.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <title>Test the WebGL premultipledAlpha context creation flag.</title>
   6 <script src="../../js/resources/js-test-pre.js"></script>
   7 <script src="resources/webgl-test.js"> </script>
   8 <script src="resources/webgl-test-utils.js"> </script>
   9 </head>
  10 <body>
  11 <div id="description"></div><div id="console"></div>
  12 <script>
  13 var wtu = WebGLTestUtils;
  14
  15 var tests = [
  16   // If premultipledAlpha is true then
  17   // [texture]           [canvas]             [dataURL]
  18   // 32, 64, 128, 128 -> 64, 128, 255, 128 -> 64, 128, 255, 128
  19   { creationAttributes: {},
  20     sentColor: [32, 64, 128, 128],
  21     expectedColor: [64, 128, 255, 128],
  22     errorRange: 2,
  23     imageFormat: "image/png"
  24   },
  25   // If premultipledAlpha is true then
  26   // [texture]           [canvas]             [texture]
  27   // 32, 64, 128, 128 -> 64, 128, 255, 128 -> 64, 128, 255, 128
  28   { creationAttributes: {},
  29     sentColor: [32, 64, 128, 128],
  30     expectedColor: [64, 128, 255, 128],
  31     errorRange: 2,
  32   },
  33   // If premultipledAlpha is false then
  34   // [texture]           [canvas]            [dataURL]
  35   // 255, 192, 128, 1 -> 255, 192, 128, 1 -> 255, 192, 128, 1
  36   { creationAttributes: {premultipliedAlpha: false},
  37     sentColor: [255, 192, 128, 1],
  38     expectedColor: [255, 192, 128, 1],
  39     errorRange: 0,
  40     imageFormat: "image/png"
  41   },
  42   // If premultipledAlpha is false then
  43   // [texture]           [canvas]            [texture]
  44   // 255, 192, 128, 1 -> 255, 192, 128, 1 -> 255, 192, 128, 1
  45   { creationAttributes: {premultipliedAlpha: false},
  46     sentColor: [255, 192, 128, 1],
  47     expectedColor: [255, 192, 128, 1],
  48     errorRange: 0,
  49   },
  50   // If premultipledAlpha is false then
  51   // [texture]             [canvas]            [dataURL]
  52   // 255, 255, 255, 128 -> 255, 255, 255, 128 -> 128, 128, 128, 255
  53   { creationAttributes: {premultipliedAlpha: false},
  54     sentColor: [255, 255, 255, 128],
  55     expectedColor: [128, 128, 128, 255],
  56     errorRange: 2,
  57     imageFormat: "image/jpeg"
  58   },
  59   // If premultipledAlpha is true then
  60   // [texture]             [canvas]            [dataURL]
  61   // 128, 128, 128, 128 -> 255, 255, 255, 128 -> 128, 128, 128, 255
  62   { creationAttributes: {},
  63     sentColor: [128, 128, 128, 128],
  64     expectedColor: [128, 128, 128, 255],
  65     errorRange: 2,
  66     imageFormat: "image/jpeg"
  67   }
  68 ];
  69
  70 var g_count = 0;
  71 var gl;
  72 var canvas;
  73 var premultipledAlpha;
  74
  75 if (window.layoutTestController) {
  76       layoutTestController.waitUntilDone();
  77       layoutTestController.overridePreference("WebKitWebGLEnabled", "1");
  78 }
  79
  80 description("Test the WebGL premultipledAlpha context creation flag.");
  81 doNextTest();
  82 function doNextTest() {
  83   if (g_count < tests.length) {
  84      var test = tests[g_count++];
  85      canvas = document.createElement("canvas");
  86      // Need to preserve drawing buffer to load it in a callback
  87      test.creationAttributes.preserveDrawingBuffer = true;
  88      gl = wtu.create3DContext(canvas, test.creationAttributes);
  89      var premultipliedAlpha = test.creationAttributes.premultipliedAlpha != false;
  90      debug("")
  91      debug("testing: premultipliedAlpha: " + premultipliedAlpha + " imageFormat: " + test.imageFormat);
  92
  93      shouldBe('gl.getContextAttributes().premultipledAlpha', 'premultipledAlpha');
  94      shouldBeTrue('gl.getContextAttributes().preserveDrawingBuffer');
  95
  96      var program = wtu.setupTexturedQuad(gl);
  97
  98      glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup.");
  99      var tex = gl.createTexture();
 100      wtu.fillTexture(gl, tex, 2, 2, test.sentColor, 0);
 101      var loc = gl.getUniformLocation(program, "tex");
 102      gl.uniform1i(loc, 0);
 103      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
 104      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
 105      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 106      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 107
 108      wtu.drawQuad(gl);
 109      glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from drawing.");
 110
 111      function loadTexture() {
 112        var pngTex = gl.createTexture();
 113        // not needed as it's the default
 114        // gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
 115        gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, false);
 116        gl.bindTexture(gl.TEXTURE_2D, pngTex);
 117        if (test.imageFormat) {
 118           // create texture from image
 119           gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this);
 120        } else {
 121           // create texture from canvas
 122           gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
 123        }
 124        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
 125        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
 126        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 127        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 128        glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from creating copy.");
 129        wtu.drawQuad(gl);
 130        glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from 2nd drawing.");
 131        wtu.checkCanvas(
 132           gl, test.expectedColor,
 133           "should draw with " + test.expectedColor, test.errorRange);
 134
 135        doNextTest();
 136      }
 137
 138      if (test.imageFormat) {
 139         // Load canvas into string using toDataURL
 140         var imageUrl = canvas.toDataURL(test.imageFormat);
 141         if (test.imageFormat != "image/png" &&
 142             (imageUrl.indexOf("data:image/png,") == 0 ||
 143              imageUrl.indexOf("data:image/png;") == 0)) {
 144           debug("Image format " + test.imageFormat + " not supported; skipping");
 145           setTimeout(doNextTest, 0);
 146         } else {
 147           // Load string into the texture
 148           var input = document.createElement("img");
 149           input.onload = loadTexture;
 150           input.src = imageUrl;
 151         }
 152      } else {
 153         // Load canvas into the texture asynchronously (to prevent unbounded stack consumption)
 154         setTimeout(loadTexture, 0);
 155      }
 156    } else {
 157       if (window.layoutTestController)
 158          layoutTestController.notifyDone();
 159       finishTest();
 160    }
 161 }
 162
 163 </script>
 164
 165 </body>
 166 </html>
 167
 168