1. Why Layout Failures Pass Functional Tests A component can render successfully, remain clickable, and display correct data while CSS Grid places its text into a 40-pixel column or hides every working panel at one specific breakpoint.
Functional correctness does not prove visual usability.
2. Geometry Contracts For critical surfaces, test measurable browser properties: - computed column count; - content width relative to row width; - horizontal overflow; - visibility of the expected panel; - whether fixed navigation overlaps content.
These assertions are especially effective at detecting CSS specificity regressions.
3. Breakpoint Matrix Testing one desktop and one mobile viewport is not enough. A practical matrix includes boundary sizes such as 1920, 1440, 1280, 1024, tablet 834, and mobile 390/320.
The most valuable checks sit immediately before and after media-query thresholds.