Track Responsive-Design carousel resize events#57
Open
issackjohn wants to merge 6 commits into
Open
Conversation
issackjohn
force-pushed
the
track-responsive-carousel-resize-counts
branch
from
a286c76 to
414734a
Compare
There was a problem hiding this comment.
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/IncreaseWidthIn5Stepssteps to observe.carouselandconsole.warnif 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.
Initialize lastWidth from the first ResizeObserver callback (content-box) instead of getBoundingClientRect() (border-box). This avoids miscounting the initial notification as a width change and removes a synchronous layout read. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Addresses upstream review feedback to track the number of ResizeObserver deliveries so it can be verified across browsers (console.warn + a strict unittest). - Export PageElement and add a ready promise to observeResizeEvents() so callers can seed the baseline width before triggering resizes. - Responsive-Design width-change steps now seed before the synchronous width loop and log the delivered carousel resize count (warning when zero), making the per-browser count visible for comparison. - Add strict unittests for observeResizeEvents(): a deterministic suite driven by a fake ResizeObserver (seed-not-counted, distinct-change counting, duplicate-width guard, contentBoxSize array/object and contentRect fallbacks, ready promise, disconnect) plus a real-ResizeObserver suite using a probe observer to assert exact counts without timing flakiness. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-up for local issue 54.
This tracks ResizeObserver delivery for the Responsive-Design recipe carousel during the iframe width-change steps.
Implementation notes:
PageElement.observeResizeEvents()helper in the benchmark runner.ReduceWidthIn5StepsandIncreaseWidthIn5Stepsnow observe the recipe carousel during their width loops and warn if no carousel ResizeObserver events were delivered.This keeps the workload measurement boundaries unchanged while making missing carousel ResizeObserver work visible in browser logs.
Validation:
git diff --checkNote: local Node/npm tooling was not available in this shell, so browser CI should cover the end-to-end validation.