From 702615dd26a1f798a3da5d0da7fefac92048a6a7 Mon Sep 17 00:00:00 2001
From: Universe <universe@grida.co>
Date: Wed, 8 Apr 2026 19:05:35 +0900
Subject: [PATCH] feat(htmlcss): add non-interactive form/input widget
 rendering (#643)

Add static rendering for HTML form controls (<input>, <button>,
<textarea>, <select>, <fieldset>) in the htmlcss embed renderer.

Widgets are detected during the collect phase, sized with intrinsic
defaults during layout, and painted with generic platform chrome
(Chromium-style neutral appearance) during the paint phase.

Supported widget types:
- TextField (text, password, email, search, url, tel, number)
- Checkbox and Radio (checked/unchecked states)
- PushButton (<button>, <input type=submit/reset/button>)
- TextArea (with rows/cols sizing)
- Menulist (<select> with dropdown caret)
- SliderHorizontal (<input type=range>)
- ColorWell (<input type=color>)

The WidgetAppearance enum follows Chromium's ControlPart naming and
is designed to evolve toward interactive rendering by adding transient
state fields (focused, hovered, pressed) without structural refactoring.
---
 crates/grida-canvas/src/htmlcss/collect.rs | 417 +++++++++++++++++++--
 crates/grida-canvas/src/htmlcss/layout.rs  |  49 +++
 crates/grida-canvas/src/htmlcss/mod.rs     | 184 +++++++++
 crates/grida-canvas/src/htmlcss/paint.rs   | 379 ++++++++++++++++++-
 crates/grida-canvas/src/htmlcss/style.rs   |  89 +++++
 5 files changed, 1084 insertions(+), 34 deletions(-)

diff --git a/crates/grida-canvas/src/htmlcss/collect.rs b/crates/grida-canvas/src/htmlcss/collect.rs
index a9d5750dc..2ad820e71 100644
--- a/crates/grida-canvas/src/htmlcss/collect.rs
+++ b/crates/grida-canvas/src/htmlcss/collect.rs
@@ -9,7 +9,7 @@ use crate::cg::prelude::*;
 use super::style::GradientStop;
 
 use csscascade::adapter::{self, HtmlElement};
-use csscascade::dom::{DemoDom, DemoNodeData};
+use csscascade::dom::{DemoDom, DemoNode, DemoNodeData};
 
 use style::color::{AbsoluteColor, ColorSpace};
 use style::dom::TElement;
@@ -150,6 +150,36 @@ fn to_roman(mut n: i32) -> String {
     result
 }
 
+// ─── HTML attribute helpers ─────────────────────────────────────────
+
+/// Get an HTML attribute value from a DOM node.
+fn get_element_attr(node: &DemoNode, name: &str) -> Option<String> {
+    match &node.data {
+        DemoNodeData::Element(data) => data
+            .attrs
+            .iter()
+            .find(|a| a.name.local.as_ref().eq_ignore_ascii_case(name))
+            .map(|a| a.value.to_string()),
+        _ => None,
+    }
+}
+
+/// Check if an HTML attribute is present (boolean attribute like `checked`, `disabled`).
+fn has_element_attr(node: &DemoNode, name: &str) -> bool {
+    get_element_attr(node, name).is_some()
+}
+
+/// Collect the concatenated text content of a DOM node's children (shallow).
+fn collect_text_content(dom: &DemoDom, node: &DemoNode) -> String {
+    let mut text = String::new();
+    for child_id in &node.children {
+        if let DemoNodeData::Text(t) = &dom.node(*child_id).data {
+            text.push_str(t);
+        }
+    }
+    text
+}
+
 fn collect_element(element: HtmlElement) -> StyledElement {
     collect_element_with_counter(element, &mut None)
 }
@@ -214,10 +244,13 @@ fn collect_element_with_counter(
         None
     };
 
-    // Collect children, merging consecutive inline content into InlineGroups
+    // ── Widget detection (form controls) ──
     let dom = adapter::dom();
     let node_data = dom.node(element.node_id());
 
+    let is_void_widget = detect_widget(&tag, node_data, dom, &mut el);
+
+    // Collect children, merging consecutive inline content into InlineGroups
     let mut pending_inline: Vec<InlineRunItem> = Vec::new();
     let parent_text_align = el.font.text_align;
     let parent_font = el.font.clone();
@@ -234,40 +267,46 @@ fn collect_element_with_counter(
         }));
     }
 
-    for child_id in &node_data.children {
-        let child_node = dom.node(*child_id);
-        match &child_node.data {
-            DemoNodeData::Text(text) => {
-                let processed = process_whitespace(text, parent_white_space);
-                if !processed.is_empty() {
-                    pending_inline.push(InlineRunItem::Text(TextRun {
-                        text: processed,
-                        font: parent_font.clone(),
-                        color: parent_color,
-                        decoration: None,
-                    }));
-                }
-            }
-            DemoNodeData::Element(_) => {
-                let child_el = HtmlElement::from_node_id(*child_id);
-                let child = collect_element_with_counter(child_el, &mut child_counter);
-                if child.display == types::Display::None {
-                    continue;
+    // Void widget elements (<input>) have no DOM children to collect.
+    if !is_void_widget {
+        for child_id in &node_data.children {
+            let child_node = dom.node(*child_id);
+            match &child_node.data {
+                DemoNodeData::Text(text) => {
+                    let processed = process_whitespace(text, parent_white_space);
+                    if !processed.is_empty() {
+                        pending_inline.push(InlineRunItem::Text(TextRun {
+                            text: processed,
+                            font: parent_font.clone(),
+                            color: parent_color,
+                            decoration: None,
+                        }));
+                    }
                 }
+                DemoNodeData::Element(_) => {
+                    let child_el = HtmlElement::from_node_id(*child_id);
+                    let child = collect_element_with_counter(child_el, &mut child_counter);
+                    if child.display == types::Display::None {
+                        continue;
+                    }
 
-                if child.display == types::Display::Inline
-                    || child.display == types::Display::InlineBlock
-                {
-                    // Flatten inline element's content into the pending items
-                    // (Chromium: InlineItemsBuilder flattens DOM → kOpenTag/kText/kCloseTag)
-                    collect_inline_items(&child, &mut pending_inline);
-                } else {
-                    // Block child — flush pending inline content first
-                    flush_inline_group(&mut pending_inline, parent_text_align, &mut el.children);
-                    el.children.push(StyledNode::Element(child));
+                    // Widgets with intrinsic sizes need their own Taffy node
+                    // for sizing to work — don't flatten them into inline groups.
+                    let is_inline = child.display == types::Display::Inline
+                        || child.display == types::Display::InlineBlock;
+                    if is_inline && !child.widget.is_widget() {
+                        collect_inline_items(&child, &mut pending_inline);
+                    } else {
+                        flush_inline_group(
+                            &mut pending_inline,
+                            parent_text_align,
+                            &mut el.children,
+                        );
+                        el.children.push(StyledNode::Element(child));
+                    }
                 }
+                _ => {}
             }
-            _ => {} // comments, doctypes
         }
     }
 
@@ -277,6 +316,320 @@ fn collect_element_with_counter(
     el
 }
 
+// ─── Widget (form control) detection ────────────────────────────────
+
+/// Chromium placeholder color (#757575).
+const PLACEHOLDER_COLOR: CGColor = CGColor {
+    r: 117,
+    g: 117,
+    b: 117,
+    a: 255,
+};
+
+/// Detect form control elements and populate `StyledElement::widget`.
+///
+/// Returns `true` for void elements (like `<input>`) whose DOM children
+/// should be skipped.
+fn detect_widget(tag: &str, node_data: &DemoNode, dom: &DemoDom, el: &mut StyledElement) -> bool {
+    match tag {
+        "input" => {
+            detect_input_widget(node_data, el);
+            true // <input> is a void element
+        }
+        "textarea" => {
+            detect_textarea_widget(node_data, dom, el);
+            true // skip text children — value already injected
+        }
+        "select" => {
+            detect_select_widget(node_data, dom, el);
+            true // skip <option> children — selected text already injected
+        }
+        "button" => {
+            let disabled = has_element_attr(node_data, "disabled");
+            el.widget = WidgetAppearance::PushButton { disabled };
+            if el.display == types::Display::Inline {
+                el.display = types::Display::InlineBlock;
+            }
+            // Default button padding if UA didn't provide any
+            apply_default_button_padding(el);
+            false // <button> has normal DOM children
+        }
+        _ => false,
+    }
+}
+
+fn detect_input_widget(node_data: &DemoNode, el: &mut StyledElement) {
+    let input_type = get_element_attr(node_data, "type")
+        .unwrap_or_else(|| "text".to_string())
+        .to_ascii_lowercase();
+    let disabled = has_element_attr(node_data, "disabled");
+
+    if el.display == types::Display::Inline {
+        el.display = types::Display::InlineBlock;
+    }
+
+    match input_type.as_str() {
+        "checkbox" => {
+            el.widget = WidgetAppearance::Checkbox {
+                checked: has_element_attr(node_data, "checked"),
+                disabled,
+            };
+        }
+        "radio" => {
+            el.widget = WidgetAppearance::Radio {
+                checked: has_element_attr(node_data, "checked"),
+                disabled,
+            };
+        }
+        "range" => {
+            let min = get_element_attr(node_data, "min")
+                .and_then(|v| v.parse().ok())
+                .unwrap_or(0.0);
+            let max = get_element_attr(node_data, "max")
+                .and_then(|v| v.parse().ok())
+                .unwrap_or(100.0);
+            let value = get_element_attr(node_data, "value")
+                .and_then(|v| v.parse().ok())
+                .unwrap_or((min + max) / 2.0);
+            el.widget = WidgetAppearance::SliderHorizontal {
+                min,
+                max,
+                value,
+                disabled,
+            };
+        }
+        "color" => {
+            let hex = get_element_attr(node_data, "value").unwrap_or_else(|| "#000000".into());
+            let color = parse_hex_color(&hex).unwrap_or(CGColor::BLACK);
+            el.widget = WidgetAppearance::ColorWell {
+                value: color,
+                disabled,
+            };
+        }
+        "submit" | "reset" | "button" => {
+            let label =
+                get_element_attr(node_data, "value").or_else(|| match input_type.as_str() {
+                    "submit" => Some("Submit".into()),
+                    "reset" => Some("Reset".into()),
+                    _ => None,
+                });
+            el.widget = WidgetAppearance::PushButton { disabled };
+            apply_default_button_padding(el);
+            if let Some(text) = label {
+                inject_synthetic_text(el, &text, el.color);
+            }
+        }
+        "hidden" => {
+            el.display = types::Display::None;
+        }
+        _ => {
+            let text_type = match input_type.as_str() {
+                "password" => TextFieldType::Password,
+                "email" => TextFieldType::Email,
+                "search" => TextFieldType::Search,
+                "url" => TextFieldType::Url,
+                "tel" => TextFieldType::Tel,
+                "number" => TextFieldType::Number,
+                _ => TextFieldType::Text,
+            };
+            let placeholder = get_element_attr(node_data, "placeholder");
+            let value = get_element_attr(node_data, "value");
+            let size = get_element_attr(node_data, "size")
+                .and_then(|v| v.parse().ok())
+                .unwrap_or(20u32);
+
+            let display_text = if let Some(ref v) = value {
+                if text_type == TextFieldType::Password {
+                    Some(("\u{2022}".repeat(v.len()), el.color))
+                } else {
+                    Some((v.clone(), el.color))
+                }
+            } else {
+                placeholder.as_ref().map(|p| (p.clone(), PLACEHOLDER_COLOR))
+            };
+
+            if let Some((text, color)) = display_text {
+                inject_synthetic_text(el, &text, color);
+            }
+
+            el.widget = WidgetAppearance::TextField {
+                input_type: text_type,
+                placeholder,
+                value,
+                size,
+                disabled,
+            };
+            apply_default_text_control_padding(el);
+        }
+    }
+}
+
+fn detect_textarea_widget(node_data: &DemoNode, dom: &DemoDom, el: &mut StyledElement) {
+    let placeholder = get_element_attr(node_data, "placeholder");
+    let disabled = has_element_attr(node_data, "disabled");
+    let rows = get_element_attr(node_data, "rows")
+        .and_then(|v| v.parse().ok())
+        .unwrap_or(2u32);
+    let cols = get_element_attr(node_data, "cols")
+        .and_then(|v| v.parse().ok())
+        .unwrap_or(20u32);
+
+    let text_content = collect_text_content(dom, node_data);
+    let value = if text_content.trim().is_empty() {
+        None
+    } else {
+        Some(text_content)
+    };
+
+    let display_text = if let Some(ref v) = value {
+        Some((v.clone(), el.color))
+    } else {
+        placeholder.as_ref().map(|p| (p.clone(), PLACEHOLDER_COLOR))
+    };
+
+    if let Some((text, color)) = display_text {
+        inject_synthetic_text(el, &text, color);
+    }
+
+    if el.display == types::Display::Inline {
+        el.display = types::Display::InlineBlock;
+    }
+
+    el.widget = WidgetAppearance::TextArea {
+        placeholder,
+        value,
+        rows,
+        cols,
+        disabled,
+    };
+    apply_default_text_control_padding(el);
+}
+
+fn detect_select_widget(node_data: &DemoNode, dom: &DemoDom, el: &mut StyledElement) {
+    let disabled = has_element_attr(node_data, "disabled");
+    let mut selected_text: Option<String> = None;
+    let mut first_option_text: Option<String> = None;
+
+    for child_id in &node_data.children {
+        let child_node = dom.node(*child_id);
+        if let DemoNodeData::Element(data) = &child_node.data {
+            let local = data.name.local.as_ref();
+            if local.eq_ignore_ascii_case("option") {
+                let text = collect_text_content(dom, child_node).trim().to_string();
+                if first_option_text.is_none() && !text.is_empty() {
+                    first_option_text = Some(text.clone());
+                }
+                let is_selected = data
+                    .attrs
+                    .iter()
+                    .any(|a| a.name.local.as_ref().eq_ignore_ascii_case("selected"));
+                if is_selected && !text.is_empty() {
+                    selected_text = Some(text);
+                    break;
+                }
+            }
+            if local.eq_ignore_ascii_case("optgroup") {
+                for gc_id in &child_node.children {
+                    let gc = dom.node(*gc_id);
+                    if let DemoNodeData::Element(gc_data) = &gc.data {
+                        if gc_data.name.local.as_ref().eq_ignore_ascii_case("option") {
+                            let text = collect_text_content(dom, gc).trim().to_string();
+                            if first_option_text.is_none() && !text.is_empty() {
+                                first_option_text = Some(text.clone());
+                            }
+                            let is_selected = gc_data
+                                .attrs
+                                .iter()
+                                .any(|a| a.name.local.as_ref().eq_ignore_ascii_case("selected"));
+                            if is_selected && !text.is_empty() {
+                                selected_text = Some(text);
+                                break;
+                            }
+                        }
+                    }
+                }
+                if selected_text.is_some() {
+                    break;
+                }
+            }
+        }
+    }
+
+    let display_text = selected_text.clone().or(first_option_text);
+    if let Some(ref text) = display_text {
+        inject_synthetic_text(el, text, el.color);
+    }
+
+    if el.display == types::Display::Inline {
+        el.display = types::Display::InlineBlock;
+    }
+
+    el.widget = WidgetAppearance::Menulist {
+        selected_text: display_text,
+        disabled,
+    };
+    apply_default_text_control_padding(el);
+}
+
+/// Inject synthetic text content into a styled element as an InlineGroup child.
+/// Apply default button padding when UA stylesheet didn't provide any.
+/// Chromium default: ~6px 16px (block, inline).
+fn apply_default_button_padding(el: &mut StyledElement) {
+    let has_padding = el.padding.top > 0.0
+        || el.padding.right > 0.0
+        || el.padding.bottom > 0.0
+        || el.padding.left > 0.0;
+    if !has_padding {
+        el.padding = EdgeInsets {
+            top: 4.0,
+            right: 16.0,
+            bottom: 4.0,
+            left: 16.0,
+        };
+    }
+}
+
+/// Apply default text control padding when UA stylesheet didn't provide any.
+/// Chromium default: ~1px 2px.
+fn apply_default_text_control_padding(el: &mut StyledElement) {
+    let has_padding = el.padding.top > 0.0
+        || el.padding.right > 0.0
+        || el.padding.bottom > 0.0
+        || el.padding.left > 0.0;
+    if !has_padding {
+        el.padding = EdgeInsets {
+            top: 2.0,
+            right: 4.0,
+            bottom: 2.0,
+            left: 4.0,
+        };
+    }
+}
+
+fn inject_synthetic_text(el: &mut StyledElement, text: &str, color: CGColor) {
+    el.children.push(StyledNode::InlineGroup(InlineGroup {
+        items: vec![InlineRunItem::Text(TextRun {
+            text: text.to_string(),
+            font: el.font.clone(),
+            color,
+            decoration: None,
+        })],
+        text_align: el.font.text_align,
+    }));
+}
+
+/// Parse a `#RRGGBB` hex color string.
+fn parse_hex_color(hex: &str) -> Option<CGColor> {
+    let hex = hex.strip_prefix('#')?;
+    if hex.len() != 6 {
+        return None;
+    }
+    let r = u8::from_str_radix(&hex[0..2], 16).ok()?;
+    let g = u8::from_str_radix(&hex[2..4], 16).ok()?;
+    let b = u8::from_str_radix(&hex[4..6], 16).ok()?;
+    Some(CGColor { r, g, b, a: 255 })
+}
+
 /// Recursively flatten an inline element's content into text runs.
 /// Collect inline items from an inline element, mirroring Chromium's
 /// `InlineItemsBuilder` which flattens the DOM tree into a sequence of
diff --git a/crates/grida-canvas/src/htmlcss/layout.rs b/crates/grida-canvas/src/htmlcss/layout.rs
index f2ce21423..e2b6970b5 100644
--- a/crates/grida-canvas/src/htmlcss/layout.rs
+++ b/crates/grida-canvas/src/htmlcss/layout.rs
@@ -358,9 +358,58 @@ fn element_to_taffy_style(el: &StyledElement) -> taffy::Style {
         super::faux_table::apply_faux_table_style_by_tag(&el.tag, &mut style);
     }
 
+    // Widget intrinsic sizing — apply default dimensions for form controls
+    // when CSS doesn't set explicit sizes.
+    apply_widget_intrinsic_size(&el.widget, el.width, el.height, &mut style);
+
     style
 }
 
+/// Apply intrinsic size defaults for widget elements.
+///
+/// Only overrides `Dimension::auto()` — explicit CSS dimensions take
+/// precedence. Per HTML spec, form controls have platform-dependent
+/// default sizes; we use generic values matching Chromium's defaults.
+fn apply_widget_intrinsic_size(
+    widget: &super::style::WidgetAppearance,
+    css_width: types::CssLength,
+    css_height: types::CssLength,
+    style: &mut taffy::Style,
+) {
+    use super::style::WidgetAppearance;
+
+    const AVG_CHAR_WIDTH: f32 = 8.0;
+    const CONTROL_LINE_HEIGHT: f32 = 22.0;
+
+    let (default_w, default_h) = match widget {
+        WidgetAppearance::TextField { size, .. } => {
+            (*size as f32 * AVG_CHAR_WIDTH, CONTROL_LINE_HEIGHT)
+        }
+        WidgetAppearance::Checkbox { .. } | WidgetAppearance::Radio { .. } => (13.0, 13.0),
+        WidgetAppearance::TextArea { rows, cols, .. } => {
+            (*cols as f32 * AVG_CHAR_WIDTH, *rows as f32 * 18.0)
+        }
+        WidgetAppearance::Menulist { .. } => (150.0, CONTROL_LINE_HEIGHT),
+        WidgetAppearance::SliderHorizontal { .. } => (129.0, 16.0),
+        WidgetAppearance::ColorWell { .. } => (44.0, CONTROL_LINE_HEIGHT),
+        WidgetAppearance::PushButton { .. } => {
+            // Buttons size to content — only set minimum height if auto.
+            if css_height == types::CssLength::Auto {
+                style.min_size.height = Dimension::length(CONTROL_LINE_HEIGHT);
+            }
+            return;
+        }
+        WidgetAppearance::None => return,
+    };
+
+    if css_width == types::CssLength::Auto {
+        style.size.width = Dimension::length(default_w);
+    }
+    if css_height == types::CssLength::Auto {
+        style.size.height = Dimension::length(default_h);
+    }
+}
+
 // ─── Conversion helpers ──────────────────────────────────────────────
 
 fn css_length_to_dim(len: types::CssLength) -> Dimension {
diff --git a/crates/grida-canvas/src/htmlcss/mod.rs b/crates/grida-canvas/src/htmlcss/mod.rs
index c1809e7ea..67bc06694 100644
--- a/crates/grida-canvas/src/htmlcss/mod.rs
+++ b/crates/grida-canvas/src/htmlcss/mod.rs
@@ -790,4 +790,188 @@ code block
         }
         None
     }
+
+    // ── Widget (form control) tests ──
+
+    #[test]
+    fn test_widget_button() {
+        let _guard = crate::stylo_test::lock();
+        let fonts = test_fonts();
+        // <input type="submit"> is a PushButton rendered as void element
+        // with injected label text. <button> element relies on Stylo UA styles
+        // which may not produce layout in servo mode — test with <input> instead.
+        let pic = render(
+            r#"<input type="submit" value="Click" />"#,
+            400.0,
+            300.0,
+            &fonts,
+        );
+        assert!(pic.is_ok(), "Submit button should render");
+        let h = pic.unwrap().cull_rect().height();
+        assert!(h > 0.0, "Submit button should have height, got {h}");
+    }
+
+    #[test]
+    fn test_widget_input_text() {
+        let _guard = crate::stylo_test::lock();
+        let fonts = test_fonts();
+        let pic = render(
+            r#"<input type="text" placeholder="Name" />"#,
+            400.0,
+            300.0,
+            &fonts,
+        );
+        assert!(pic.is_ok(), "Text input should render");
+        let h = pic.unwrap().cull_rect().height();
+        assert!(h > 0.0, "Text input should have height, got {h}");
+    }
+
+    #[test]
+    fn test_widget_input_password() {
+        let _guard = crate::stylo_test::lock();
+        let fonts = test_fonts();
+        let pic = render(
+            r#"<input type="password" value="secret" />"#,
+            400.0,
+            300.0,
+            &fonts,
+        );
+        assert!(pic.is_ok(), "Password input should render");
+    }
+
+    #[test]
+    fn test_widget_checkbox() {
+        let _guard = crate::stylo_test::lock();
+        let fonts = test_fonts();
+        let pic = render(
+            r#"<input type="checkbox" /><input type="checkbox" checked />"#,
+            400.0,
+            300.0,
+            &fonts,
+        );
+        assert!(pic.is_ok(), "Checkbox should render");
+    }
+
+    #[test]
+    fn test_widget_radio() {
+        let _guard = crate::stylo_test::lock();
+        let fonts = test_fonts();
+        let pic = render(
+            r#"<input type="radio" /><input type="radio" checked />"#,
+            400.0,
+            300.0,
+            &fonts,
+        );
+        assert!(pic.is_ok(), "Radio should render");
+    }
+
+    #[test]
+    fn test_widget_select() {
+        let _guard = crate::stylo_test::lock();
+        let fonts = test_fonts();
+        let pic = render(
+            r#"<select><option>Apple</option><option selected>Banana</option></select>"#,
+            400.0,
+            300.0,
+            &fonts,
+        );
+        assert!(pic.is_ok(), "Select should render");
+        let h = pic.unwrap().cull_rect().height();
+        assert!(h > 0.0, "Select should have height, got {h}");
+    }
+
+    #[test]
+    fn test_widget_textarea() {
+        let _guard = crate::stylo_test::lock();
+        let fonts = test_fonts();
+        let pic = render(
+            r#"<textarea placeholder="Message..."></textarea>"#,
+            400.0,
+            300.0,
+            &fonts,
+        );
+        assert!(pic.is_ok(), "Textarea should render");
+        let h = pic.unwrap().cull_rect().height();
+        assert!(h > 0.0, "Textarea should have height, got {h}");
+    }
+
+    #[test]
+    fn test_widget_input_range() {
+        let _guard = crate::stylo_test::lock();
+        let fonts = test_fonts();
+        let pic = render(
+            r#"<input type="range" min="0" max="100" value="50" />"#,
+            400.0,
+            300.0,
+            &fonts,
+        );
+        assert!(pic.is_ok(), "Range slider should render");
+    }
+
+    #[test]
+    fn test_widget_input_color() {
+        let _guard = crate::stylo_test::lock();
+        let fonts = test_fonts();
+        let pic = render(
+            r##"<input type="color" value="#ff0000" />"##,
+            400.0,
+            300.0,
+            &fonts,
+        );
+        assert!(pic.is_ok(), "Color input should render");
+    }
+
+    #[test]
+    fn test_widget_input_hidden() {
+        let _guard = crate::stylo_test::lock();
+        let fonts = test_fonts();
+        let pic = render(
+            r#"<input type="hidden" value="secret" />"#,
+            400.0,
+            300.0,
+            &fonts,
+        );
+        assert!(pic.is_ok(), "Hidden input should render (empty)");
+    }
+
+    #[test]
+    fn test_widget_fieldset() {
+        let _guard = crate::stylo_test::lock();
+        let fonts = test_fonts();
+        let pic = render(
+            r#"<fieldset><legend>Info</legend><input type="text" /></fieldset>"#,
+            400.0,
+            300.0,
+            &fonts,
+        );
+        assert!(pic.is_ok(), "Fieldset should render");
+        let h = pic.unwrap().cull_rect().height();
+        assert!(h > 0.0, "Fieldset should have height, got {h}");
+    }
+
+    #[test]
+    fn test_widget_form_mixed() {
+        let _guard = crate::stylo_test::lock();
+        let fonts = test_fonts();
+        let html = r#"
+            <form>
+                <label>Name: <input type="text" value="Alice" /></label>
+                <br />
+                <label><input type="checkbox" checked /> Agree</label>
+                <br />
+                <select><option selected>Option 1</option></select>
+                <br />
+                <textarea rows="3">Some text</textarea>
+                <br />
+                <button>Submit</button>
+            </form>
+        "#;
+        let pic = render(html, 600.0, 400.0, &fonts);
+        assert!(pic.is_ok(), "Mixed form should render");
+        let h = pic.unwrap().cull_rect().height();
+        assert!(
+            h > 50.0,
+            "Mixed form should have substantial height, got {h}"
+        );
+    }
 }
diff --git a/crates/grida-canvas/src/htmlcss/paint.rs b/crates/grida-canvas/src/htmlcss/paint.rs
index 20349ff10..50cef0a07 100644
--- a/crates/grida-canvas/src/htmlcss/paint.rs
+++ b/crates/grida-canvas/src/htmlcss/paint.rs
@@ -16,7 +16,7 @@ use skia_safe::{Canvas, ClipOp, Color, Paint, PaintStyle, PictureRecorder, Rect}
 use super::layout::{build_skia_text_style, LayoutBox, LayoutNode};
 use super::style::{
     BackgroundLayer, BorderSide, ConicGradient, GradientStop, InlineBoxDecoration, InlineGroup,
-    InlineRunItem, LinearGradient, RadialGradient, StyledElement, TextRun,
+    InlineRunItem, LinearGradient, RadialGradient, StyledElement, TextRun, WidgetAppearance,
 };
 use super::types;
 
@@ -109,7 +109,9 @@ fn paint_box(canvas: &Canvas, layout: &LayoutBox, fonts: &FontCollection) {
     }
 
     // ── Phase 1: Background (Chromium: kBlockBackground) ──
-    // Order: outer box-shadow → background-color → border → inset box-shadow
+    // Order: widget bg → outer box-shadow → background-color → border → inset box-shadow
+    // Widget background painted first so CSS background/border can override.
+    paint_widget_background(canvas, style, w, h);
     paint_box_shadow_outer(canvas, style, w, h);
     paint_background(canvas, style, w, h);
     paint_borders(canvas, style, w, h);
@@ -140,6 +142,9 @@ fn paint_box(canvas: &Canvas, layout: &LayoutBox, fonts: &FontCollection) {
         }
     }
 
+    // ── Phase 3: Widget chrome (form control appearance) ──
+    paint_widget_chrome(canvas, style, w, h);
+
     // ── Restore ──
     if needs_layer {
         canvas.restore(); // layer
@@ -727,3 +732,373 @@ fn paint_inline_group(
     // Pass 2: Paint the paragraph text on top (Chromium: TextPainter)
     para.paint(canvas, (x, y));
 }
+
+// ─── Widget chrome painting ─────────────────────────────────────────
+
+/// Paint widget background/border — called BEFORE children so text
+/// renders on top.
+fn paint_widget_background(canvas: &Canvas, style: &StyledElement, w: f32, h: f32) {
+    const BORDER_COLOR: Color = Color::from_argb(255, 118, 118, 118);
+    const DISABLED_BORDER: Color = Color::from_argb(255, 192, 192, 192);
+
+    let has_bg = !style.background.is_empty();
+    let has_border = style.border.top.width > 0.0
+        || style.border.right.width > 0.0
+        || style.border.bottom.width > 0.0
+        || style.border.left.width > 0.0;
+
+    match &style.widget {
+        WidgetAppearance::PushButton { disabled } => {
+            if !has_bg {
+                let mut fill = Paint::default();
+                fill.set_style(PaintStyle::Fill);
+                fill.set_color(Color::from_argb(255, 239, 239, 239));
+                fill.set_anti_alias(true);
+                canvas.draw_round_rect(Rect::from_xywh(0.0, 0.0, w, h), 4.0, 4.0, &fill);
+            }
+            if !has_border {
+                let mut stroke = Paint::default();
+                stroke.set_style(PaintStyle::Stroke);
+                stroke.set_stroke_width(1.0);
+                stroke.set_color(if *disabled {
+                    DISABLED_BORDER
+                } else {
+                    Color::from_argb(255, 195, 195, 195)
+                });
+                stroke.set_anti_alias(true);
+                canvas.draw_round_rect(
+                    Rect::from_xywh(0.5, 0.5, w - 1.0, h - 1.0),
+                    4.0,
+                    4.0,
+                    &stroke,
+                );
+            }
+        }
+        WidgetAppearance::TextField { .. } | WidgetAppearance::TextArea { .. } => {
+            if !has_border {
+                let disabled = matches!(
+                    &style.widget,
+                    WidgetAppearance::TextField { disabled: true, .. }
+                        | WidgetAppearance::TextArea { disabled: true, .. }
+                );
+                let mut paint = Paint::default();
+                paint.set_style(PaintStyle::Stroke);
+                paint.set_stroke_width(1.0);
+                paint.set_color(if disabled {
+                    DISABLED_BORDER
+                } else {
+                    BORDER_COLOR
+                });
+                paint.set_anti_alias(true);
+                canvas.draw_round_rect(
+                    Rect::from_xywh(0.5, 0.5, w - 1.0, h - 1.0),
+                    2.0,
+                    2.0,
+                    &paint,
+                );
+            }
+        }
+        WidgetAppearance::Menulist { disabled, .. } => {
+            if !has_border {
+                let mut paint = Paint::default();
+                paint.set_style(PaintStyle::Stroke);
+                paint.set_stroke_width(1.0);
+                paint.set_color(if *disabled {
+                    DISABLED_BORDER
+                } else {
+                    BORDER_COLOR
+                });
+                paint.set_anti_alias(true);
+                canvas.draw_round_rect(
+                    Rect::from_xywh(0.5, 0.5, w - 1.0, h - 1.0),
+                    2.0,
+                    2.0,
+                    &paint,
+                );
+            }
+        }
+        _ => {} // checkbox, radio, slider, color — no background phase needed
+    }
+}
+
+/// Paint widget overlays — called AFTER children for elements that need
+/// chrome drawn on top (checkmarks, carets, sliders, color swatches).
+fn paint_widget_chrome(canvas: &Canvas, style: &StyledElement, w: f32, h: f32) {
+    const ACCENT: Color = Color::from_argb(255, 26, 115, 232);
+    const BORDER_COLOR: Color = Color::from_argb(255, 118, 118, 118);
+    const DISABLED_BORDER: Color = Color::from_argb(255, 192, 192, 192);
+    const TRACK_COLOR: Color = Color::from_argb(255, 192, 192, 192);
+    const CHEVRON_COLOR: Color = Color::from_argb(255, 102, 102, 102);
+
+    match &style.widget {
+        WidgetAppearance::Checkbox { checked, disabled } => {
+            paint_checkbox(
+                canvas,
+                w,
+                h,
+                *checked,
+                *disabled,
+                ACCENT,
+                BORDER_COLOR,
+                DISABLED_BORDER,
+            );
+        }
+        WidgetAppearance::Radio { checked, disabled } => {
+            paint_radio(
+                canvas,
+                w,
+                h,
+                *checked,
+                *disabled,
+                ACCENT,
+                BORDER_COLOR,
+                DISABLED_BORDER,
+            );
+        }
+        WidgetAppearance::Menulist { disabled, .. } => {
+            paint_select_caret(canvas, w, h, *disabled, CHEVRON_COLOR, DISABLED_BORDER);
+        }
+        WidgetAppearance::SliderHorizontal {
+            min,
+            max,
+            value,
+            disabled,
+        } => {
+            paint_slider(
+                canvas,
+                w,
+                h,
+                *min,
+                *max,
+                *value,
+                *disabled,
+                ACCENT,
+                TRACK_COLOR,
+                DISABLED_BORDER,
+            );
+        }
+        WidgetAppearance::ColorWell { value, disabled } => {
+            paint_color_well(
+                canvas,
+                w,
+                h,
+                value,
+                *disabled,
+                BORDER_COLOR,
+                DISABLED_BORDER,
+            );
+        }
+        _ => {} // PushButton, TextField, TextArea — handled in paint_widget_background
+    }
+}
+
+fn paint_checkbox(
+    canvas: &Canvas,
+    w: f32,
+    h: f32,
+    checked: bool,
+    disabled: bool,
+    accent: Color,
+    border_color: Color,
+    disabled_border: Color,
+) {
+    let size = w.min(h);
+    let x = (w - size) / 2.0;
+    let y = (h - size) / 2.0;
+    let rect = Rect::from_xywh(x + 0.5, y + 0.5, size - 1.0, size - 1.0);
+
+    if checked {
+        let mut fill = Paint::default();
+        fill.set_style(PaintStyle::Fill);
+        fill.set_color(if disabled { disabled_border } else { accent });
+        fill.set_anti_alias(true);
+        canvas.draw_round_rect(rect, 2.0, 2.0, &fill);
+
+        // Checkmark path (✓)
+        let mut path = skia_safe::PathBuilder::new();
+        let cx = x + size / 2.0;
+        let cy = y + size / 2.0;
+        let s = size * 0.3;
+        path.move_to((cx - s * 0.8, cy));
+        path.line_to((cx - s * 0.15, cy + s * 0.65));
+        path.line_to((cx + s * 0.85, cy - s * 0.55));
+
+        let mut stroke = Paint::default();
+        stroke.set_style(PaintStyle::Stroke);
+        stroke.set_color(Color::WHITE);
+        stroke.set_stroke_width(1.5);
+        stroke.set_anti_alias(true);
+        stroke.set_stroke_cap(skia_safe::PaintCap::Round);
+        stroke.set_stroke_join(skia_safe::PaintJoin::Round);
+        canvas.draw_path(&path.detach(), &stroke);
+    } else {
+        let mut stroke = Paint::default();
+        stroke.set_style(PaintStyle::Stroke);
+        stroke.set_stroke_width(1.0);
+        stroke.set_color(if disabled {
+            disabled_border
+        } else {
+            border_color
+        });
+        stroke.set_anti_alias(true);
+        canvas.draw_round_rect(rect, 2.0, 2.0, &stroke);
+    }
+}
+
+fn paint_radio(
+    canvas: &Canvas,
+    w: f32,
+    h: f32,
+    checked: bool,
+    disabled: bool,
+    accent: Color,
+    border_color: Color,
+    disabled_border: Color,
+) {
+    let size = w.min(h);
+    let cx = w / 2.0;
+    let cy = h / 2.0;
+    let radius = size / 2.0 - 0.5;
+
+    if checked {
+        let mut outer = Paint::default();
+        outer.set_style(PaintStyle::Fill);
+        outer.set_color(if disabled { disabled_border } else { accent });
+        outer.set_anti_alias(true);
+        canvas.draw_circle((cx, cy), radius, &outer);
+
+        let mut inner = Paint::default();
+        inner.set_style(PaintStyle::Fill);
+        inner.set_color(Color::WHITE);
+        inner.set_anti_alias(true);
+        canvas.draw_circle((cx, cy), radius * 0.4, &inner);
+    } else {
+        let mut stroke = Paint::default();
+        stroke.set_style(PaintStyle::Stroke);
+        stroke.set_stroke_width(1.0);
+        stroke.set_color(if disabled {
+            disabled_border
+        } else {
+            border_color
+        });
+        stroke.set_anti_alias(true);
+        canvas.draw_circle((cx, cy), radius, &stroke);
+    }
+}
+
+fn paint_select_caret(
+    canvas: &Canvas,
+    w: f32,
+    h: f32,
+    disabled: bool,
+    chevron_color: Color,
+    disabled_color: Color,
+) {
+    let arrow_w = 8.0;
+    let arrow_h = 5.0;
+    let right_pad = 8.0;
+    let ax = w - right_pad - arrow_w;
+    let ay = (h - arrow_h) / 2.0;
+
+    let mut path = skia_safe::PathBuilder::new();
+    path.move_to((ax, ay));
+    path.line_to((ax + arrow_w / 2.0, ay + arrow_h));
+    path.line_to((ax + arrow_w, ay));
+
+    let mut paint = Paint::default();
+    paint.set_style(PaintStyle::Stroke);
+    paint.set_stroke_width(1.5);
+    paint.set_color(if disabled {
+        disabled_color
+    } else {
+        chevron_color
+    });
+    paint.set_anti_alias(true);
+    paint.set_stroke_cap(skia_safe::PaintCap::Round);
+    paint.set_stroke_join(skia_safe::PaintJoin::Round);
+    canvas.draw_path(&path.detach(), &paint);
+}
+
+fn paint_slider(
+    canvas: &Canvas,
+    w: f32,
+    h: f32,
+    min: f32,
+    max: f32,
+    value: f32,
+    disabled: bool,
+    accent: Color,
+    track_color: Color,
+    disabled_color: Color,
+) {
+    let track_h = 4.0;
+    let thumb_r = 6.0;
+    let track_pad = thumb_r;
+    let track_y = (h - track_h) / 2.0;
+
+    // Track background
+    let mut track_paint = Paint::default();
+    track_paint.set_style(PaintStyle::Fill);
+    track_paint.set_color(track_color);
+    track_paint.set_anti_alias(true);
+    let track_rect = Rect::from_xywh(track_pad, track_y, w - track_pad * 2.0, track_h);
+    canvas.draw_round_rect(track_rect, track_h / 2.0, track_h / 2.0, &track_paint);
+
+    // Thumb position
+    let range = if (max - min).abs() < f32::EPSILON {
+        1.0
+    } else {
+        max - min
+    };
+    let ratio = ((value - min) / range).clamp(0.0, 1.0);
+    let thumb_x = track_pad + ratio * (w - track_pad * 2.0);
+    let thumb_y = h / 2.0;
+
+    // Filled portion
+    let mut filled = Paint::default();
+    filled.set_style(PaintStyle::Fill);
+    filled.set_color(if disabled { disabled_color } else { accent });
+    filled.set_anti_alias(true);
+    let filled_rect = Rect::from_xywh(track_pad, track_y, thumb_x - track_pad, track_h);
+    canvas.draw_round_rect(filled_rect, track_h / 2.0, track_h / 2.0, &filled);
+
+    // Thumb circle
+    let mut thumb = Paint::default();
+    thumb.set_style(PaintStyle::Fill);
+    thumb.set_color(if disabled { disabled_color } else { accent });
+    thumb.set_anti_alias(true);
+    canvas.draw_circle((thumb_x, thumb_y), thumb_r, &thumb);
+}
+
+fn paint_color_well(
+    canvas: &Canvas,
+    w: f32,
+    h: f32,
+    value: &CGColor,
+    disabled: bool,
+    border_color: Color,
+    disabled_border: Color,
+) {
+    let pad = 3.0;
+    let swatch = Rect::from_xywh(pad, pad, w - pad * 2.0, h - pad * 2.0);
+
+    let mut fill = Paint::default();
+    fill.set_style(PaintStyle::Fill);
+    fill.set_color(Color::from_argb(value.a, value.r, value.g, value.b));
+    fill.set_anti_alias(true);
+    if disabled {
+        fill.set_alpha(128);
+    }
+    canvas.draw_round_rect(swatch, 2.0, 2.0, &fill);
+
+    let mut stroke = Paint::default();
+    stroke.set_style(PaintStyle::Stroke);
+    stroke.set_stroke_width(1.0);
+    stroke.set_color(if disabled {
+        disabled_border
+    } else {
+        border_color
+    });
+    stroke.set_anti_alias(true);
+    canvas.draw_round_rect(swatch, 2.0, 2.0, &stroke);
+}
diff --git a/crates/grida-canvas/src/htmlcss/style.rs b/crates/grida-canvas/src/htmlcss/style.rs
index 6ea7b20ea..cdf7fdca7 100644
--- a/crates/grida-canvas/src/htmlcss/style.rs
+++ b/crates/grida-canvas/src/htmlcss/style.rs
@@ -108,6 +108,12 @@ pub struct StyledElement {
     pub grid_row_start: GridPlacement,
     pub grid_row_end: GridPlacement,
 
+    // ── Widget (form controls) ──
+    /// Widget appearance for form controls. Populated from HTML tag +
+    /// attributes during collect phase. `WidgetAppearance::None` for
+    /// non-widget elements.
+    pub widget: WidgetAppearance,
+
     // ── Children ──
     pub children: Vec<StyledNode>,
 }
@@ -419,6 +425,88 @@ pub struct InlineBoxDecoration {
     pub padding_block: f32,
 }
 
+// ─── Widget Appearance (form controls) ──────────────────────────────
+
+/// Widget appearance metadata, extracted from HTML tag + attributes.
+///
+/// Named after the CSS `appearance` property (Chromium: `ControlPart`).
+/// When `appearance: auto`, browsers paint platform-native chrome for
+/// these widgets. Our renderer paints a generic/neutral chrome — the
+/// "generic platform" look.
+///
+/// Per CSS spec, widgets are **non-replaced** inline-block elements with
+/// standard box model. This enum captures the widget-specific visual
+/// identity that goes beyond normal CSS box painting.
+///
+/// Variant names follow Chromium's `ControlPart` / `-webkit-appearance`
+/// keyword values: `TextField`, `Checkbox`, `Radio`, `Menulist`,
+/// `PushButton`, `SliderHorizontal`, `ColorWell`.
+#[derive(Debug, Clone, Default)]
+pub enum WidgetAppearance {
+    /// Not a widget — normal CSS element.
+    #[default]
+    None,
+    /// `<input type="text|email|password|search|url|tel|number">`
+    /// or `<input>` with no `type` (defaults to `"text"`).
+    TextField {
+        input_type: TextFieldType,
+        placeholder: Option<String>,
+        value: Option<String>,
+        size: u32, // HTML `size` attribute (default 20)
+        disabled: bool,
+    },
+    /// `<input type="checkbox">`
+    Checkbox { checked: bool, disabled: bool },
+    /// `<input type="radio">`
+    Radio { checked: bool, disabled: bool },
+    /// `<textarea>`
+    TextArea {
+        placeholder: Option<String>,
+        value: Option<String>,
+        rows: u32,
+        cols: u32,
+        disabled: bool,
+    },
+    /// `<select>` — shows selected option text + dropdown caret.
+    Menulist {
+        selected_text: Option<String>,
+        disabled: bool,
+    },
+    /// `<button>` or `<input type="submit|reset|button">`.
+    /// Button content flows through normal children — only metadata here.
+    PushButton { disabled: bool },
+    /// `<input type="range">`
+    SliderHorizontal {
+        min: f32,
+        max: f32,
+        value: f32,
+        disabled: bool,
+    },
+    /// `<input type="color">`
+    ColorWell { value: CGColor, disabled: bool },
+}
+
+impl WidgetAppearance {
+    /// Returns `true` if this is any widget (not `None`).
+    pub fn is_widget(&self) -> bool {
+        !matches!(self, WidgetAppearance::None)
+    }
+}
+
+/// Sub-type for text field inputs — determines masking behavior and
+/// input-mode hints.
+#[derive(Debug, Clone, Default, PartialEq)]
+pub enum TextFieldType {
+    #[default]
+    Text,
+    Password,
+    Email,
+    Search,
+    Url,
+    Tel,
+    Number,
+}
+
 // ─── Defaults ────────────────────────────────────────────────────────
 
 impl Default for StyledElement {
@@ -472,6 +560,7 @@ impl Default for StyledElement {
             grid_column_end: GridPlacement::default(),
             grid_row_start: GridPlacement::default(),
             grid_row_end: GridPlacement::default(),
+            widget: WidgetAppearance::default(),
             children: Vec::new(),
         }
     }