REGRESSION: ( r246394 ) webgpu/whlsl-buffer-fragment.html and webgpu/whlsl-buffer...
[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 const canvas2d = document.querySelector("canvas");
15
16 async function loadImage() {
17     const image = new Image();
18     image.src = "resources/green-400.png";
19     image.onload = function() {
20         getBasicDevice().then(function(device) {
21             test(device, image).then(function() {
22                 if (window.testRunner)
23                     testRunner.notifyDone();
24             }, function(e) {
25                 if (window.testRunner)
26                     testRunner.notifyDone();
27             });
28         }, function() {
29             drawGreenSquareInSoftware(canvas2d);
30             if (window.testRunner)
31                 testRunner.notifyDone();
32         });
33     }
34 }
35
36 async function test(device, image) {
37     canvas2d.width = image.width;
38     canvas2d.height = image.height;
39     const context2d = canvas2d.getContext('2d');
40     context2d.drawImage(image, 0, 0);
41
42     const imageData = context2d.getImageData(0, 0, image.width, image.height);
43
44     const bufferDescriptor = {
45         size: imageData.data.byteLength,
46         usage: GPUBufferUsage.TRANSFER_SRC
47     };
48     bufferA = createBufferWithData(device, bufferDescriptor, imageData.data.buffer);
49
50     bufferDescriptor.usage |= GPUBufferUsage.TRANSFER_DST;
51     const bufferB = device.createBuffer(bufferDescriptor);
52     const bufferViewB = {
53         buffer: bufferB,
54         rowPitch: image.width * 4,
55         imageHeight: 0
56     };
57
58     const textureSize = {
59         width: image.width,
60         height: image.height,
61         depth: 1
62     };
63     const textureDescriptor = {
64         size: textureSize,
65         format: "rgba8unorm",
66         usage: GPUTextureUsage.TRANSFER_SRC | GPUTextureUsage.TRANSFER_DST
67     };
68     const textureA = device.createTexture(textureDescriptor);
69     const textureViewA = { texture: textureA };
70
71     const textureB = device.createTexture(textureDescriptor);
72     const textureViewB = { texture: textureB };
73
74     const readBufferDescriptor = {
75         size: imageData.data.byteLength,
76         usage: GPUBufferUsage.TRANSFER_DST | GPUBufferUsage.MAP_READ
77     };
78     const readBuffer = device.createBuffer(readBufferDescriptor);
79     const readBufferView = {
80         buffer: readBuffer,
81         rowPitch: image.width * 4,
82         imageHeight: 0
83     };
84
85     const commandEncoder = device.createCommandEncoder();
86     commandEncoder.copyBufferToBuffer(bufferA, 0, bufferB, 0, imageData.data.byteLength);
87     commandEncoder.copyBufferToTexture(bufferViewB, textureViewA, textureSize);
88     commandEncoder.copyBufferToTexture(bufferViewB, textureViewA, textureSize);
89     commandEncoder.copyTextureToTexture(textureViewA, textureViewB, textureSize);
90     commandEncoder.copyTextureToBuffer(textureViewB, readBufferView, textureSize);
91     device.getQueue().submit([commandEncoder.finish()]);
92     bufferA.destroy();
93     bufferB.destroy();
94     textureA.destroy();
95     textureB.destroy();
96
97     const resultContext = document.querySelector('canvas').getContext('2d');
98
99     await readBuffer.mapReadAsync().then(ab => {
100         const array = new Uint8ClampedArray(ab);
101         const resultImageData = new ImageData(array, image.width, image.height);
102
103         resultContext.putImageData(resultImageData, 0, 0);
104
105         readBuffer.destroy();
106     });
107 }
108
109 loadImage();
110 </script>
111 </body>