| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>WebGL Canvas to Context2D Canvas Flicker Test</title> |
| <link rel="stylesheet" href="resources/webgl_test_files/resources/js-test-style.css"/> |
| <script src="resources/webgl_test_files//js/js-test-pre.js"></script> |
| <script src="resources/webgl_test_files//js/webgl-test-utils.js"></script> |
| </head> |
| <body> |
| <div id="description"></div> |
| <div id="console"></div> |
| <script> |
| "use strict"; |
| description("Verifies that drawing a WebGL canvas to a 2D canvas captures the WebGL contents at draw time, even when the WebGL drawing buffer is mutated afterwards."); |
| |
| var wtu = WebGLTestUtils; |
| var canvas2d = document.createElement("canvas"); |
| canvas2d.width = 3000; |
| canvas2d.height = 3000; |
| var ctx2d = canvas2d.getContext("2d"); |
| var hadFailures = false; |
| var iterations = 20; |
| var expected = [0, 255, 0, 255]; |
| |
| function checkColumnIsGreen(label, i) { |
| var column = ctx2d.getImageData(0, 0, 1, canvas2d.height); |
| for (var y = 0; y < canvas2d.height; y++) { |
| var pixel = column.data.subarray(y * 4, y * 4 + 4); |
| if (!expected.every((v, i) => pixel[i] === v)) { |
| testFailed(`${label} iteration ${i}: row ${y} at x=0 was [${Array.from(pixel).join(', ')}], expected [${expected.join(', ')}]`); |
| hadFailures = true; |
| return; |
| } |
| } |
| } |
| |
| debug("HTMLCanvasElement WebGL drawn into 2D canvas via drawImage:"); |
| var canvasWebGL = document.createElement("canvas"); |
| canvasWebGL.width = canvas2d.width; |
| canvasWebGL.height = canvas2d.height; |
| var gl = canvasWebGL.getContext("webgl2", {antialias: false}); |
| for (let i = 0; i < iterations; i++) { |
| gl.clearColor(0, 1, 0, 1); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| ctx2d.clearRect(0, 0, canvas2d.width, canvas2d.height); |
| ctx2d.drawImage(canvasWebGL, 0, 0); |
| gl.clearColor(1, 0, 0, 1); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| gl.flush(); // Flush the above clear. It shouldn't appear in the 2d context. |
| checkColumnIsGreen("drawImage", i); |
| } |
| wtu.glErrorShouldBe(gl, gl.NO_ERROR); |
| if (!hadFailures) |
| testPassed("No failures HTMLCanvasElement"); |
| |
| hadFailures = false; |
| debug("OffscreenCanvas WebGL transferred to ImageBitmap, then drawn into 2D canvas:"); |
| var offscreenWebGL = new OffscreenCanvas(canvas2d.width, canvas2d.height); |
| gl = offscreenWebGL.getContext("webgl", {antialias: false}); |
| for (let i = 0; i < iterations; i++) { |
| gl.clearColor(0, 1, 0, 1); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| let bitmap = offscreenWebGL.transferToImageBitmap(); |
| gl.clearColor(1, 0, 0, 1); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| gl.flush(); // Flush the above clear. It shouldn't appear in the transferred ImageBitmap. |
| ctx2d.clearRect(0, 0, canvas2d.width, canvas2d.height); |
| ctx2d.drawImage(bitmap, 0, 0); |
| checkColumnIsGreen("transferToImageBitmap", i); |
| } |
| wtu.glErrorShouldBe(gl, gl.NO_ERROR); |
| if (!hadFailures) |
| testPassed("No failures OffscreenCanvas"); |
| debug(""); |
| finishTest(); |
| </script> |
| </body> |
| </html> |
