pierrelf.com
web engine - experimental web browser
Merge branch 'block-layout': Basic block layout engine
+976
-1
+976
-1
crates/layout/src/lib.rs
+976
-1
crates/layout/src/lib.rs
···
1
-
//! Box generation, block/inline/flex/grid/table layout.
1
+
//! Block layout engine: box generation, block/inline layout, and text wrapping.
2
+
//!
3
+
//! Builds a layout tree from a DOM document and positions block-level elements
4
+
//! vertically with text wrapping. Uses hardcoded default styles (no CSS yet).
5
+
6
+
use we_dom::{Document, NodeData, NodeId};
7
+
use we_text::font::Font;
8
+
9
+
/// Edge sizes for box model (margin, padding, border).
10
+
#[derive(Debug, Clone, Copy, Default, PartialEq)]
11
+
pub struct EdgeSizes {
12
+
pub top: f32,
13
+
pub right: f32,
14
+
pub bottom: f32,
15
+
pub left: f32,
16
+
}
17
+
18
+
/// A positioned rectangle with content area dimensions.
19
+
#[derive(Debug, Clone, Copy, Default, PartialEq)]
20
+
pub struct Rect {
21
+
pub x: f32,
22
+
pub y: f32,
23
+
pub width: f32,
24
+
pub height: f32,
25
+
}
26
+
27
+
/// The type of layout box.
28
+
#[derive(Debug)]
29
+
pub enum BoxType {
30
+
/// Block-level box from an element.
31
+
Block(NodeId),
32
+
/// Inline-level box from an element.
33
+
Inline(NodeId),
34
+
/// A run of text from a text node.
35
+
TextRun { node: NodeId, text: String },
36
+
/// Anonymous block wrapping inline content within a block container.
37
+
Anonymous,
38
+
}
39
+
40
+
/// A single line of wrapped text.
41
+
#[derive(Debug, Clone, PartialEq)]
42
+
pub struct TextLine {
43
+
pub text: String,
44
+
pub x: f32,
45
+
pub y: f32,
46
+
pub width: f32,
47
+
}
48
+
49
+
/// A box in the layout tree with dimensions and child boxes.
50
+
#[derive(Debug)]
51
+
pub struct LayoutBox {
52
+
pub box_type: BoxType,
53
+
pub rect: Rect,
54
+
pub margin: EdgeSizes,
55
+
pub padding: EdgeSizes,
56
+
pub border: EdgeSizes,
57
+
pub children: Vec<LayoutBox>,
58
+
pub font_size: f32,
59
+
/// Wrapped text lines (populated for boxes with inline content).
60
+
pub lines: Vec<TextLine>,
61
+
}
62
+
63
+
impl LayoutBox {
64
+
fn new(box_type: BoxType, font_size: f32) -> Self {
65
+
LayoutBox {
66
+
box_type,
67
+
rect: Rect::default(),
68
+
margin: EdgeSizes::default(),
69
+
padding: EdgeSizes::default(),
70
+
border: EdgeSizes::default(),
71
+
children: Vec::new(),
72
+
font_size,
73
+
lines: Vec::new(),
74
+
}
75
+
}
76
+
77
+
/// Total height including margin, border, and padding.
78
+
pub fn margin_box_height(&self) -> f32 {
79
+
self.margin.top
80
+
+ self.border.top
81
+
+ self.padding.top
82
+
+ self.rect.height
83
+
+ self.padding.bottom
84
+
+ self.border.bottom
85
+
+ self.margin.bottom
86
+
}
87
+
88
+
/// Iterate over all boxes in depth-first pre-order.
89
+
pub fn iter(&self) -> LayoutBoxIter<'_> {
90
+
LayoutBoxIter { stack: vec![self] }
91
+
}
92
+
}
93
+
94
+
/// Depth-first pre-order iterator over layout boxes.
95
+
pub struct LayoutBoxIter<'a> {
96
+
stack: Vec<&'a LayoutBox>,
97
+
}
98
+
99
+
impl<'a> Iterator for LayoutBoxIter<'a> {
100
+
type Item = &'a LayoutBox;
101
+
102
+
fn next(&mut self) -> Option<&'a LayoutBox> {
103
+
let node = self.stack.pop()?;
104
+
// Push children in reverse so leftmost child is visited first.
105
+
for child in node.children.iter().rev() {
106
+
self.stack.push(child);
107
+
}
108
+
Some(node)
109
+
}
110
+
}
111
+
112
+
/// The result of laying out a document.
113
+
#[derive(Debug)]
114
+
pub struct LayoutTree {
115
+
pub root: LayoutBox,
116
+
pub width: f32,
117
+
pub height: f32,
118
+
}
119
+
120
+
impl LayoutTree {
121
+
/// Iterate over all layout boxes in depth-first pre-order.
122
+
pub fn iter(&self) -> LayoutBoxIter<'_> {
123
+
self.root.iter()
124
+
}
125
+
}
126
+
127
+
// ---------------------------------------------------------------------------
128
+
// Display type classification
129
+
// ---------------------------------------------------------------------------
130
+
131
+
#[derive(Debug, Clone, Copy, PartialEq)]
132
+
enum DisplayType {
133
+
Block,
134
+
Inline,
135
+
None,
136
+
}
137
+
138
+
fn display_type(tag: &str) -> DisplayType {
139
+
match tag {
140
+
"html" | "body" | "div" | "p" | "pre" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "ul"
141
+
| "ol" | "li" | "blockquote" | "section" | "article" | "nav" | "header" | "footer"
142
+
| "main" | "hr" => DisplayType::Block,
143
+
144
+
"span" | "a" | "em" | "strong" | "b" | "i" | "u" | "code" | "small" | "sub" | "sup"
145
+
| "br" => DisplayType::Inline,
146
+
147
+
"head" | "title" | "script" | "style" | "link" | "meta" => DisplayType::None,
148
+
149
+
_ => DisplayType::Block,
150
+
}
151
+
}
152
+
153
+
// ---------------------------------------------------------------------------
154
+
// Default styles (hardcoded for Phase 3)
155
+
// ---------------------------------------------------------------------------
156
+
157
+
fn default_font_size(tag: &str, parent_size: f32) -> f32 {
158
+
match tag {
159
+
"h1" => parent_size * 2.0,
160
+
"h2" => parent_size * 1.5,
161
+
"h3" => parent_size * 1.17,
162
+
"h4" => parent_size,
163
+
"h5" => parent_size * 0.83,
164
+
"h6" => parent_size * 0.67,
165
+
_ => parent_size,
166
+
}
167
+
}
168
+
169
+
fn default_margin(tag: &str, font_size: f32) -> EdgeSizes {
170
+
match tag {
171
+
"body" => EdgeSizes {
172
+
top: 8.0,
173
+
right: 8.0,
174
+
bottom: 8.0,
175
+
left: 8.0,
176
+
},
177
+
"p" => EdgeSizes {
178
+
top: font_size,
179
+
bottom: font_size,
180
+
..EdgeSizes::default()
181
+
},
182
+
"h1" => EdgeSizes {
183
+
top: font_size * 0.67,
184
+
bottom: font_size * 0.67,
185
+
..EdgeSizes::default()
186
+
},
187
+
"h2" => EdgeSizes {
188
+
top: font_size * 0.83,
189
+
bottom: font_size * 0.83,
190
+
..EdgeSizes::default()
191
+
},
192
+
"h3" | "h4" => EdgeSizes {
193
+
top: font_size,
194
+
bottom: font_size,
195
+
..EdgeSizes::default()
196
+
},
197
+
"h5" | "h6" => EdgeSizes {
198
+
top: font_size * 1.67,
199
+
bottom: font_size * 1.67,
200
+
..EdgeSizes::default()
201
+
},
202
+
_ => EdgeSizes::default(),
203
+
}
204
+
}
205
+
206
+
// ---------------------------------------------------------------------------
207
+
// Build layout tree from DOM
208
+
// ---------------------------------------------------------------------------
209
+
210
+
fn build_box(doc: &Document, node: NodeId, parent_font_size: f32) -> Option<LayoutBox> {
211
+
match doc.node_data(node) {
212
+
NodeData::Document => {
213
+
let mut children = Vec::new();
214
+
for child in doc.children(node) {
215
+
if let Some(child_box) = build_box(doc, child, parent_font_size) {
216
+
children.push(child_box);
217
+
}
218
+
}
219
+
// Unwrap single root element (typically <html>).
220
+
if children.len() == 1 {
221
+
children.into_iter().next()
222
+
} else if children.is_empty() {
223
+
None
224
+
} else {
225
+
let mut b = LayoutBox::new(BoxType::Anonymous, parent_font_size);
226
+
b.children = children;
227
+
Some(b)
228
+
}
229
+
}
230
+
NodeData::Element { tag_name, .. } => {
231
+
let dt = display_type(tag_name);
232
+
if dt == DisplayType::None {
233
+
return None;
234
+
}
235
+
236
+
let font_size = default_font_size(tag_name, parent_font_size);
237
+
let margin = default_margin(tag_name, font_size);
238
+
239
+
let mut children = Vec::new();
240
+
for child in doc.children(node) {
241
+
if let Some(child_box) = build_box(doc, child, font_size) {
242
+
children.push(child_box);
243
+
}
244
+
}
245
+
246
+
let box_type = match dt {
247
+
DisplayType::Block => BoxType::Block(node),
248
+
DisplayType::Inline => BoxType::Inline(node),
249
+
DisplayType::None => unreachable!(),
250
+
};
251
+
252
+
// For block containers, ensure children are uniformly block or inline.
253
+
if dt == DisplayType::Block {
254
+
children = normalize_children(children, font_size);
255
+
}
256
+
257
+
let mut b = LayoutBox::new(box_type, font_size);
258
+
b.margin = margin;
259
+
b.children = children;
260
+
Some(b)
261
+
}
262
+
NodeData::Text { data } => {
263
+
let collapsed = collapse_whitespace(data);
264
+
if collapsed.is_empty() {
265
+
return None;
266
+
}
267
+
Some(LayoutBox::new(
268
+
BoxType::TextRun {
269
+
node,
270
+
text: collapsed,
271
+
},
272
+
parent_font_size,
273
+
))
274
+
}
275
+
NodeData::Comment { .. } => None,
276
+
}
277
+
}
278
+
279
+
/// Collapse runs of whitespace to a single space. Preserves non-whitespace content.
280
+
fn collapse_whitespace(s: &str) -> String {
281
+
let mut result = String::new();
282
+
let mut in_ws = false;
283
+
for ch in s.chars() {
284
+
if ch.is_whitespace() {
285
+
if !in_ws {
286
+
result.push(' ');
287
+
}
288
+
in_ws = true;
289
+
} else {
290
+
in_ws = false;
291
+
result.push(ch);
292
+
}
293
+
}
294
+
result
295
+
}
296
+
297
+
/// If a block container has a mix of block-level and inline-level children,
298
+
/// wrap consecutive inline runs in anonymous block boxes.
299
+
fn normalize_children(children: Vec<LayoutBox>, font_size: f32) -> Vec<LayoutBox> {
300
+
if children.is_empty() {
301
+
return children;
302
+
}
303
+
304
+
let has_block = children.iter().any(is_block_level);
305
+
if !has_block {
306
+
// All inline — parent will do inline layout directly.
307
+
return children;
308
+
}
309
+
310
+
let has_inline = children.iter().any(|c| !is_block_level(c));
311
+
if !has_inline {
312
+
// All block — no wrapping needed.
313
+
return children;
314
+
}
315
+
316
+
// Mixed: wrap consecutive inline runs in anonymous blocks.
317
+
let mut result = Vec::new();
318
+
let mut inline_group: Vec<LayoutBox> = Vec::new();
319
+
320
+
for child in children {
321
+
if is_block_level(&child) {
322
+
if !inline_group.is_empty() {
323
+
let mut anon = LayoutBox::new(BoxType::Anonymous, font_size);
324
+
anon.children = std::mem::take(&mut inline_group);
325
+
result.push(anon);
326
+
}
327
+
result.push(child);
328
+
} else {
329
+
inline_group.push(child);
330
+
}
331
+
}
332
+
333
+
if !inline_group.is_empty() {
334
+
let mut anon = LayoutBox::new(BoxType::Anonymous, font_size);
335
+
anon.children = inline_group;
336
+
result.push(anon);
337
+
}
338
+
339
+
result
340
+
}
341
+
342
+
fn is_block_level(b: &LayoutBox) -> bool {
343
+
matches!(b.box_type, BoxType::Block(_) | BoxType::Anonymous)
344
+
}
345
+
346
+
// ---------------------------------------------------------------------------
347
+
// Layout algorithm
348
+
// ---------------------------------------------------------------------------
349
+
350
+
/// Position and size a layout box within `available_width` at position (`x`, `y`).
351
+
///
352
+
/// `x` and `y` mark the top-left corner of the box's margin area.
353
+
fn compute_layout(b: &mut LayoutBox, x: f32, y: f32, available_width: f32, font: &Font) {
354
+
let content_x = x + b.margin.left + b.border.left + b.padding.left;
355
+
let content_y = y + b.margin.top + b.border.top + b.padding.top;
356
+
let content_width = (available_width
357
+
- b.margin.left
358
+
- b.margin.right
359
+
- b.border.left
360
+
- b.border.right
361
+
- b.padding.left
362
+
- b.padding.right)
363
+
.max(0.0);
364
+
365
+
b.rect.x = content_x;
366
+
b.rect.y = content_y;
367
+
b.rect.width = content_width;
368
+
369
+
match &b.box_type {
370
+
BoxType::Block(_) | BoxType::Anonymous => {
371
+
if has_block_children(b) {
372
+
layout_block_children(b, font);
373
+
} else {
374
+
layout_inline_children(b, font);
375
+
}
376
+
}
377
+
BoxType::TextRun { .. } | BoxType::Inline(_) => {
378
+
// Handled by the parent's inline layout.
379
+
}
380
+
}
381
+
}
382
+
383
+
fn has_block_children(b: &LayoutBox) -> bool {
384
+
b.children.iter().any(is_block_level)
385
+
}
386
+
387
+
/// Lay out block-level children: stack them vertically.
388
+
fn layout_block_children(parent: &mut LayoutBox, font: &Font) {
389
+
let content_x = parent.rect.x;
390
+
let content_width = parent.rect.width;
391
+
let mut cursor_y = parent.rect.y;
392
+
393
+
for child in &mut parent.children {
394
+
compute_layout(child, content_x, cursor_y, content_width, font);
395
+
cursor_y += child.margin_box_height();
396
+
}
397
+
398
+
parent.rect.height = cursor_y - parent.rect.y;
399
+
}
400
+
401
+
/// Lay out inline children: collect text, word-wrap, and compute height.
402
+
fn layout_inline_children(parent: &mut LayoutBox, font: &Font) {
403
+
let text = collect_inline_text(&parent.children);
404
+
if text.is_empty() {
405
+
parent.rect.height = 0.0;
406
+
return;
407
+
}
408
+
409
+
let line_height = parent.font_size * 1.2;
410
+
let wrapped = wrap_text(&text, parent.rect.width, font, parent.font_size);
411
+
412
+
let mut y = parent.rect.y;
413
+
let mut positioned = Vec::with_capacity(wrapped.len());
414
+
for line in wrapped {
415
+
positioned.push(TextLine {
416
+
text: line.text,
417
+
x: parent.rect.x,
418
+
y,
419
+
width: line.width,
420
+
});
421
+
y += line_height;
422
+
}
423
+
424
+
parent.rect.height = positioned.len() as f32 * line_height;
425
+
parent.lines = positioned;
426
+
}
427
+
428
+
/// Recursively collect all text from inline children.
429
+
fn collect_inline_text(children: &[LayoutBox]) -> String {
430
+
let mut result = String::new();
431
+
collect_text_recursive(children, &mut result);
432
+
result
433
+
}
434
+
435
+
fn collect_text_recursive(children: &[LayoutBox], result: &mut String) {
436
+
for child in children {
437
+
match &child.box_type {
438
+
BoxType::TextRun { text, .. } => {
439
+
result.push_str(text);
440
+
}
441
+
BoxType::Inline(_) => {
442
+
collect_text_recursive(&child.children, result);
443
+
}
444
+
_ => {}
445
+
}
446
+
}
447
+
}
448
+
449
+
// ---------------------------------------------------------------------------
450
+
// Text measurement and word wrapping
451
+
// ---------------------------------------------------------------------------
452
+
453
+
/// Measure the total advance width of a text string at the given font size.
454
+
fn measure_text_width(font: &Font, text: &str, font_size: f32) -> f32 {
455
+
let shaped = font.shape_text(text, font_size);
456
+
match shaped.last() {
457
+
Some(last) => last.x_offset + last.x_advance,
458
+
None => 0.0,
459
+
}
460
+
}
461
+
462
+
/// Word-wrap text to fit within `max_width`.
463
+
fn wrap_text(text: &str, max_width: f32, font: &Font, font_size: f32) -> Vec<TextLine> {
464
+
let words: Vec<&str> = text.split_whitespace().collect();
465
+
if words.is_empty() {
466
+
return Vec::new();
467
+
}
468
+
469
+
let space_width = measure_text_width(font, " ", font_size);
470
+
let mut lines = Vec::new();
471
+
let mut line_text = String::new();
472
+
let mut line_width: f32 = 0.0;
473
+
474
+
for word in &words {
475
+
let word_width = measure_text_width(font, word, font_size);
476
+
477
+
if line_text.is_empty() {
478
+
// First word on line — always accept.
479
+
line_text.push_str(word);
480
+
line_width = word_width;
481
+
} else if line_width + space_width + word_width <= max_width {
482
+
line_text.push(' ');
483
+
line_text.push_str(word);
484
+
line_width += space_width + word_width;
485
+
} else {
486
+
// Emit current line, start new one.
487
+
lines.push(TextLine {
488
+
text: line_text,
489
+
x: 0.0,
490
+
y: 0.0,
491
+
width: line_width,
492
+
});
493
+
line_text = word.to_string();
494
+
line_width = word_width;
495
+
}
496
+
}
497
+
498
+
if !line_text.is_empty() {
499
+
lines.push(TextLine {
500
+
text: line_text,
501
+
x: 0.0,
502
+
y: 0.0,
503
+
width: line_width,
504
+
});
505
+
}
506
+
507
+
lines
508
+
}
509
+
510
+
// ---------------------------------------------------------------------------
511
+
// Public API
512
+
// ---------------------------------------------------------------------------
513
+
514
+
const BASE_FONT_SIZE: f32 = 16.0;
515
+
516
+
/// Build and lay out a DOM document.
517
+
///
518
+
/// Returns a `LayoutTree` with positioned boxes ready for rendering.
519
+
pub fn layout(
520
+
document: &Document,
521
+
viewport_width: f32,
522
+
_viewport_height: f32,
523
+
font: &Font,
524
+
) -> LayoutTree {
525
+
let mut root = match build_box(document, document.root(), BASE_FONT_SIZE) {
526
+
Some(b) => b,
527
+
None => {
528
+
return LayoutTree {
529
+
root: LayoutBox::new(BoxType::Anonymous, BASE_FONT_SIZE),
530
+
width: viewport_width,
531
+
height: 0.0,
532
+
};
533
+
}
534
+
};
535
+
536
+
compute_layout(&mut root, 0.0, 0.0, viewport_width, font);
537
+
538
+
let height = root.margin_box_height();
539
+
LayoutTree {
540
+
root,
541
+
width: viewport_width,
542
+
height,
543
+
}
544
+
}
545
+
546
+
#[cfg(test)]
547
+
mod tests {
548
+
use super::*;
549
+
use we_dom::Document;
550
+
551
+
// Helper: load a system font for testing.
552
+
fn test_font() -> Font {
553
+
let paths = [
554
+
"/System/Library/Fonts/Geneva.ttf",
555
+
"/System/Library/Fonts/Monaco.ttf",
556
+
];
557
+
for path in &paths {
558
+
let p = std::path::Path::new(path);
559
+
if p.exists() {
560
+
return Font::from_file(p).expect("failed to parse font");
561
+
}
562
+
}
563
+
panic!("no test font found");
564
+
}
565
+
566
+
// Helper: build a simple DOM and lay it out.
567
+
fn layout_simple_html(html_element: NodeId, doc: &Document) -> LayoutTree {
568
+
let _ = html_element; // doc.root() already wraps it
569
+
let font = test_font();
570
+
layout(doc, 800.0, 600.0, &font)
571
+
}
572
+
573
+
#[test]
574
+
fn empty_document() {
575
+
let doc = Document::new();
576
+
let font = test_font();
577
+
let tree = layout(&doc, 800.0, 600.0, &font);
578
+
// Empty document should produce a minimal layout.
579
+
assert_eq!(tree.width, 800.0);
580
+
}
581
+
582
+
#[test]
583
+
fn single_paragraph() {
584
+
// Build: <html><body><p>Hello world</p></body></html>
585
+
let mut doc = Document::new();
586
+
let root = doc.root();
587
+
let html = doc.create_element("html");
588
+
let body = doc.create_element("body");
589
+
let p = doc.create_element("p");
590
+
let text = doc.create_text("Hello world");
591
+
doc.append_child(root, html);
592
+
doc.append_child(html, body);
593
+
doc.append_child(body, p);
594
+
doc.append_child(p, text);
595
+
596
+
let tree = layout_simple_html(html, &doc);
597
+
598
+
// Root should be the html element box.
599
+
assert!(matches!(tree.root.box_type, BoxType::Block(_)));
600
+
601
+
// Find the p box (html > body > p).
602
+
let body_box = &tree.root.children[0];
603
+
assert!(matches!(body_box.box_type, BoxType::Block(_)));
604
+
605
+
let p_box = &body_box.children[0];
606
+
assert!(matches!(p_box.box_type, BoxType::Block(_)));
607
+
608
+
// p should have text lines.
609
+
assert!(!p_box.lines.is_empty(), "p should have wrapped text lines");
610
+
assert_eq!(p_box.lines[0].text, "Hello world");
611
+
612
+
// p should have vertical margins (1em = 16px default).
613
+
assert_eq!(p_box.margin.top, 16.0);
614
+
assert_eq!(p_box.margin.bottom, 16.0);
615
+
}
616
+
617
+
#[test]
618
+
fn blocks_stack_vertically() {
619
+
// <html><body><p>First</p><p>Second</p></body></html>
620
+
let mut doc = Document::new();
621
+
let root = doc.root();
622
+
let html = doc.create_element("html");
623
+
let body = doc.create_element("body");
624
+
let p1 = doc.create_element("p");
625
+
let t1 = doc.create_text("First");
626
+
let p2 = doc.create_element("p");
627
+
let t2 = doc.create_text("Second");
628
+
doc.append_child(root, html);
629
+
doc.append_child(html, body);
630
+
doc.append_child(body, p1);
631
+
doc.append_child(p1, t1);
632
+
doc.append_child(body, p2);
633
+
doc.append_child(p2, t2);
634
+
635
+
let tree = layout_simple_html(html, &doc);
636
+
let body_box = &tree.root.children[0];
637
+
let first = &body_box.children[0];
638
+
let second = &body_box.children[1];
639
+
640
+
// Second paragraph should be below the first.
641
+
assert!(
642
+
second.rect.y > first.rect.y,
643
+
"second p (y={}) should be below first p (y={})",
644
+
second.rect.y,
645
+
first.rect.y
646
+
);
647
+
}
648
+
649
+
#[test]
650
+
fn heading_larger_than_body() {
651
+
// <html><body><h1>Title</h1><p>Text</p></body></html>
652
+
let mut doc = Document::new();
653
+
let root = doc.root();
654
+
let html = doc.create_element("html");
655
+
let body = doc.create_element("body");
656
+
let h1 = doc.create_element("h1");
657
+
let h1_text = doc.create_text("Title");
658
+
let p = doc.create_element("p");
659
+
let p_text = doc.create_text("Text");
660
+
doc.append_child(root, html);
661
+
doc.append_child(html, body);
662
+
doc.append_child(body, h1);
663
+
doc.append_child(h1, h1_text);
664
+
doc.append_child(body, p);
665
+
doc.append_child(p, p_text);
666
+
667
+
let tree = layout_simple_html(html, &doc);
668
+
let body_box = &tree.root.children[0];
669
+
let h1_box = &body_box.children[0];
670
+
let p_box = &body_box.children[1];
671
+
672
+
// h1 should have a larger font size (2em = 32px).
673
+
assert!(
674
+
h1_box.font_size > p_box.font_size,
675
+
"h1 font_size ({}) should be > p font_size ({})",
676
+
h1_box.font_size,
677
+
p_box.font_size
678
+
);
679
+
assert_eq!(h1_box.font_size, 32.0);
680
+
681
+
// h1 should take more vertical space.
682
+
assert!(
683
+
h1_box.rect.height > p_box.rect.height,
684
+
"h1 height ({}) should be > p height ({})",
685
+
h1_box.rect.height,
686
+
p_box.rect.height
687
+
);
688
+
}
689
+
690
+
#[test]
691
+
fn body_has_default_margin() {
692
+
let mut doc = Document::new();
693
+
let root = doc.root();
694
+
let html = doc.create_element("html");
695
+
let body = doc.create_element("body");
696
+
let p = doc.create_element("p");
697
+
let text = doc.create_text("Test");
698
+
doc.append_child(root, html);
699
+
doc.append_child(html, body);
700
+
doc.append_child(body, p);
701
+
doc.append_child(p, text);
702
+
703
+
let tree = layout_simple_html(html, &doc);
704
+
let body_box = &tree.root.children[0];
705
+
706
+
assert_eq!(body_box.margin.top, 8.0);
707
+
assert_eq!(body_box.margin.right, 8.0);
708
+
assert_eq!(body_box.margin.bottom, 8.0);
709
+
assert_eq!(body_box.margin.left, 8.0);
710
+
711
+
// Body content should be offset by 8px from html content edge.
712
+
assert_eq!(body_box.rect.x, 8.0);
713
+
assert_eq!(body_box.rect.y, 8.0);
714
+
}
715
+
716
+
#[test]
717
+
fn text_wraps_at_container_width() {
718
+
// Use a narrow viewport to force wrapping.
719
+
let mut doc = Document::new();
720
+
let root = doc.root();
721
+
let html = doc.create_element("html");
722
+
let body = doc.create_element("body");
723
+
let p = doc.create_element("p");
724
+
let text =
725
+
doc.create_text("The quick brown fox jumps over the lazy dog and more words to wrap");
726
+
doc.append_child(root, html);
727
+
doc.append_child(html, body);
728
+
doc.append_child(body, p);
729
+
doc.append_child(p, text);
730
+
731
+
let font = test_font();
732
+
// Narrow viewport: 100px (minus body margin 8+8 = 84px content width).
733
+
let tree = layout(&doc, 100.0, 600.0, &font);
734
+
let body_box = &tree.root.children[0];
735
+
let p_box = &body_box.children[0];
736
+
737
+
// With a 84px content width, long text should wrap to multiple lines.
738
+
assert!(
739
+
p_box.lines.len() > 1,
740
+
"text should wrap to multiple lines, got {} lines",
741
+
p_box.lines.len()
742
+
);
743
+
}
744
+
745
+
#[test]
746
+
fn layout_produces_positive_dimensions() {
747
+
let mut doc = Document::new();
748
+
let root = doc.root();
749
+
let html = doc.create_element("html");
750
+
let body = doc.create_element("body");
751
+
let div = doc.create_element("div");
752
+
let text = doc.create_text("Content");
753
+
doc.append_child(root, html);
754
+
doc.append_child(html, body);
755
+
doc.append_child(body, div);
756
+
doc.append_child(div, text);
757
+
758
+
let tree = layout_simple_html(html, &doc);
759
+
760
+
// All boxes should have non-negative dimensions.
761
+
for b in tree.iter() {
762
+
assert!(b.rect.width >= 0.0, "width should be >= 0");
763
+
assert!(b.rect.height >= 0.0, "height should be >= 0");
764
+
}
765
+
766
+
// Overall layout should have positive height.
767
+
assert!(tree.height > 0.0, "layout height should be > 0");
768
+
}
769
+
770
+
#[test]
771
+
fn head_is_hidden() {
772
+
let mut doc = Document::new();
773
+
let root = doc.root();
774
+
let html = doc.create_element("html");
775
+
let head = doc.create_element("head");
776
+
let title = doc.create_element("title");
777
+
let title_text = doc.create_text("Page Title");
778
+
let body = doc.create_element("body");
779
+
let p = doc.create_element("p");
780
+
let p_text = doc.create_text("Visible");
781
+
doc.append_child(root, html);
782
+
doc.append_child(html, head);
783
+
doc.append_child(head, title);
784
+
doc.append_child(title, title_text);
785
+
doc.append_child(html, body);
786
+
doc.append_child(body, p);
787
+
doc.append_child(p, p_text);
788
+
789
+
let tree = layout_simple_html(html, &doc);
790
+
791
+
// html should have one child (body), head is display:none.
792
+
assert_eq!(
793
+
tree.root.children.len(),
794
+
1,
795
+
"html should have 1 child (body), head should be hidden"
796
+
);
797
+
}
798
+
799
+
#[test]
800
+
fn mixed_block_and_inline() {
801
+
// <html><body><div>Text<p>Block</p>More</div></body></html>
802
+
let mut doc = Document::new();
803
+
let root = doc.root();
804
+
let html = doc.create_element("html");
805
+
let body = doc.create_element("body");
806
+
let div = doc.create_element("div");
807
+
let text1 = doc.create_text("Text");
808
+
let p = doc.create_element("p");
809
+
let p_text = doc.create_text("Block");
810
+
let text2 = doc.create_text("More");
811
+
doc.append_child(root, html);
812
+
doc.append_child(html, body);
813
+
doc.append_child(body, div);
814
+
doc.append_child(div, text1);
815
+
doc.append_child(div, p);
816
+
doc.append_child(p, p_text);
817
+
doc.append_child(div, text2);
818
+
819
+
let tree = layout_simple_html(html, &doc);
820
+
let body_box = &tree.root.children[0];
821
+
let div_box = &body_box.children[0];
822
+
823
+
// div should have 3 children: anonymous(Text), block(p), anonymous(More).
824
+
assert_eq!(
825
+
div_box.children.len(),
826
+
3,
827
+
"div should have 3 children (anon, block, anon), got {}",
828
+
div_box.children.len()
829
+
);
830
+
831
+
assert!(matches!(div_box.children[0].box_type, BoxType::Anonymous));
832
+
assert!(matches!(div_box.children[1].box_type, BoxType::Block(_)));
833
+
assert!(matches!(div_box.children[2].box_type, BoxType::Anonymous));
834
+
}
835
+
836
+
#[test]
837
+
fn inline_elements_contribute_text() {
838
+
// <html><body><p>Hello <em>world</em>!</p></body></html>
839
+
let mut doc = Document::new();
840
+
let root = doc.root();
841
+
let html = doc.create_element("html");
842
+
let body = doc.create_element("body");
843
+
let p = doc.create_element("p");
844
+
let t1 = doc.create_text("Hello ");
845
+
let em = doc.create_element("em");
846
+
let t2 = doc.create_text("world");
847
+
let t3 = doc.create_text("!");
848
+
doc.append_child(root, html);
849
+
doc.append_child(html, body);
850
+
doc.append_child(body, p);
851
+
doc.append_child(p, t1);
852
+
doc.append_child(p, em);
853
+
doc.append_child(em, t2);
854
+
doc.append_child(p, t3);
855
+
856
+
let tree = layout_simple_html(html, &doc);
857
+
let body_box = &tree.root.children[0];
858
+
let p_box = &body_box.children[0];
859
+
860
+
// Text should be collected from inline children.
861
+
assert!(!p_box.lines.is_empty());
862
+
assert_eq!(p_box.lines[0].text, "Hello world!");
863
+
}
864
+
865
+
#[test]
866
+
fn collapse_whitespace_works() {
867
+
assert_eq!(collapse_whitespace("hello world"), "hello world");
868
+
assert_eq!(collapse_whitespace(" spaces "), " spaces ");
869
+
assert_eq!(collapse_whitespace("\n\ttabs\n"), " tabs ");
870
+
assert_eq!(collapse_whitespace("no-extra"), "no-extra");
871
+
assert_eq!(collapse_whitespace(" "), " ");
872
+
}
873
+
874
+
#[test]
875
+
fn display_type_classification() {
876
+
assert_eq!(display_type("div"), DisplayType::Block);
877
+
assert_eq!(display_type("p"), DisplayType::Block);
878
+
assert_eq!(display_type("h1"), DisplayType::Block);
879
+
assert_eq!(display_type("span"), DisplayType::Inline);
880
+
assert_eq!(display_type("a"), DisplayType::Inline);
881
+
assert_eq!(display_type("head"), DisplayType::None);
882
+
assert_eq!(display_type("script"), DisplayType::None);
883
+
assert_eq!(display_type("unknown-tag"), DisplayType::Block);
884
+
}
885
+
886
+
#[test]
887
+
fn default_font_sizes() {
888
+
assert_eq!(default_font_size("h1", 16.0), 32.0);
889
+
assert_eq!(default_font_size("h2", 16.0), 24.0);
890
+
assert_eq!(default_font_size("p", 16.0), 16.0);
891
+
assert_eq!(default_font_size("div", 16.0), 16.0);
892
+
}
893
+
894
+
#[test]
895
+
fn heading_margins() {
896
+
let m = default_margin("h1", 32.0);
897
+
let expected = 32.0 * 0.67;
898
+
assert!((m.top - expected).abs() < 0.01);
899
+
assert!((m.bottom - expected).abs() < 0.01);
900
+
}
901
+
902
+
#[test]
903
+
fn layout_tree_iteration() {
904
+
let mut doc = Document::new();
905
+
let root = doc.root();
906
+
let html = doc.create_element("html");
907
+
let body = doc.create_element("body");
908
+
let p = doc.create_element("p");
909
+
let text = doc.create_text("Test");
910
+
doc.append_child(root, html);
911
+
doc.append_child(html, body);
912
+
doc.append_child(body, p);
913
+
doc.append_child(p, text);
914
+
915
+
let tree = layout_simple_html(html, &doc);
916
+
let count = tree.iter().count();
917
+
assert!(count >= 3, "should have at least html, body, p boxes");
918
+
}
919
+
920
+
#[test]
921
+
fn content_width_respects_body_margin() {
922
+
let mut doc = Document::new();
923
+
let root = doc.root();
924
+
let html = doc.create_element("html");
925
+
let body = doc.create_element("body");
926
+
let div = doc.create_element("div");
927
+
let text = doc.create_text("Content");
928
+
doc.append_child(root, html);
929
+
doc.append_child(html, body);
930
+
doc.append_child(body, div);
931
+
doc.append_child(div, text);
932
+
933
+
let font = test_font();
934
+
let tree = layout(&doc, 800.0, 600.0, &font);
935
+
let body_box = &tree.root.children[0];
936
+
937
+
// body content width = 800 - 8 - 8 = 784
938
+
assert_eq!(body_box.rect.width, 784.0);
939
+
940
+
// div inside body should also be 784px wide.
941
+
let div_box = &body_box.children[0];
942
+
assert_eq!(div_box.rect.width, 784.0);
943
+
}
944
+
945
+
#[test]
946
+
fn multiple_heading_levels() {
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
+
doc.append_child(root, html);
952
+
doc.append_child(html, body);
953
+
954
+
let tags = ["h1", "h2", "h3"];
955
+
for tag in &tags {
956
+
let h = doc.create_element(tag);
957
+
let t = doc.create_text(tag);
958
+
doc.append_child(body, h);
959
+
doc.append_child(h, t);
960
+
}
961
+
962
+
let tree = layout_simple_html(html, &doc);
963
+
let body_box = &tree.root.children[0];
964
+
965
+
// h1 font_size > h2 font_size > h3 font_size
966
+
let h1 = &body_box.children[0];
967
+
let h2 = &body_box.children[1];
968
+
let h3 = &body_box.children[2];
969
+
assert!(h1.font_size > h2.font_size);
970
+
assert!(h2.font_size > h3.font_size);
971
+
972
+
// All should stack vertically.
973
+
assert!(h2.rect.y > h1.rect.y);
974
+
assert!(h3.rect.y > h2.rect.y);
975
+
}
976
+
}