diff options
Diffstat (limited to 'dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/png-image-types.html')
| -rw-r--r-- | dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/png-image-types.html | 164 |
1 files changed, 164 insertions, 0 deletions
diff --git a/dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/png-image-types.html b/dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/png-image-types.html new file mode 100644 index 0000000000..4eb98b1405 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/png-image-types.html @@ -0,0 +1,164 @@ +<!-- +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> |