Implement box-sizing property #81

Phase 9: Advanced Layout#

Implement the box-sizing CSS property (content-box and border-box).

Current State#

• Layout always uses content-box behavior: width/height apply to the content area only
• box-sizing is not parsed or resolved in computed styles
• The UA stylesheet does not set box-sizing (browsers default to content-box, but many sites use box-sizing: border-box via reset stylesheets)

Requirements#

1. Parse box-sizing in css/values.rs or style/computed.rs:
   • content-box (default): width/height set the content area size; padding and border are added outside
   • border-box: width/height include padding and border; content area shrinks to fit
2. Resolve in computed styles: Add box_sizing field to ComputedStyle
3. Apply in layout: When box-sizing: border-box, subtract padding and border from the specified width/height to get the content area dimensions. Clamp content size to 0 if padding+border exceeds specified size.
4. Inherit: box-sizing is NOT inherited (per spec)

Files to Modify#

• crates/style/src/computed.rs — Add BoxSizing enum, resolve from CSS value
• crates/layout/src/lib.rs — Adjust width/height computation when border-box

Tests#

• box-sizing: content-box (default): width applies to content only
• box-sizing: border-box: width includes padding and border
• border-box with padding larger than width: content area clamps to 0
• Verify box-sizing is not inherited

Acceptance Criteria#

• box-sizing: content-box and border-box both work correctly
• Layout correctly adjusts content dimensions for border-box
• All tests pass, clippy clean, fmt clean