| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>texImage2D with ImageBitmap.</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> |
| <canvas id="example"></canvas> |
| <div id="description"></div> |
| <script> |
| function loadImage(url) { |
| return new Promise((resolve, reject) => { |
| var img = document.createElement('img'); |
| img.onload = () => resolve(img); |
| img.onerror = e => reject(e); |
| img.src = url; |
| }); |
| } |
| |
| function checkPixel(buf, width, x, y, color) { |
| var off = (y * width + x) * 4; |
| var msg = "pixel " + x + ", " + y + " should be " + |
| color[0] + ", " + |
| color[1] + ", " + |
| color[2] + ", " + |
| color[3] + " was " + |
| buf[off + 0] + ", " + |
| buf[off + 1] + ", " + |
| buf[off + 2] + ", " + |
| buf[off + 3]; |
| |
| for (var ii = 0; ii < 4; ++ii) { |
| if (buf[off + ii] != color[ii]) { |
| testFailed(msg); |
| return; |
| } |
| } |
| testPassed(msg); |
| } |
| |
| function checkPixelRange(buf, width, x, y, color, allowedRange) { |
| var off = (y * width + x) * 4; |
| var msg = "pixel " + x + ", " + y + " should be within " + |
| allowedRange + " units of " + |
| color[0] + ", " + |
| color[1] + ", " + |
| color[2] + ", " + |
| color[3]; |
| var subMsg = " was " + |
| buf[off + 0] + ", " + |
| buf[off + 1] + ", " + |
| buf[off + 2] + ", " + |
| buf[off + 3]; |
| // When running in WebKit's test harness, we don't want to print the |
| // pixel value when the test passes, because different machines might |
| // have different results and we record the text output. |
| var inDumpRenderTree = window.testRunner; |
| for (var ii = 0; ii < 4; ++ii) { |
| if (Math.abs(buf[off + ii] - color[ii]) > allowedRange) { |
| testFailed(msg + subMsg); |
| return; |
| } |
| } |
| testPassed(msg + (inDumpRenderTree ? "" : subMsg)); |
| } |
| |
| async function test() { |
| var wtu = WebGLTestUtils; |
| var canvas = document.getElementById("example"); |
| var gl = wtu.create3DContext(canvas); |
| var program = wtu.setupTexturedQuad(gl); |
| |
| glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup."); |
| |
| var img = await loadImage('resources/3x3.png'); |
| |
| var loc = gl.getUniformLocation(program, "tex"); |
| gl.uniform1i(loc, 0); |
| |
| gl.disable(gl.BLEND); |
| gl.disable(gl.DEPTH_TEST); |
| |
| var width = canvas.width; |
| var height = canvas.height; |
| |
| var tex = gl.createTexture(); |
| gl.bindTexture(gl.TEXTURE_2D, tex); |
| 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); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); |
| |
| var bitmap = await createImageBitmap(img); |
| |
| gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, |
| bitmap); |
| glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup"); |
| wtu.drawQuad(gl); |
| |
| var buf = new Uint8Array(width * height * 4); |
| gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf); |
| |
| var left = 0; |
| var middle = Math.floor(width / 2); |
| var right = width - 1; |
| var bottom = 0; |
| var center = Math.floor(height / 2); |
| var top = height - 1; |
| checkPixel(buf, width, left, top, [ 0, 0, 0, 255]); |
| checkPixel(buf, width, middle, top, [ 0, 0, 255, 255]); |
| checkPixel(buf, width, right, top, [255, 0, 0, 255]); |
| checkPixel(buf, width, left, center, [255, 0, 255, 255]); |
| checkPixel(buf, width, middle, center, [255, 0, 0, 255]); |
| checkPixel(buf, width, right, center, [ 0, 255, 0, 255]); |
| checkPixel(buf, width, left, bottom, [255, 0, 0, 255]); |
| checkPixel(buf, width, middle, bottom, [255, 255, 0, 255]); |
| checkPixel(buf, width, right, bottom, [255, 0, 0, 255]); |
| } |
| |
| window.testRunner.waitUntilDone(); |
| test().then(() => { |
| window.testRunner.notifyDone(); |
| }, e => { |
| testFailed(String(e)); |
| }); |
| </script> |
