pierrelf.com
web engine - experimental web browser
1//! Integration tests: HTML string → DOM → extract CSS → resolve styles.
2
3use we_css::values::Color;
4use we_style::computed::{extract_stylesheets, resolve_styles, Display, FontWeight, LengthOrAuto};
5
6#[test]
7fn html_with_style_element() {
8 let html = r#"<!DOCTYPE html>
9<html>
10<head>
11<style>
12p { color: red; font-size: 24px; }
13h1 { color: blue; }
14</style>
15</head>
16<body>
17<h1>Title</h1>
18<p>Paragraph</p>
19</body>
20</html>"#;
21
22 let doc = we_html::parse_html(html);
23 let sheets = extract_stylesheets(&doc);
24 assert_eq!(sheets.len(), 1);
25
26 let styled = resolve_styles(&doc, &sheets).unwrap();
27 // styled root is <html>
28 // Find body (first visible child)
29 let body = &styled.children[0];
30
31 // Find h1 and p
32 let h1 = &body.children[0];
33 let p = &body.children[1];
34
35 assert_eq!(h1.style.color, Color::rgb(0, 0, 255)); // blue
36 assert_eq!(p.style.color, Color::rgb(255, 0, 0)); // red
37 assert_eq!(p.style.font_size, 24.0);
38}
39
40#[test]
41fn html_with_multiple_style_elements() {
42 let html = r#"<!DOCTYPE html>
43<html>
44<head>
45<style>p { color: red; }</style>
46<style>p { color: green; }</style>
47</head>
48<body><p>text</p></body>
49</html>"#;
50
51 let doc = we_html::parse_html(html);
52 let sheets = extract_stylesheets(&doc);
53 assert_eq!(sheets.len(), 2);
54
55 let styled = resolve_styles(&doc, &sheets).unwrap();
56 let body = &styled.children[0];
57 let p = &body.children[0];
58
59 // Later stylesheet wins.
60 assert_eq!(p.style.color, Color::rgb(0, 128, 0));
61}
62
63#[test]
64fn html_with_inline_style_attribute() {
65 let html = r#"<!DOCTYPE html>
66<html>
67<head>
68<style>p { color: red; }</style>
69</head>
70<body>
71<p style="color: blue;">text</p>
72</body>
73</html>"#;
74
75 let doc = we_html::parse_html(html);
76 let sheets = extract_stylesheets(&doc);
77
78 let styled = resolve_styles(&doc, &sheets).unwrap();
79 let body = &styled.children[0];
80 let p = &body.children[0];
81
82 // Inline style overrides stylesheet.
83 assert_eq!(p.style.color, Color::rgb(0, 0, 255));
84}
85
86#[test]
87fn html_no_style_uses_ua_defaults() {
88 let html = r#"<!DOCTYPE html>
89<html>
90<body>
91<h1>Title</h1>
92<p>Text</p>
93</body>
94</html>"#;
95
96 let doc = we_html::parse_html(html);
97 let sheets = extract_stylesheets(&doc);
98 assert!(sheets.is_empty());
99
100 let styled = resolve_styles(&doc, &sheets).unwrap();
101 let body = &styled.children[0];
102
103 // Body should have 8px margin from UA stylesheet.
104 assert_eq!(body.style.margin_top, LengthOrAuto::Length(8.0));
105
106 // h1 should be block with bold and 2em font-size.
107 let h1 = &body.children[0];
108 assert_eq!(h1.style.display, Display::Block);
109 assert_eq!(h1.style.font_weight, FontWeight(700.0));
110 assert_eq!(h1.style.font_size, 32.0); // 2em * 16px
111}
112
113#[test]
114fn style_element_display_none_in_styled_tree() {
115 let html = r#"<!DOCTYPE html>
116<html>
117<head>
118<style>p { color: red; }</style>
119</head>
120<body><p>text</p></body>
121</html>"#;
122
123 let doc = we_html::parse_html(html);
124 let sheets = extract_stylesheets(&doc);
125 let styled = resolve_styles(&doc, &sheets).unwrap();
126
127 // The <head> and <style> elements should be removed (display: none).
128 // Only body should remain as a child of html.
129 assert_eq!(styled.children.len(), 1);
130 // That child is body.
131 assert_eq!(styled.children[0].style.display, Display::Block);
132}
133
134#[test]
135fn class_selector_in_style_element() {
136 let html = r#"<!DOCTYPE html>
137<html>
138<head>
139<style>
140.highlight { color: red; background-color: yellow; }
141</style>
142</head>
143<body>
144<p class="highlight">Important</p>
145<p>Normal</p>
146</body>
147</html>"#;
148
149 let doc = we_html::parse_html(html);
150 let sheets = extract_stylesheets(&doc);
151 let styled = resolve_styles(&doc, &sheets).unwrap();
152 let body = &styled.children[0];
153
154 let highlight_p = &body.children[0];
155 let normal_p = &body.children[1];
156
157 assert_eq!(highlight_p.style.color, Color::rgb(255, 0, 0));
158 assert_eq!(highlight_p.style.background_color, Color::rgb(255, 255, 0));
159
160 // Normal p inherits default color (black).
161 assert_eq!(normal_p.style.color, Color::rgb(0, 0, 0));
162}