Overflow clipping (overflow: hidden/auto/scroll) #84

Phase 9: Advanced Layout#

Implement overflow clipping so content that exceeds a box's dimensions is clipped according to the overflow property.

Current State#

• Overflow enum (Visible, Hidden, Scroll, Auto) is parsed in computed styles
• Layout and rendering ignore overflow entirely — content is never clipped
• No clip rect tracking in the layout tree

Requirements#

1. overflow: hidden: Content outside the box's padding edge is clipped and invisible. No scroll mechanism.
2. overflow: visible (default): Content overflows freely — no clipping (current behavior).
3. overflow: auto/overflow: scroll: For this issue, implement clipping only (scroll bars are a separate issue). Content that overflows is clipped.
4. Clip rect propagation: During rendering, establish a clip rect for boxes with overflow != visible. Nested clip rects intersect.
5. Overflow creates a new block formatting context: An element with overflow other than visible establishes a new BFC (this prevents margin collapsing through it and contains floats).

Files to Modify#

• crates/layout/src/lib.rs — Store overflow on LayoutBox, track content overflow dimensions
• crates/render/src/lib.rs — Implement clip rect during painting; push/pop clip regions for nested overflow

Tests#

• overflow: hidden clips content that extends beyond the box
• overflow: visible does not clip (default behavior)
• Nested overflow containers: inner clip intersects with outer clip
• Text content that overflows is clipped correctly

Acceptance Criteria#

• overflow: hidden clips overflowing content correctly
• overflow: auto/scroll clip content (scroll bars deferred)
• overflow: visible continues to work as default
• All tests pass, clippy clean, fmt clean