| <!-- |
| Copyright (c) 2019 The Khronos Group Inc. |
| Use of this source code is governed by an MIT-style license that can be |
| found in the LICENSE.txt file. |
| --> |
| |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Test the WebGL premultipliedAlpha context creation flag.</title> |
| <link rel="stylesheet" href="../../resources/js-test-style.css"/> |
| <script src="../../js/js-test-pre.js"></script> |
| <script src="../../js/webgl-test-utils.js"> </script> |
| </head> |
| <body> |
| <div id="description"></div><div id="console"></div> |
| <script> |
| "use strict"; |
| var wtu = WebGLTestUtils; |
| |
| // wtu.create3DContext(...) will set antialias to false by default |
| // if the antialias property is not set to true explicitly. |
| // To cover the antialias case, it needs to set antialias to true |
| // explicitly. |
| var tests = [ |
| // If premultipliedAlpha is true and antialias is false then |
| // [texture] [canvas] [dataURL] |
| // 32, 64, 128, 128 -> 64, 128, 255, 128 -> 64, 128, 255, 128 |
| { creationAttributes: {}, |
| sentColor: [32, 64, 128, 128], |
| expectedColor: [64, 128, 255, 128], |
| errorRange: 2, |
| imageFormat: "image/png" |
| }, |
| // If premultipliedAlpha is true and antialias is true then |
| // [texture] [canvas] [dataURL] |
| // 32, 64, 128, 128 -> 64, 128, 255, 128 -> 64, 128, 255, 128 |
| { creationAttributes: {antialias: true}, |
| sentColor: [32, 64, 128, 128], |
| expectedColor: [64, 128, 255, 128], |
| errorRange: 2, |
| imageFormat: "image/png" |
| }, |
| // If premultipliedAlpha is true and antialias is false then |
| // [texture] [canvas] [texture] |
| // 32, 64, 128, 128 -> 64, 128, 255, 128 -> 64, 128, 255, 128 |
| { creationAttributes: {}, |
| sentColor: [32, 64, 128, 128], |
| expectedColor: [64, 128, 255, 128], |
| errorRange: 2, |
| }, |
| // If premultipliedAlpha is true and antialias is true then |
| // [texture] [canvas] [texture] |
| // 32, 64, 128, 128 -> 64, 128, 255, 128 -> 64, 128, 255, 128 |
| { creationAttributes: {antialias: true}, |
| sentColor: [32, 64, 128, 128], |
| expectedColor: [64, 128, 255, 128], |
| errorRange: 2, |
| }, |
| // If premultipliedAlpha is false and antialias is false then |
| // [texture] [canvas] [dataURL] |
| // 255, 192, 128, 1 -> 255, 192, 128, 1 -> 255, 192, 128, 1 |
| { creationAttributes: {premultipliedAlpha: false}, |
| sentColor: [255, 192, 128, 1], |
| expectedColor: [255, 192, 128, 1], |
| errorRange: 0, |
| imageFormat: "image/png" |
| }, |
| // If premultipliedAlpha is false and antialias is true then |
| // [texture] [canvas] [dataURL] |
| // 255, 192, 128, 1 -> 255, 192, 128, 1 -> 255, 192, 128, 1 |
| { creationAttributes: {premultipliedAlpha: false, antialias: true}, |
| sentColor: [255, 192, 128, 1], |
| expectedColor: [255, 192, 128, 1], |
| errorRange: 0, |
| imageFormat: "image/png" |
| }, |
| // If premultipliedAlpha is false and antialias is false then |
| // [texture] [canvas] [texture] |
| // 255, 192, 128, 1 -> 255, 192, 128, 1 -> 255, 192, 128, 1 |
| { creationAttributes: {premultipliedAlpha: false}, |
| sentColor: [255, 192, 128, 1], |
| expectedColor: [255, 192, 128, 1], |
| errorRange: 0, |
| }, |
| // If premultipliedAlpha is false and antialias is true then |
| // [texture] [canvas] [texture] |
| // 255, 192, 128, 1 -> 255, 192, 128, 1 -> 255, 192, 128, 1 |
| { creationAttributes: {premultipliedAlpha: false, antialias: true}, |
| sentColor: [255, 192, 128, 1], |
| expectedColor: [255, 192, 128, 1], |
| errorRange: 0, |
| }, |
| // If premultipliedAlpha is false and antialias is false then |
| // [texture] [canvas] [dataURL] |
| // 255, 255, 255, 128 -> 255, 255, 255, 128 -> 128, 128, 128, 255 |
| { creationAttributes: {premultipliedAlpha: false}, |
| sentColor: [255, 255, 255, 128], |
| expectedColor: [128, 128, 128, 255], |
| errorRange: 2, |
| imageFormat: "image/jpeg" |
| }, |
| // If premultipliedAlpha is false and antialias is true then |
| // [texture] [canvas] [dataURL] |
| // 255, 255, 255, 128 -> 255, 255, 255, 128 -> 128, 128, 128, 255 |
| { creationAttributes: {premultipliedAlpha: false, antialias: true}, |
| sentColor: [255, 255, 255, 128], |
| expectedColor: [128, 128, 128, 255], |
| errorRange: 2, |
| imageFormat: "image/jpeg" |
| }, |
| // If premultipliedAlpha is true and antialias is false then |
| // [texture] [canvas] [dataURL] |
| // 128, 128, 128, 128 -> 255, 255, 255, 128 -> 128, 128, 128, 255 |
| { creationAttributes: {}, |
| sentColor: [128, 128, 128, 128], |
| expectedColor: [128, 128, 128, 255], |
| errorRange: 2, |
| imageFormat: "image/jpeg" |
| }, |
| // If premultipliedAlpha is true and antialias is true then |
| // [texture] [canvas] [dataURL] |
| // 128, 128, 128, 128 -> 255, 255, 255, 128 -> 128, 128, 128, 255 |
| { creationAttributes: {antialias: true}, |
| sentColor: [128, 128, 128, 128], |
| expectedColor: [128, 128, 128, 255], |
| errorRange: 2, |
| imageFormat: "image/jpeg" |
| } |
| ]; |
| |
| var g_count = 0; |
| var gl; |
| var canvas; |
| var premultipliedAlpha; |
| |
| enableJSTestPreVerboseLogging(); |
| description("Test the WebGL premultipliedAlpha context creation flag."); |
| doNextTest(); |
| function doNextTest() { |
| if (g_count < tests.length) { |
| var test = tests[g_count++]; |
| canvas = document.createElement("canvas"); |
| // Need to preserve drawing buffer to load it in a callback |
| test.creationAttributes.preserveDrawingBuffer = true; |
| gl = wtu.create3DContext(canvas, test.creationAttributes); |
| var premultipliedAlpha = test.creationAttributes.premultipliedAlpha != false; |
| var antialias = test.creationAttributes.antialias == true; |
| debug("") |
| debug("testing: premultipliedAlpha: " + premultipliedAlpha |
| + ", antialias: " + antialias |
| + ", imageFormat: " + test.imageFormat); |
| |
| if (!gl) { |
| testFailed("context does not exist"); |
| doNextTest(); |
| return; |
| } |
| |
| shouldBe('gl.getContextAttributes().premultipliedAlpha', premultipliedAlpha.toString()); |
| shouldBeTrue('gl.getContextAttributes().preserveDrawingBuffer'); |
| |
| wtu.log(gl.getContextAttributes()); |
| var program = wtu.setupTexturedQuad(gl); |
| |
| wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup."); |
| var tex = gl.createTexture(); |
| wtu.fillTexture(gl, tex, 2, 2, test.sentColor, 0); |
| var loc = gl.getUniformLocation(program, "tex"); |
| gl.uniform1i(loc, 0); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); |
| |
| wtu.clearAndDrawUnitQuad(gl); |
| wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from drawing."); |
| |
| var loadTexture = function() { |
| debug("loadTexture called"); |
| var pngTex = gl.createTexture(); |
| // not needed as it's the default |
| // gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); |
| wtu.failIfGLError(gl, 'gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);'); |
| gl.bindTexture(gl.TEXTURE_2D, pngTex); |
| if (test.imageFormat) { |
| // create texture from image |
| gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this); |
| } else { |
| // create texture from canvas |
| gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas); |
| } |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); |
| wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from creating copy."); |
| wtu.clearAndDrawUnitQuad(gl); |
| wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from 2nd drawing."); |
| wtu.checkCanvas( |
| gl, test.expectedColor, |
| "should draw with " + test.expectedColor, test.errorRange); |
| |
| doNextTest(); |
| } |
| |
| var loadTextureError = function() { |
| testFailed("Creating image from canvas failed. Image src: " + this.src); |
| finishTest(); |
| } |
| |
| var shrinkString = function(string) { |
| if (string.length < 63) { |
| return string; |
| } |
| return string.substr(0, 30) + "..." + string.substr(string.length - 30); |
| } |
| |
| if (test.imageFormat) { |
| // Load canvas into string using toDataURL |
| debug("Calling canvas.toDataURL('" + test.imageFormat + "')"); |
| var imageUrl = canvas.toDataURL(test.imageFormat); |
| debug("imageUrl = '" + shrinkString(imageUrl) + "'"); |
| if (test.imageFormat != "image/png" && |
| (imageUrl.indexOf("data:image/png,") == 0 || |
| imageUrl.indexOf("data:image/png;") == 0)) { |
| debug("Image format " + test.imageFormat + " not supported; skipping"); |
| setTimeout(doNextTest, 0); |
| } else { |
| // Load string into the texture |
| debug("Waiting for image.onload"); |
| var input = wtu.makeImage(imageUrl, loadTexture, loadTextureError); |
| } |
| } else { |
| // Load canvas into the texture asynchronously (to prevent unbounded stack consumption) |
| debug("Waiting for setTimeout"); |
| setTimeout(loadTexture, 0); |
| } |
| } else { |
| var successfullyParsed = true; |
| finishTest(); |
| } |
| } |
| |
| </script> |
| |
| </body> |
| </html> |
| |
| |
