Skip to content

Commit a8c9586

Browse files
TtTRzTtTRz
committed
test: add wpt test cases
1 parent f2535c2 commit a8c9586

23 files changed

Lines changed: 3495 additions & 4 deletions

‎float-pigment-forest/tests/wpt/css_borders/border_edge_cases.rs‎

Lines changed: 414 additions & 0 deletions
Large diffs are not rendered by default.

‎float-pigment-forest/tests/wpt/css_borders/border_width.rs‎

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
// WPT-based tests for border-width property
2+
// Based on Web Platform Tests for CSS Borders
3+
4+
use crate::*;
5+
6+
// border-width: fixed value (all sides)
7+
#[test]
8+
fn border_width_fixed() {
9+
assert_xml!(
10+
r#"
11+
<div style="width: 200px; height: 100px; border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px;" expect_width="220" expect_height="120">
12+
<div style="width: 50px; height: 50px;" expect_top="10" expect_left="10"></div>
13+
</div>
14+
"#
15+
)
16+
}
17+
18+
// border-width: asymmetric (top right bottom left)
19+
#[test]
20+
fn border_width_asymmetric() {
21+
assert_xml!(
22+
r#"
23+
<div style="width: 200px; height: 100px; border-top-width: 10px; border-right-width: 20px; border-bottom-width: 30px; border-left-width: 40px;" expect_width="260" expect_height="140">
24+
<div style="width: 50px; height: 50px;" expect_top="10" expect_left="40"></div>
25+
</div>
26+
"#
27+
)
28+
}
29+
30+
// border-width: thin (1px)
31+
#[test]
32+
fn border_width_thin() {
33+
assert_xml!(
34+
r#"
35+
<div style="width: 200px; height: 100px; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin;" expect_width="202" expect_height="102">
36+
<div style="width: 50px; height: 50px;" expect_top="1" expect_left="1"></div>
37+
</div>
38+
"#
39+
)
40+
}
41+
42+
// border-width: medium (3px default)
43+
#[test]
44+
fn border_width_medium() {
45+
assert_xml!(
46+
r#"
47+
<div style="width: 200px; height: 100px; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium;" expect_width="206" expect_height="106">
48+
<div style="width: 50px; height: 50px;" expect_top="3" expect_left="3"></div>
49+
</div>
50+
"#
51+
)
52+
}
53+
54+
// border-width: thick (5px)
55+
#[test]
56+
fn border_width_thick() {
57+
assert_xml!(
58+
r#"
59+
<div style="width: 200px; height: 100px; border-top-width: thick; border-right-width: thick; border-bottom-width: thick; border-left-width: thick;" expect_width="210" expect_height="110">
60+
<div style="width: 50px; height: 50px;" expect_top="5" expect_left="5"></div>
61+
</div>
62+
"#
63+
)
64+
}
65+
66+
// border-width: 0
67+
#[test]
68+
fn border_width_zero() {
69+
assert_xml!(
70+
r#"
71+
<div style="width: 200px; height: 100px; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0;" expect_width="200" expect_height="100">
72+
<div style="width: 50px; height: 50px;" expect_top="0" expect_left="0"></div>
73+
</div>
74+
"#
75+
)
76+
}
77+
78+
// border-width: percentage (relative to containing block width)
79+
#[test]
80+
fn border_width_percentage() {
81+
assert_xml!(
82+
r#"
83+
<div style="width: 200px; height: 200px;">
84+
<div style="width: 100px; height: 100px; border-top-width: 10%; border-right-width: 10%; border-bottom-width: 10%; border-left-width: 10%;" expect_width="140" expect_height="140">
85+
<div style="width: 50px; height: 50px;" expect_top="20" expect_left="20"></div>
86+
</div>
87+
</div>
88+
"#
89+
)
90+
}
91+
92+
// border-width: with border-box
93+
#[test]
94+
fn border_width_with_border_box() {
95+
assert_xml!(
96+
r#"
97+
<div style="box-sizing: border-box; width: 200px; height: 100px; border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px;" expect_width="200" expect_height="100">
98+
<div style="width: 50px; height: 50px;" expect_top="10" expect_left="10"></div>
99+
</div>
100+
"#
101+
)
102+
}
103+
104+
// border-width: with border-box and padding
105+
// With border-box, width/height includes border and padding
106+
// width: 200px includes border (10px*2) and padding (20px*2)
107+
// Total: 200px, content area = 200 - 20 - 20 = 160px
108+
#[test]
109+
fn border_width_with_border_box_and_padding() {
110+
assert_xml!(
111+
r#"
112+
<div style="box-sizing: border-box; width: 200px; height: 100px; padding: 20px; border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px;" expect_width="200" expect_height="100">
113+
<div style="width: 50px; height: 50px;" expect_top="30" expect_left="30"></div>
114+
</div>
115+
"#
116+
)
117+
}
118+
119+
// border-width: with border-box and percentage width
120+
// With border-box, percentage width includes border
121+
#[test]
122+
fn border_width_with_border_box_percentage() {
123+
assert_xml!(
124+
r#"
125+
<div style="width: 300px; height: 200px;">
126+
<div style="box-sizing: border-box; width: 50%; height: 100px; border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px;" expect_width="150" expect_height="100">
127+
<div style="width: 50px; height: 50px;" expect_top="10" expect_left="10"></div>
128+
</div>
129+
</div>
130+
"#
131+
)
132+
}
133+
134+
// border-width: with padding
135+
#[test]
136+
fn border_width_with_padding() {
137+
assert_xml!(
138+
r#"
139+
<div style="width: 200px; height: 100px; padding: 20px; border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px;" expect_width="260" expect_height="160">
140+
<div style="width: 50px; height: 50px;" expect_top="30" expect_left="30"></div>
141+
</div>
142+
"#
143+
)
144+
}
145+
146+
// border-width: individual properties
147+
#[test]
148+
fn border_width_individual() {
149+
assert_xml!(
150+
r#"
151+
<div style="width: 200px; height: 100px; border-top-width: 5px; border-right-width: 10px; border-bottom-width: 15px; border-left-width: 20px;" expect_width="230" expect_height="120">
152+
<div style="width: 50px; height: 50px;" expect_top="5" expect_left="20"></div>
153+
</div>
154+
"#
155+
)
156+
}
157+
158+
// border-width: with min-width constraint
159+
#[test]
160+
fn border_width_with_min_width() {
161+
assert_xml!(
162+
r#"
163+
<div style="width: 200px; height: 100px;">
164+
<div style="min-width: 150px; border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px;" expect_width="200" expect_height="70">
165+
<div style="width: 50px; height: 50px;" expect_top="10" expect_left="10"></div>
166+
</div>
167+
</div>
168+
"#
169+
)
170+
}
171+
172+
// border-width: with min-width constraint and border-box
173+
// min-width applies to total box including border
174+
#[test]
175+
fn border_width_with_min_width_border_box() {
176+
assert_xml!(
177+
r#"
178+
<div style="width: 200px; height: 100px;">
179+
<div style="box-sizing: border-box; min-width: 150px; width: 100px; border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px;" expect_width="150" expect_height="70">
180+
<div style="width: 50px; height: 50px;" expect_top="10" expect_left="10"></div>
181+
</div>
182+
</div>
183+
"#
184+
)
185+
}
186+
187+
// border-width: with max-width constraint
188+
#[test]
189+
fn border_width_with_max_width() {
190+
assert_xml!(
191+
r#"
192+
<div style="width: 300px; height: 100px;">
193+
<div style="max-width: 150px; border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px;" expect_width="170">
194+
<div style="width: 50px; height: 50px;" expect_top="10" expect_left="10"></div>
195+
</div>
196+
</div>
197+
"#
198+
)
199+
}
200+
201+
// border-width: with max-width constraint and border-box
202+
// max-width applies to total box including border
203+
#[test]
204+
fn border_width_with_max_width_border_box() {
205+
assert_xml!(
206+
r#"
207+
<div style="width: 300px; height: 100px;">
208+
<div style="box-sizing: border-box; max-width: 150px; width: 200px; border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px;" expect_width="150">
209+
<div style="width: 50px; height: 50px;" expect_top="10" expect_left="10"></div>
210+
</div>
211+
</div>
212+
"#
213+
)
214+
}
215+
216+
// border-width: in flex container
217+
#[test]
218+
fn border_width_in_flex_container() {
219+
assert_xml!(
220+
r#"
221+
<div style="display: flex; width: 300px; height: 100px;">
222+
<div style="border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px; height: 50px;" expect_width="60" expect_left="0">
223+
<div style="width: 40px; height: 30px;" expect_top="10" expect_left="10"></div>
224+
</div>
225+
</div>
226+
"#
227+
)
228+
}
229+
230+
// border-width: in flex container with border-box
231+
// With border-box, flex item width includes border
232+
#[test]
233+
fn border_width_in_flex_container_border_box() {
234+
assert_xml!(
235+
r#"
236+
<div style="display: flex; width: 300px; height: 100px;">
237+
<div style="box-sizing: border-box; flex-grow: 1; border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px; height: 50px;" expect_width="300">
238+
<div style="width: 50px; height: 30px;" expect_top="10" expect_left="10"></div>
239+
</div>
240+
</div>
241+
"#
242+
)
243+
}
244+
245+
// border-width: nested elements
246+
#[test]
247+
fn border_width_nested() {
248+
assert_xml!(
249+
r#"
250+
<div style="width: 200px; height: 200px; border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px;" expect_width="220" expect_height="220">
251+
<div style="width: 100px; height: 100px; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;" expect_width="110" expect_height="110" expect_top="10" expect_left="10">
252+
<div style="width: 50px; height: 50px;" expect_top="5" expect_left="5"></div>
253+
</div>
254+
</div>
255+
"#
256+
)
257+
}

‎float-pigment-forest/tests/wpt/css_borders/mod.rs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
mod border_edge_cases;
2+
mod border_width;

0 commit comments

Comments
 (0)