[WHLSL] Move WHLSL tests to their own folder
[WebKit-https.git] / LayoutTests / webgpu / viewport-scissor-rect-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="viewport-scissor-rect-triangle-strip-expected.html">
6 <p>Pass if square canvas below is a 4 by 4 blue/green checkerboard.</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 Vertex
19 {
20     float4 position [[position]];
21 };
22
23 vertex Vertex vertex_main(uint vid [[vertex_id]])
24 {
25     Vertex v;
26     switch (vid) {
27     case 0:
28         v.position = float4(-1, 1, 0, 1);
29         break;
30     case 1:
31         v.position = float4(-1, -1, 0, 1);
32         break;
33     case 2:
34         v.position = float4(1, 1, 0, 1);
35         break;
36     default:
37         v.position = float4(1, -1, 0, 1);
38     }
39     return v;
40 }
41
42 fragment float4 fragment_main(Vertex vertexIn [[stage_in]])
43 {
44     return float4(0.0, 1.0, 0.0, 1.0);
45 }
46 `;
47
48 const canvas = document.querySelector("canvas");
49
50 async function test(device) {
51     const canvas = document.querySelector("canvas");
52     const swapChain = createBasicSwapChain(canvas, device);
53     // FIXME: Replace with non-MSL shaders.
54     const shaderModule = device.createShaderModule({ code: shaderCode });
55     const pipeline = createBasicPipeline(shaderModule, device);
56     const commandEncoder = device.createCommandEncoder();
57     const blueAttachment = {
58         attachment: swapChain.getCurrentTexture().createDefaultView(),
59         loadOp: "clear",
60         storeOp: "store",
61         clearColor: { r: 0, g: 0, b: 1, a: 1 }
62     };
63     const passEncoder = commandEncoder.beginRenderPass({ colorAttachments: [blueAttachment] });
64     passEncoder.setPipeline(pipeline);
65
66     function drawViewport(x, y) {
67         passEncoder.setViewport(x, y, 100, 100, 0, 1);
68         passEncoder.draw(4, 1, 0, 0);
69     }
70
71     function drawScissorRect(x, y) {
72         passEncoder.setScissorRect(x, y, 100, 100);
73         passEncoder.draw(4, 1, 0, 0);
74     }
75
76     passEncoder.setScissorRect(0, 0, 200, 400);
77     drawViewport(100, 0);
78     drawViewport(0, 100);
79     drawViewport(100, 200);
80     drawViewport(0, 300);
81
82     // Draw outside of scissor rect should not appear.
83     drawViewport(200, 100);
84
85     passEncoder.setViewport(200, 0, 200, 400, 0, 1);
86     drawScissorRect(300, 0);
87     drawScissorRect(200, 100);
88     drawScissorRect(300, 200);
89     drawScissorRect(200, 300);
90
91     // Draw outside of viewport should not appear.
92     drawScissorRect(0, 0);
93
94     passEncoder.endPass();
95     const queue = device.getQueue();
96
97     queue.submit([commandEncoder.finish()]);
98 }
99
100 getBasicDevice().then(function(device) {
101     test(device).then(function() {
102         if (window.testRunner)
103             testRunner.notifyDone();
104     }, function() {
105         if (window.testRunner)
106             testRunner.notifyDone();
107     });
108 }, function() {
109     drawGreenAndBlueCheckerboardInSoftware(canvas);
110     if (window.testRunner)
111         testRunner.notifyDone();
112 });
113 </script>