premultiplyalpha-test.html (9476B)
1 <!-- 2 Copyright (c) 2019 The Khronos Group Inc. 3 Use of this source code is governed by an MIT-style license that can be 4 found in the LICENSE.txt file. 5 --> 6 7 <!DOCTYPE html> 8 <html> 9 <head> 10 <meta charset="utf-8"> 11 <title>Test the WebGL premultipliedAlpha context creation flag.</title> 12 <link rel="stylesheet" href="../../resources/js-test-style.css"/> 13 <script src="../../js/js-test-pre.js"></script> 14 <script src="../../js/webgl-test-utils.js"> </script> 15 </head> 16 <body> 17 <div id="description"></div><div id="console"></div> 18 <script> 19 "use strict"; 20 var wtu = WebGLTestUtils; 21 22 // wtu.create3DContext(...) will set antialias to false by default 23 // if the antialias property is not set to true explicitly. 24 // To cover the antialias case, it needs to set antialias to true 25 // explicitly. 26 var tests = [ 27 // If premultipliedAlpha is true and antialias is false then 28 // [texture] [canvas] [dataURL] 29 // 32, 64, 128, 128 -> 64, 128, 255, 128 -> 64, 128, 255, 128 30 { creationAttributes: {}, 31 sentColor: [32, 64, 128, 128], 32 expectedColor: [64, 128, 255, 128], 33 errorRange: 2, 34 imageFormat: "image/png" 35 }, 36 // If premultipliedAlpha is true and antialias is true then 37 // [texture] [canvas] [dataURL] 38 // 32, 64, 128, 128 -> 64, 128, 255, 128 -> 64, 128, 255, 128 39 { creationAttributes: {antialias: true}, 40 sentColor: [32, 64, 128, 128], 41 expectedColor: [64, 128, 255, 128], 42 errorRange: 2, 43 imageFormat: "image/png" 44 }, 45 // If premultipliedAlpha is true and antialias is false then 46 // [texture] [canvas] [texture] 47 // 32, 64, 128, 128 -> 64, 128, 255, 128 -> 64, 128, 255, 128 48 { creationAttributes: {}, 49 sentColor: [32, 64, 128, 128], 50 expectedColor: [64, 128, 255, 128], 51 errorRange: 2, 52 }, 53 // If premultipliedAlpha is true and antialias is true then 54 // [texture] [canvas] [texture] 55 // 32, 64, 128, 128 -> 64, 128, 255, 128 -> 64, 128, 255, 128 56 { creationAttributes: {antialias: true}, 57 sentColor: [32, 64, 128, 128], 58 expectedColor: [64, 128, 255, 128], 59 errorRange: 2, 60 }, 61 // If premultipliedAlpha is false and antialias is false then 62 // [texture] [canvas] [dataURL] 63 // 255, 192, 128, 1 -> 255, 192, 128, 1 -> 255, 192, 128, 1 64 { creationAttributes: {premultipliedAlpha: false}, 65 sentColor: [255, 192, 128, 1], 66 expectedColor: [255, 192, 128, 1], 67 errorRange: 0, 68 imageFormat: "image/png" 69 }, 70 // If premultipliedAlpha is false and antialias is true then 71 // [texture] [canvas] [dataURL] 72 // 255, 192, 128, 1 -> 255, 192, 128, 1 -> 255, 192, 128, 1 73 { creationAttributes: {premultipliedAlpha: false, antialias: true}, 74 sentColor: [255, 192, 128, 1], 75 expectedColor: [255, 192, 128, 1], 76 errorRange: 0, 77 imageFormat: "image/png" 78 }, 79 // If premultipliedAlpha is false and antialias is false then 80 // [texture] [canvas] [texture] 81 // 255, 192, 128, 1 -> 255, 192, 128, 1 -> 255, 192, 128, 1 82 { creationAttributes: {premultipliedAlpha: false}, 83 sentColor: [255, 192, 128, 1], 84 expectedColor: [255, 192, 128, 1], 85 errorRange: 0, 86 }, 87 // If premultipliedAlpha is false and antialias is true then 88 // [texture] [canvas] [texture] 89 // 255, 192, 128, 1 -> 255, 192, 128, 1 -> 255, 192, 128, 1 90 { creationAttributes: {premultipliedAlpha: false, antialias: true}, 91 sentColor: [255, 192, 128, 1], 92 expectedColor: [255, 192, 128, 1], 93 errorRange: 0, 94 }, 95 // If premultipliedAlpha is false and antialias is false then 96 // [texture] [canvas] [dataURL] 97 // 255, 255, 255, 128 -> 255, 255, 255, 128 -> 128, 128, 128, 255 98 { creationAttributes: {premultipliedAlpha: false}, 99 sentColor: [255, 255, 255, 128], 100 expectedColor: [128, 128, 128, 255], 101 errorRange: 2, 102 imageFormat: "image/jpeg" 103 }, 104 // If premultipliedAlpha is false and antialias is true then 105 // [texture] [canvas] [dataURL] 106 // 255, 255, 255, 128 -> 255, 255, 255, 128 -> 128, 128, 128, 255 107 { creationAttributes: {premultipliedAlpha: false, antialias: true}, 108 sentColor: [255, 255, 255, 128], 109 expectedColor: [128, 128, 128, 255], 110 errorRange: 2, 111 imageFormat: "image/jpeg" 112 }, 113 // If premultipliedAlpha is true and antialias is false then 114 // [texture] [canvas] [dataURL] 115 // 128, 128, 128, 128 -> 255, 255, 255, 128 -> 128, 128, 128, 255 116 { creationAttributes: {}, 117 sentColor: [128, 128, 128, 128], 118 expectedColor: [128, 128, 128, 255], 119 errorRange: 2, 120 imageFormat: "image/jpeg" 121 }, 122 // If premultipliedAlpha is true and antialias is true then 123 // [texture] [canvas] [dataURL] 124 // 128, 128, 128, 128 -> 255, 255, 255, 128 -> 128, 128, 128, 255 125 { creationAttributes: {antialias: true}, 126 sentColor: [128, 128, 128, 128], 127 expectedColor: [128, 128, 128, 255], 128 errorRange: 2, 129 imageFormat: "image/jpeg" 130 } 131 ]; 132 133 var g_count = 0; 134 var gl; 135 var canvas; 136 var premultipliedAlpha; 137 138 enableJSTestPreVerboseLogging(); 139 description("Test the WebGL premultipliedAlpha context creation flag."); 140 doNextTest(); 141 function doNextTest() { 142 if (g_count < tests.length) { 143 var test = tests[g_count++]; 144 canvas = document.createElement("canvas"); 145 // Need to preserve drawing buffer to load it in a callback 146 test.creationAttributes.preserveDrawingBuffer = true; 147 gl = wtu.create3DContext(canvas, test.creationAttributes); 148 var premultipliedAlpha = test.creationAttributes.premultipliedAlpha != false; 149 var antialias = test.creationAttributes.antialias == true; 150 debug("") 151 debug("testing: premultipliedAlpha: " + premultipliedAlpha 152 + ", antialias: " + antialias 153 + ", imageFormat: " + test.imageFormat); 154 155 if (!gl) { 156 testFailed("context does not exist"); 157 doNextTest(); 158 return; 159 } 160 161 shouldBe('gl.getContextAttributes().premultipliedAlpha', premultipliedAlpha.toString()); 162 shouldBeTrue('gl.getContextAttributes().preserveDrawingBuffer'); 163 164 wtu.log(gl.getContextAttributes()); 165 var program = wtu.setupTexturedQuad(gl); 166 167 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup."); 168 var tex = gl.createTexture(); 169 wtu.fillTexture(gl, tex, 2, 2, test.sentColor, 0); 170 var loc = gl.getUniformLocation(program, "tex"); 171 gl.uniform1i(loc, 0); 172 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 173 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 174 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 175 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 176 177 wtu.clearAndDrawUnitQuad(gl); 178 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from drawing."); 179 180 var loadTexture = function() { 181 debug("loadTexture called"); 182 var pngTex = gl.createTexture(); 183 // not needed as it's the default 184 // gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); 185 wtu.failIfGLError(gl, 'gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);'); 186 gl.bindTexture(gl.TEXTURE_2D, pngTex); 187 if (test.imageFormat) { 188 // create texture from image 189 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this); 190 } else { 191 // create texture from canvas 192 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas); 193 } 194 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 195 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 196 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 197 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 198 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from creating copy."); 199 wtu.clearAndDrawUnitQuad(gl); 200 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from 2nd drawing."); 201 wtu.checkCanvas( 202 gl, test.expectedColor, 203 "should draw with " + test.expectedColor, test.errorRange); 204 205 doNextTest(); 206 } 207 208 var loadTextureError = function() { 209 testFailed("Creating image from canvas failed. Image src: " + this.src); 210 finishTest(); 211 } 212 213 var shrinkString = function(string) { 214 if (string.length < 63) { 215 return string; 216 } 217 return string.substr(0, 30) + "..." + string.substr(string.length - 30); 218 } 219 220 if (test.imageFormat) { 221 // Load canvas into string using toDataURL 222 debug("Calling canvas.toDataURL('" + test.imageFormat + "')"); 223 var imageUrl = canvas.toDataURL(test.imageFormat); 224 debug("imageUrl = '" + shrinkString(imageUrl) + "'"); 225 if (test.imageFormat != "image/png" && 226 (imageUrl.indexOf("data:image/png,") == 0 || 227 imageUrl.indexOf("data:image/png;") == 0)) { 228 debug("Image format " + test.imageFormat + " not supported; skipping"); 229 setTimeout(doNextTest, 0); 230 } else { 231 // Load string into the texture 232 debug("Waiting for image.onload"); 233 var input = wtu.makeImage(imageUrl, loadTexture, loadTextureError); 234 } 235 } else { 236 // Load canvas into the texture asynchronously (to prevent unbounded stack consumption) 237 debug("Waiting for setTimeout"); 238 setTimeout(loadTexture, 0); 239 } 240 } else { 241 var successfullyParsed = true; 242 finishTest(); 243 } 244 } 245 246 </script> 247 248 </body> 249 </html>