Cascade and computed style resolution #42

Description#

Implement the CSS cascade and computed style resolution in the style crate. For each DOM element, resolve the final computed value of every CSS property by applying the cascade.

Acceptance Criteria#

• Define a ComputedStyle struct with typed fields for CSS properties:
  • Display: display
  • Box model: margin-*, padding-*, border-*-width, border-*-style, border-*-color, width, height
  • Text: color, font-size, font-weight, font-style, font-family, text-align, text-decoration, line-height
  • Background: background-color
  • Position: position, top, right, bottom, left
  • Overflow: overflow
  • Visibility: visibility
• Implement the cascade algorithm:
  1. Collect all matching rules for an element (from selector matching)
  2. Sort by origin and specificity: user-agent < author < author !important
  3. For equal specificity, use source order (later wins)
  4. Apply inline styles (from style attribute) with appropriate specificity
• Implement property inheritance:
  • Inherited properties (color, font-size, font-family, line-height, text-align, etc.) inherit from parent's computed value
  • Non-inherited properties (margin, padding, border, width, height, display, etc.) reset to initial value
  • inherit, initial, unset keywords
• Define user-agent default stylesheet (the hardcoded defaults currently in layout crate)
• Resolve relative values:
  • em units relative to parent font-size
  • Percentages where applicable
• Provide API: resolve_styles(document, stylesheets) -> StyledDocument or similar
• Write tests for cascade ordering, specificity, inheritance, relative value resolution

Dependencies#

• CSS parser + value parsing
• Selector matching engine
• DOM crate

Implementation Notes#

• This replaces the hardcoded styles in the layout crate
• The layout crate will be updated to read from ComputedStyle instead of tag-based defaults