| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Test the WebGL premultipledAlpha context creation flag.</title> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="resources/webgl-test.js"> </script> |
| <script src="resources/webgl-test-utils.js"> </script> |
| </head> |
| <body> |
| <div id="description"></div><div id="console"></div> |
| <script> |
| var wtu = WebGLTestUtils; |
| |
| var tests = [ |
| // If premultipledAlpha is true 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 premultipledAlpha is true 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 premultipledAlpha 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 premultipledAlpha 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 premultipledAlpha 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 premultipledAlpha is true 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" |
| } |
| ]; |
| |
| var g_count = 0; |
| var gl; |
| var canvas; |
| var premultipledAlpha; |
| |
| jsTestIsAsync = true; |
| |
| description("Test the WebGL premultipledAlpha 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; |
| debug("") |
| debug("testing: premultipliedAlpha: " + premultipliedAlpha + " imageFormat: " + test.imageFormat); |
| |
| shouldBe('gl.getContextAttributes().premultipledAlpha', 'premultipledAlpha'); |
| shouldBeTrue('gl.getContextAttributes().preserveDrawingBuffer'); |
| |
| var program = wtu.setupTexturedQuad(gl); |
| |
| 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.drawQuad(gl); |
| glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from drawing."); |
| |
| function loadTexture() { |
| var pngTex = gl.createTexture(); |
| // not needed as it's the default |
| // gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); |
| gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, false); |
| 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); |
| glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from creating copy."); |
| wtu.drawQuad(gl); |
| 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(); |
| } |
| |
| if (test.imageFormat) { |
| // Load canvas into string using toDataURL |
| var imageUrl = canvas.toDataURL(test.imageFormat); |
| 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 |
| var input = document.createElement("img"); |
| input.onload = loadTexture; |
| input.src = imageUrl; |
| } |
| } else { |
| // Load canvas into the texture asynchronously (to prevent unbounded stack consumption) |
| setTimeout(loadTexture, 0); |
| } |
| } else |
| finishJSTest(); |
| } |
| |
| </script> |
| |
| </body> |
| </html> |
| |
| |
