fix(op_crate/web): make onabort event handler web compatible (#8225)

op_crates/web/02_abort_signal.js

@@ -36,12 +36,23 @@
         throw new TypeError("Illegal constructor.");
       }
       super();
-      this.onabort = null;
-      this.addEventListener("abort", (evt) => {
-        const { onabort } = this;
-        if (typeof onabort === "function") {
-          onabort.call(this, evt);
-        }
+      // HTML specification section 8.1.5.1
+      let eventHandler = null;
+      Object.defineProperty(this, "onabort", {
+        get() {
+          return eventHandler;
+        },
+        set(value) {
+          if (eventHandler) {
+            this.removeEventListener("abort", eventHandler);
+          }
+          eventHandler = value;
+          if (typeof eventHandler === "function") {
+            this.addEventListener("abort", value);
+          }
+        },
+        configurable: true,
+        enumerable: true,
       });
     }
 

op_crates/web/abort_controller_test.js

@@ -23,7 +23,7 @@ function assertThrows(fn) {
 }
 
 function basicAbortController() {
-  controller = new AbortController();
+  const controller = new AbortController();
   assert(controller);
   const { signal } = controller;
   assert(signal);
@@ -83,6 +83,18 @@ function abortSignalIllegalConstructor() {
   assertEquals(error.message, "Illegal constructor.");
 }
 
+function abortSignalEventOrder() {
+  const arr = [];
+  const controller = new AbortController();
+  const { signal } = controller;
+  signal.addEventListener("abort", () => arr.push(1));
+  signal.onabort = () => arr.push(2);
+  signal.addEventListener("abort", () => arr.push(3));
+  controller.abort();
+  assertEquals(arr[0], 1);
+  assertEquals(arr[1], 2);
+  assertEquals(arr[2], 3);
+}
 function main() {
   basicAbortController();
   signalCallsOnabort();
@@ -90,6 +102,7 @@ function main() {
   onlyAbortsOnce();
   controllerHasProperToString();
   abortSignalIllegalConstructor();
+  abortSignalEventOrder();
 }
 
 main();