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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

// Tests for `min-width` and `min-height` in CSS
// Based on CSS Box Sizing Module Level 3:
// - min-width sets the minimum width constraint
// - If content/width is less than min-width, the element expands
// - min-width takes precedence over max-width

use crate::*;

// Case: min-width greater than container
// Spec points:
// - min-width can cause overflow when larger than container
// In this test:
// - Parent: width=300px
// - Child: min-width=400px, overflows parent
// - Expected: width=400px
#[test]
fn min_width_fixed() {
    assert_xml!(
        r#"
          <div style="width: 300px; height: 100px;" expect_width="300">
            <div style="min-width: 400px; height: 50px;" expect_width="400"></div>
          </div>
      "#
    )
}

// Case: Percentage min-width
// Spec points:
// - Percentage min-width is relative to parent width
// In this test:
// - Parent: width=300px
// - Child: min-width=50% = 150px, stretches to 300px (> 150px)
// - Expected: width=300px (stretched, since stretch > min)
#[test]
fn min_width_percentage() {
    assert_xml!(
        r#"
          <div style="width: 300px; height: 100px;" expect_width="300">
            <div style="min-width: 50%; height: 50px;" expect_width="300"></div>
          </div>
      "#
    )
}

// Case: min-width in flex container
// Spec points:
// - In flex, min-width constrains shrinking
// In this test:
// - Flex container: width=300px
// - Child: min-width=100px, no other size
// - Expected: width=100px
#[test]
fn min_width_fixed_in_flex() {
    assert_xml!(
        r#"
          <div style="width: 300px; height: 100px; display: flex" expect_width="300">
            <div style="min-width: 100px; height: 50px;" expect_width="100"></div>
          </div>
      "#
    )
}

// Case: Percentage min-width in flex container
// Spec points:
// - Percentage min-width works in flex context
// In this test:
// - Flex container: width=300px
// - Child: min-width=50% = 150px
// - Expected: width=150px
#[test]
fn min_width_percentage_in_flex() {
    assert_xml!(
        r#"
          <div style="width: 300px; height: 100px; display: flex" expect_width="300">
            <div style="min-width: 50%; height: 50px;" expect_width="150"></div>
          </div>
      "#
    )
}

// Case: min-width less than explicit width
// Spec points:
// - When min-width < width, explicit width is used
// In this test:
// - Child: min-width=50px, width=100px
// - Expected: width=100px (no change)
#[test]
fn min_width_fixed_lt_width() {
    assert_xml!(
        r#"
          <div style="width: 300px; height: 100px;" expect_width="300">
            <div style="min-width: 50px; width: 100px; height: 50px;" expect_width="100"></div>
          </div>
      "#
    )
}

// Case: min-width greater than explicit width
// Spec points:
// - When min-width > width, element expands to min-width
// In this test:
// - Child: min-width=150px, width=100px
// - Expected: width=150px (expanded)
#[test]
fn min_width_fixed_gt_width() {
    assert_xml!(
        r#"
          <div style="width: 300px; height: 100px;" expect_width="300">
            <div style="min-width: 150px; width: 100px; height: 50px;" expect_width="150"></div>
          </div>
      "#
    )
}

// Case: min-height with flex align-items: center
// Spec points:
// - min-height affects cross-axis centering in flex
// In this test:
// - Container: min-height=300px, align-items=center
// - Child centered vertically at (300-100)/2 = 100
#[test]
fn min_height_flex_align_items_center() {
    assert_xml!(
        r#"
          <div style="display:flex;  width: 300px; min-height: 300px; align-items: center;">
            <div style="width: 100px; height: 100px;" expect_top="100"></div>
          </div>
      "#
    )
}

// Case: min-height with flex justify-content: center (column)
// Spec points:
// - In flex column, min-height affects main-axis centering
// In this test:
// - Container: flex-direction=column, min-height=300px, justify-content=center
// - Child centered at (300-100)/2 = 100
#[test]
fn min_height_flex_justify_content_center() {
    assert_xml!(
        r#"
          <div style="display:flex; flex-direction: column; width: 300px; min-height: 300px; justify-content: center;">
            <div style="width: 100px; height: 100px;" expect_top="100"></div>
          </div>
      "#
    )
}