Overflow Clipping Test Fixture

overflow: hidden (basic)

This text is inside a 200x60 box with overflow:hidden. Content beyond the boundary should be clipped. Extra text to force overflow behavior in this constrained container element.

overflow: hidden with border-radius

Content clipped to a rounded rectangle. The corners should be rounded and content outside should not be visible.

Circular clip (border-radius: 50%)

This content is clipped to a circle shape using border-radius 50% and overflow hidden.

Nested overflow with larger child

This inner div is 400x200 inside a 250x100 container. Only the visible portion should render. The gradient background helps visualize the clipping boundary.

Text overflow (nowrap)

Short text fits fine.

This is a much longer line of text that will definitely overflow the narrow container and should be clipped.

overflow: visible (for comparison)

This text overflows visibly beyond the dashed border. It is NOT clipped.