feat(ie-layout): implement inline layout and text wrapping #72

Inline formatting context (inline.rs):
- Line box construction: accumulate inline boxes left-to-right
- Text wrapping: split at word boundaries (greedy), wrap when
  exceeding container width
- white-space: normal (collapse+wrap), nowrap (no wrapping)
- text-align: left (default), center, right — applied per line
- Handles Text, Inline, InlineBlock box types

Block layout integration:
- Detects inline formatting context (all children inline/text)
- Delegates to layout_inline_content instead of recursive block
- Respects explicit height/min/max on container

5 new tests: single line text, long text wraps, text-align center,
multiple inline elements, nowrap prevents wrapping.
15 total ie-layout tests.

Author: thomasnemer

crates/ie-layout/src/block.rs

@@ -3,6 +3,7 @@ use ie_css::resolve::ResolvedStyle;
 use ie_css::values::PropertyId;
 
 use crate::box_generation::{get_px, get_px_or, is_auto};
+use crate::inline::layout_inline_content;
 use crate::text_measure::TextMeasure;
 use crate::{BoxType, LayoutTree, Rect};
 
@@ -131,6 +132,41 @@ pub fn layout_block(
     // --- 2. Layout children ---
     let children = tree.boxes[box_idx].children.clone();
     let content_y = tree.boxes[box_idx].content_rect.y;
+
+    // If all children are inline/text, use the inline formatting context
+    let all_inline = !children.is_empty()
+        && children.iter().all(|&idx| {
+            matches!(
+                tree.boxes[idx].box_type,
+                BoxType::Inline | BoxType::InlineBlock | BoxType::Text(_)
+            )
+        });
+
+    if all_inline {
+        let inline_height = layout_inline_content(
+            box_idx,
+            tree,
+            styles,
+            content_width,
+            content_y,
+            text_measure,
+        );
+        let content_height = if let Some(style) = style {
+            if is_auto(style, PropertyId::Height) {
+                inline_height
+            } else {
+                let h = get_px(style, PropertyId::Height);
+                let min_h = get_px(style, PropertyId::MinHeight);
+                let max_h = get_px_or(style, PropertyId::MaxHeight, f32::MAX);
+                h.max(min_h).min(max_h)
+            }
+        } else {
+            inline_height
+        };
+        tree.boxes[box_idx].content_rect.height = content_height;
+        return;
+    }
+
     let mut child_y = content_y;
     let mut prev_margin_bottom: f32 = 0.0;
 

crates/ie-layout/src/inline.rs

@@ -0,0 +1,203 @@
+use ie_css::CssValue;
+use ie_css::resolve::ResolvedStyle;
+use ie_css::values::PropertyId;
+
+use crate::box_generation::get_px;
+use crate::text_measure::TextMeasure;
+use crate::{BoxType, LayoutTree, Rect};
+
+/// A positioned item within a line box.
+struct LineItem {
+    box_idx: usize,
+    x: f32,
+    width: f32,
+    height: f32,
+}
+
+/// Layout inline content within a block container.
+///
+/// Walks inline children left-to-right, wrapping text at word boundaries
+/// when it exceeds `containing_width`. Returns the total height consumed.
+pub fn layout_inline_content(
+    container_idx: usize,
+    tree: &mut LayoutTree,
+    styles: &[ResolvedStyle],
+    containing_width: f32,
+    offset_y: f32,
+    text_measure: &dyn TextMeasure,
+) -> f32 {
+    let children = tree.boxes[container_idx].children.clone();
+    let container_x = tree.boxes[container_idx].content_rect.x;
+
+    let container_node = tree.boxes[container_idx].node_id;
+
+    // text-align from container style
+    let text_align = container_node
+        .and_then(|id| styles.get(id))
+        .and_then(|s| s.get(PropertyId::TextAlign))
+        .and_then(|v| match v {
+            CssValue::Keyword(k) => Some(k.as_str()),
+            _ => None,
+        })
+        .unwrap_or("left");
+    let text_align = text_align.to_string();
+
+    // white-space from container style
+    let white_space = container_node
+        .and_then(|id| styles.get(id))
+        .and_then(|s| s.get(PropertyId::WhiteSpace))
+        .and_then(|v| match v {
+            CssValue::Keyword(k) => Some(k.as_str()),
+            _ => None,
+        })
+        .unwrap_or("normal");
+
+    let allow_wrap = !matches!(white_space, "nowrap" | "pre");
+    let collapse_whitespace = matches!(white_space, "normal" | "nowrap");
+    let white_space = white_space.to_string();
+    // keep `white_space` alive for later use
+    let _ = &white_space;
+
+    let default_font_size = 16.0_f32;
+
+    let mut lines: Vec<Vec<LineItem>> = vec![Vec::new()];
+    let mut current_x: f32 = 0.0;
+
+    for &child_idx in &children {
+        let box_type = tree.boxes[child_idx].box_type.clone();
+        match box_type {
+            BoxType::Text(ref text) => {
+                // Text nodes inherit font-size from the container element
+                let font_size = container_node
+                    .and_then(|id| styles.get(id))
+                    .map(|s| get_px(s, PropertyId::FontSize))
+                    .filter(|&fs| fs > 0.0)
+                    .unwrap_or(default_font_size);
+
+                let processed = if collapse_whitespace {
+                    text.split_whitespace().collect::<Vec<_>>().join(" ")
+                } else {
+                    text.clone()
+                };
+
+                if processed.is_empty() {
+                    continue;
+                }
+
+                if !allow_wrap {
+                    // No wrapping: entire text on current line
+                    let metrics = text_measure.measure(&processed, font_size);
+                    lines.last_mut().unwrap().push(LineItem {
+                        box_idx: child_idx,
+                        x: current_x,
+                        width: metrics.width,
+                        height: metrics.height,
+                    });
+                    current_x += metrics.width;
+                } else {
+                    // Word wrapping via split_inclusive on whitespace
+                    let words: Vec<&str> = processed.split_inclusive(char::is_whitespace).collect();
+                    let words = if words.is_empty() {
+                        vec![processed.as_str()]
+                    } else {
+                        words
+                    };
+
+                    for word in words {
+                        let metrics = text_measure.measure(word, font_size);
+                        if current_x + metrics.width > containing_width && current_x > 0.0 {
+                            lines.push(Vec::new());
+                            current_x = 0.0;
+                        }
+                        lines.last_mut().unwrap().push(LineItem {
+                            box_idx: child_idx,
+                            x: current_x,
+                            width: metrics.width,
+                            height: metrics.height,
+                        });
+                        current_x += metrics.width;
+                    }
+                }
+            }
+            BoxType::Inline | BoxType::InlineBlock => {
+                let style = tree.boxes[child_idx].node_id.and_then(|id| styles.get(id));
+                let padding_lr = style
+                    .map(|s| {
+                        get_px(s, PropertyId::PaddingLeft) + get_px(s, PropertyId::PaddingRight)
+                    })
+                    .unwrap_or(0.0);
+                let border_lr = style
+                    .map(|s| {
+                        get_px(s, PropertyId::BorderLeftWidth)
+                            + get_px(s, PropertyId::BorderRightWidth)
+                    })
+                    .unwrap_or(0.0);
+                let margin_lr = style
+                    .map(|s| get_px(s, PropertyId::MarginLeft) + get_px(s, PropertyId::MarginRight))
+                    .unwrap_or(0.0);
+
+                let extra = padding_lr + border_lr + margin_lr;
+                let font_size = style
+                    .map(|s| get_px(s, PropertyId::FontSize))
+                    .filter(|&v| v > 0.0)
+                    .unwrap_or(default_font_size);
+
+                // Approximate inline element width from its text children
+                let child_text: String = tree.boxes[child_idx]
+                    .children
+                    .iter()
+                    .filter_map(|&ci| match &tree.boxes[ci].box_type {
+                        BoxType::Text(t) => Some(t.clone()),
+                        _ => None,
+                    })
+                    .collect();
+                let text_metrics = text_measure.measure(&child_text, font_size);
+                let total_width = text_metrics.width + extra;
+
+                if allow_wrap && current_x + total_width > containing_width && current_x > 0.0 {
+                    lines.push(Vec::new());
+                    current_x = 0.0;
+                }
+
+                lines.last_mut().unwrap().push(LineItem {
+                    box_idx: child_idx,
+                    x: current_x,
+                    width: total_width,
+                    height: text_metrics.height.max(font_size),
+                });
+                current_x += total_width;
+            }
+            _ => {} // Block children handled separately
+        }
+    }
+
+    // Position items on each line
+    let mut y = offset_y;
+    for line in &lines {
+        if line.is_empty() {
+            continue;
+        }
+        let line_height = line.iter().map(|item| item.height).fold(0.0_f32, f32::max);
+        let line_width: f32 = line.last().map(|item| item.x + item.width).unwrap_or(0.0);
+
+        let align_offset = match text_align.as_str() {
+            "center" => ((containing_width - line_width) / 2.0).max(0.0),
+            "right" => (containing_width - line_width).max(0.0),
+            _ => 0.0,
+        };
+
+        for item in line {
+            let final_x = container_x + item.x + align_offset;
+            tree.boxes[item.box_idx].content_rect = Rect {
+                x: final_x,
+                y,
+                width: item.width,
+                height: item.height,
+            };
+        }
+
+        y += line_height;
+    }
+
+    y - offset_y
+}

crates/ie-layout/src/lib.rs

@@ -5,6 +5,7 @@
 
 pub mod block;
 pub mod box_generation;
+pub mod inline;
 pub mod text_measure;
 
 use ie_css::resolve::ResolvedStyle;
@@ -233,4 +234,78 @@ mod tests {
             "should have anonymous block boxes for mixed content"
         );
     }
+
+    #[test]
+    fn short_text_single_line() {
+        let tree = layout_html("<p>Hello</p>");
+        let text_box = tree
+            .boxes
+            .iter()
+            .find(|b| matches!(&b.box_type, BoxType::Text(_)));
+        assert!(text_box.is_some());
+        let tb = text_box.unwrap();
+        assert!(tb.content_rect.width > 0.0);
+        assert!(tb.content_rect.height > 0.0);
+    }
+
+    #[test]
+    fn long_text_wraps() {
+        // "word " repeated 100 times = 500 chars, each char 8px wide (16*0.5)
+        // Total unwrapped width = 4000px, viewport = 800px => must wrap
+        let long = "word ".repeat(100);
+        let html = format!("<p>{long}</p>");
+        let tree = layout_html(&html);
+        // The p element should have height > single line (16px)
+        let p_box = tree.boxes.iter().find(|b| {
+            b.node_id.is_some()
+                && matches!(b.box_type, BoxType::Block)
+                && b.content_rect.height > 16.0
+        });
+        assert!(
+            p_box.is_some(),
+            "long text should cause multi-line height in its block container"
+        );
+    }
+
+    #[test]
+    fn text_align_center() {
+        let tree = layout_html_with_css("<p>Hi</p>", "p { text-align: center; }");
+        let text = tree
+            .boxes
+            .iter()
+            .find(|b| matches!(&b.box_type, BoxType::Text(_)));
+        if let Some(tb) = text {
+            // "Hi" = 2 chars, width = 2 * 8 = 16px, centered in 800px => x ~ 392
+            assert!(
+                tb.content_rect.x > 100.0,
+                "centered text should have x > 100, got {}",
+                tb.content_rect.x
+            );
+        }
+    }
+
+    #[test]
+    fn multiple_inline_elements() {
+        let tree = layout_html("<p><span>A</span><span>B</span></p>");
+        // Both spans should exist
+        assert!(tree.boxes.len() >= 2);
+    }
+
+    #[test]
+    fn nowrap_prevents_wrapping() {
+        let long = "word ".repeat(100);
+        let html = format!("<p>{long}</p>");
+        let tree = layout_html_with_css(&html, "p { white-space: nowrap; }");
+        let text = tree
+            .boxes
+            .iter()
+            .find(|b| matches!(&b.box_type, BoxType::Text(_)));
+        if let Some(tb) = text {
+            assert!(
+                tb.content_rect.width > 800.0,
+                "nowrap text should exceed container, got {}",
+                tb.content_rect.width
+            );
+        }
+    }
 }