Test onuncapturederror order vs addEventListener (#4397)

* Test onuncapturederror order vs addEventListener

The Web spec says setting onuncaptrederror adds a listener
via addEventListener that calls the callback. Changing
onuncapturederror changes the callback to the existing
listener. Setting onuncapturederror to null removes the listener.

Author: greggman

src/webgpu/api/operation/uncapturederror.spec.ts

@@ -3,6 +3,7 @@ Tests for GPUDevice.onuncapturederror / addEventListener('uncapturederror')
 `;
 
 import { makeTestGroup } from '../../../common/framework/test_group.js';
+import { raceWithRejectOnTimeout } from '../../../common/util/util.js';
 import { kGeneratableErrorScopeFilters } from '../../capability_info.js';
 import { ErrorTest } from '../../error_test.js';
 
@@ -38,3 +39,90 @@ g.test('uncapturederror_from_non_originating_thread')
 (since deserialized ones don't have EventTarget/onuncapturederror).`
   )
   .unimplemented();
+
+g.test('onuncapturederror_order_wrt_addEventListener')
+  .desc(
+    `
+Test that onuncapturederror and addEventListener work in the correct order.
+
+The spec says setting onuncapturederror adds a listener via addEventListener that
+calls the callback. Changing onuncapturederror changes the callback to the existing
+listener. Setting onuncapturederror to null removes the listener.
+  `
+  )
+  .fn(async t => {
+    const callOrder: string[] = [];
+
+    const makeListener = (id: string) => {
+      let resolve: () => void;
+      return {
+        getPromise() {
+          return new Promise<void>(r => {
+            resolve = r;
+          });
+        },
+        listener: () => {
+          t.debug(`listener ${id} called`);
+          callOrder.push(id);
+          resolve();
+        },
+      };
+    };
+
+    const listenerA = makeListener('a');
+    const listenerB = makeListener('b');
+    const callbackC = makeListener('c');
+    const callbackD = makeListener('d');
+    const callbackE = makeListener('e');
+
+    try {
+      t.debug('test they are called in the order added');
+      {
+        const promises = [listenerA.getPromise(), listenerB.getPromise(), callbackC.getPromise()];
+
+        t.device.addEventListener('uncapturederror', listenerA.listener);
+        t.device.onuncapturederror = callbackC.listener;
+        t.device.addEventListener('uncapturederror', listenerB.listener);
+
+        t.generateError('validation');
+        await raceWithRejectOnTimeout(Promise.all(promises), 5000, 'timeout1');
+
+        const order = callOrder.join(',');
+        t.expect(() => order === 'a,c,b');
+        callOrder.length = 0;
+      }
+
+      t.debug('test changing onuncapturederror does not change the order');
+      {
+        const promises = [listenerA.getPromise(), listenerB.getPromise(), callbackD.getPromise()];
+
+        t.device.onuncapturederror = callbackD.listener;
+
+        t.generateError('validation');
+        await raceWithRejectOnTimeout(Promise.all(promises), 500, 'timeout2');
+
+        const order = callOrder.join(',');
+        t.expect(() => order === 'a,d,b');
+        callOrder.length = 0;
+      }
+
+      t.debug('test clearing onuncapturederror then setting it does change the order');
+      {
+        const promises = [listenerA.getPromise(), listenerB.getPromise(), callbackE.getPromise()];
+
+        t.device.onuncapturederror = null;
+        t.device.onuncapturederror = callbackE.listener;
+
+        t.generateError('validation');
+        await raceWithRejectOnTimeout(Promise.all(promises), 500, 'timeout3');
+
+        const order = callOrder.join(',');
+        t.expect(() => order === 'a,b,e');
+        callOrder.length = 0;
+      }
+    } finally {
+      t.device.onuncapturederror = null;
+      t.device.removeEventListener('uncapturederror', listenerA.listener);
+      t.device.removeEventListener('uncapturederror', listenerB.listener);
+    }
+  });