| <!DOCTYPE html> |
| <html> |
| <header> |
| <script src='/resources/testharness.js'></script> |
| <script src='/resources/testharnessreport.js'></script> |
| </header> |
| <body> |
| <script> |
| let subtests = []; |
| for (let offscreen of [true, false]) { |
| for (let premultipliedAlpha of [true, false]) |
| subtests.push({context: "webgl", offscreen, premultipliedAlpha}); |
| subtests.push({context: "2d", offscreen}); |
| } |
| // In case of failure, run a single case with a variant of this: |
| // subtests = [{context:"webgl", offscreen: true, premultipliedAlpha: true}]; |
| |
| function makeCanvas(subtest) { |
| let canvas; |
| if (subtest.offscreen) |
| canvas = new OffscreenCanvas(32, 32); |
| else { |
| canvas = document.createElement("canvas"); |
| canvas.width = 32; |
| canvas.height = 32; |
| } |
| // Image: |
| // red | translucent green |
| // blue | transparent black |
| if (subtest.context == "2d") { |
| let ctx = canvas.getContext('2d'); |
| ctx.fillStyle = 'rgba(255, 0, 0, 1)'; |
| ctx.fillRect(0, 0, 16, 16); |
| ctx.fillStyle = 'rgba(0, 128, 0, 0.5)'; |
| ctx.fillRect(16, 0, 16, 16); |
| ctx.fillStyle = 'rgba(0, 0, 255, 1)'; |
| ctx.fillRect(0, 16, 16, 16); |
| } else { |
| let gl = canvas.getContext('webgl', {alpha: true, premultipliedAlpha: subtest.premultipliedAlpha}); |
| gl.viewport(0, 0, 32, 32); |
| gl.enable(gl.SCISSOR_TEST); |
| gl.scissor(0, 16, 16, 16); |
| gl.clearColor(1, 0, 0, 1); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| |
| let g = subtest.premultipliedAlpha ? 0.25 : 0.5; |
| gl.scissor(16, 16, 16, 16); |
| gl.clearColor(0, g, 0, 0.5); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| |
| gl.scissor(0, 0, 16, 16); |
| gl.clearColor(0, 0, 1, 1); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| } |
| return canvas; |
| } |
| |
| function drawMore(subtest, canvas) { |
| if (subtest.context == "2d") { |
| let ctx = canvas.getContext('2d'); |
| ctx.fillStyle = 'rgba(255, 0, 0, 255)'; |
| ctx.fillRect(0, 0, 32, 32); |
| return; |
| } |
| let gl = canvas.getContext('webgl'); |
| gl.scissor(0, 0, 32, 32); |
| gl.clearColor(1, 0, 0, 1); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| } |
| |
| function getPixel(ctx, x, y) { |
| let data = ctx.getImageData(x, y, 1, 1).data; |
| return data[0] * 2 ** 24 + data[1] * 2 ** 16 + data[2] * 2 ** 8 + data[3]; |
| } |
| |
| function verifyPicture(picture) { |
| let canvas = new OffscreenCanvas(32, 32, {alpha: true}); |
| let ctx = canvas.getContext('2d'); |
| ctx.drawImage(picture, 0, 0); |
| assert_equals(getPixel(ctx, 8, 8), 0xFF0000FF); |
| assert_equals(getPixel(ctx, 24, 8), 0x00800080); |
| assert_equals(getPixel(ctx, 8, 24), 0x0000FFFF); |
| assert_equals(getPixel(ctx, 24, 24), 0x00000000); |
| } |
| |
| for (let subtest of subtests) { |
| let contextDescription = ""; |
| if (subtest.context == "webgl") |
| contextDescription = ", premultipliedAlpha: " + subtest.premultipliedAlpha; |
| let description = `VideoFrame from canvas snapshots drawing at call time, context: ${subtest.context} offscreen: ${subtest.offscreen}${contextDescription}` |
| promise_test(async () => { |
| let src = makeCanvas(subtest); |
| let frame = new VideoFrame(src, {alpha: 'keep', timestamp: 0}); |
| //drawMore(subtest, src); |
| verifyPicture(frame); |
| verifyPicture(await createImageBitmap(frame)); |
| }, description); |
| } |
| |
| </script> |
| </body> |
| </html> |
