Viewport units and percentage resolution #83

Phase 9: Advanced Layout#

Implement proper resolution of viewport-relative units (vw, vh, vmin, vmax) and percentage values against containing blocks.

Current State#

• CSS value types already include viewport units: vw, vh, vmin, vmax (parsed in css/values.rs)
• Percentage is a parsed CSS value type
• Length resolution in style/computed.rs converts px, pt, cm, mm, em, rem to px but does NOT resolve viewport units or percentages
• Layout does not pass viewport dimensions to style resolution
• Percentage widths/heights/margins/paddings are not resolved

Requirements#

1. Viewport unit resolution: Thread viewport width/height through style resolution so vw, vh, vmin, vmax resolve to px:

   • 1vw = 1% of viewport width
   • 1vh = 1% of viewport height
   • 1vmin = min(1vw, 1vh)
   • 1vmax = max(1vw, 1vh)

2. Percentage resolution for layout properties:

   • width percentage: resolves against containing block width
   • height percentage: resolves against containing block height (if definite), else auto
   • margin percentage (all sides): resolves against containing block WIDTH (per spec, even for top/bottom)
   • padding percentage (all sides): resolves against containing block WIDTH (per spec, even for top/bottom)
   • top/bottom percentage: containing block height
   • left/right percentage: containing block width

3. Containing block: For normal flow elements, the containing block is the content area of the nearest block-level ancestor

Files to Modify#

• crates/style/src/computed.rs — Accept viewport dimensions in resolution, handle vw/vh/vmin/vmax
• crates/layout/src/lib.rs — Pass viewport dimensions to style resolution; resolve percentages against containing block during layout

Tests#

• width: 50% resolves to half the containing block width
• margin: 10% resolves against containing block width (not height)
• width: 50vw resolves to half viewport width
• height: 100vh resolves to full viewport height
• font-size: 5vmin resolves to 5% of the smaller viewport dimension
• Nested percentage widths compound correctly

Acceptance Criteria#

• Viewport units (vw, vh, vmin, vmax) resolve correctly
• Percentage values for width, height, margin, padding resolve against correct containing block dimension
• All tests pass, clippy clean, fmt clean