Content Reflow Test — How It Works
This test detects when the content of a web page does not reorganize correctly (reflow) when the viewport is reduced to 320px wide by 256px tall, generating content clipping (cut) or element overlap (overlap) issues.
Test Objective
Verify that web page content reorganizes correctly when:
The viewport is 320px wide and 256px tall
Content must adapt without:
- Being clipped (cut): Elements whose content is cut off by viewport boundaries
- Overlapping (overlap): Visible elements that overlap each other
Step-by-Step Process
The test executes a sequence of 6 automated steps:
Step 1: Set Base Viewport
The browser is configured with a window size of 1280x1024 pixels
This is the starting point before applying zoom
Step 2: Capture Baseline Screenshot
A screenshot of the initial page state is captured
This image is used as a reference for subsequent comparisons
Step 3: Apply 400% Zoom
400% zoom is applied in the browser, effectively reducing the viewport by 4x
Important calculation:
- 1280px ÷ 4 = 320px wide
- 1024px ÷ 4 = 256px tall
The effective viewport becomes 320x256 pixels
Step 4: Detect Clipped Elements (Cut)
This is the critical validation step for clipped elements
The page is visually analyzed using AI vision analysis
Elements whose content is clipped by viewport boundaries are detected
Detected elements are temporarily stored for later consolidation
Step 5: Detect Overlapping Elements (Overlap)
This is the critical validation step for overlapping elements
The page is visually analyzed using AI vision analysis
Visible elements that overlap each other are detected (e.g., text over images, buttons over text, etc.)
Detected elements are temporarily stored for later consolidation
Step 6: Consolidate and Report Issues
Elements with clipping and/or overlap issues are consolidated
An element may have both issues (clipping and overlap), in which case it is reported once with both issues listed
An individual report is generated for each affected element
Only the types of issues that actually occur are reported (if there is no clipping, clipping is not reported; if there is no overlap, overlap is not reported)
Success Criteria
Test PASSES when:
There are NO elements clipped by viewport boundaries at 320x256px
There are NO visible elements overlapping each other at 320x256px
Content automatically reorganizes (reflows) to fit the 320px width
All elements are accessible and visible without clipping or overlaps
Test FAILS when:
Clipped elements (cut): Element content is cut off by viewport boundaries and not fully displayed
Overlapping elements (overlap): Visible elements overlap each other (text over images, buttons over text, etc.)
The user cannot fully access the content due to clipping or overlaps
Exceptions
This criterion does NOT apply to:
Images requiring two-dimensional layout (maps, diagrams)
Complex data tables
Embedded videos or games
Elements that are not visible to the user (hidden elements)
How to Run the Test Manually
To reproduce the test manually in the browser:
Open the page to be tested in Chrome
Open DevTools (F12 or right-click → Inspect)
Set the viewport to 320px wide:
- Go to the "Console" tab or use responsive mode (Ctrl+Shift+M)
- Adjust the viewport width to exactly 320px
- Adjust the height to 256px if possible
Visually inspect:
- Check if any elements have content clipped by viewport boundaries
- Check if any visible elements overlap each other (text over images, buttons over text, etc.)
Document affected elements:
- Note which elements are clipped
- Note which elements overlap
- Capture screenshots as evidence
Report Format
When the test detects issues, it generates a report with the following structure:
Title:
"The content on the page does not reflow correctly"
Description:
"Content is not reflowed correctly at 320px:
- the "[name of clipped element]" is cropped and not fully displayed.
- the "[name of overlapping element]" is overlaps."
WCAG Checkpoint:
1.4.10 - Reflow
Issue Type:
Zoom
Steps Taken:
- Using Chrome browser, open the URL: [page URL]
- Configure the viewport to 320 px width
- Note how the content is displayed
Actual Result:
Content is not reflowed correctly at 320px:
- the "[element name]" is cropped and not fully displayed.
- the "[element name]" is overlaps.
Expected Result:
All text content should reflow correctly at 320x256px viewport without being cut off, without overlapping other elements.
Known Limitations
The test uses AI vision analysis, so there may be false positives or false negatives in edge cases
Elements with dynamic or rapidly changing content may not be detected correctly
The test focuses on visible elements; hidden or off-viewport elements are not evaluated
Overlap detection may be affected by elements with transparencies or complex visual effects