WebKit · flashdesignory · Jan 15, 2025 · Oct 30, 2024 · Oct 30, 2024 · Oct 31, 2024
diff --git a/resources/benchmark-runner.mjs b/resources/benchmark-runner.mjs
@@ -409,7 +409,8 @@ export class BenchmarkRunner {
     async runSuite(suite) {
         // FIXME: Encapsulate more state in the SuiteRunner.
         // FIXME: Return and use measured values from SuiteRunner.
-        const suiteRunnerClass = SUITE_RUNNER_LOOKUP[suite.type ?? "default"];
+        const type = suite.type ?? ((params.useAsyncSteps && "async") || "default");
+        const suiteRunnerClass = SUITE_RUNNER_LOOKUP[type];
         const suiteRunner = new suiteRunnerClass(this._frame, this._page, params, suite, this._client, this._measuredValues);
         await suiteRunner.run();
     }

diff --git a/resources/developer-mode.mjs b/resources/developer-mode.mjs
@@ -21,6 +21,7 @@ export function createDeveloperModeContainer() {
     settings.append(createUIForWarmupSuite());
     settings.append(createUIForWarmupBeforeSync());
     settings.append(createUIForSyncStepDelay());
+    settings.append(createUIForAsyncSteps());
 
     content.append(document.createElement("hr"));
     content.append(settings);
@@ -45,6 +46,12 @@ function createUIForWarmupSuite() {
     });
 }
 
+function createUIForAsyncSteps() {
+    return createCheckboxUI("Use Async Steps", params.useAsyncSteps, (isChecked) => {
+        params.useAsyncSteps = isChecked;
+    });
+}
+
 function createCheckboxUI(labelValue, initialValue, paramsUpdateCallback) {
     const checkbox = document.createElement("input");
     checkbox.type = "checkbox";
@@ -255,7 +262,7 @@ function updateURL() {
         }
     }
 
-    const defaultParamKeys = ["iterationCount", "useWarmupSuite", "warmupBeforeSync", "waitBeforeSync"];
+    const defaultParamKeys = ["iterationCount", "useWarmupSuite", "warmupBeforeSync", "waitBeforeSync", "useAsyncSteps"];
     for (const paramKey of defaultParamKeys) {
         if (params[paramKey] !== defaultParams[paramKey])
             url.searchParams.set(paramKey, params[paramKey]);

diff --git a/resources/newssite/news-next/dist/404.html b/resources/newssite/news-next/dist/404.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="./_next/static/css/a0dca1379a01e5cf.css" as="style"/><link rel="stylesheet" href="./_next/static/css/a0dca1379a01e5cf.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="./_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="./_next/static/chunks/webpack-e50e9853db18b759.js" defer=""></script><script src="./_next/static/chunks/framework-2c79e2a64abdb08b.js" defer=""></script><script src="./_next/static/chunks/main-2ba37e62325cc71b.js" defer=""></script><script src="./_next/static/chunks/pages/_app-77983e68be50f72a.js" defer=""></script><script src="./_next/static/chunks/pages/_error-54de1933a164a1ff.js" defer=""></script><script src="./_next/static/tdun_naEsLSWD7CGin1GQ/_buildManifest.js" defer=""></script><script src="./_next/static/tdun_naEsLSWD7CGin1GQ/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><div id="settings-container"></div><div id="notifications-container"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"tdun_naEsLSWD7CGin1GQ","assetPrefix":".","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="./_next/static/css/a0dca1379a01e5cf.css" as="style"/><link rel="stylesheet" href="./_next/static/css/a0dca1379a01e5cf.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="./_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="./_next/static/chunks/webpack-e50e9853db18b759.js" defer=""></script><script src="./_next/static/chunks/framework-2c79e2a64abdb08b.js" defer=""></script><script src="./_next/static/chunks/main-2ba37e62325cc71b.js" defer=""></script><script src="./_next/static/chunks/pages/_app-77983e68be50f72a.js" defer=""></script><script src="./_next/static/chunks/pages/_error-54de1933a164a1ff.js" defer=""></script><script src="./_next/static/AI2zPSjX_Px2t9mo-0ufS/_buildManifest.js" defer=""></script><script src="./_next/static/AI2zPSjX_Px2t9mo-0ufS/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><div id="settings-container"></div><div id="notifications-container"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"AI2zPSjX_Px2t9mo-0ufS","assetPrefix":".","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
diff --git a/...c/tdun_naEsLSWD7CGin1GQ/_buildManifest.js → ...c/AI2zPSjX_Px2t9mo-0ufS/_buildManifest.js b/...c/tdun_naEsLSWD7CGin1GQ/_buildManifest.js → ...c/AI2zPSjX_Px2t9mo-0ufS/_buildManifest.js
diff --git a/...tic/tdun_naEsLSWD7CGin1GQ/_ssgManifest.js → ...tic/AI2zPSjX_Px2t9mo-0ufS/_ssgManifest.js b/...tic/tdun_naEsLSWD7CGin1GQ/_ssgManifest.js → ...tic/AI2zPSjX_Px2t9mo-0ufS/_ssgManifest.js
diff --git a/...ic/chunks/pages/index-ca407dccff56c060.js → ...ic/chunks/pages/index-9c9d8e06f964abaf.js b/...ic/chunks/pages/index-ca407dccff56c060.js → ...ic/chunks/pages/index-9c9d8e06f964abaf.js
diff --git a/resources/newssite/news-next/dist/index.html b/resources/newssite/news-next/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="./_next/static/css/a0dca1379a01e5cf.css" as="style"/><link rel="stylesheet" href="./_next/static/css/a0dca1379a01e5cf.css" data-n-g=""/><link rel="preload" href="./_next/static/css/2cf5163b53bb0adb.css" as="style"/><link rel="stylesheet" href="./_next/static/css/2cf5163b53bb0adb.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="./_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="./_next/static/chunks/webpack-e50e9853db18b759.js" defer=""></script><script src="./_next/static/chunks/framework-2c79e2a64abdb08b.js" defer=""></script><script src="./_next/static/chunks/main-2ba37e62325cc71b.js" defer=""></script><script src="./_next/static/chunks/pages/_app-77983e68be50f72a.js" defer=""></script><script src="./_next/static/chunks/743-fd706aeabb7828e3.js" defer=""></script><script src="./_next/static/chunks/pages/index-ca407dccff56c060.js" defer=""></script><script src="./_next/static/tdun_naEsLSWD7CGin1GQ/_buildManifest.js" defer=""></script><script src="./_next/static/tdun_naEsLSWD7CGin1GQ/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><div id="settings-container"></div><div id="notifications-container"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"tdun_naEsLSWD7CGin1GQ","assetPrefix":".","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="./_next/static/css/a0dca1379a01e5cf.css" as="style"/><link rel="stylesheet" href="./_next/static/css/a0dca1379a01e5cf.css" data-n-g=""/><link rel="preload" href="./_next/static/css/2cf5163b53bb0adb.css" as="style"/><link rel="stylesheet" href="./_next/static/css/2cf5163b53bb0adb.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="./_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="./_next/static/chunks/webpack-e50e9853db18b759.js" defer=""></script><script src="./_next/static/chunks/framework-2c79e2a64abdb08b.js" defer=""></script><script src="./_next/static/chunks/main-2ba37e62325cc71b.js" defer=""></script><script src="./_next/static/chunks/pages/_app-77983e68be50f72a.js" defer=""></script><script src="./_next/static/chunks/743-fd706aeabb7828e3.js" defer=""></script><script src="./_next/static/chunks/pages/index-9c9d8e06f964abaf.js" defer=""></script><script src="./_next/static/AI2zPSjX_Px2t9mo-0ufS/_buildManifest.js" defer=""></script><script src="./_next/static/AI2zPSjX_Px2t9mo-0ufS/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><div id="settings-container"></div><div id="notifications-container"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"AI2zPSjX_Px2t9mo-0ufS","assetPrefix":".","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
diff --git a/resources/shared/params.mjs b/resources/shared/params.mjs
@@ -12,6 +12,8 @@ export class Params {
     tags = [];
     // Toggle running a dummy suite once before the normal test suites.
     useWarmupSuite = false;
+    // toggle async type vs default raf type.
+    useAsyncSteps = false;
     // Change how a test measurement is triggered and async time is measured:
     // "timer": The classic (as in Speedometer 2.x) way using setTimeout
     // "raf":   Using rAF callbacks, both for triggering the sync part and for measuring async time.
@@ -50,12 +52,14 @@ export class Params {
         this.tags = this._parseTags(searchParams);
         this.developerMode = this._parseBooleanParam(searchParams, "developerMode");
         this.useWarmupSuite = this._parseBooleanParam(searchParams, "useWarmupSuite");
+        this.useAsyncSteps = this._parseBooleanParam(searchParams, "useAsyncSteps");
         this.waitBeforeSync = this._parseIntParam(searchParams, "waitBeforeSync", 0);
         this.warmupBeforeSync = this._parseIntParam(searchParams, "warmupBeforeSync", 0);
         this.measurementMethod = this._parseMeasurementMethod(searchParams);
         this.shuffleSeed = this._parseShuffleSeed(searchParams);
 
         const unused = Array.from(searchParams.keys());
+        console.log("unused", unused);
         if (unused.length > 0)
             console.error("Got unused search params", unused);
     }

diff --git a/resources/shared/test-invoker.mjs b/resources/shared/test-invoker.mjs
@@ -7,7 +7,7 @@ class TestInvoker {
     }
 }
 
-export class RAFTestInvoker extends TestInvoker {
+class BaseRAFTestInvoker extends TestInvoker {
     start() {
         return new Promise((resolve) => {
             if (this._params.waitBeforeSync)
@@ -16,7 +16,9 @@ export class RAFTestInvoker extends TestInvoker {
                 this._scheduleCallbacks(resolve);
         });
     }
+}
 
+class RAFTestInvoker extends BaseRAFTestInvoker {
     _scheduleCallbacks(resolve) {
         requestAnimationFrame(() => this._syncCallback());
         requestAnimationFrame(() => {
@@ -31,7 +33,58 @@ export class RAFTestInvoker extends TestInvoker {
     }
 }
 
+class AsyncRAFTestInvoker extends BaseRAFTestInvoker {
+    static mc = new MessageChannel();
+    _scheduleCallbacks(resolve) {
+        let gotTimer = false;
+        let gotMessage = false;
+        let gotPromise = false;
+
+        const tryTriggerAsyncCallback = () => {
+            if (!gotTimer || !gotMessage || !gotPromise)
+                return;
+
+            this._asyncCallback();
+            setTimeout(async () => {
+                await this._reportCallback();
+                resolve();
+            }, 0);
+        };
+
+        requestAnimationFrame(async () => {
+            await this._syncCallback();
+            gotPromise = true;
+            tryTriggerAsyncCallback();
+        });
+
+        requestAnimationFrame(() => {
+            setTimeout(async () => {
+                await Promise.resolve();
+                gotTimer = true;
+                tryTriggerAsyncCallback();
+            });
+
+            AsyncRAFTestInvoker.mc.port1.addEventListener(
+                "message",
+                async function () {
+                    await Promise.resolve();
+                    gotMessage = true;
+                    tryTriggerAsyncCallback();
+                },
+                { once: true }
+            );
+            AsyncRAFTestInvoker.mc.port1.start();
+            AsyncRAFTestInvoker.mc.port2.postMessage("speedometer");
+        });
+    }
+}
+
 export const TEST_INVOKER_LOOKUP = {
     __proto__: null,
     raf: RAFTestInvoker,
 };
+
+export const ASYNC_TEST_INVOKER_LOOKUP = {
+    __proto__: null,
+    raf: AsyncRAFTestInvoker,
+};
diff --git a/resources/shared/test-runner.mjs b/resources/shared/test-runner.mjs
@@ -1,4 +1,4 @@
-import { TEST_INVOKER_LOOKUP } from "./test-invoker.mjs";
+import { TEST_INVOKER_LOOKUP, ASYNC_TEST_INVOKER_LOOKUP } from "./test-invoker.mjs";
 
 export class TestRunner {
     #frame;
@@ -13,11 +13,22 @@ export class TestRunner {
         this.#test = test;
         this.#params = params;
         this.#callback = callback;
-
         this.#page = page;
         this.#frame = frame;
     }
 
+    get page() {
+        return this.#page;
+    }
+
+    get test() {
+        return this.#test;
+    }
+
+    _runSyncStep(test, page) {
+        test.run(page);
+    }
+
     async runTest() {
         // Prepare all mark labels outside the measuring loop.
         const suiteName = this.#suite.name;
@@ -30,7 +41,7 @@ export class TestRunner {
         let asyncStartTime;
         let asyncTime;
 
-        const runSync = () => {
+        const runSync = async () => {
             if (this.#params.warmupBeforeSync) {
                 performance.mark("warmup-start");
                 const startTime = performance.now();
@@ -41,7 +52,7 @@ export class TestRunner {
             }
             performance.mark(syncStartLabel);
             const syncStartTime = performance.now();
-            this.#test.run(this.#page);
+            await this._runSyncStep(this.test, this.page);
             const mark = performance.mark(syncEndLabel);
             const syncEndTime = mark.startTime;
 
@@ -68,9 +79,22 @@ export class TestRunner {
         };
 
         const report = () => this.#callback(this.#test, syncTime, asyncTime);
-        const invokerClass = TEST_INVOKER_LOOKUP[this.#params.measurementMethod];
+        const invokerClass = this.#suite.type === "async" ? ASYNC_TEST_INVOKER_LOOKUP[this.#params.measurementMethod] : TEST_INVOKER_LOOKUP[this.#params.measurementMethod];
         const invoker = new invokerClass(runSync, measureAsync, report, this.#params);
 
         return invoker.start();
     }
 }
+
+export class AsyncTestRunner extends TestRunner {
+    async _runSyncStep(test, page) {
+        await test.run(page);
+    }
+}
+
+export const TEST_RUNNER_LOOKUP = {
+    __proto__: null,
+    default: TestRunner,
+    async: AsyncTestRunner,
+    remote: TestRunner,
+};
diff --git a/resources/suite-runner.mjs b/resources/suite-runner.mjs
@@ -1,4 +1,4 @@
-import { TestRunner } from "./shared/test-runner.mjs";
+import { TEST_RUNNER_LOOKUP } from "./shared/test-runner.mjs";
 import { WarmupSuite } from "./benchmark-runner.mjs";
 
 export class SuiteRunner {
@@ -75,7 +75,8 @@ export class SuiteRunner {
             if (this.#client?.willRunTest)
                 await this.#client.willRunTest(this.#suite, test);
 
-            const testRunner = new TestRunner(this.#frame, this.#page, this.#params, this.#suite, test, this._recordTestResults);
+            const testRunnerClass = TEST_RUNNER_LOOKUP[this.#suite.type ?? "default"];
+            const testRunner = new testRunnerClass(this.#frame, this.#page, this.#params, this.#suite, test, this._recordTestResults);
             await testRunner.runTest();
         }
         performance.mark(suiteEndLabel);
@@ -214,5 +215,6 @@ export class RemoteSuiteRunner extends SuiteRunner {
 export const SUITE_RUNNER_LOOKUP = {
     __proto__: null,
     default: SuiteRunner,
+    async: SuiteRunner,
     remote: RemoteSuiteRunner,
 };
diff --git a/resources/tests.mjs b/resources/tests.mjs
@@ -343,6 +343,7 @@ Suites.push({
     name: "TodoMVC-React-Complex-DOM",
     url: "resources/todomvc/architecture-examples/react-complex/dist/index.html#/home",
     tags: ["todomvc", "complex", "complex-default"],
+    type: "async",
     async prepare(page) {
         const element = await page.waitForElement(".new-todo");
         element.focus();
@@ -373,6 +374,7 @@ Suites.push({
     name: "TodoMVC-React-Redux",
     url: "resources/todomvc/architecture-examples/react-redux/dist/index.html",
     tags: ["todomvc"],
+    type: "async",
     async prepare(page) {
         const element = await page.waitForElement(".new-todo");
         element.focus();
@@ -704,6 +706,7 @@ Suites.push({
     name: "TodoMVC-Preact-Complex-DOM",
     url: "resources/todomvc/architecture-examples/preact-complex/dist/index.html#/home",
     tags: ["todomvc", "complex", "complex-default"],
+    type: "async",
     async prepare(page) {
         const element = await page.waitForElement(".new-todo");
         element.focus();
@@ -857,6 +860,7 @@ Suites.push({
     name: "NewsSite-Next",
     url: "resources/newssite/news-next/dist/index.html",
     tags: ["newssite", "language"],
+    type: "async",
     async prepare(page) {
         await page.waitForElement("#navbar-dropdown-toggle");
     },
@@ -1036,6 +1040,7 @@ Suites.push({
     name: "React-Stockcharts-SVG",
     url: "resources/react-stockcharts/build/index.html?type=svg",
     tags: ["chart", "svg"],
+    type: "async",
     async prepare(page) {
         await page.waitForElement("#render");
     },
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="./_next/static/css/a0dca1379a01e5cf.css" as="style"/><link rel="stylesheet" href="./_next/static/css/a0dca1379a01e5cf.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="./_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="./_next/static/chunks/webpack-e50e9853db18b759.js" defer=""></script><script src="./_next/static/chunks/framework-2c79e2a64abdb08b.js" defer=""></script><script src="./_next/static/chunks/main-2ba37e62325cc71b.js" defer=""></script><script src="./_next/static/chunks/pages/_app-77983e68be50f72a.js" defer=""></script><script src="./_next/static/chunks/pages/_error-54de1933a164a1ff.js" defer=""></script><script src="./_next/static/tdun_naEsLSWD7CGin1GQ/_buildManifest.js" defer=""></script><script src="./_next/static/tdun_naEsLSWD7CGin1GQ/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><div id="settings-container"></div><div id="notifications-container"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"tdun_naEsLSWD7CGin1GQ","assetPrefix":".","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
		<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="./_next/static/css/a0dca1379a01e5cf.css" as="style"/><link rel="stylesheet" href="./_next/static/css/a0dca1379a01e5cf.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="./_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="./_next/static/chunks/webpack-e50e9853db18b759.js" defer=""></script><script src="./_next/static/chunks/framework-2c79e2a64abdb08b.js" defer=""></script><script src="./_next/static/chunks/main-2ba37e62325cc71b.js" defer=""></script><script src="./_next/static/chunks/pages/_app-77983e68be50f72a.js" defer=""></script><script src="./_next/static/chunks/pages/_error-54de1933a164a1ff.js" defer=""></script><script src="./_next/static/AI2zPSjX_Px2t9mo-0ufS/_buildManifest.js" defer=""></script><script src="./_next/static/AI2zPSjX_Px2t9mo-0ufS/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><div id="settings-container"></div><div id="notifications-container"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"AI2zPSjX_Px2t9mo-0ufS","assetPrefix":".","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>