content/canvas/test/webgl-conformance/conformance/context/premultiplyalpha-test.html@8bccb770b82d (annotated)
content/canvas/test/webgl-conformance/conformance/context/premultiplyalpha-test.html
Wed, 31 Dec 2014 13:27:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 13:27:57 +0100
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
- permissions
- -rw-r--r--
Ignore runtime configuration files generated during quality assurance.
| michael@0 | 1 | <!-- |
| michael@0 | 2 | Copyright (c) 2011 The Chromium Authors. All rights reserved. |
| michael@0 | 3 | Use of this source code is governed by a BSD-style license that can be |
| michael@0 | 4 | found in the LICENSE file. |
| michael@0 | 5 | --> |
| michael@0 | 6 | <!DOCTYPE html> |
| michael@0 | 7 | <html> |
| michael@0 | 8 | <head> |
| michael@0 | 9 | <meta charset="utf-8"> |
| michael@0 | 10 | <title>Test the WebGL premultipledAlpha context creation flag.</title> |
| michael@0 | 11 | <link rel="stylesheet" href="../../resources/js-test-style.css"/> |
| michael@0 | 12 | <script src="../../resources/js-test-pre.js"></script> |
| michael@0 | 13 | <script src="../resources/webgl-test.js"> </script> |
| michael@0 | 14 | <script src="../resources/webgl-test-utils.js"> </script> |
| michael@0 | 15 | </head> |
| michael@0 | 16 | <body> |
| michael@0 | 17 | <div id="description"></div><div id="console"></div> |
| michael@0 | 18 | <script> |
| michael@0 | 19 | var wtu = WebGLTestUtils; |
| michael@0 | 20 | |
| michael@0 | 21 | var tests = [ |
| michael@0 | 22 | // If premultipledAlpha is true then |
| michael@0 | 23 | // [texture] [canvas] [dataURL] |
| michael@0 | 24 | // 32, 64, 128, 128 -> 64, 128, 255, 128 -> 64, 128, 255, 128 |
| michael@0 | 25 | { creationAttributes: {}, |
| michael@0 | 26 | sentColor: [32, 64, 128, 128], |
| michael@0 | 27 | expectedColor: [64, 128, 255, 128], |
| michael@0 | 28 | errorRange: 2, |
| michael@0 | 29 | imageFormat: "image/png" |
| michael@0 | 30 | }, |
| michael@0 | 31 | // If premultipledAlpha is true then |
| michael@0 | 32 | // [texture] [canvas] [texture] |
| michael@0 | 33 | // 32, 64, 128, 128 -> 64, 128, 255, 128 -> 64, 128, 255, 128 |
| michael@0 | 34 | { creationAttributes: {}, |
| michael@0 | 35 | sentColor: [32, 64, 128, 128], |
| michael@0 | 36 | expectedColor: [64, 128, 255, 128], |
| michael@0 | 37 | errorRange: 2, |
| michael@0 | 38 | }, |
| michael@0 | 39 | // If premultipledAlpha is false then |
| michael@0 | 40 | // [texture] [canvas] [dataURL] |
| michael@0 | 41 | // 255, 192, 128, 1 -> 255, 192, 128, 1 -> 255, 192, 128, 1 |
| michael@0 | 42 | { creationAttributes: {premultipliedAlpha: false}, |
| michael@0 | 43 | sentColor: [255, 192, 128, 1], |
| michael@0 | 44 | expectedColor: [255, 192, 128, 1], |
| michael@0 | 45 | errorRange: 0, |
| michael@0 | 46 | imageFormat: "image/png" |
| michael@0 | 47 | }, |
| michael@0 | 48 | // If premultipledAlpha is false then |
| michael@0 | 49 | // [texture] [canvas] [texture] |
| michael@0 | 50 | // 255, 192, 128, 1 -> 255, 192, 128, 1 -> 255, 192, 128, 1 |
| michael@0 | 51 | { creationAttributes: {premultipliedAlpha: false}, |
| michael@0 | 52 | sentColor: [255, 192, 128, 1], |
| michael@0 | 53 | expectedColor: [255, 192, 128, 1], |
| michael@0 | 54 | errorRange: 0, |
| michael@0 | 55 | }, |
| michael@0 | 56 | // If premultipledAlpha is false then |
| michael@0 | 57 | // [texture] [canvas] [dataURL] |
| michael@0 | 58 | // 255, 255, 255, 128 -> 255, 255, 255, 128 -> 128, 128, 128, 255 |
| michael@0 | 59 | { creationAttributes: {premultipliedAlpha: false}, |
| michael@0 | 60 | sentColor: [255, 255, 255, 128], |
| michael@0 | 61 | expectedColor: [128, 128, 128, 255], |
| michael@0 | 62 | errorRange: 2, |
| michael@0 | 63 | imageFormat: "image/jpeg" |
| michael@0 | 64 | }, |
| michael@0 | 65 | // If premultipledAlpha is true then |
| michael@0 | 66 | // [texture] [canvas] [dataURL] |
| michael@0 | 67 | // 128, 128, 128, 128 -> 255, 255, 255, 128 -> 128, 128, 128, 255 |
| michael@0 | 68 | { creationAttributes: {}, |
| michael@0 | 69 | sentColor: [128, 128, 128, 128], |
| michael@0 | 70 | expectedColor: [128, 128, 128, 255], |
| michael@0 | 71 | errorRange: 2, |
| michael@0 | 72 | imageFormat: "image/jpeg" |
| michael@0 | 73 | } |
| michael@0 | 74 | ]; |
| michael@0 | 75 | |
| michael@0 | 76 | var g_count = 0; |
| michael@0 | 77 | var gl; |
| michael@0 | 78 | var canvas; |
| michael@0 | 79 | var premultipledAlpha; |
| michael@0 | 80 | |
| michael@0 | 81 | description("Test the WebGL premultipledAlpha context creation flag."); |
| michael@0 | 82 | doNextTest(); |
| michael@0 | 83 | function doNextTest() { |
| michael@0 | 84 | if (g_count < tests.length) { |
| michael@0 | 85 | var test = tests[g_count++]; |
| michael@0 | 86 | canvas = document.createElement("canvas"); |
| michael@0 | 87 | // Need to preserve drawing buffer to load it in a callback |
| michael@0 | 88 | test.creationAttributes.preserveDrawingBuffer = true; |
| michael@0 | 89 | gl = wtu.create3DContext(canvas, test.creationAttributes); |
| michael@0 | 90 | var premultipliedAlpha = test.creationAttributes.premultipliedAlpha != false; |
| michael@0 | 91 | debug("") |
| michael@0 | 92 | debug("testing: premultipliedAlpha: " + premultipliedAlpha + " imageFormat: " + test.imageFormat); |
| michael@0 | 93 | |
| michael@0 | 94 | shouldBe('gl.getContextAttributes().premultipledAlpha', 'premultipledAlpha'); |
| michael@0 | 95 | shouldBeTrue('gl.getContextAttributes().preserveDrawingBuffer'); |
| michael@0 | 96 | |
| michael@0 | 97 | console.log(gl.getContextAttributes()); |
| michael@0 | 98 | var program = wtu.setupTexturedQuad(gl); |
| michael@0 | 99 | |
| michael@0 | 100 | glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup."); |
| michael@0 | 101 | var tex = gl.createTexture(); |
| michael@0 | 102 | wtu.fillTexture(gl, tex, 2, 2, test.sentColor, 0); |
| michael@0 | 103 | var loc = gl.getUniformLocation(program, "tex"); |
| michael@0 | 104 | gl.uniform1i(loc, 0); |
| michael@0 | 105 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); |
| michael@0 | 106 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); |
| michael@0 | 107 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); |
| michael@0 | 108 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); |
| michael@0 | 109 | |
| michael@0 | 110 | wtu.drawQuad(gl); |
| michael@0 | 111 | glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from drawing."); |
| michael@0 | 112 | |
| michael@0 | 113 | function loadTexture() { |
| michael@0 | 114 | var pngTex = gl.createTexture(); |
| michael@0 | 115 | // not needed as it's the default |
| michael@0 | 116 | // gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); |
| michael@0 | 117 | gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, false); |
| michael@0 | 118 | gl.bindTexture(gl.TEXTURE_2D, pngTex); |
| michael@0 | 119 | if (test.imageFormat) { |
| michael@0 | 120 | // create texture from image |
| michael@0 | 121 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this); |
| michael@0 | 122 | } else { |
| michael@0 | 123 | // create texture from canvas |
| michael@0 | 124 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas); |
| michael@0 | 125 | } |
| michael@0 | 126 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); |
| michael@0 | 127 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); |
| michael@0 | 128 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); |
| michael@0 | 129 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); |
| michael@0 | 130 | glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from creating copy."); |
| michael@0 | 131 | wtu.drawQuad(gl); |
| michael@0 | 132 | glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from 2nd drawing."); |
| michael@0 | 133 | wtu.checkCanvas( |
| michael@0 | 134 | gl, test.expectedColor, |
| michael@0 | 135 | "should draw with " + test.expectedColor, test.errorRange); |
| michael@0 | 136 | |
| michael@0 | 137 | doNextTest(); |
| michael@0 | 138 | } |
| michael@0 | 139 | |
| michael@0 | 140 | if (test.imageFormat) { |
| michael@0 | 141 | // Load canvas into string using toDataURL |
| michael@0 | 142 | var imageUrl = canvas.toDataURL(test.imageFormat); |
| michael@0 | 143 | if (test.imageFormat != "image/png" && |
| michael@0 | 144 | (imageUrl.indexOf("data:image/png,") == 0 || |
| michael@0 | 145 | imageUrl.indexOf("data:image/png;") == 0)) { |
| michael@0 | 146 | debug("Image format " + test.imageFormat + " not supported; skipping"); |
| michael@0 | 147 | setTimeout(doNextTest, 0); |
| michael@0 | 148 | } else { |
| michael@0 | 149 | // Load string into the texture |
| michael@0 | 150 | var input = document.createElement("img"); |
| michael@0 | 151 | input.onload = loadTexture; |
| michael@0 | 152 | input.src = imageUrl; |
| michael@0 | 153 | } |
| michael@0 | 154 | } else { |
| michael@0 | 155 | // Load canvas into the texture asynchronously (to prevent unbounded stack consumption) |
| michael@0 | 156 | setTimeout(loadTexture, 0); |
| michael@0 | 157 | } |
| michael@0 | 158 | } else { |
| michael@0 | 159 | successfullyParsed = true; |
| michael@0 | 160 | finishTest(); |
| michael@0 | 161 | } |
| michael@0 | 162 | } |
| michael@0 | 163 | |
| michael@0 | 164 | </script> |
| michael@0 | 165 | |
| michael@0 | 166 | </body> |
| michael@0 | 167 | </html> |
| michael@0 | 168 | |
| michael@0 | 169 |
