8339e90354e9a6d073aa5c8028e8ec64dc82765f
[WebKit-https.git] / LayoutTests / webgpu / blit-commands.html
1 <!DOCTYPE html><!-- webkit-test-runner [ experimental:WebGPUEnabled=true ] -->
2 <meta charset="utf-8">
3 <title>Basic Blitting</title>
4 <meta name="assert" content="Blit operations copy a green canvas.">
5 <link rel="match" href="blit-commands-expected.html">
6 <p>Pass if square canvas below is completely green.</p>
7 <canvas width="400" height="400"></canvas>
8 <body>
9 <script src="js/webgpu-functions.js"></script>
10 <script>
11 if (window.testRunner)
12     testRunner.waitUntilDone();
13
14 async function loadImage() {
15     const image = new Image();
16     image.src = "resources/green-400.png";
17     image.onload = function() {
18         test(image).then(function() {
19             if (window.testRunner)
20                 testRunner.notifyDone();
21         }, function() {
22             if (window.testRunner)
23                 testRunner.notifyDone();
24         });
25     }
26 }
27
28 async function test(image) {
29     const device = await getBasicDevice();
30
31     const canvas2d = document.createElement('canvas');
32     canvas2d.width = image.width;
33     canvas2d.height = image.height;
34     const context2d = canvas2d.getContext('2d');
35     context2d.drawImage(image, 0, 0);
36
37     const imageData = context2d.getImageData(0, 0, image.width, image.height);
38
39     const bufferDescriptor = {
40         size: imageData.data.byteLength,
41         usage: GPUBufferUsage.TRANSFER_SRC
42     };
43     bufferA = createBufferWithData(device, bufferDescriptor, imageData.data.buffer);
44
45     bufferDescriptor.usage |= GPUBufferUsage.TRANSFER_DST;
46     const bufferB = device.createBuffer(bufferDescriptor);
47     const bufferViewB = {
48         buffer: bufferB,
49         rowPitch: image.width * 4,
50         imageHeight: 0
51     };
52
53     const textureSize = {
54         width: image.width,
55         height: image.height,
56         depth: 1
57     };
58     const textureDescriptor = {
59         size: textureSize,
60         format: "rgba8unorm",
61         usage: GPUTextureUsage.TRANSFER_SRC | GPUTextureUsage.TRANSFER_DST
62     };
63     const textureA = device.createTexture(textureDescriptor);
64     const textureViewA = { texture: textureA };
65
66     const textureB = device.createTexture(textureDescriptor);
67     const textureViewB = { texture: textureB };
68
69     const readBufferDescriptor = {
70         size: imageData.data.byteLength,
71         usage: GPUBufferUsage.TRANSFER_DST | GPUBufferUsage.MAP_READ
72     };
73     const readBuffer = device.createBuffer(readBufferDescriptor);
74     const readBufferView = {
75         buffer: readBuffer,
76         rowPitch: image.width * 4,
77         imageHeight: 0
78     };
79
80     const commandEncoder = device.createCommandEncoder();
81     commandEncoder.copyBufferToBuffer(bufferA, 0, bufferB, 0, imageData.data.byteLength);
82     commandEncoder.copyBufferToTexture(bufferViewB, textureViewA, textureSize);
83     commandEncoder.copyBufferToTexture(bufferViewB, textureViewA, textureSize);
84     commandEncoder.copyTextureToTexture(textureViewA, textureViewB, textureSize);
85     commandEncoder.copyTextureToBuffer(textureViewB, readBufferView, textureSize);
86     device.getQueue().submit([commandEncoder.finish()]);
87     bufferA.destroy();
88     bufferB.destroy();
89     textureA.destroy();
90     textureB.destroy();
91
92     const resultContext = document.querySelector('canvas').getContext('2d');
93
94     await readBuffer.mapReadAsync().then(ab => {
95         const array = new Uint8ClampedArray(ab);
96         const resultImageData = new ImageData(array, image.width, image.height);
97
98         resultContext.putImageData(resultImageData, 0, 0);
99
100         readBuffer.destroy();
101     });
102 }
103
104 loadImage();
105 </script>
106 </body>