1
Flexbox Properties
Monitors flex-direction, justify-content, align-items, flex-wrap, gap, and order changes that alter element arrangement.
50 test cases
Layout
Layout changes are among the most disruptive visual regressions. A shifted element, a broken grid, or a collapsed margin can completely alter the user experience. Delta-QA analyzes the spatial relationships between elements to catch every layout shift.
What we detect
2
CSS Grid Changes
Detects grid-template modifications, track sizing changes, grid-area reassignments, and auto-placement behavior shifts.
3
Position & Stacking
Catches position property changes (static, relative, absolute, fixed, sticky) and their impact on element placement.
4
Margin & Padding
Tracks spacing changes including margin collapse scenarios that can cause unexpected layout shifts.
5
Box Model & Sizing
Detects width, height, min/max constraints, and box-sizing changes that affect element dimensions.
6
Float & Clear
Identifies float-based layout changes and clearfix behavior that can cause content reflow.
Live example
See exactly what Delta-QA detects. Compare the two versions side by side.
Before
After
Real-world scenarios
🎯
The padding that shifts everything
A developer fixes an alignment bug on the sign-up form and touches the global input padding. Side effect: the payment form ends up with larger fields, and the "Pay" button drops below the fold. On mobile, it's worse — the form overflows the screen. QA checked the sign-up form (the one that was modified), not the payment form. Delta-QA compares screenshots of all pages and highlights the shift on the payment form — the "Pay" button disappearing from the viewport is immediately visible in the diff.
⚠️
The flexbox that reverses order
A developer refactors the pricing page CSS and accidentally reverses the display order of the plans. The three tiers now appear Enterprise, Pro, Free — from right to left. Visitors see the most expensive option first, the psychological anchoring is inverted. The release was rushed, they tested the bare minimum: all three plans are present, clicks work, ship it. Delta-QA compares screenshots and detects the blocks have swapped positions — the reversal is clearly visible in the diff.
💡
The silent margin collapse
A developer adds overflow: hidden on a container to fix an overflow bug. Unexpected consequence: CSS margin collapsing breaks and the space between each section suddenly doubles. The page grows 200px longer, sections look disconnected from each other. The team trusted the automated test pipeline, which doesn't cover visuals. Delta-QA compares screenshots and highlights the doubled spacing between sections — the entire layout shift stands out in the diff.
Ready to catch every visual regression?
Download Delta-QA and start detecting CSS changes in your web pages — no code required.