pierrelf.com
web engine - experimental web browser
1//! Block layout engine: box generation, block/inline layout, and text wrapping.
2//!
3//! Builds a layout tree from a styled tree (DOM + computed styles) and positions
4//! block-level elements vertically with proper inline formatting context.
5
6use we_css::values::Color;
7use we_dom::{Document, NodeData, NodeId};
8use we_style::computed::{
9 BorderStyle, ComputedStyle, Display, LengthOrAuto, StyledNode, TextAlign, TextDecoration,
10};
11use we_text::font::Font;
12
13/// Edge sizes for box model (margin, padding, border).
14#[derive(Debug, Clone, Copy, Default, PartialEq)]
15pub struct EdgeSizes {
16 pub top: f32,
17 pub right: f32,
18 pub bottom: f32,
19 pub left: f32,
20}
21
22/// A positioned rectangle with content area dimensions.
23#[derive(Debug, Clone, Copy, Default, PartialEq)]
24pub struct Rect {
25 pub x: f32,
26 pub y: f32,
27 pub width: f32,
28 pub height: f32,
29}
30
31/// The type of layout box.
32#[derive(Debug)]
33pub enum BoxType {
34 /// Block-level box from an element.
35 Block(NodeId),
36 /// Inline-level box from an element.
37 Inline(NodeId),
38 /// A run of text from a text node.
39 TextRun { node: NodeId, text: String },
40 /// Anonymous block wrapping inline content within a block container.
41 Anonymous,
42}
43
44/// A single positioned text fragment with its own styling.
45///
46/// Multiple fragments can share the same y-coordinate when they are
47/// on the same visual line (e.g. `<p>Hello <em>world</em></p>` produces
48/// two fragments at the same y).
49#[derive(Debug, Clone, PartialEq)]
50pub struct TextLine {
51 pub text: String,
52 pub x: f32,
53 pub y: f32,
54 pub width: f32,
55 pub font_size: f32,
56 pub color: Color,
57 pub text_decoration: TextDecoration,
58 pub background_color: Color,
59}
60
61/// A box in the layout tree with dimensions and child boxes.
62#[derive(Debug)]
63pub struct LayoutBox {
64 pub box_type: BoxType,
65 pub rect: Rect,
66 pub margin: EdgeSizes,
67 pub padding: EdgeSizes,
68 pub border: EdgeSizes,
69 pub children: Vec<LayoutBox>,
70 pub font_size: f32,
71 /// Positioned text fragments (populated for boxes with inline content).
72 pub lines: Vec<TextLine>,
73 /// Text color.
74 pub color: Color,
75 /// Background color.
76 pub background_color: Color,
77 /// Text decoration (underline, etc.).
78 pub text_decoration: TextDecoration,
79 /// Border styles (top, right, bottom, left).
80 pub border_styles: [BorderStyle; 4],
81 /// Border colors (top, right, bottom, left).
82 pub border_colors: [Color; 4],
83 /// Text alignment for this box's inline content.
84 pub text_align: TextAlign,
85 /// Computed line height in px.
86 pub line_height: f32,
87}
88
89impl LayoutBox {
90 fn new(box_type: BoxType, style: &ComputedStyle) -> Self {
91 LayoutBox {
92 box_type,
93 rect: Rect::default(),
94 margin: EdgeSizes::default(),
95 padding: EdgeSizes::default(),
96 border: EdgeSizes::default(),
97 children: Vec::new(),
98 font_size: style.font_size,
99 lines: Vec::new(),
100 color: style.color,
101 background_color: style.background_color,
102 text_decoration: style.text_decoration,
103 border_styles: [
104 style.border_top_style,
105 style.border_right_style,
106 style.border_bottom_style,
107 style.border_left_style,
108 ],
109 border_colors: [
110 style.border_top_color,
111 style.border_right_color,
112 style.border_bottom_color,
113 style.border_left_color,
114 ],
115 text_align: style.text_align,
116 line_height: style.line_height,
117 }
118 }
119
120 /// Total height including margin, border, and padding.
121 pub fn margin_box_height(&self) -> f32 {
122 self.margin.top
123 + self.border.top
124 + self.padding.top
125 + self.rect.height
126 + self.padding.bottom
127 + self.border.bottom
128 + self.margin.bottom
129 }
130
131 /// Iterate over all boxes in depth-first pre-order.
132 pub fn iter(&self) -> LayoutBoxIter<'_> {
133 LayoutBoxIter { stack: vec![self] }
134 }
135}
136
137/// Depth-first pre-order iterator over layout boxes.
138pub struct LayoutBoxIter<'a> {
139 stack: Vec<&'a LayoutBox>,
140}
141
142impl<'a> Iterator for LayoutBoxIter<'a> {
143 type Item = &'a LayoutBox;
144
145 fn next(&mut self) -> Option<&'a LayoutBox> {
146 let node = self.stack.pop()?;
147 for child in node.children.iter().rev() {
148 self.stack.push(child);
149 }
150 Some(node)
151 }
152}
153
154/// The result of laying out a document.
155#[derive(Debug)]
156pub struct LayoutTree {
157 pub root: LayoutBox,
158 pub width: f32,
159 pub height: f32,
160}
161
162impl LayoutTree {
163 /// Iterate over all layout boxes in depth-first pre-order.
164 pub fn iter(&self) -> LayoutBoxIter<'_> {
165 self.root.iter()
166 }
167}
168
169// ---------------------------------------------------------------------------
170// Resolve LengthOrAuto to f32
171// ---------------------------------------------------------------------------
172
173fn resolve_length(value: LengthOrAuto) -> f32 {
174 match value {
175 LengthOrAuto::Length(px) => px,
176 LengthOrAuto::Auto => 0.0,
177 }
178}
179
180// ---------------------------------------------------------------------------
181// Build layout tree from styled tree
182// ---------------------------------------------------------------------------
183
184fn build_box(styled: &StyledNode, doc: &Document) -> Option<LayoutBox> {
185 let node = styled.node;
186 let style = &styled.style;
187
188 match doc.node_data(node) {
189 NodeData::Document => {
190 let mut children = Vec::new();
191 for child in &styled.children {
192 if let Some(child_box) = build_box(child, doc) {
193 children.push(child_box);
194 }
195 }
196 if children.len() == 1 {
197 children.into_iter().next()
198 } else if children.is_empty() {
199 None
200 } else {
201 let mut b = LayoutBox::new(BoxType::Anonymous, style);
202 b.children = children;
203 Some(b)
204 }
205 }
206 NodeData::Element { .. } => {
207 if style.display == Display::None {
208 return None;
209 }
210
211 let margin = EdgeSizes {
212 top: resolve_length(style.margin_top),
213 right: resolve_length(style.margin_right),
214 bottom: resolve_length(style.margin_bottom),
215 left: resolve_length(style.margin_left),
216 };
217 let padding = EdgeSizes {
218 top: style.padding_top,
219 right: style.padding_right,
220 bottom: style.padding_bottom,
221 left: style.padding_left,
222 };
223 let border = EdgeSizes {
224 top: if style.border_top_style != BorderStyle::None {
225 style.border_top_width
226 } else {
227 0.0
228 },
229 right: if style.border_right_style != BorderStyle::None {
230 style.border_right_width
231 } else {
232 0.0
233 },
234 bottom: if style.border_bottom_style != BorderStyle::None {
235 style.border_bottom_width
236 } else {
237 0.0
238 },
239 left: if style.border_left_style != BorderStyle::None {
240 style.border_left_width
241 } else {
242 0.0
243 },
244 };
245
246 let mut children = Vec::new();
247 for child in &styled.children {
248 if let Some(child_box) = build_box(child, doc) {
249 children.push(child_box);
250 }
251 }
252
253 let box_type = match style.display {
254 Display::Block => BoxType::Block(node),
255 Display::Inline => BoxType::Inline(node),
256 Display::None => unreachable!(),
257 };
258
259 if style.display == Display::Block {
260 children = normalize_children(children, style);
261 }
262
263 let mut b = LayoutBox::new(box_type, style);
264 b.margin = margin;
265 b.padding = padding;
266 b.border = border;
267 b.children = children;
268 Some(b)
269 }
270 NodeData::Text { data } => {
271 let collapsed = collapse_whitespace(data);
272 if collapsed.is_empty() {
273 return None;
274 }
275 Some(LayoutBox::new(
276 BoxType::TextRun {
277 node,
278 text: collapsed,
279 },
280 style,
281 ))
282 }
283 NodeData::Comment { .. } => None,
284 }
285}
286
287/// Collapse runs of whitespace to a single space.
288fn collapse_whitespace(s: &str) -> String {
289 let mut result = String::new();
290 let mut in_ws = false;
291 for ch in s.chars() {
292 if ch.is_whitespace() {
293 if !in_ws {
294 result.push(' ');
295 }
296 in_ws = true;
297 } else {
298 in_ws = false;
299 result.push(ch);
300 }
301 }
302 result
303}
304
305/// If a block container has a mix of block-level and inline-level children,
306/// wrap consecutive inline runs in anonymous block boxes.
307fn normalize_children(children: Vec<LayoutBox>, parent_style: &ComputedStyle) -> Vec<LayoutBox> {
308 if children.is_empty() {
309 return children;
310 }
311
312 let has_block = children.iter().any(is_block_level);
313 if !has_block {
314 return children;
315 }
316
317 let has_inline = children.iter().any(|c| !is_block_level(c));
318 if !has_inline {
319 return children;
320 }
321
322 let mut result = Vec::new();
323 let mut inline_group: Vec<LayoutBox> = Vec::new();
324
325 for child in children {
326 if is_block_level(&child) {
327 if !inline_group.is_empty() {
328 let mut anon = LayoutBox::new(BoxType::Anonymous, parent_style);
329 anon.children = std::mem::take(&mut inline_group);
330 result.push(anon);
331 }
332 result.push(child);
333 } else {
334 inline_group.push(child);
335 }
336 }
337
338 if !inline_group.is_empty() {
339 let mut anon = LayoutBox::new(BoxType::Anonymous, parent_style);
340 anon.children = inline_group;
341 result.push(anon);
342 }
343
344 result
345}
346
347fn is_block_level(b: &LayoutBox) -> bool {
348 matches!(b.box_type, BoxType::Block(_) | BoxType::Anonymous)
349}
350
351// ---------------------------------------------------------------------------
352// Layout algorithm
353// ---------------------------------------------------------------------------
354
355/// Position and size a layout box within `available_width` at position (`x`, `y`).
356fn compute_layout(
357 b: &mut LayoutBox,
358 x: f32,
359 y: f32,
360 available_width: f32,
361 font: &Font,
362 doc: &Document,
363) {
364 let content_x = x + b.margin.left + b.border.left + b.padding.left;
365 let content_y = y + b.margin.top + b.border.top + b.padding.top;
366 let content_width = (available_width
367 - b.margin.left
368 - b.margin.right
369 - b.border.left
370 - b.border.right
371 - b.padding.left
372 - b.padding.right)
373 .max(0.0);
374
375 b.rect.x = content_x;
376 b.rect.y = content_y;
377 b.rect.width = content_width;
378
379 match &b.box_type {
380 BoxType::Block(_) | BoxType::Anonymous => {
381 if has_block_children(b) {
382 layout_block_children(b, font, doc);
383 } else {
384 layout_inline_children(b, font, doc);
385 }
386 }
387 BoxType::TextRun { .. } | BoxType::Inline(_) => {
388 // Handled by the parent's inline layout.
389 }
390 }
391}
392
393fn has_block_children(b: &LayoutBox) -> bool {
394 b.children.iter().any(is_block_level)
395}
396
397/// Lay out block-level children: stack them vertically.
398fn layout_block_children(parent: &mut LayoutBox, font: &Font, doc: &Document) {
399 let content_x = parent.rect.x;
400 let content_width = parent.rect.width;
401 let mut cursor_y = parent.rect.y;
402
403 for child in &mut parent.children {
404 compute_layout(child, content_x, cursor_y, content_width, font, doc);
405 cursor_y += child.margin_box_height();
406 }
407
408 parent.rect.height = cursor_y - parent.rect.y;
409}
410
411// ---------------------------------------------------------------------------
412// Inline formatting context
413// ---------------------------------------------------------------------------
414
415/// An inline item produced by flattening the inline tree.
416enum InlineItemKind {
417 /// A word of text with associated styling.
418 Word {
419 text: String,
420 font_size: f32,
421 color: Color,
422 text_decoration: TextDecoration,
423 background_color: Color,
424 },
425 /// Whitespace between words.
426 Space { font_size: f32 },
427 /// Forced line break (`<br>`).
428 ForcedBreak,
429 /// Start of an inline box (for margin/padding/border tracking).
430 InlineStart {
431 margin_left: f32,
432 padding_left: f32,
433 border_left: f32,
434 },
435 /// End of an inline box.
436 InlineEnd {
437 margin_right: f32,
438 padding_right: f32,
439 border_right: f32,
440 },
441}
442
443/// A pending fragment on the current line.
444struct PendingFragment {
445 text: String,
446 x: f32,
447 width: f32,
448 font_size: f32,
449 color: Color,
450 text_decoration: TextDecoration,
451 background_color: Color,
452}
453
454/// Flatten the inline children tree into a sequence of items.
455fn flatten_inline_tree(children: &[LayoutBox], doc: &Document, items: &mut Vec<InlineItemKind>) {
456 for child in children {
457 match &child.box_type {
458 BoxType::TextRun { text, .. } => {
459 let words = split_into_words(text);
460 for segment in words {
461 match segment {
462 WordSegment::Word(w) => {
463 items.push(InlineItemKind::Word {
464 text: w,
465 font_size: child.font_size,
466 color: child.color,
467 text_decoration: child.text_decoration,
468 background_color: child.background_color,
469 });
470 }
471 WordSegment::Space => {
472 items.push(InlineItemKind::Space {
473 font_size: child.font_size,
474 });
475 }
476 }
477 }
478 }
479 BoxType::Inline(node_id) => {
480 if let NodeData::Element { tag_name, .. } = doc.node_data(*node_id) {
481 if tag_name == "br" {
482 items.push(InlineItemKind::ForcedBreak);
483 continue;
484 }
485 }
486
487 items.push(InlineItemKind::InlineStart {
488 margin_left: child.margin.left,
489 padding_left: child.padding.left,
490 border_left: child.border.left,
491 });
492
493 flatten_inline_tree(&child.children, doc, items);
494
495 items.push(InlineItemKind::InlineEnd {
496 margin_right: child.margin.right,
497 padding_right: child.padding.right,
498 border_right: child.border.right,
499 });
500 }
501 _ => {}
502 }
503 }
504}
505
506enum WordSegment {
507 Word(String),
508 Space,
509}
510
511/// Split text into alternating words and spaces.
512fn split_into_words(text: &str) -> Vec<WordSegment> {
513 let mut segments = Vec::new();
514 let mut current_word = String::new();
515
516 for ch in text.chars() {
517 if ch == ' ' {
518 if !current_word.is_empty() {
519 segments.push(WordSegment::Word(std::mem::take(&mut current_word)));
520 }
521 segments.push(WordSegment::Space);
522 } else {
523 current_word.push(ch);
524 }
525 }
526
527 if !current_word.is_empty() {
528 segments.push(WordSegment::Word(current_word));
529 }
530
531 segments
532}
533
534/// Lay out inline children using a proper inline formatting context.
535fn layout_inline_children(parent: &mut LayoutBox, font: &Font, doc: &Document) {
536 let available_width = parent.rect.width;
537 let text_align = parent.text_align;
538 let line_height = parent.line_height;
539
540 let mut items = Vec::new();
541 flatten_inline_tree(&parent.children, doc, &mut items);
542
543 if items.is_empty() {
544 parent.rect.height = 0.0;
545 return;
546 }
547
548 // Process items into line boxes.
549 let mut all_lines: Vec<Vec<PendingFragment>> = Vec::new();
550 let mut current_line: Vec<PendingFragment> = Vec::new();
551 let mut cursor_x: f32 = 0.0;
552
553 for item in &items {
554 match item {
555 InlineItemKind::Word {
556 text,
557 font_size,
558 color,
559 text_decoration,
560 background_color,
561 } => {
562 let word_width = measure_text_width(font, text, *font_size);
563
564 // If this word doesn't fit and the line isn't empty, break.
565 if cursor_x > 0.0 && cursor_x + word_width > available_width {
566 all_lines.push(std::mem::take(&mut current_line));
567 cursor_x = 0.0;
568 }
569
570 current_line.push(PendingFragment {
571 text: text.clone(),
572 x: cursor_x,
573 width: word_width,
574 font_size: *font_size,
575 color: *color,
576 text_decoration: *text_decoration,
577 background_color: *background_color,
578 });
579 cursor_x += word_width;
580 }
581 InlineItemKind::Space { font_size } => {
582 // Only add space if we have content on the line.
583 if !current_line.is_empty() {
584 let space_width = measure_text_width(font, " ", *font_size);
585 if cursor_x + space_width <= available_width {
586 cursor_x += space_width;
587 }
588 }
589 }
590 InlineItemKind::ForcedBreak => {
591 all_lines.push(std::mem::take(&mut current_line));
592 cursor_x = 0.0;
593 }
594 InlineItemKind::InlineStart {
595 margin_left,
596 padding_left,
597 border_left,
598 } => {
599 cursor_x += margin_left + padding_left + border_left;
600 }
601 InlineItemKind::InlineEnd {
602 margin_right,
603 padding_right,
604 border_right,
605 } => {
606 cursor_x += margin_right + padding_right + border_right;
607 }
608 }
609 }
610
611 // Flush the last line.
612 if !current_line.is_empty() {
613 all_lines.push(current_line);
614 }
615
616 if all_lines.is_empty() {
617 parent.rect.height = 0.0;
618 return;
619 }
620
621 // Position lines vertically and apply text-align.
622 let mut text_lines = Vec::new();
623 let mut y = parent.rect.y;
624 let num_lines = all_lines.len();
625
626 for (line_idx, line_fragments) in all_lines.iter().enumerate() {
627 if line_fragments.is_empty() {
628 y += line_height;
629 continue;
630 }
631
632 // Compute line width from last fragment.
633 let line_width = match line_fragments.last() {
634 Some(last) => last.x + last.width,
635 None => 0.0,
636 };
637
638 // Compute text-align offset.
639 let is_last_line = line_idx == num_lines - 1;
640 let align_offset =
641 compute_align_offset(text_align, available_width, line_width, is_last_line);
642
643 for frag in line_fragments {
644 text_lines.push(TextLine {
645 text: frag.text.clone(),
646 x: parent.rect.x + frag.x + align_offset,
647 y,
648 width: frag.width,
649 font_size: frag.font_size,
650 color: frag.color,
651 text_decoration: frag.text_decoration,
652 background_color: frag.background_color,
653 });
654 }
655
656 y += line_height;
657 }
658
659 parent.rect.height = num_lines as f32 * line_height;
660 parent.lines = text_lines;
661}
662
663/// Compute the horizontal offset for text alignment.
664fn compute_align_offset(
665 align: TextAlign,
666 available_width: f32,
667 line_width: f32,
668 is_last_line: bool,
669) -> f32 {
670 let extra_space = (available_width - line_width).max(0.0);
671 match align {
672 TextAlign::Left => 0.0,
673 TextAlign::Center => extra_space / 2.0,
674 TextAlign::Right => extra_space,
675 TextAlign::Justify => {
676 // Don't justify the last line (CSS spec behavior).
677 if is_last_line {
678 0.0
679 } else {
680 // For justify, we shift the whole line by 0 — the actual distribution
681 // of space between words would need per-word spacing. For now, treat
682 // as left-aligned; full justify support is a future enhancement.
683 0.0
684 }
685 }
686 }
687}
688
689// ---------------------------------------------------------------------------
690// Text measurement
691// ---------------------------------------------------------------------------
692
693/// Measure the total advance width of a text string at the given font size.
694fn measure_text_width(font: &Font, text: &str, font_size: f32) -> f32 {
695 let shaped = font.shape_text(text, font_size);
696 match shaped.last() {
697 Some(last) => last.x_offset + last.x_advance,
698 None => 0.0,
699 }
700}
701
702// ---------------------------------------------------------------------------
703// Public API
704// ---------------------------------------------------------------------------
705
706/// Build and lay out from a styled tree (produced by `resolve_styles`).
707///
708/// Returns a `LayoutTree` with positioned boxes ready for rendering.
709pub fn layout(
710 styled_root: &StyledNode,
711 doc: &Document,
712 viewport_width: f32,
713 _viewport_height: f32,
714 font: &Font,
715) -> LayoutTree {
716 let mut root = match build_box(styled_root, doc) {
717 Some(b) => b,
718 None => {
719 return LayoutTree {
720 root: LayoutBox::new(BoxType::Anonymous, &ComputedStyle::default()),
721 width: viewport_width,
722 height: 0.0,
723 };
724 }
725 };
726
727 compute_layout(&mut root, 0.0, 0.0, viewport_width, font, doc);
728
729 let height = root.margin_box_height();
730 LayoutTree {
731 root,
732 width: viewport_width,
733 height,
734 }
735}
736
737#[cfg(test)]
738mod tests {
739 use super::*;
740 use we_dom::Document;
741 use we_style::computed::{extract_stylesheets, resolve_styles};
742
743 fn test_font() -> Font {
744 let paths = [
745 "/System/Library/Fonts/Geneva.ttf",
746 "/System/Library/Fonts/Monaco.ttf",
747 ];
748 for path in &paths {
749 let p = std::path::Path::new(path);
750 if p.exists() {
751 return Font::from_file(p).expect("failed to parse font");
752 }
753 }
754 panic!("no test font found");
755 }
756
757 fn layout_doc(doc: &Document) -> LayoutTree {
758 let font = test_font();
759 let sheets = extract_stylesheets(doc);
760 let styled = resolve_styles(doc, &sheets).unwrap();
761 layout(&styled, doc, 800.0, 600.0, &font)
762 }
763
764 #[test]
765 fn empty_document() {
766 let doc = Document::new();
767 let font = test_font();
768 let sheets = extract_stylesheets(&doc);
769 let styled = resolve_styles(&doc, &sheets);
770 if let Some(styled) = styled {
771 let tree = layout(&styled, &doc, 800.0, 600.0, &font);
772 assert_eq!(tree.width, 800.0);
773 }
774 }
775
776 #[test]
777 fn single_paragraph() {
778 let mut doc = Document::new();
779 let root = doc.root();
780 let html = doc.create_element("html");
781 let body = doc.create_element("body");
782 let p = doc.create_element("p");
783 let text = doc.create_text("Hello world");
784 doc.append_child(root, html);
785 doc.append_child(html, body);
786 doc.append_child(body, p);
787 doc.append_child(p, text);
788
789 let tree = layout_doc(&doc);
790
791 assert!(matches!(tree.root.box_type, BoxType::Block(_)));
792
793 let body_box = &tree.root.children[0];
794 assert!(matches!(body_box.box_type, BoxType::Block(_)));
795
796 let p_box = &body_box.children[0];
797 assert!(matches!(p_box.box_type, BoxType::Block(_)));
798
799 assert!(!p_box.lines.is_empty(), "p should have text fragments");
800
801 // Collect all text on the first visual line.
802 let first_y = p_box.lines[0].y;
803 let line_text: String = p_box
804 .lines
805 .iter()
806 .filter(|l| (l.y - first_y).abs() < 0.01)
807 .map(|l| l.text.as_str())
808 .collect::<Vec<_>>()
809 .join(" ");
810 assert!(
811 line_text.contains("Hello") && line_text.contains("world"),
812 "line should contain Hello and world, got: {line_text}"
813 );
814
815 assert_eq!(p_box.margin.top, 16.0);
816 assert_eq!(p_box.margin.bottom, 16.0);
817 }
818
819 #[test]
820 fn blocks_stack_vertically() {
821 let mut doc = Document::new();
822 let root = doc.root();
823 let html = doc.create_element("html");
824 let body = doc.create_element("body");
825 let p1 = doc.create_element("p");
826 let t1 = doc.create_text("First");
827 let p2 = doc.create_element("p");
828 let t2 = doc.create_text("Second");
829 doc.append_child(root, html);
830 doc.append_child(html, body);
831 doc.append_child(body, p1);
832 doc.append_child(p1, t1);
833 doc.append_child(body, p2);
834 doc.append_child(p2, t2);
835
836 let tree = layout_doc(&doc);
837 let body_box = &tree.root.children[0];
838 let first = &body_box.children[0];
839 let second = &body_box.children[1];
840
841 assert!(
842 second.rect.y > first.rect.y,
843 "second p (y={}) should be below first p (y={})",
844 second.rect.y,
845 first.rect.y
846 );
847 }
848
849 #[test]
850 fn heading_larger_than_body() {
851 let mut doc = Document::new();
852 let root = doc.root();
853 let html = doc.create_element("html");
854 let body = doc.create_element("body");
855 let h1 = doc.create_element("h1");
856 let h1_text = doc.create_text("Title");
857 let p = doc.create_element("p");
858 let p_text = doc.create_text("Text");
859 doc.append_child(root, html);
860 doc.append_child(html, body);
861 doc.append_child(body, h1);
862 doc.append_child(h1, h1_text);
863 doc.append_child(body, p);
864 doc.append_child(p, p_text);
865
866 let tree = layout_doc(&doc);
867 let body_box = &tree.root.children[0];
868 let h1_box = &body_box.children[0];
869 let p_box = &body_box.children[1];
870
871 assert!(
872 h1_box.font_size > p_box.font_size,
873 "h1 font_size ({}) should be > p font_size ({})",
874 h1_box.font_size,
875 p_box.font_size
876 );
877 assert_eq!(h1_box.font_size, 32.0);
878
879 assert!(
880 h1_box.rect.height > p_box.rect.height,
881 "h1 height ({}) should be > p height ({})",
882 h1_box.rect.height,
883 p_box.rect.height
884 );
885 }
886
887 #[test]
888 fn body_has_default_margin() {
889 let mut doc = Document::new();
890 let root = doc.root();
891 let html = doc.create_element("html");
892 let body = doc.create_element("body");
893 let p = doc.create_element("p");
894 let text = doc.create_text("Test");
895 doc.append_child(root, html);
896 doc.append_child(html, body);
897 doc.append_child(body, p);
898 doc.append_child(p, text);
899
900 let tree = layout_doc(&doc);
901 let body_box = &tree.root.children[0];
902
903 assert_eq!(body_box.margin.top, 8.0);
904 assert_eq!(body_box.margin.right, 8.0);
905 assert_eq!(body_box.margin.bottom, 8.0);
906 assert_eq!(body_box.margin.left, 8.0);
907
908 assert_eq!(body_box.rect.x, 8.0);
909 assert_eq!(body_box.rect.y, 8.0);
910 }
911
912 #[test]
913 fn text_wraps_at_container_width() {
914 let mut doc = Document::new();
915 let root = doc.root();
916 let html = doc.create_element("html");
917 let body = doc.create_element("body");
918 let p = doc.create_element("p");
919 let text =
920 doc.create_text("The quick brown fox jumps over the lazy dog and more words to wrap");
921 doc.append_child(root, html);
922 doc.append_child(html, body);
923 doc.append_child(body, p);
924 doc.append_child(p, text);
925
926 let font = test_font();
927 let sheets = extract_stylesheets(&doc);
928 let styled = resolve_styles(&doc, &sheets).unwrap();
929 let tree = layout(&styled, &doc, 100.0, 600.0, &font);
930 let body_box = &tree.root.children[0];
931 let p_box = &body_box.children[0];
932
933 // Count distinct y-positions to count visual lines.
934 let mut ys: Vec<f32> = p_box.lines.iter().map(|l| l.y).collect();
935 ys.sort_by(|a, b| a.partial_cmp(b).unwrap());
936 ys.dedup_by(|a, b| (*a - *b).abs() < 0.01);
937
938 assert!(
939 ys.len() > 1,
940 "text should wrap to multiple lines, got {} visual lines",
941 ys.len()
942 );
943 }
944
945 #[test]
946 fn layout_produces_positive_dimensions() {
947 let mut doc = Document::new();
948 let root = doc.root();
949 let html = doc.create_element("html");
950 let body = doc.create_element("body");
951 let div = doc.create_element("div");
952 let text = doc.create_text("Content");
953 doc.append_child(root, html);
954 doc.append_child(html, body);
955 doc.append_child(body, div);
956 doc.append_child(div, text);
957
958 let tree = layout_doc(&doc);
959
960 for b in tree.iter() {
961 assert!(b.rect.width >= 0.0, "width should be >= 0");
962 assert!(b.rect.height >= 0.0, "height should be >= 0");
963 }
964
965 assert!(tree.height > 0.0, "layout height should be > 0");
966 }
967
968 #[test]
969 fn head_is_hidden() {
970 let mut doc = Document::new();
971 let root = doc.root();
972 let html = doc.create_element("html");
973 let head = doc.create_element("head");
974 let title = doc.create_element("title");
975 let title_text = doc.create_text("Page Title");
976 let body = doc.create_element("body");
977 let p = doc.create_element("p");
978 let p_text = doc.create_text("Visible");
979 doc.append_child(root, html);
980 doc.append_child(html, head);
981 doc.append_child(head, title);
982 doc.append_child(title, title_text);
983 doc.append_child(html, body);
984 doc.append_child(body, p);
985 doc.append_child(p, p_text);
986
987 let tree = layout_doc(&doc);
988
989 assert_eq!(
990 tree.root.children.len(),
991 1,
992 "html should have 1 child (body), head should be hidden"
993 );
994 }
995
996 #[test]
997 fn mixed_block_and_inline() {
998 let mut doc = Document::new();
999 let root = doc.root();
1000 let html = doc.create_element("html");
1001 let body = doc.create_element("body");
1002 let div = doc.create_element("div");
1003 let text1 = doc.create_text("Text");
1004 let p = doc.create_element("p");
1005 let p_text = doc.create_text("Block");
1006 let text2 = doc.create_text("More");
1007 doc.append_child(root, html);
1008 doc.append_child(html, body);
1009 doc.append_child(body, div);
1010 doc.append_child(div, text1);
1011 doc.append_child(div, p);
1012 doc.append_child(p, p_text);
1013 doc.append_child(div, text2);
1014
1015 let tree = layout_doc(&doc);
1016 let body_box = &tree.root.children[0];
1017 let div_box = &body_box.children[0];
1018
1019 assert_eq!(
1020 div_box.children.len(),
1021 3,
1022 "div should have 3 children (anon, block, anon), got {}",
1023 div_box.children.len()
1024 );
1025
1026 assert!(matches!(div_box.children[0].box_type, BoxType::Anonymous));
1027 assert!(matches!(div_box.children[1].box_type, BoxType::Block(_)));
1028 assert!(matches!(div_box.children[2].box_type, BoxType::Anonymous));
1029 }
1030
1031 #[test]
1032 fn inline_elements_contribute_text() {
1033 let mut doc = Document::new();
1034 let root = doc.root();
1035 let html = doc.create_element("html");
1036 let body = doc.create_element("body");
1037 let p = doc.create_element("p");
1038 let t1 = doc.create_text("Hello ");
1039 let em = doc.create_element("em");
1040 let t2 = doc.create_text("world");
1041 let t3 = doc.create_text("!");
1042 doc.append_child(root, html);
1043 doc.append_child(html, body);
1044 doc.append_child(body, p);
1045 doc.append_child(p, t1);
1046 doc.append_child(p, em);
1047 doc.append_child(em, t2);
1048 doc.append_child(p, t3);
1049
1050 let tree = layout_doc(&doc);
1051 let body_box = &tree.root.children[0];
1052 let p_box = &body_box.children[0];
1053
1054 assert!(!p_box.lines.is_empty());
1055
1056 let first_y = p_box.lines[0].y;
1057 let line_texts: Vec<&str> = p_box
1058 .lines
1059 .iter()
1060 .filter(|l| (l.y - first_y).abs() < 0.01)
1061 .map(|l| l.text.as_str())
1062 .collect();
1063 let combined = line_texts.join("");
1064 assert!(
1065 combined.contains("Hello") && combined.contains("world") && combined.contains("!"),
1066 "line should contain all text, got: {combined}"
1067 );
1068 }
1069
1070 #[test]
1071 fn collapse_whitespace_works() {
1072 assert_eq!(collapse_whitespace("hello world"), "hello world");
1073 assert_eq!(collapse_whitespace(" spaces "), " spaces ");
1074 assert_eq!(collapse_whitespace("\n\ttabs\n"), " tabs ");
1075 assert_eq!(collapse_whitespace("no-extra"), "no-extra");
1076 assert_eq!(collapse_whitespace(" "), " ");
1077 }
1078
1079 #[test]
1080 fn content_width_respects_body_margin() {
1081 let mut doc = Document::new();
1082 let root = doc.root();
1083 let html = doc.create_element("html");
1084 let body = doc.create_element("body");
1085 let div = doc.create_element("div");
1086 let text = doc.create_text("Content");
1087 doc.append_child(root, html);
1088 doc.append_child(html, body);
1089 doc.append_child(body, div);
1090 doc.append_child(div, text);
1091
1092 let font = test_font();
1093 let sheets = extract_stylesheets(&doc);
1094 let styled = resolve_styles(&doc, &sheets).unwrap();
1095 let tree = layout(&styled, &doc, 800.0, 600.0, &font);
1096 let body_box = &tree.root.children[0];
1097
1098 assert_eq!(body_box.rect.width, 784.0);
1099
1100 let div_box = &body_box.children[0];
1101 assert_eq!(div_box.rect.width, 784.0);
1102 }
1103
1104 #[test]
1105 fn multiple_heading_levels() {
1106 let mut doc = Document::new();
1107 let root = doc.root();
1108 let html = doc.create_element("html");
1109 let body = doc.create_element("body");
1110 doc.append_child(root, html);
1111 doc.append_child(html, body);
1112
1113 let tags = ["h1", "h2", "h3"];
1114 for tag in &tags {
1115 let h = doc.create_element(tag);
1116 let t = doc.create_text(tag);
1117 doc.append_child(body, h);
1118 doc.append_child(h, t);
1119 }
1120
1121 let tree = layout_doc(&doc);
1122 let body_box = &tree.root.children[0];
1123
1124 let h1 = &body_box.children[0];
1125 let h2 = &body_box.children[1];
1126 let h3 = &body_box.children[2];
1127 assert!(h1.font_size > h2.font_size);
1128 assert!(h2.font_size > h3.font_size);
1129
1130 assert!(h2.rect.y > h1.rect.y);
1131 assert!(h3.rect.y > h2.rect.y);
1132 }
1133
1134 #[test]
1135 fn layout_tree_iteration() {
1136 let mut doc = Document::new();
1137 let root = doc.root();
1138 let html = doc.create_element("html");
1139 let body = doc.create_element("body");
1140 let p = doc.create_element("p");
1141 let text = doc.create_text("Test");
1142 doc.append_child(root, html);
1143 doc.append_child(html, body);
1144 doc.append_child(body, p);
1145 doc.append_child(p, text);
1146
1147 let tree = layout_doc(&doc);
1148 let count = tree.iter().count();
1149 assert!(count >= 3, "should have at least html, body, p boxes");
1150 }
1151
1152 #[test]
1153 fn css_style_affects_layout() {
1154 let html_str = r#"<!DOCTYPE html>
1155<html>
1156<head>
1157<style>
1158p { margin-top: 50px; margin-bottom: 50px; }
1159</style>
1160</head>
1161<body>
1162<p>First</p>
1163<p>Second</p>
1164</body>
1165</html>"#;
1166 let doc = we_html::parse_html(html_str);
1167 let font = test_font();
1168 let sheets = extract_stylesheets(&doc);
1169 let styled = resolve_styles(&doc, &sheets).unwrap();
1170 let tree = layout(&styled, &doc, 800.0, 600.0, &font);
1171
1172 let body_box = &tree.root.children[0];
1173 let first = &body_box.children[0];
1174 let second = &body_box.children[1];
1175
1176 assert_eq!(first.margin.top, 50.0);
1177 assert_eq!(first.margin.bottom, 50.0);
1178
1179 assert!(second.rect.y > first.rect.y + 100.0);
1180 }
1181
1182 #[test]
1183 fn inline_style_affects_layout() {
1184 let html_str = r#"<!DOCTYPE html>
1185<html>
1186<body>
1187<div style="padding-top: 20px; padding-bottom: 20px;">
1188<p>Content</p>
1189</div>
1190</body>
1191</html>"#;
1192 let doc = we_html::parse_html(html_str);
1193 let font = test_font();
1194 let sheets = extract_stylesheets(&doc);
1195 let styled = resolve_styles(&doc, &sheets).unwrap();
1196 let tree = layout(&styled, &doc, 800.0, 600.0, &font);
1197
1198 let body_box = &tree.root.children[0];
1199 let div_box = &body_box.children[0];
1200
1201 assert_eq!(div_box.padding.top, 20.0);
1202 assert_eq!(div_box.padding.bottom, 20.0);
1203 }
1204
1205 #[test]
1206 fn css_color_propagates_to_layout() {
1207 let html_str = r#"<!DOCTYPE html>
1208<html>
1209<head><style>p { color: red; background-color: blue; }</style></head>
1210<body><p>Colored</p></body>
1211</html>"#;
1212 let doc = we_html::parse_html(html_str);
1213 let font = test_font();
1214 let sheets = extract_stylesheets(&doc);
1215 let styled = resolve_styles(&doc, &sheets).unwrap();
1216 let tree = layout(&styled, &doc, 800.0, 600.0, &font);
1217
1218 let body_box = &tree.root.children[0];
1219 let p_box = &body_box.children[0];
1220
1221 assert_eq!(p_box.color, Color::rgb(255, 0, 0));
1222 assert_eq!(p_box.background_color, Color::rgb(0, 0, 255));
1223 }
1224
1225 // --- New inline layout tests ---
1226
1227 #[test]
1228 fn inline_elements_have_per_fragment_styling() {
1229 let html_str = r#"<!DOCTYPE html>
1230<html>
1231<head><style>em { color: red; }</style></head>
1232<body><p>Hello <em>world</em></p></body>
1233</html>"#;
1234 let doc = we_html::parse_html(html_str);
1235 let font = test_font();
1236 let sheets = extract_stylesheets(&doc);
1237 let styled = resolve_styles(&doc, &sheets).unwrap();
1238 let tree = layout(&styled, &doc, 800.0, 600.0, &font);
1239
1240 let body_box = &tree.root.children[0];
1241 let p_box = &body_box.children[0];
1242
1243 let colors: Vec<Color> = p_box.lines.iter().map(|l| l.color).collect();
1244 assert!(
1245 colors.iter().any(|c| *c == Color::rgb(0, 0, 0)),
1246 "should have black text"
1247 );
1248 assert!(
1249 colors.iter().any(|c| *c == Color::rgb(255, 0, 0)),
1250 "should have red text from <em>"
1251 );
1252 }
1253
1254 #[test]
1255 fn br_element_forces_line_break() {
1256 let html_str = r#"<!DOCTYPE html>
1257<html>
1258<body><p>Line one<br>Line two</p></body>
1259</html>"#;
1260 let doc = we_html::parse_html(html_str);
1261 let font = test_font();
1262 let sheets = extract_stylesheets(&doc);
1263 let styled = resolve_styles(&doc, &sheets).unwrap();
1264 let tree = layout(&styled, &doc, 800.0, 600.0, &font);
1265
1266 let body_box = &tree.root.children[0];
1267 let p_box = &body_box.children[0];
1268
1269 let mut ys: Vec<f32> = p_box.lines.iter().map(|l| l.y).collect();
1270 ys.sort_by(|a, b| a.partial_cmp(b).unwrap());
1271 ys.dedup_by(|a, b| (*a - *b).abs() < 0.01);
1272
1273 assert!(
1274 ys.len() >= 2,
1275 "<br> should produce 2 visual lines, got {}",
1276 ys.len()
1277 );
1278 }
1279
1280 #[test]
1281 fn text_align_center() {
1282 let html_str = r#"<!DOCTYPE html>
1283<html>
1284<head><style>p { text-align: center; }</style></head>
1285<body><p>Hi</p></body>
1286</html>"#;
1287 let doc = we_html::parse_html(html_str);
1288 let font = test_font();
1289 let sheets = extract_stylesheets(&doc);
1290 let styled = resolve_styles(&doc, &sheets).unwrap();
1291 let tree = layout(&styled, &doc, 800.0, 600.0, &font);
1292
1293 let body_box = &tree.root.children[0];
1294 let p_box = &body_box.children[0];
1295
1296 assert!(!p_box.lines.is_empty());
1297 let first = &p_box.lines[0];
1298 // Center-aligned: text should be noticeably offset from content x.
1299 assert!(
1300 first.x > p_box.rect.x + 10.0,
1301 "center-aligned text x ({}) should be offset from content x ({})",
1302 first.x,
1303 p_box.rect.x
1304 );
1305 }
1306
1307 #[test]
1308 fn text_align_right() {
1309 let html_str = r#"<!DOCTYPE html>
1310<html>
1311<head><style>p { text-align: right; }</style></head>
1312<body><p>Hi</p></body>
1313</html>"#;
1314 let doc = we_html::parse_html(html_str);
1315 let font = test_font();
1316 let sheets = extract_stylesheets(&doc);
1317 let styled = resolve_styles(&doc, &sheets).unwrap();
1318 let tree = layout(&styled, &doc, 800.0, 600.0, &font);
1319
1320 let body_box = &tree.root.children[0];
1321 let p_box = &body_box.children[0];
1322
1323 assert!(!p_box.lines.is_empty());
1324 let first = &p_box.lines[0];
1325 let right_edge = p_box.rect.x + p_box.rect.width;
1326 assert!(
1327 (first.x + first.width - right_edge).abs() < 1.0,
1328 "right-aligned text end ({}) should be near right edge ({})",
1329 first.x + first.width,
1330 right_edge
1331 );
1332 }
1333
1334 #[test]
1335 fn inline_padding_offsets_text() {
1336 let html_str = r#"<!DOCTYPE html>
1337<html>
1338<head><style>span { padding-left: 20px; padding-right: 20px; }</style></head>
1339<body><p>A<span>B</span>C</p></body>
1340</html>"#;
1341 let doc = we_html::parse_html(html_str);
1342 let font = test_font();
1343 let sheets = extract_stylesheets(&doc);
1344 let styled = resolve_styles(&doc, &sheets).unwrap();
1345 let tree = layout(&styled, &doc, 800.0, 600.0, &font);
1346
1347 let body_box = &tree.root.children[0];
1348 let p_box = &body_box.children[0];
1349
1350 // Should have at least 3 fragments: A, B, C
1351 assert!(
1352 p_box.lines.len() >= 3,
1353 "should have fragments for A, B, C, got {}",
1354 p_box.lines.len()
1355 );
1356
1357 // B should be offset by the span's padding.
1358 let a_frag = &p_box.lines[0];
1359 let b_frag = &p_box.lines[1];
1360 let gap = b_frag.x - (a_frag.x + a_frag.width);
1361 // Gap should include the 20px padding-left from the span.
1362 assert!(
1363 gap >= 19.0,
1364 "gap between A and B ({gap}) should include span padding-left (20px)"
1365 );
1366 }
1367
1368 #[test]
1369 fn text_fragments_have_correct_font_size() {
1370 let html_str = r#"<!DOCTYPE html>
1371<html>
1372<body><h1>Big</h1><p>Small</p></body>
1373</html>"#;
1374 let doc = we_html::parse_html(html_str);
1375 let font = test_font();
1376 let sheets = extract_stylesheets(&doc);
1377 let styled = resolve_styles(&doc, &sheets).unwrap();
1378 let tree = layout(&styled, &doc, 800.0, 600.0, &font);
1379
1380 let body_box = &tree.root.children[0];
1381 let h1_box = &body_box.children[0];
1382 let p_box = &body_box.children[1];
1383
1384 assert!(!h1_box.lines.is_empty());
1385 assert!(!p_box.lines.is_empty());
1386 assert_eq!(h1_box.lines[0].font_size, 32.0);
1387 assert_eq!(p_box.lines[0].font_size, 16.0);
1388 }
1389
1390 #[test]
1391 fn line_height_from_computed_style() {
1392 let html_str = r#"<!DOCTYPE html>
1393<html>
1394<head><style>p { line-height: 30px; }</style></head>
1395<body><p>Line one Line two Line three</p></body>
1396</html>"#;
1397 let doc = we_html::parse_html(html_str);
1398 let font = test_font();
1399 let sheets = extract_stylesheets(&doc);
1400 let styled = resolve_styles(&doc, &sheets).unwrap();
1401 // Narrow viewport to force wrapping.
1402 let tree = layout(&styled, &doc, 100.0, 600.0, &font);
1403
1404 let body_box = &tree.root.children[0];
1405 let p_box = &body_box.children[0];
1406
1407 let mut ys: Vec<f32> = p_box.lines.iter().map(|l| l.y).collect();
1408 ys.sort_by(|a, b| a.partial_cmp(b).unwrap());
1409 ys.dedup_by(|a, b| (*a - *b).abs() < 0.01);
1410
1411 if ys.len() >= 2 {
1412 let gap = ys[1] - ys[0];
1413 assert!(
1414 (gap - 30.0).abs() < 1.0,
1415 "line spacing ({gap}) should be ~30px from line-height"
1416 );
1417 }
1418 }
1419}