| <!-- |
| Copyright (c) 2021 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"> |
| <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"; |
| description("This test verifies correct channel mapping of different PNG image types."); |
| |
| const testData = { |
| "Grayscale": { |
| src: [ |
| // [0x40] |
| "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVQI12NwAAAAQgBBg7nsrQAAAABJRU5ErkJggg==", |
| // [0x4040] |
| "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABEAAAAABq7kcWAAAAC0lEQVQI12NwcAAAAMMAgUenLEIAAAAASUVORK5CYII=" |
| ], |
| expectations: [ |
| { color: [0x00, 0x00, 0x00, 0xFF], format: "ALPHA" }, |
| { color: [0x40, 0x40, 0x40, 0xFF], format: "RGB" }, |
| { color: [0x40, 0x40, 0x40, 0xFF], format: "RGBA" }, |
| { color: [0x40, 0x40, 0x40, 0xFF], format: "LUMINANCE" }, |
| { color: [0x40, 0x40, 0x40, 0xFF], format: "LUMINANCE_ALPHA" }, |
| { color: [0x40, 0x00, 0x00, 0xFF], format: "RED", internalformat: "R8" }, |
| { color: [0x40, 0x40, 0x00, 0xFF], format: "RG", internalformat: "RG8" } |
| ] |
| }, |
| "Grayscale Alpha": { |
| src: [ |
| // [0x40, 0x80] |
| "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NwaAAAAQMAwUxZTl4AAAAASUVORK5CYII=", |
| // [0x4040, 0x8080] |
| "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABEAQAAADljNBBAAAADUlEQVQI12NwcGhoAAADRQGBoxssPgAAAABJRU5ErkJggg==" |
| ], |
| expectations: [ |
| { color: [0x00, 0x00, 0x00, 0x80], format: "ALPHA" }, |
| { color: [0x40, 0x40, 0x40, 0xFF], format: "RGB" }, |
| { color: [0x40, 0x40, 0x40, 0x80], format: "RGBA" }, |
| { color: [0x40, 0x40, 0x40, 0xFF], format: "LUMINANCE" }, |
| { color: [0x40, 0x40, 0x40, 0x80], format: "LUMINANCE_ALPHA" }, |
| { color: [0x40, 0x00, 0x00, 0xFF], format: "RED", internalformat: "R8" }, |
| { color: [0x40, 0x40, 0x00, 0xFF], format: "RG", internalformat: "RG8" } |
| ] |
| }, |
| "Color": { |
| src: [ |
| // [0xBF, 0x7F, 0xFF] |
| "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12PYX/8fAAQ+Aj5BqwprAAAAAElFTkSuQmCC", |
| // [0xBFBF, 0x7F7F, 0xFFFF] |
| "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABEAIAAADA54+dAAAAD0lEQVQI12PYv7++/v9/AA6yBHvtbgBNAAAAAElFTkSuQmCC" |
| ], |
| expectations: [ |
| { color: [0x00, 0x00, 0x00, 0xFF], format: "ALPHA" }, |
| { color: [0xBF, 0x7F, 0xFF, 0xFF], format: "RGB" }, |
| { color: [0xBF, 0x7F, 0xFF, 0xFF], format: "RGBA" }, |
| { color: [0xBF, 0xBF, 0xBF, 0xFF], format: "LUMINANCE" }, |
| { color: [0xBF, 0xBF, 0xBF, 0xFF], format: "LUMINANCE_ALPHA" }, |
| { color: [0xBF, 0x00, 0x00, 0xFF], format: "RED", internalformat: "R8" }, |
| { color: [0xBF, 0x7F, 0x00, 0xFF], format: "RG", internalformat: "RG8" } |
| ] |
| |
| }, |
| "Color Alpha": { |
| src: [ |
| // [0xBF, 0x7F, 0xFF, 0x40] |
| "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQI12PYX//fAQAGvAJ+xPMwKQAAAABJRU5ErkJggg==", |
| // [0xBFBF, 0x7F7F, 0xFFFF, 0x4040] |
| "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABEAYAAABPhRjKAAAAEUlEQVQI12PYv7++/v9/BwcAGGgE+8YN4XUAAAAASUVORK5CYII=" |
| ], |
| expectations: [ |
| { color: [0x00, 0x00, 0x00, 0x40], format: "ALPHA" }, |
| { color: [0xBF, 0x7F, 0xFF, 0xFF], format: "RGB" }, |
| { color: [0xBF, 0x7F, 0xFF, 0x40], format: "RGBA" }, |
| { color: [0xBF, 0xBF, 0xBF, 0xFF], format: "LUMINANCE" }, |
| { color: [0xBF, 0xBF, 0xBF, 0x40], format: "LUMINANCE_ALPHA" }, |
| { color: [0xBF, 0x00, 0x00, 0xFF], format: "RED", internalformat: "R8" }, |
| { color: [0xBF, 0x7F, 0x00, 0xFF], format: "RG", internalformat: "RG8" } |
| ] |
| } |
| }; |
| |
| const wtu = WebGLTestUtils; |
| const gl = wtu.create3DContext(); |
| |
| wtu.setupTexturedQuad(gl); |
| gl.bindTexture(gl.TEXTURE_2D, gl.createTexture()); |
| |
| (async () => { |
| for (const [type, testCase] of Object.entries(testData)) { |
| if (testCase.src.length != 2) throw new Error('testCase.src.length != 2'); |
| let images = testCase.src.map(src => loadImage(src)); |
| images = await Promise.all(images); |
| debug(""); |
| debug(""); |
| debug(`PNG image type ${type} with RGBA values of ${testCase.expectations[2].color}`); |
| let formats = testCase.expectations; |
| if (!wtu.isWebGL2(gl)) { |
| formats = formats.filter((f) => !f.internalformat); |
| } |
| for (const f of formats) { |
| debug(""); |
| debug(`GL format: ${f.format}`); |
| |
| function check(data, description) { |
| debug(`Upload ${description}`); |
| gl.texImage2D( |
| gl.TEXTURE_2D, |
| 0, |
| gl[f.internalformat || f.format], |
| gl[f.format], |
| gl.UNSIGNED_BYTE, |
| data |
| ); |
| wtu.glErrorShouldBe(gl, gl.NO_ERROR); |
| wtu.clearAndDrawUnitQuad(gl); |
| wtu.checkCanvas(gl, f.color, undefined, 1); |
| } |
| |
| check(images[0].image, "8-bit PNG from Image"); |
| check(images[1].image, "16-bit PNG from Image"); |
| |
| if (images[0].bitmap) { |
| check(images[0].bitmap, "8-bit PNG from ImageBitmap"); |
| check(images[1].bitmap, "16-bit PNG from ImageBitmap"); |
| } |
| } |
| } |
| finishTest(); |
| })(); |
| |
| async function loadImage(src) { |
| const img = new Image(); |
| img.src = src; |
| await img.decode(); |
| const ret = { image: img }; |
| if (self.createImageBitmap) { |
| try { |
| ret.bitmap = await createImageBitmap(img, { |
| premultiplyAlpha: "none", |
| }); |
| } catch {} |
| } |
| return ret; |
| } |
| |
| var successfullyParsed = true; |
| </script> |
| </body> |
| |
| </html> |
