float-pigment-forest 0.8.2

A node tree implementation for float-pigment-layout.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

// Tests for `border` properties in CSS
// Based on CSS Box Model Module Level 3:
// - Border adds to the element's total size in content-box mode
// - Border is included within the element's size in border-box mode
// - Border can be specified for individual sides (top, right, bottom, left)
// - Border width can be fixed values or percentages

use crate::*;

// Case: Fixed border with content-box sizing
// Spec points:
// - In content-box mode, border adds to width and height
// - border: 10px adds 10px on each side (20px total per axis)
// In this test:
// - Element: 10x10px content, border=10px
// - Expected: 10+20 = 30px for both width and height
#[test]
fn border_fixed_content_box() {
    assert_xml!(
        r#"
        <div style="height: 10px; width: 10px; box-sizing: content-box; border: 10px;" expect_height="30" expect_width="30"></div>
    "#
    )
}

// Case: Fixed border with border-box sizing
// Spec points:
// - In border-box mode, border is included within declared width/height
// - Content area shrinks to accommodate border
// In this test:
// - Element: 10x10px with border-box, border=1px
// - Expected: 10x10px total (border included)
#[test]
fn border_fixed_border_box() {
    assert_xml!(
        r#"
        <div style="height: 10px; width: 10px; box-sizing: border-box; border: 1px;" expect_height="10" expect_width="10"></div>
    "#
    )
}

// Case: Percentage border with content-box sizing
// Spec points:
// - Percentage border is calculated relative to parent's width
// - Border percentage applies to all four sides
// In this test:
// - Parent: 300x200px
// - Child: 10x10px content, border=10% = 30px (10% of 300px width)
// - Expected: 10+60 = 70px for both width and height
#[test]
fn border_percentage_content_box() {
    assert_xml!(
        r#"
        <div style="width: 300px; height: 200px;">
          <div style="height: 10px; width: 10px; border: 10%;" expect_height="70" expect_width="70"></div>
        </div>
    "#
    )
}

// Case: border-left fixed value
// Spec points:
// - border-left only affects the left side
// In this test:
// - Element: 10x10px, border-left=20px
// - Expected width: 10+20 = 30px
#[test]
fn border_left_fixed_content_box() {
    assert_xml!(
        r#"
        <div style="height: 10px; width: 10px; border-left: 20px;" expect_width="30"></div>
    "#
    )
}

// Case: border-right fixed value
// Spec points:
// - border-right only affects the right side
// In this test:
// - Element: 10x10px, border-right=20px
// - Expected width: 10+20 = 30px
#[test]
fn border_right_fixed_content_box() {
    assert_xml!(
        r#"
        <div style="height: 10px; width: 10px; border-right: 20px;" expect_width="30"></div>
    "#
    )
}

// Case: border-top fixed value
// Spec points:
// - border-top only affects the top side
// In this test:
// - Element: 10x10px, border-top=20px
// - Expected height: 10+20 = 30px
#[test]
fn border_top_fixed_content_box() {
    assert_xml!(
        r#"
        <div style="height: 10px; width: 10px; border-top: 20px;" expect_height="30"></div>
    "#
    )
}

// Case: border-bottom fixed value
// Spec points:
// - border-bottom only affects the bottom side
// In this test:
// - Element: 10x10px, border-bottom=20px
// - Expected height: 10+20 = 30px
#[test]
fn border_bottom_fixed_content_box() {
    assert_xml!(
        r#"
        <div style="height: 10px; width: 10px; border-bottom: 20px;" expect_height="30"></div>
    "#
    )
}