Reflow Lab 作成者: nguyenhann3492

Give your layout some pressure.

Reflow Lab is a reversible layout test bench for the page you are viewing. Select a text block or container, capture a baseline, then see how it behaves with content or space different from the original design.

Use a longer headline, an unbroken string, a paragraph, empty text or a custom sample. The trial changes existing text nodes while preserving their element structure. For a space trial, change the selected element's CSS width and max-width. The workbench measures the result and compares the current rendered dimensions with the baseline.

Features:
- Direct element selection and a parent-element action for reaching a containing region.
- Built-in text stress samples plus custom text of up to 600 characters in the input.
- Container-width trials from 160 to 1,600 pixels.
- Baseline/current dimensions and measured width/height differences.
- Detection of content extending beyond client dimensions and clipping under hidden/clip overflow.
- Possible sibling-rectangle overlap warnings, explicitly labelled for human review.
- Click an observation to locate the associated element.
- Undo trial and automatic restoration on close.
- Local JSON comparison export with the baseline, latest sample and up to 20 trial records.

Open the popup on an ordinary website and launch the workbench. Choose a text block for a content trial, or select a container for a width trial. Use Parent when a click selects a nested element. Apply a trial, inspect the measurements and observations, then undo. Measure takes a fresh sample after further page activity.

Container tests do not resize the browser viewport and do not emulate viewport media queries. Their purpose is to explore how the selected region handles a constrained width. Overflow and overlapping boxes may be intentional, so the workbench distinguishes measurements from review candidates rather than declaring every observation a defect.