| export const description = ` |
| copyToTexture with HTMLCanvasElement and OffscreenCanvas sources. |
| `; |
| |
| import { makeTestGroup } from '../../../common/framework/test_group.js'; |
| import { skipTestCase } from '../../../common/util/util.js'; |
| import { kCanvasAlphaModes } from '../../capability_info.js'; |
| import { |
| getBaseFormatForRegularTextureFormat, |
| isTextureFormatPossiblyUsableWithCopyExternalImageToTexture, |
| kRegularTextureFormats, |
| RegularTextureFormat, |
| } from '../../format_info.js'; |
| import { TextureUploadingUtils } from '../../util/copy_to_texture.js'; |
| import { CanvasType, kAllCanvasTypes, createCanvas } from '../../util/create_elements.js'; |
| import { TexelCompareOptions } from '../../util/texture/texture_ok.js'; |
| |
| class F extends TextureUploadingUtils { |
| init2DCanvasContentWithColorSpace({ |
| width, |
| height, |
| colorSpace, |
| }: { |
| width: number; |
| height: number; |
| colorSpace: 'srgb' | 'display-p3'; |
| }): { |
| canvas: HTMLCanvasElement | OffscreenCanvas; |
| expectedSourceData: Uint8ClampedArray; |
| } { |
| const canvas = createCanvas(this, 'onscreen', width, height); |
| |
| let canvasContext = null; |
| canvasContext = canvas.getContext('2d', { colorSpace }); |
| |
| if (canvasContext === null) { |
| this.skip('onscreen canvas 2d context not available'); |
| } |
| |
| if ( |
| typeof canvasContext.getContextAttributes === 'undefined' || |
| typeof canvasContext.getContextAttributes().colorSpace === 'undefined' |
| ) { |
| this.skip('color space attr is not supported for canvas 2d context'); |
| } |
| |
| const SOURCE_PIXEL_BYTES = 4; |
| const imagePixels = new Uint8ClampedArray(SOURCE_PIXEL_BYTES * width * height); |
| |
| const rectWidth = Math.floor(width / 2); |
| const rectHeight = Math.floor(height / 2); |
| |
| const alphaValue = 153; |
| |
| let pixelStartPos = 0; |
| // Red; |
| for (let i = 0; i < rectHeight; ++i) { |
| for (let j = 0; j < rectWidth; ++j) { |
| pixelStartPos = (i * width + j) * SOURCE_PIXEL_BYTES; |
| imagePixels[pixelStartPos] = 255; |
| imagePixels[pixelStartPos + 1] = 0; |
| imagePixels[pixelStartPos + 2] = 0; |
| imagePixels[pixelStartPos + 3] = alphaValue; |
| } |
| } |
| |
| // Lime; |
| for (let i = 0; i < rectHeight; ++i) { |
| for (let j = rectWidth; j < width; ++j) { |
| pixelStartPos = (i * width + j) * SOURCE_PIXEL_BYTES; |
| imagePixels[pixelStartPos] = 0; |
| imagePixels[pixelStartPos + 1] = 255; |
| imagePixels[pixelStartPos + 2] = 0; |
| imagePixels[pixelStartPos + 3] = alphaValue; |
| } |
| } |
| |
| // Blue |
| for (let i = rectHeight; i < height; ++i) { |
| for (let j = 0; j < rectWidth; ++j) { |
| pixelStartPos = (i * width + j) * SOURCE_PIXEL_BYTES; |
| imagePixels[pixelStartPos] = 0; |
| imagePixels[pixelStartPos + 1] = 0; |
| imagePixels[pixelStartPos + 2] = 255; |
| imagePixels[pixelStartPos + 3] = alphaValue; |
| } |
| } |
| |
| // Fuchsia |
| for (let i = rectHeight; i < height; ++i) { |
| for (let j = rectWidth; j < width; ++j) { |
| pixelStartPos = (i * width + j) * SOURCE_PIXEL_BYTES; |
| imagePixels[pixelStartPos] = 255; |
| imagePixels[pixelStartPos + 1] = 0; |
| imagePixels[pixelStartPos + 2] = 255; |
| imagePixels[pixelStartPos + 3] = alphaValue; |
| } |
| } |
| |
| const imageData = new ImageData(imagePixels, width, height, { colorSpace }); |
| if (typeof imageData.colorSpace === 'undefined') { |
| this.skip('color space attr is not supported for ImageData'); |
| } |
| |
| const ctx = canvasContext as CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D; |
| ctx.putImageData(imageData, 0, 0); |
| |
| return { |
| canvas, |
| expectedSourceData: this.getExpectedReadbackFor2DCanvas(canvasContext, width, height), |
| }; |
| } |
| |
| // MAINTENANCE_TODO: Cache the generated canvas to avoid duplicated initialization. |
| init2DCanvasContent({ |
| canvasType, |
| width, |
| height, |
| }: { |
| canvasType: CanvasType; |
| width: number; |
| height: number; |
| }): { |
| canvas: HTMLCanvasElement | OffscreenCanvas; |
| expectedSourceData: Uint8ClampedArray; |
| } { |
| const canvas = createCanvas(this, canvasType, width, height); |
| |
| let canvasContext = null; |
| canvasContext = canvas.getContext('2d') as CanvasRenderingContext2D; |
| |
| if (canvasContext === null) { |
| this.skip(canvasType + ' canvas 2d context not available'); |
| } |
| |
| const ctx = canvasContext; |
| this.paint2DCanvas(ctx, width, height, 0.6); |
| |
| return { |
| canvas, |
| expectedSourceData: this.getExpectedReadbackFor2DCanvas(canvasContext, width, height), |
| }; |
| } |
| |
| private paint2DCanvas( |
| ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, |
| width: number, |
| height: number, |
| alphaValue: number |
| ) { |
| const rectWidth = Math.floor(width / 2); |
| const rectHeight = Math.floor(height / 2); |
| |
| // Red |
| ctx.fillStyle = `rgba(255, 0, 0, ${alphaValue})`; |
| ctx.fillRect(0, 0, rectWidth, rectHeight); |
| // Lime |
| ctx.fillStyle = `rgba(0, 255, 0, ${alphaValue})`; |
| ctx.fillRect(rectWidth, 0, width - rectWidth, rectHeight); |
| // Blue |
| ctx.fillStyle = `rgba(0, 0, 255, ${alphaValue})`; |
| ctx.fillRect(0, rectHeight, rectWidth, height - rectHeight); |
| // Fuchsia |
| ctx.fillStyle = `rgba(255, 0, 255, ${alphaValue})`; |
| ctx.fillRect(rectWidth, rectHeight, width - rectWidth, height - rectHeight); |
| } |
| |
| // MAINTENANCE_TODO: Cache the generated canvas to avoid duplicated initialization. |
| initGLCanvasContent({ |
| canvasType, |
| contextName, |
| width, |
| height, |
| premultiplied, |
| }: { |
| canvasType: CanvasType; |
| contextName: 'webgl' | 'webgl2'; |
| width: number; |
| height: number; |
| premultiplied: boolean; |
| }): { |
| canvas: HTMLCanvasElement | OffscreenCanvas; |
| expectedSourceData: Uint8ClampedArray; |
| } { |
| const canvas = createCanvas(this, canvasType, width, height); |
| |
| // MAINTENANCE_TODO: Workaround for @types/offscreencanvas missing an overload of |
| // `OffscreenCanvas.getContext` that takes `string` or a union of context types. |
| const gl = (canvas as HTMLCanvasElement).getContext(contextName, { |
| premultipliedAlpha: premultiplied, |
| }) as WebGLRenderingContext | WebGL2RenderingContext | null; |
| |
| if (gl === null) { |
| this.skip(canvasType + ' canvas ' + contextName + ' context not available'); |
| } |
| this.trackForCleanup(gl); |
| |
| const rectWidth = Math.floor(width / 2); |
| const rectHeight = Math.floor(height / 2); |
| |
| const alphaValue = 0.6; |
| const colorValue = premultiplied ? alphaValue : 1.0; |
| |
| // For webgl/webgl2 context canvas, if the context created with premultipliedAlpha attributes, |
| // it means that the value in drawing buffer is premultiplied or not. So we should set |
| // premultipliedAlpha value for premultipliedAlpha true gl context and unpremultipliedAlpha value |
| // for the premultipliedAlpha false gl context. |
| gl.enable(gl.SCISSOR_TEST); |
| gl.scissor(0, 0, rectWidth, rectHeight); |
| gl.clearColor(colorValue, 0.0, 0.0, alphaValue); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| |
| gl.scissor(rectWidth, 0, width - rectWidth, rectHeight); |
| gl.clearColor(0.0, colorValue, 0.0, alphaValue); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| |
| gl.scissor(0, rectHeight, rectWidth, height - rectHeight); |
| gl.clearColor(0.0, 0.0, colorValue, alphaValue); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| |
| gl.scissor(rectWidth, rectHeight, width - rectWidth, height - rectHeight); |
| gl.clearColor(colorValue, colorValue, colorValue, alphaValue); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| |
| return { |
| canvas, |
| expectedSourceData: this.getExpectedReadbackForWebGLCanvas(gl, width, height), |
| }; |
| } |
| |
| private getDataToInitSourceWebGPUCanvas( |
| width: number, |
| height: number, |
| alphaMode: GPUCanvasAlphaMode |
| ): Uint8ClampedArray { |
| const rectWidth = Math.floor(width / 2); |
| const rectHeight = Math.floor(height / 2); |
| |
| const alphaValue = 153; |
| // Always output [153, 153, 153, 153]. When the alphaMode is... |
| // - premultiplied: the readback is CSS `rgba(255, 255, 255, 60%)`. |
| // - opaque: the readback is CSS `rgba(153, 153, 153, 100%)`. |
| // getExpectedReadbackForWebGPUCanvas matches this. |
| const colorValue = alphaValue; |
| |
| // BGRA8Unorm texture |
| const initialData = new Uint8ClampedArray(4 * width * height); |
| const maxRectHeightIndex = width * rectHeight; |
| for (let pixelIndex = 0; pixelIndex < initialData.length / 4; ++pixelIndex) { |
| const index = pixelIndex * 4; |
| |
| // Top-half two rectangles |
| if (pixelIndex < maxRectHeightIndex) { |
| // top-left side rectangle |
| if (pixelIndex % width < rectWidth) { |
| // top-left side rectangle |
| initialData[index] = colorValue; |
| initialData[index + 1] = 0; |
| initialData[index + 2] = 0; |
| initialData[index + 3] = alphaValue; |
| } else { |
| // top-right side rectangle |
| initialData[index] = 0; |
| initialData[index + 1] = colorValue; |
| initialData[index + 2] = 0; |
| initialData[index + 3] = alphaValue; |
| } |
| } else { |
| // Bottom-half two rectangles |
| // bottom-left side rectangle |
| if (pixelIndex % width < rectWidth) { |
| initialData[index] = 0; |
| initialData[index + 1] = 0; |
| initialData[index + 2] = colorValue; |
| initialData[index + 3] = alphaValue; |
| } else { |
| // bottom-right side rectangle |
| initialData[index] = colorValue; |
| initialData[index + 1] = colorValue; |
| initialData[index + 2] = colorValue; |
| initialData[index + 3] = alphaValue; |
| } |
| } |
| } |
| return initialData; |
| } |
| |
| initSourceWebGPUCanvas({ |
| device, |
| canvasType, |
| width, |
| height, |
| alphaMode, |
| }: { |
| device: GPUDevice; |
| canvasType: CanvasType; |
| width: number; |
| height: number; |
| alphaMode: GPUCanvasAlphaMode; |
| }): { |
| canvas: HTMLCanvasElement | OffscreenCanvas; |
| expectedSourceData: Uint8ClampedArray; |
| } { |
| const canvas = createCanvas(this, canvasType, width, height); |
| |
| const gpuContext = canvas.getContext('webgpu'); |
| |
| if (!(gpuContext instanceof GPUCanvasContext)) { |
| this.skip(canvasType + ' canvas webgpu context not available'); |
| } |
| |
| gpuContext.configure({ |
| device, |
| format: 'bgra8unorm', |
| usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC, |
| alphaMode, |
| }); |
| |
| // BGRA8Unorm texture |
| const initialData = this.getDataToInitSourceWebGPUCanvas(width, height, alphaMode); |
| const canvasTexture = gpuContext.getCurrentTexture(); |
| device.queue.writeTexture( |
| { texture: canvasTexture }, |
| initialData, |
| { |
| bytesPerRow: width * 4, |
| rowsPerImage: height, |
| }, |
| { |
| width, |
| height, |
| depthOrArrayLayers: 1, |
| } |
| ); |
| |
| return { |
| canvas, |
| expectedSourceData: this.getExpectedReadbackForWebGPUCanvas(width, height, alphaMode), |
| }; |
| } |
| |
| private getExpectedReadbackFor2DCanvas( |
| context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, |
| width: number, |
| height: number |
| ): Uint8ClampedArray { |
| // Always read back the raw data from canvas |
| return context.getImageData(0, 0, width, height).data; |
| } |
| |
| private getExpectedReadbackForWebGLCanvas( |
| gl: WebGLRenderingContext | WebGL2RenderingContext, |
| width: number, |
| height: number |
| ): Uint8ClampedArray { |
| const bytesPerPixel = 4; |
| |
| const sourcePixels = new Uint8ClampedArray(width * height * bytesPerPixel); |
| gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, sourcePixels); |
| |
| return this.doFlipY(sourcePixels, width, height, bytesPerPixel); |
| } |
| |
| private getExpectedReadbackForWebGPUCanvas( |
| width: number, |
| height: number, |
| alphaMode: GPUCanvasAlphaMode |
| ): Uint8ClampedArray { |
| const bytesPerPixel = 4; |
| |
| const rgbaPixels = this.getDataToInitSourceWebGPUCanvas(width, height, alphaMode); |
| |
| // The source canvas has bgra8unorm back resource. We |
| // swizzle the channels to align with 2d/webgl canvas and |
| // clear alpha to 255 (1.0) when context alphaMode |
| // is set to opaque (follow webgpu spec). |
| for (let i = 0; i < height; ++i) { |
| for (let j = 0; j < width; ++j) { |
| const pixelPos = i * width + j; |
| const r = rgbaPixels[pixelPos * bytesPerPixel + 2]; |
| if (alphaMode === 'opaque') { |
| rgbaPixels[pixelPos * bytesPerPixel + 3] = 255; |
| } |
| |
| rgbaPixels[pixelPos * bytesPerPixel + 2] = rgbaPixels[pixelPos * bytesPerPixel]; |
| rgbaPixels[pixelPos * bytesPerPixel] = r; |
| } |
| } |
| |
| return rgbaPixels; |
| } |
| |
| doCopyContentsTest( |
| source: HTMLCanvasElement | OffscreenCanvas, |
| expectedSourceImage: Uint8ClampedArray, |
| p: { |
| width: number; |
| height: number; |
| dstColorFormat: RegularTextureFormat; |
| srcDoFlipYDuringCopy: boolean; |
| srcPremultiplied: boolean; |
| dstPremultiplied: boolean; |
| } |
| ) { |
| const dst = this.createTextureTracked({ |
| size: { |
| width: p.width, |
| height: p.height, |
| depthOrArrayLayers: 1, |
| }, |
| format: p.dstColorFormat, |
| usage: |
| GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT, |
| }); |
| |
| // Construct expected value for different dst color format |
| const baseFormat = getBaseFormatForRegularTextureFormat(p.dstColorFormat); |
| const expFormat = baseFormat ?? p.dstColorFormat; |
| |
| // For 2d canvas, get expected pixels with getImageData(), which returns unpremultiplied |
| // values. |
| const expectedDestinationImage = this.getExpectedDstPixelsFromSrcPixels({ |
| srcPixels: expectedSourceImage, |
| srcOrigin: [0, 0], |
| srcSize: [p.width, p.height], |
| dstOrigin: [0, 0], |
| dstSize: [p.width, p.height], |
| subRectSize: [p.width, p.height], |
| format: expFormat, |
| flipSrcBeforeCopy: false, |
| srcDoFlipYDuringCopy: p.srcDoFlipYDuringCopy, |
| conversion: { |
| srcPremultiplied: p.srcPremultiplied, |
| dstPremultiplied: p.dstPremultiplied, |
| }, |
| }); |
| |
| this.doTestAndCheckResult( |
| { source, origin: { x: 0, y: 0 }, flipY: p.srcDoFlipYDuringCopy }, |
| { |
| texture: dst, |
| origin: { x: 0, y: 0 }, |
| colorSpace: 'srgb', |
| premultipliedAlpha: p.dstPremultiplied, |
| }, |
| expectedDestinationImage, |
| { width: p.width, height: p.height, depthOrArrayLayers: 1 }, |
| // 1.0 and 0.6 are representable precisely by all formats except rgb10a2unorm, but |
| // allow diffs of 1ULP since that's the generally-appropriate threshold. |
| { maxDiffULPsForNormFormat: 1, maxDiffULPsForFloatFormat: 1 } |
| ); |
| } |
| } |
| |
| export const g = makeTestGroup(F); |
| |
| g.test('copy_contents_from_2d_context_canvas') |
| .desc( |
| ` |
| Test HTMLCanvasElement and OffscreenCanvas with 2d context |
| can be copied to WebGPU texture correctly. |
| |
| It creates HTMLCanvasElement/OffscreenCanvas with '2d'. |
| Use fillRect(2d context) to render red rect for top-left, |
| green rect for top-right, blue rect for bottom-left and white for bottom-right. |
| |
| Then call copyExternalImageToTexture() to do a full copy to the 0 mipLevel |
| of dst texture, and read the contents out to compare with the canvas contents. |
| |
| Provide premultiplied input if 'premultipliedAlpha' in 'GPUCopyExternalImageDestInfo' |
| is set to 'true' and unpremultiplied input if it is set to 'false'. |
| |
| If 'flipY' in 'GPUCopyExternalImageSourceInfo' is set to 'true', copy will ensure the result |
| is flipped. |
| |
| The tests covers: |
| - Valid canvas type |
| - Valid 2d context type |
| - Valid dstColorFormat of copyExternalImageToTexture() |
| - Valid dest alphaMode |
| - Valid 'flipY' config in 'GPUCopyExternalImageSourceInfo' (named 'srcDoFlipYDuringCopy' in cases) |
| - TODO(#913): color space tests need to be added |
| |
| And the expected results are all passed. |
| ` |
| ) |
| .params(u => |
| u |
| .combine('canvasType', kAllCanvasTypes) |
| .combine('dstColorFormat', kRegularTextureFormats) |
| .filter(t => isTextureFormatPossiblyUsableWithCopyExternalImageToTexture(t.dstColorFormat)) |
| .combine('dstAlphaMode', kCanvasAlphaModes) |
| .combine('srcDoFlipYDuringCopy', [true, false]) |
| .beginSubcases() |
| .combine('width', [1, 2, 4, 15]) |
| .combine('height', [1, 2, 4, 15]) |
| ) |
| .fn(t => { |
| const { width, height, canvasType, dstAlphaMode, dstColorFormat } = t.params; |
| t.skipIfTextureFormatNotSupported(dstColorFormat); |
| t.skipIfTextureFormatPossiblyNotUsableWithCopyExternalImageToTexture(dstColorFormat); |
| |
| const { canvas, expectedSourceData } = t.init2DCanvasContent({ |
| canvasType, |
| width, |
| height, |
| }); |
| |
| t.doCopyContentsTest(canvas, expectedSourceData, { |
| srcPremultiplied: false, |
| dstPremultiplied: dstAlphaMode === 'premultiplied', |
| ...t.params, |
| }); |
| }); |
| |
| g.test('copy_contents_from_gl_context_canvas') |
| .desc( |
| ` |
| Test HTMLCanvasElement and OffscreenCanvas with webgl/webgl2 context |
| can be copied to WebGPU texture correctly. |
| |
| It creates HTMLCanvasElement/OffscreenCanvas with webgl'/'webgl2'. |
| Use scissor + clear to render red rect for top-left, green rect |
| for top-right, blue rect for bottom-left and white for bottom-right. |
| And do premultiply alpha in advance if the webgl/webgl2 context is created |
| with premultipliedAlpha : true. |
| |
| Then call copyExternalImageToTexture() to do a full copy to the 0 mipLevel |
| of dst texture, and read the contents out to compare with the canvas contents. |
| |
| Provide premultiplied input if 'premultipliedAlpha' in 'GPUCopyExternalImageDestInfo' |
| is set to 'true' and unpremultiplied input if it is set to 'false'. |
| |
| If 'flipY' in 'GPUCopyExternalImageSourceInfo' is set to 'true', copy will ensure the result |
| is flipped. |
| |
| The tests covers: |
| - Valid canvas type |
| - Valid webgl/webgl2 context type |
| - Valid dstColorFormat of copyExternalImageToTexture() |
| - Valid source image alphaMode |
| - Valid dest alphaMode |
| - Valid 'flipY' config in 'GPUCopyExternalImageSourceInfo'(named 'srcDoFlipYDuringCopy' in cases) |
| - TODO: color space tests need to be added |
| |
| And the expected results are all passed. |
| ` |
| ) |
| .params(u => |
| u |
| .combine('canvasType', kAllCanvasTypes) |
| .combine('contextName', ['webgl', 'webgl2'] as const) |
| .combine('dstColorFormat', kRegularTextureFormats) |
| .filter(t => isTextureFormatPossiblyUsableWithCopyExternalImageToTexture(t.dstColorFormat)) |
| .combine('srcPremultiplied', [true, false]) |
| .combine('dstAlphaMode', kCanvasAlphaModes) |
| .combine('srcDoFlipYDuringCopy', [true, false]) |
| .beginSubcases() |
| .combine('width', [1, 2, 4, 15]) |
| .combine('height', [1, 2, 4, 15]) |
| ) |
| .fn(t => { |
| const { |
| width, |
| height, |
| canvasType, |
| contextName, |
| srcPremultiplied, |
| dstAlphaMode, |
| dstColorFormat, |
| } = t.params; |
| t.skipIfTextureFormatNotSupported(dstColorFormat); |
| t.skipIfTextureFormatPossiblyNotUsableWithCopyExternalImageToTexture(dstColorFormat); |
| |
| const { canvas, expectedSourceData } = t.initGLCanvasContent({ |
| canvasType, |
| contextName, |
| width, |
| height, |
| premultiplied: srcPremultiplied, |
| }); |
| |
| t.doCopyContentsTest(canvas, expectedSourceData, { |
| dstPremultiplied: dstAlphaMode === 'premultiplied', |
| ...t.params, |
| }); |
| }); |
| |
| g.test('copy_contents_from_gpu_context_canvas') |
| .desc( |
| ` |
| Test HTMLCanvasElement and OffscreenCanvas with webgpu context |
| can be copied to WebGPU texture correctly. |
| |
| It creates HTMLCanvasElement/OffscreenCanvas with 'webgpu'. |
| Use writeTexture to copy pixels to back buffer. The results are: |
| red rect for top-left, green rect for top-right, blue rect for bottom-left |
| and white for bottom-right. |
| |
| TODO: Actually test alphaMode = opaque. |
| And do premultiply alpha in advance if the webgpu context is created |
| with alphaMode="premultiplied". |
| |
| Then call copyExternalImageToTexture() to do a full copy to the 0 mipLevel |
| of dst texture, and read the contents out to compare with the canvas contents. |
| |
| Provide premultiplied input if 'premultipliedAlpha' in 'GPUCopyExternalImageDestInfo' |
| is set to 'true' and unpremultiplied input if it is set to 'false'. |
| |
| If 'flipY' in 'GPUCopyExternalImageSourceInfo' is set to 'true', copy will ensure the result |
| is flipped. |
| |
| The tests covers: |
| - Valid canvas type |
| - Source WebGPU Canvas lives in the same GPUDevice or different GPUDevice as test |
| - Valid dstColorFormat of copyExternalImageToTexture() |
| - TODO: test more source image alphaMode |
| - Valid dest alphaMode |
| - Valid 'flipY' config in 'GPUCopyExternalImageSourceInfo'(named 'srcDoFlipYDuringCopy' in cases) |
| - TODO: color space tests need to be added |
| |
| And the expected results are all passed. |
| ` |
| ) |
| .params(u => |
| u |
| .combine('canvasType', kAllCanvasTypes) |
| .combine('srcAndDstInSameGPUDevice', [true, false]) |
| .combine('dstColorFormat', kRegularTextureFormats) |
| .filter(t => isTextureFormatPossiblyUsableWithCopyExternalImageToTexture(t.dstColorFormat)) |
| // .combine('srcAlphaMode', kCanvasAlphaModes) |
| .combine('srcAlphaMode', ['premultiplied'] as const) |
| .combine('dstAlphaMode', kCanvasAlphaModes) |
| .combine('srcDoFlipYDuringCopy', [true, false]) |
| .beginSubcases() |
| .combine('width', [1, 2, 4, 15]) |
| .combine('height', [1, 2, 4, 15]) |
| ) |
| .beforeAllSubcases(t => { |
| t.usesMismatchedDevice(); |
| }) |
| .fn(t => { |
| const { |
| width, |
| height, |
| canvasType, |
| srcAndDstInSameGPUDevice, |
| srcAlphaMode, |
| dstAlphaMode, |
| dstColorFormat, |
| } = t.params; |
| t.skipIfTextureFormatNotSupported(dstColorFormat); |
| t.skipIfTextureFormatPossiblyNotUsableWithCopyExternalImageToTexture(dstColorFormat); |
| |
| const device = srcAndDstInSameGPUDevice ? t.device : t.mismatchedDevice; |
| const { canvas: source, expectedSourceData } = t.initSourceWebGPUCanvas({ |
| device, |
| canvasType, |
| width, |
| height, |
| alphaMode: srcAlphaMode, |
| }); |
| |
| t.doCopyContentsTest(source, expectedSourceData, { |
| srcPremultiplied: srcAlphaMode === 'premultiplied', |
| dstPremultiplied: dstAlphaMode === 'premultiplied', |
| ...t.params, |
| }); |
| }); |
| |
| g.test('copy_contents_from_bitmaprenderer_context_canvas') |
| .desc( |
| ` |
| Test HTMLCanvasElement and OffscreenCanvas with ImageBitmapRenderingContext |
| can be copied to WebGPU texture correctly. |
| |
| It creates HTMLCanvasElement/OffscreenCanvas with 'bitmaprenderer'. |
| First, use fillRect(2d context) to render red rect for top-left, |
| green rect for top-right, blue rect for bottom-left and white for bottom-right on a |
| 2d context canvas and create imageBitmap with that canvas. Use transferFromImageBitmap() |
| to render the imageBitmap to source canvas. |
| |
| Then call copyExternalImageToTexture() to do a full copy to the 0 mipLevel |
| of dst texture, and read the contents out to compare with the canvas contents. |
| |
| Provide premultiplied input if 'premultipliedAlpha' in 'GPUCopyExternalImageDestInfo' |
| is set to 'true' and unpremultiplied input if it is set to 'false'. |
| |
| If 'flipY' in 'GPUCopyExternalImageSourceInfo' is set to 'true', copy will ensure the result |
| is flipped. |
| |
| The tests covers: |
| - Valid canvas type |
| - Valid ImageBitmapRendering context type |
| - Valid dstColorFormat of copyExternalImageToTexture() |
| - Valid dest alphaMode |
| - Valid 'flipY' config in 'GPUCopyExternalImageSourceInfo' (named 'srcDoFlipYDuringCopy' in cases) |
| - TODO(#913): color space tests need to be added |
| |
| And the expected results are all passed. |
| ` |
| ) |
| .params(u => |
| u |
| .combine('canvasType', kAllCanvasTypes) |
| .combine('dstColorFormat', kRegularTextureFormats) |
| .filter(t => isTextureFormatPossiblyUsableWithCopyExternalImageToTexture(t.dstColorFormat)) |
| .combine('dstAlphaMode', kCanvasAlphaModes) |
| .combine('srcDoFlipYDuringCopy', [true, false]) |
| .beginSubcases() |
| .combine('width', [1, 2, 4, 15]) |
| .combine('height', [1, 2, 4, 15]) |
| ) |
| .fn(async t => { |
| const { width, height, canvasType, dstAlphaMode, dstColorFormat } = t.params; |
| t.skipIfTextureFormatNotSupported(dstColorFormat); |
| t.skipIfTextureFormatPossiblyNotUsableWithCopyExternalImageToTexture(dstColorFormat); |
| |
| const canvas = createCanvas(t, canvasType, width, height); |
| |
| const imageBitmapRenderingContext = canvas.getContext('bitmaprenderer'); |
| |
| if (!(imageBitmapRenderingContext instanceof ImageBitmapRenderingContext)) { |
| skipTestCase(canvasType + ' canvas imageBitmap rendering context not available'); |
| } |
| |
| const { canvas: sourceContentCanvas, expectedSourceData } = t.init2DCanvasContent({ |
| canvasType, |
| width, |
| height, |
| }); |
| |
| const imageBitmap = await createImageBitmap(sourceContentCanvas, { premultiplyAlpha: 'none' }); |
| imageBitmapRenderingContext.transferFromImageBitmap(imageBitmap); |
| |
| t.doCopyContentsTest(canvas, expectedSourceData, { |
| srcPremultiplied: false, |
| dstPremultiplied: dstAlphaMode === 'premultiplied', |
| ...t.params, |
| }); |
| }); |
| |
| g.test('color_space_conversion') |
| .desc( |
| ` |
| Test HTMLCanvasElement with 2d context can created with 'colorSpace' attribute. |
| Using CopyExternalImageToTexture to copy from such type of canvas needs |
| to do color space converting correctly. |
| |
| It creates HTMLCanvasElement/OffscreenCanvas with '2d' and 'colorSpace' attributes. |
| Use fillRect(2d context) to render red rect for top-left, |
| green rect for top-right, blue rect for bottom-left and white for bottom-right. |
| |
| Then call copyExternalImageToTexture() to do a full copy to the 0 mipLevel |
| of dst texture, and read the contents out to compare with the canvas contents. |
| |
| Provide premultiplied input if 'premultipliedAlpha' in 'GPUCopyExternalImageDestInfo' |
| is set to 'true' and unpremultiplied input if it is set to 'false'. |
| |
| If 'flipY' in 'GPUCopyExternalImageSourceInfo' is set to 'true', copy will ensure the result |
| is flipped. |
| |
| If color space from source input and user defined dstTexture color space are different, the |
| result must convert the content to user defined color space |
| |
| The tests covers: |
| - Valid dstColorFormat of copyExternalImageToTexture() |
| - Valid dest alphaMode |
| - Valid 'flipY' config in 'GPUCopyExternalImageSourceInfo' (named 'srcDoFlipYDuringCopy' in cases) |
| - Valid 'colorSpace' config in 'dstColorSpace' |
| |
| And the expected results are all passed. |
| |
| TODO: Enhance test data with colors that aren't always opaque and fully saturated. |
| TODO: Consider refactoring src data setup with TexelView.writeTextureData. |
| ` |
| ) |
| .params(u => |
| u |
| .combine('srcColorSpace', ['srgb', 'display-p3'] as const) |
| .combine('dstColorSpace', ['srgb', 'display-p3'] as const) |
| .combine('dstColorFormat', kRegularTextureFormats) |
| .filter(t => isTextureFormatPossiblyUsableWithCopyExternalImageToTexture(t.dstColorFormat)) |
| .combine('dstPremultiplied', [true, false]) |
| .combine('srcDoFlipYDuringCopy', [true, false]) |
| .beginSubcases() |
| .combine('width', [1, 2, 4, 15, 255, 256]) |
| .combine('height', [1, 2, 4, 15, 255, 256]) |
| ) |
| .fn(t => { |
| const { |
| width, |
| height, |
| srcColorSpace, |
| dstColorSpace, |
| dstColorFormat, |
| dstPremultiplied, |
| srcDoFlipYDuringCopy, |
| } = t.params; |
| t.skipIfTextureFormatNotSupported(dstColorFormat); |
| t.skipIfTextureFormatPossiblyNotUsableWithCopyExternalImageToTexture(dstColorFormat); |
| const { canvas, expectedSourceData } = t.init2DCanvasContentWithColorSpace({ |
| width, |
| height, |
| colorSpace: srcColorSpace, |
| }); |
| |
| const dst = t.createTextureTracked({ |
| size: { width, height }, |
| format: dstColorFormat, |
| usage: |
| GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT, |
| }); |
| |
| const expectedDestinationImage = t.getExpectedDstPixelsFromSrcPixels({ |
| srcPixels: expectedSourceData, |
| srcOrigin: [0, 0], |
| srcSize: [width, height], |
| dstOrigin: [0, 0], |
| dstSize: [width, height], |
| subRectSize: [width, height], |
| // copyExternalImageToTexture does not perform gamma-encoding into `-srgb` formats. |
| format: getBaseFormatForRegularTextureFormat(dstColorFormat) ?? dstColorFormat, |
| flipSrcBeforeCopy: false, |
| srcDoFlipYDuringCopy, |
| conversion: { |
| srcPremultiplied: false, |
| dstPremultiplied, |
| srcColorSpace, |
| dstColorSpace, |
| }, |
| }); |
| |
| const texelCompareOptions: TexelCompareOptions = { |
| maxFractionalDiff: 0, |
| maxDiffULPsForNormFormat: 1, |
| }; |
| if (srcColorSpace !== dstColorSpace) { |
| if (dstColorFormat.endsWith('32float')) { |
| texelCompareOptions.maxFractionalDiff = 0.0003; |
| } else if (dstColorFormat.endsWith('16float')) { |
| texelCompareOptions.maxFractionalDiff = 0.0007; |
| } else if (dstColorFormat === 'rg11b10ufloat') { |
| texelCompareOptions.maxFractionalDiff = 0.015; |
| } else { |
| texelCompareOptions.maxFractionalDiff = 0.001; |
| } |
| } else { |
| texelCompareOptions.maxDiffULPsForFloatFormat = 1; |
| } |
| |
| t.doTestAndCheckResult( |
| { source: canvas, origin: { x: 0, y: 0 }, flipY: srcDoFlipYDuringCopy }, |
| { |
| texture: dst, |
| origin: { x: 0, y: 0 }, |
| colorSpace: dstColorSpace, |
| premultipliedAlpha: dstPremultiplied, |
| }, |
| expectedDestinationImage, |
| { width, height, depthOrArrayLayers: 1 }, |
| texelCompareOptions |
| ); |
| }); |
