Horizontal Overflow Containment Test
Viewport Testing
Resize browser window to test different viewports
Test 1: Basic Content Containment
Standard content should never overflow viewport
This is a standard paragraph that should always stay within the viewport boundaries, regardless of screen size.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Test 2: Grid Layout with Auto-Fit
Grid with minmax(min(250px, 100%), 1fr) should adapt to small viewports
Test 3: Animated Elements
Hover animations should not cause overflow
Hover over this element to see animation (translateX(10px))
Another animated element that should stay contained
Test 4: Off-Canvas Navigation
Test the header navigation (toggle hamburger menu)
Open and close the mobile navigation menu using the hamburger icon in the header. The nav drawer should not cause horizontal scrolling.
Test 5: Long Unbreakable Content
Long URLs and text should wrap or truncate
URL: https://www.example.com/this-is-a-very-long-url-that-should-wrap-or-break-appropriately-on-small-screens
Code: thisisaverylongstringwithoutspacesthatmightcauseoverflowifnothandledproperly
Test 6: Nested Containers
Nested divs should all respect max-width: 100%
Triple nested content - all containers should stay within viewport
✓ Expected Results
- Viewport Width: Should match window.innerWidth
- Document Width: Should equal or be less than viewport width
- Body Width: Should equal or be less than viewport width
- Max Child Width: Should not exceed viewport width
- ScrollX: Should remain at 0
- Status: Should show "NO OVERFLOW ✓" in green
Viewport Test Coverage
- 320px - iPhone SE (smallest modern mobile)
- 375px - iPhone 13/14 standard
- 414px - iPhone Plus models
- 768px - iPad portrait
- 1024px - iPad landscape / small desktop