Track Responsive-Design carousel resize events

[issackjohn]

Summary

Tracks the Responsive-Design recipe carousel's ResizeObserver activity during the two iframe width-change steps.

• Adds PageElement.observeResizeEvents() to count distinct content-box width changes.
• Instruments ReduceWidthIn5Steps and IncreaseWidthIn5Steps on the same .carousel element observed by the component.
• Reports the observed count in the browser console and highlights an unexpected zero count.

Motivation

This follows up on the upstream review request to make carousel resize activity visible for cross-browser comparison while providing strict tests for the deterministic counting behavior.

Implementation details

• The first observer delivery establishes the baseline and is not counted as a resize.
• Widths come from contentBoxSize, with contentRect.width as the compatibility fallback.
• Each workload step waits for the baseline before changing the iframe width.
• Repeated deliveries of the same width are ignored.
• The observer is disconnected after pending resize deliveries have had time to run.

Validation

• Unit tests cover baseline initialization, distinct width changes, and duplicate-width deliveries.
• Linters and Chrome, Firefox, and Safari CI checks pass.

Related to #54.

[Copilot]

Pull request overview

This PR adds lightweight instrumentation to the benchmark runner to observe ResizeObserver-driven width changes on a specific element (the Responsive-Design recipe carousel) during iframe width-change workload steps, surfacing missing ResizeObserver delivery via browser warnings without changing the step boundaries.

Changes:

• Added a generic PageElement.observeResizeEvents() helper to count delivered width changes and allow explicit disconnect.
• Updated the Responsive-Design ReduceWidthIn5Steps / IncreaseWidthIn5Steps steps to observe .carousel and console.warn if no resize events were delivered.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
resources/benchmark-runner.mjs	Adds PageElement.observeResizeEvents() to track ResizeObserver deliveries and expose a disconnectable counter.
experimental/tests.mjs	Uses the new helper in Responsive-Design width-change steps and warns when no carousel resize events are observed.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.