CSS math functions: calc(), min(), max(), clamp() #122

Overview#

Implement CSS math functions per the CSS Values and Units Module Level 4 specification: calc(), min(), max(), and clamp().

Requirements#

Parsing#

• Parse calc() expressions with +, -, *, / operators
• Parse min() and max() with comma-separated arguments
• Parse clamp(min, val, max) as shorthand for max(min, min(val, max))
• Support nested math functions: calc(min(10px, 5vw) + 20px)
• Support mixed units where valid (e.g., calc(50% - 20px))
• Operator precedence: * and / before + and -
• Whitespace required around + and - operators (per spec)

Evaluation#

• Resolve math expressions during computed style resolution
• Handle unit conversions: px, em, rem, %, vw, vh
• Percentage resolution depends on context (width vs height vs font-size)
• Division by zero produces an invalid value
• calc() can be used anywhere a <length>, <percentage>, <number>, <angle>, or <time> is expected

Integration#

• Extend the CSS value parser in crates/css/ to recognize math functions
• Integrate with computed style resolution in crates/style/
• Integrate with layout in crates/layout/ for resolving percentage-based calc values

Acceptance Criteria#

• calc(100% - 20px) resolves correctly in width/height contexts
• min(10px, 5vw) returns the smaller value
• max(10px, 5vw) returns the larger value
• clamp(10px, 50%, 200px) clamps correctly
• Nested expressions evaluate correctly
• Mixed unit arithmetic works (px + em, % - px, etc.)
• Division by zero is handled gracefully
• All existing tests continue to pass
• New unit tests cover parsing, evaluation, and edge cases