Unreviewed, rolling out r243989.
[WebKit-https.git] / LayoutTests / webgpu / vertex-buffer-triangle-strip.html
1 <!DOCTYPE html>
2 <meta charset="utf-8">
3 <title>WebGPU Hello Triangles</title>
4 <meta name="assert" content="WebGPU correctly renders a green canvas.">
5 <link rel="match" href="vertex-buffer-triangle-strip-expected.html">
6 <p>Pass if square canvas below is completely green.</p>
7 <canvas width="400" height="400"></canvas>
8 <script src="js/webgpu-functions.js"></script>
9 <script>
10 if (window.testRunner)
11     testRunner.waitUntilDone();
12
13 const shaderCode = `
14 #include <metal_stdlib>
15     
16 using namespace metal;
17
18 struct VertexIn
19 {
20     float4 position [[attribute(0)]];
21     float green [[attribute(1)]];
22 };
23
24 struct VertexOut
25 {
26     float4 position [[position]];
27     float4 color;
28 };
29
30 vertex VertexOut vertex_main(VertexIn vertexIn [[stage_in]])
31 {
32     VertexOut vOut;
33     vOut.position = vertexIn.position;
34     vOut.color = float4(0, vertexIn.green, 0, 1);
35     return vOut;
36 }
37
38 fragment float4 fragment_main(VertexOut v [[stage_in]])
39 {
40     return v.color;
41 }
42 `
43
44 function createVertexBuffer(device) {
45     const bufferSize = 4 * 5 * 4;
46     const buffer = device.createBuffer({ size: bufferSize, usage: GPUBufferUsage.VERTEX | GPUBufferUsage.TRANSFER_DST });
47     const vertexArrayBuffer0 = new Float32Array([
48         // float4 xyzw, float g
49         -1, 1, 0, 1, 1,
50         -1, -1, 0, 1, 1
51     ]).buffer;
52     const vertexArrayBuffer1 = new Float32Array([
53         1, 1, 0, 1, 1,
54         1, -1, 0, 1, 1
55     ]).buffer;
56
57     buffer.setSubData(0, vertexArrayBuffer0);
58     buffer.setSubData(4 * 5 * 2, vertexArrayBuffer1);
59
60     return buffer;
61 }
62
63 function createInputStateDescriptor() {
64     return {
65         indexFormat: "uint32",
66         attributes: [{
67             shaderLocation: 0,
68             inputSlot: 0,
69             offset: 0,
70             format: "float4"
71         }, {
72             shaderLocation: 1,
73             inputSlot: 0,
74             offset: 4 * 4,
75             format: "float"
76         }],
77         inputs: [{
78             inputSlot: 0,
79             stride: 4 * 5,
80             stepMode: "vertex"
81         }]
82     }
83 }
84
85 async function test() {
86     const device = await getBasicDevice();
87     const canvas = document.querySelector("canvas");
88     const swapChain = createBasicSwapChain(canvas, device);
89     // FIXME: Replace with non-MSL shaders.
90     const shaderModule = device.createShaderModule({ code: shaderCode });
91     const vertexBuffer = createVertexBuffer(device);
92     const inputStateDescriptor = createInputStateDescriptor();
93     const pipeline = createBasicPipeline(shaderModule, device, null, null, inputStateDescriptor);
94     const commandEncoder = device.createCommandEncoder();
95     const passEncoder = beginBasicRenderPass(swapChain, commandEncoder);
96     encodeBasicCommands(passEncoder, pipeline, vertexBuffer);
97     const queue = device.getQueue();
98     queue.submit([commandEncoder.finish()]);
99     vertexBuffer.destroy();
100
101     if (window.testRunner)
102         testRunner.notifyDone();
103 }
104
105 test();
106 </script>