Geometric Leak Test Suite

1. Responsive Grid with min() Function

Grid uses minmax(min(300px, 100%), 1fr) to prevent overflow on ultra-small screens (320px).

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

2. Long Unbreakable Text

Tests overflow-wrap: anywhere and word-break: break-word for long strings.

This is a test with a very long unbreakable URL: https://www.example.com/very/long/path/that/might/cause/horizontal/overflow/on/mobile/devices/if/not/properly/handled

supercalifragilisticexpialidociousthisisaverylongwordthatmightcauseoverflowissuesifnotproperlyhandledwithwordbreakandoverflowwrap

3. Media Element Constraints

All media elements (img, svg, video) have max-width: 100% to prevent overflow.

4. Transform Animation Containment

Animated elements use transform: translateX() but stay within overflow: hidden container.

5. Flex Container with Long Content

Flex items with min-width: 0 allow content to wrap and shrink properly.

Normal flex item with reasonable content that should wrap nicely.

Flex item with very long unbreakable content: thisisaverylongwordthatmightcauseissuesifminwidthisnotsetto0

Another normal flex item to test the wrapping behavior.

6. Box Shadow Containment

Elements with large box-shadow values don't cause horizontal overflow.

This element has a large box-shadow (60px blur) but should not cause overflow.

7. Negative Margin Test

Negative margins use percentage values, not viewport units, to avoid scrollbar width issues.

Full-bleed element using percentage-based negative margins (not vw units)