Browser Rendering Engine

# Browser Rendering Engine PRD

## Overview
Build a browser rendering engine from scratch that parses HTML and CSS, constructs DOM and CSSOM trees, computes styles, performs layout calculations, and paints the result to an HTML5 Canvas or image output.

## Requirements
- HTML parser: handle opening/closing tags, attributes, self-closing tags, text nodes, and HTML comments
- CSS parser supporting selectors: tag, class (.foo), id (#bar), descendant (div p), child (div > p), attribute ([href])
- CSS properties: display, width, height, margin, padding, border, color, background-color, font-size, font-weight, text-align, position
- DOM tree construction from parsed HTML with proper parent-child relationships
- CSSOM construction from parsed CSS stylesheets (inline <style> and element style attributes)
- Selector specificity calculation following CSS spec (id > class > tag)
- CSS cascade: apply rules in correct order based on specificity, source order, and inheritance
- Style computation: merge inherited styles from parent with element's own matched rules
- Layout engine: block layout with vertical margin collapsing between adjacent blocks
- Layout engine: inline layout with automatic line breaking when content exceeds container width
- Box model implementation: content box + padding + border + margin with correct sizing
- Render tree construction: include visible elements, skip elements with display:none
- Paint to HTML5 Canvas (2D context) or output as a PNG/BMP image file
- Support position: relative and position: absolute (positioned relative to nearest positioned ancestor)
- Handle percentage-based widths relative to parent container width
- Viewport sizing: render into a configurable viewport width and height
- Default user-agent stylesheet providing sensible defaults (headings are bold/larger, paragraphs have margins, etc.)
- Render these HTML elements correctly: h1-h6, p, div, span, ul/ol/li, a, img (as placeholder boxes with alt text)
- CSS shorthand expansion: margin/padding shorthand (e.g., margin: 10px 20px expands to top/right/bottom/left)
- CLI interface: takes an HTML file path as input and outputs the rendered image or opens a canvas preview

## Tech Stack
- TypeScript/Node.js, Python, Go, Rust, or C++
- HTML5 Canvas API or image generation library for painting output
- No HTML/CSS parsers allowed — build parsers from scratch
- No browser rendering libraries (no Puppeteer, no WebKit bindings)

## Scoring Criteria
- **Functional (40%)**: HTML and CSS parse correctly, layout produces correct box positions, painting renders visible output
- **Quality (20%)**: Clean separation of parsing, styling, layout, and painting phases; handles malformed HTML gracefully
- **Fidelity (25%)**: All features implemented including specificity, inheritance, margin collapse, shorthand expansion, positioning
- **Speed (15%)**: Time bonus