op: Implement 'stencil_depthFailOp_operation' test in stencil.spec.ts (#2092)

This PR adds a new test to check if depthFailOp stencil operation works
as expected.

Additionally, this PR removes 'referenceStencil' parameterization in
'stencil_passOp_operation' and 'stencil_depthFailOp_operation' tests.
Instead, we use a constant since the value is always 3 in the tests.

Issue: #2023

Author: Gyuyoung

src/webgpu/api/operation/rendering/stencil.spec.ts

@@ -22,11 +22,13 @@ class StencilTest extends GPUTest {
   checkStencilOperation(
     testStencilState: GPUStencilFaceState,
     initialStencil: number,
-    referenceStencil: number,
-    expectedStencil: number
+    expectedStencil: number,
+    depthCompare: GPUCompareFunction = 'always'
   ) {
     const depthStencilFormat: GPUTextureFormat = 'depth24plus-stencil8';
 
+    const kReferenceStencil = 3;
+
     const baseStencilState = {
       compare: 'always',
       failOp: 'keep',
@@ -50,7 +52,7 @@ class StencilTest extends GPUTest {
     const testState = {
       format: depthStencilFormat,
       depthWriteEnabled: false,
-      depthCompare: 'always',
+      depthCompare,
       stencilFront: testStencilState,
       stencilBack: testStencilState,
     } as const;
@@ -66,7 +68,7 @@ class StencilTest extends GPUTest {
     const testStates = [
       // Draw the base triangle with stencil reference 1. This clears the stencil buffer to 1.
       { state: baseState, color: kBaseColor, stencil: initialStencil },
-      { state: testState, color: kRedStencilColor, stencil: referenceStencil },
+      { state: testState, color: kRedStencilColor, stencil: kReferenceStencil },
       { state: testState2, color: kGreenStencilColor, stencil: expectedStencil },
     ];
     this.runStencilStateTest(testStates, kGreenStencilColor);
@@ -316,82 +318,35 @@ g.test('stencil_passOp_operation')
     - If the pass operation is 'keep', it keeps the initial stencil value.
     - If the pass operation is 'replace', it replaces the initial stencil value with the reference
       stencil value.
-
-    TODO: Need to test depthFailOp as well.
   `
   )
   .params(u =>
     u //
       .combineWithParams([
-        { passOp: 'keep', initialStencil: 1, referenceStencil: 3, expectedStencil: 1 },
-        { passOp: 'zero', initialStencil: 1, referenceStencil: 3, expectedStencil: 0 },
-        { passOp: 'replace', initialStencil: 1, referenceStencil: 3, expectedStencil: 3 },
-        {
-          passOp: 'invert',
-          initialStencil: 0xf0,
-          referenceStencil: 3,
-          expectedStencil: 0x0f,
-        },
-        {
-          passOp: 'increment-clamp',
-          initialStencil: 1,
-          referenceStencil: 3,
-          expectedStencil: 2,
-        },
-        {
-          passOp: 'increment-clamp',
-          initialStencil: 0xff,
-          referenceStencil: 3,
-          expectedStencil: 0xff,
-        },
-        {
-          passOp: 'increment-wrap',
-          initialStencil: 1,
-          referenceStencil: 3,
-          expectedStencil: 2,
-        },
-        {
-          passOp: 'increment-wrap',
-          initialStencil: 0xff,
-          referenceStencil: 3,
-          expectedStencil: 0,
-        },
-        {
-          passOp: 'decrement-clamp',
-          initialStencil: 1,
-          referenceStencil: 3,
-          expectedStencil: 0,
-        },
-        {
-          passOp: 'decrement-clamp',
-          initialStencil: 0,
-          referenceStencil: 3,
-          expectedStencil: 0,
-        },
-        {
-          passOp: 'decrement-wrap',
-          initialStencil: 1,
-          referenceStencil: 3,
-          expectedStencil: 0,
-        },
-        {
-          passOp: 'decrement-wrap',
-          initialStencil: 0,
-          referenceStencil: 3,
-          expectedStencil: 0xff,
-        },
+        { passOp: 'keep', initialStencil: 1, expectedStencil: 1 },
+        { passOp: 'zero', initialStencil: 1, expectedStencil: 0 },
+        { passOp: 'replace', initialStencil: 1, expectedStencil: 3 },
+        { passOp: 'invert', initialStencil: 0xf0, expectedStencil: 0x0f },
+        { passOp: 'increment-clamp', initialStencil: 1, expectedStencil: 2 },
+        { passOp: 'increment-clamp', initialStencil: 0xff, expectedStencil: 0xff },
+        { passOp: 'increment-wrap', initialStencil: 1, expectedStencil: 2 },
+        { passOp: 'increment-wrap', initialStencil: 0xff, expectedStencil: 0 },
+        { passOp: 'decrement-clamp', initialStencil: 1, expectedStencil: 0 },
+        { passOp: 'decrement-clamp', initialStencil: 0, expectedStencil: 0 },
+        { passOp: 'decrement-wrap', initialStencil: 1, expectedStencil: 0 },
+        { passOp: 'decrement-wrap', initialStencil: 0, expectedStencil: 0xff },
       ] as const)
   )
   .fn(async t => {
-    const { passOp, initialStencil, referenceStencil, expectedStencil } = t.params;
+    const { passOp, initialStencil, expectedStencil } = t.params;
 
     const stencilState = {
       compare: 'always',
       failOp: 'keep',
       passOp,
     } as const;
 
-    t.checkStencilOperation(stencilState, initialStencil, referenceStencil, expectedStencil);
+    t.checkStencilOperation(stencilState, initialStencil, expectedStencil);
   });
 
 g.test('stencil_failOp_operation')
@@ -426,8 +381,6 @@ g.test('stencil_failOp_operation')
   .fn(async t => {
     const { failOp, initialStencil, expectedStencil } = t.params;
 
-    const kReferenceStencil = 3;
-
     const stencilState = {
       compare: 'never',
       failOp,
@@ -437,7 +390,51 @@ g.test('stencil_failOp_operation')
     // Draw the base triangle with stencil reference 1. This clears the stencil buffer to 1.
     // Always fails because the comparison never passes. Therefore red is never drawn, and the
     // stencil contents may be updated according to `operation`.
-    t.checkStencilOperation(stencilState, initialStencil, kReferenceStencil, expectedStencil);
+    t.checkStencilOperation(stencilState, initialStencil, expectedStencil);
+  });
+
+g.test('stencil_depthFailOp_operation')
+  .desc(
+    `
+  Test that the stencil operation is executed on depthCompare fail. A triangle is drawn with the
+  'never' depthCompare, so it should fail the depth test. Then, test that each 'depthFailOp' stencil operation
+  works with the given stencil values correctly as expected. For example,
+    - If the depthFailOp operation is 'keep', it keeps the initial stencil value.
+    - If the depthFailOp operation is 'replace', it replaces the initial stencil value with the
+      reference stencil value.
+  `
+  )
+  .params(u =>
+    u //
+      .combineWithParams([
+        { depthFailOp: 'keep', initialStencil: 1, expectedStencil: 1 },
+        { depthFailOp: 'zero', initialStencil: 1, expectedStencil: 0 },
+        { depthFailOp: 'replace', initialStencil: 1, expectedStencil: 3 },
+        { depthFailOp: 'invert', initialStencil: 0xf0, expectedStencil: 0x0f },
+        { depthFailOp: 'increment-clamp', initialStencil: 1, expectedStencil: 2 },
+        { depthFailOp: 'increment-clamp', initialStencil: 0xff, expectedStencil: 0xff },
+        { depthFailOp: 'increment-wrap', initialStencil: 1, expectedStencil: 2 },
+        { depthFailOp: 'increment-wrap', initialStencil: 0xff, expectedStencil: 0 },
+        { depthFailOp: 'decrement-clamp', initialStencil: 1, expectedStencil: 0 },
+        { depthFailOp: 'decrement-clamp', initialStencil: 0, expectedStencil: 0 },
+        { depthFailOp: 'decrement-wrap', initialStencil: 2, expectedStencil: 1 },
+        { depthFailOp: 'decrement-wrap', initialStencil: 1, expectedStencil: 0 },
+        { depthFailOp: 'decrement-wrap', initialStencil: 0, expectedStencil: 0xff },
+      ] as const)
+  )
+  .fn(async t => {
+    const { depthFailOp, initialStencil, expectedStencil } = t.params;
+
+    const stencilState = {
+      compare: 'always',
+      failOp: 'keep',
+      passOp: 'keep',
+      depthFailOp,
+    } as const;
+
+    // Call checkStencilOperation function with enabling the depthTest to test that the depthFailOp
+    // stencil operation works as expected.
+    t.checkStencilOperation(stencilState, initialStencil, expectedStencil, 'never');
   });
 
 g.test('stencil_read_write_mask')