Track Responsive-Design carousel resize events

Author: issackjohn

experimental/tests.mjs

@@ -3,6 +3,19 @@ import { getTodoText } from "../resources/shared/translations.mjs";
 import { numberOfItemsToAdd } from "../resources/shared/todomvc-utils.mjs";
 import { freezeSuites } from "../resources/suites-helper.mjs";
 
+function observeRecipeCarouselResizeObservations(page) {
+    return page.querySelector(".carousel", ["cooking-app", "main-content", "recipe-carousel"]).observeResizeEvents();
+}
+
+function reportRecipeCarouselResizeObservations(stepName, resizeObservations) {
+    const { count } = resizeObservations;
+    resizeObservations.disconnect();
+    if (count)
+        console.warn(`${stepName}: recipe-carousel ResizeObserver observed ${count} distinct width change(s).`);
+    else
+        console.warn(`${stepName}: recipe-carousel ResizeObserver observed 0 distinct width changes; expected width changes during iframe resize.`);
+}
+
 export const ExperimentalSuites = freezeSuites([
     {
         name: "TodoMVC-LocalStorage",
@@ -193,6 +206,9 @@ export const ExperimentalSuites = freezeSuites([
             new BenchmarkTestStep("ReduceWidthIn5Steps", async (page) => {
                 const widths = [768, 704, 640, 560, 480];
                 const MATCH_MEDIA_QUERY_BREAKPOINT = 640;
+                const carouselResizeObservations = observeRecipeCarouselResizeObservations(page);
+                // Seed the baseline width before the synchronous width changes below.
+                await carouselResizeObservations.ready;
 
                 // The matchMedia query is "(max-width: 640px)"
                 // Starting from a width > 640px, we'll only get 1 event when crossing to <= 640px
@@ -209,6 +225,7 @@ export const ExperimentalSuites = freezeSuites([
                 }
 
                 await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+                reportRecipeCarouselResizeObservations("ReduceWidthIn5Steps", carouselResizeObservations);
             }),
             new BenchmarkTestStep("ScrollToChatAndSendMessages", async (page) => {
                 const cvWorkComplete = new Promise((resolve) => {
@@ -252,6 +269,9 @@ export const ExperimentalSuites = freezeSuites([
             new BenchmarkTestStep("IncreaseWidthIn5Steps", async (page) => {
                 const widths = [560, 640, 704, 768, 800];
                 const MATCH_MEDIA_QUERY_BREAKPOINT = 704;
+                const carouselResizeObservations = observeRecipeCarouselResizeObservations(page);
+                // Seed the baseline width before the synchronous width changes below.
+                await carouselResizeObservations.ready;
 
                 // The matchMedia query is "(max-width: 640px)"
                 // Starting from a width <= 640px, we'll get 1 event when crossing back to > 640px.
@@ -268,6 +288,7 @@ export const ExperimentalSuites = freezeSuites([
                 }
 
                 await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+                reportRecipeCarouselResizeObservations("IncreaseWidthIn5Steps", carouselResizeObservations);
             }),
         ],
     },

resources/benchmark-runner.mjs

@@ -163,6 +163,46 @@ class PageElement {
         this.#node.scrollIntoView(options);
     }
 
+    observeResizeEvents() {
+        const contentWindow = this.#node.ownerDocument.defaultView;
+        const state = {
+            count: 0,
+            lastWidth: null,
+        };
+        let markReady;
+        // Resolves on the first delivery so callers can seed a baseline before resizing.
+        const ready = new Promise((resolve) => {
+            markReady = resolve;
+        });
+        const observer = new contentWindow.ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const contentBoxSize = entry.contentBoxSize;
+                const inlineSize = Array.isArray(contentBoxSize) ? contentBoxSize[0]?.inlineSize : contentBoxSize?.inlineSize;
+                const width = inlineSize ?? entry.contentRect.width;
+                // The first delivery seeds the baseline width without counting it as a change.
+                if (state.lastWidth === null) {
+                    state.lastWidth = width;
+                    markReady();
+                    continue;
+                }
+                if (width === state.lastWidth)
+                    continue;
+                state.count++;
+                state.lastWidth = width;
+            }
+        });
+        observer.observe(this.#node);
+        return {
+            ready,
+            get count() {
+                return state.count;
+            },
+            disconnect() {
+                observer.disconnect();
+            },
+        };
+    }
+
     dispatchEvent(eventName, options = NATIVE_OPTIONS, eventType = Event) {
         if (eventName === "submit")
             // FIXME FireFox doesn't like `new Event('submit')

tests/unittests/benchmark-runner.mjs

@@ -257,3 +257,137 @@ describe("BenchmarkRunner", () => {
         });
     });
 });
+
+describe("PageElement", () => {
+    async function withPageElement(configureFrame, callback) {
+        let fixtureNode;
+        let result;
+        const runner = new BenchmarkRunner(
+            [
+                {
+                    name: "PageElement fixture",
+                    enabled: true,
+                    url: "about:blank",
+                    async prepare(page) {
+                        result = await callback(page.getElementById("resize-target"), fixtureNode);
+                    },
+                    tests: [],
+                },
+            ],
+            {}
+        );
+        sinon.stub(SuiteRunner.prototype, "_loadFrame").callsFake(async function () {
+            fixtureNode = configureFrame(this.frame);
+        });
+        sinon.stub(SuiteRunner.prototype, "_runSuite").callsFake(async () => {});
+        await runner.runAllSuites();
+        return result;
+    }
+
+    describe("observeResizeEvents", () => {
+        // A fake ResizeObserver drives deliveries synchronously for exact-count assertions.
+        async function createTracker() {
+            let deliver;
+            class FakeResizeObserver {
+                constructor(callback) {
+                    deliver = (...widths) => callback(widths.map((width) => ({ contentBoxSize: [{ inlineSize: width }] })));
+                }
+                observe() {}
+                disconnect() {}
+            }
+            return withPageElement(
+                (frame) => {
+                    Object.defineProperty(frame.contentWindow, "ResizeObserver", { configurable: true, value: FakeResizeObserver });
+                    const node = frame.contentDocument.createElement("div");
+                    node.id = "resize-target";
+                    frame.contentDocument.body.appendChild(node);
+                    return node;
+                },
+                (element) => ({
+                    resizeEvents: element.observeResizeEvents(),
+                    deliver: (...widths) => deliver(...widths),
+                })
+            );
+        }
+
+        it("treats the first delivery as the baseline without counting it", async () => {
+            const { resizeEvents, deliver } = await createTracker();
+            deliver(200);
+            await resizeEvents.ready;
+            expect(resizeEvents.count).to.equal(0);
+        });
+
+        it("counts each distinct width change exactly once", async () => {
+            const { resizeEvents, deliver } = await createTracker();
+            deliver(200); // seed
+            deliver(300);
+            deliver(400);
+            deliver(500);
+            expect(resizeEvents.count).to.equal(3);
+        });
+
+        it("does not count deliveries that report the same width", async () => {
+            const { resizeEvents, deliver } = await createTracker();
+            deliver(200); // seed
+            deliver(300);
+            deliver(300);
+            deliver(300);
+            expect(resizeEvents.count).to.equal(1);
+        });
+    });
+    describe("observeResizeEvents with a real ResizeObserver", () => {
+        // border-box width minus 20px padding and 10px border on each side.
+        const BORDER_BOX_INSET = 60;
+
+        function appendBox(document, borderBoxWidth) {
+            const div = document.createElement("div");
+            div.id = "resize-target";
+            div.style.cssText = `box-sizing: border-box; padding: 20px; border: 10px solid black; position: absolute; top: -9999px; left: -9999px; height: 50px; width: ${borderBoxWidth}px;`;
+            document.body.appendChild(div);
+            return div;
+        }
+
+        // Resolves once a probe observer sees the expected content-box width. The
+        // tracker is created first, so it is notified first in the same frame.
+        function waitForContentWidth(element, expectedWidth, timeoutMs = 2000) {
+            return new Promise((resolve, reject) => {
+                let observer;
+                const timeout = setTimeout(() => {
+                    observer.disconnect();
+                    reject(new Error(`Timed out waiting for content-box width ${expectedWidth}px`));
+                }, timeoutMs);
+                const ResizeObserver = element.ownerDocument.defaultView.ResizeObserver;
+                observer = new ResizeObserver((entries) => {
+                    for (const entry of entries) {
+                        const contentBoxSize = entry.contentBoxSize;
+                        const inlineSize = Array.isArray(contentBoxSize) ? contentBoxSize[0]?.inlineSize : contentBoxSize?.inlineSize;
+                        const width = inlineSize ?? entry.contentRect.width;
+                        if (width === expectedWidth) {
+                            clearTimeout(timeout);
+                            observer.disconnect();
+                            resolve();
+                            return;
+                        }
+                    }
+                });
+                observer.observe(element);
+            });
+        }
+
+        it("counts each distinct width change exactly once", async () => {
+            await withPageElement(
+                (frame) => appendBox(frame.contentDocument, 200),
+                async (element, div) => {
+                    const resizeEvents = element.observeResizeEvents();
+                    await resizeEvents.ready;
+                    div.style.width = "300px";
+                    await waitForContentWidth(div, 300 - BORDER_BOX_INSET);
+                    div.style.width = "400px";
+                    await waitForContentWidth(div, 400 - BORDER_BOX_INSET);
+                    expect(resizeEvents.count).to.equal(2);
+                    resizeEvents.disconnect();
+                }
+            );
+        });
+    });
+});