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
148
149
150
151

// Tests for `order` property in CSS Flexbox
// Based on CSS Flexible Box Layout Module Level 1:
// - order controls visual order of flex items
// - Items sorted by order value, then by source order
// - Default value is 0, negative values allowed

use crate::*;

// Case: Basic order (1, 2, 3, 4)
// Spec points:
// - Items rendered in order value sequence
// In this test:
// - Items with increasing order values
// - Positions: 0, 10, 30, 60
#[test]
fn order() {
    assert_xml!(
        r#"
          <div style="display: flex;">
            <div style="order: 1; width: 10px; height: 10px;" expect_left="0"></div>
            <div style="order: 2;  width: 20px; height: 10px;" expect_left="10"></div>
            <div style="order: 3;  width: 30px; height: 10px;" expect_left="30"></div>
            <div style="order: 4;  width: 40px; height: 10px;" expect_left="60"></div>
          </div>
      "#
    )
}

// Case: Equal order values (source order as tiebreaker)
// Spec points:
// - Items with same order maintain source order
// In this test:
// - Items 1 & 2 both have order=1
// - They appear in source order (10px then 20px)
#[test]
fn order_1() {
    assert_xml!(
        r#"
          <div style="display: flex;">
            <div style="order: 1; width: 10px; height: 10px;" expect_left="0"></div>
            <div style="order: 1;  width: 20px; height: 10px;" expect_left="10"></div>
            <div style="order: 3;  width: 30px; height: 10px;" expect_left="30"></div>
            <div style="order: 4;  width: 40px; height: 10px;" expect_left="60"></div>
          </div>
      "#
    )
}

// Case: Multiple equal order values
// Spec points:
// - Multiple groups of same order maintain source order within group
// In this test:
// - Two items with order=1, two with order=2
#[test]
fn order_2() {
    assert_xml!(
        r#"
          <div style="display: flex;">
            <div style="order: 1; width: 10px; height: 10px;" expect_left="0"></div>
            <div style="order: 1;  width: 20px; height: 10px;" expect_left="10"></div>
            <div style="order: 2;  width: 30px; height: 10px;" expect_left="30"></div>
            <div style="order: 2;  width: 40px; height: 10px;" expect_left="60"></div>
          </div>
      "#
    )
}

// Case: Reverse order (4, 3, 2, 1)
// Spec points:
// - Items reordered by decreasing order value
// In this test:
// - Source order: 10, 20, 30, 40px
// - Visual order: 40, 30, 20, 10px (reversed)
#[test]
fn order_3() {
    assert_xml!(
        r#"
          <div style="display: flex;">
            <div style="order: 4; width: 10px; height: 10px;" expect_left="90"></div>
            <div style="order: 3; width: 20px; height: 10px;" expect_left="70"></div>
            <div style="order: 2; width: 30px; height: 10px;" expect_left="40"></div>
            <div style="order: 1; width: 40px; height: 10px;" expect_left="0"></div>
          </div>
      "#
    )
}

// Case: Negative and large order values
// Spec points:
// - Negative order values are valid
// - Items sorted by numeric value
// In this test:
// - order: -100, 0, 1, 100
// - Visual: -100 first, then 0, 1, 100
#[test]
fn order_4() {
    assert_xml!(
        r#"
          <div style="display: flex;">
            <div style="order: -100; width: 10px; height: 10px;" expect_left="0"></div>
            <div style="order: 0; width: 20px; height: 10px;" expect_left="10"></div>
            <div style="order: 1; width: 30px; height: 10px;" expect_left="30"></div>
            <div style="order: 100; width: 40px; height: 10px;" expect_left="60"></div>
          </div>
      "#
    )
}

// Case: Mixed order values
// Spec points:
// - Complex ordering with duplicates
// In this test:
// - order: 1, 3, 2, 4, 2
// - Visual: 1(10), 2(30), 2(50), 3(20), 4(40)
// - Positions: 0, 10, 40, 90, 110
#[test]
fn order_5() {
    assert_xml!(
        r#"
          <div style="display: flex;">
            <div style="order: 1; width: 10px; height: 10px;" expect_left="0"></div>
            <div style="order: 3;  width: 20px; height: 10px;" expect_left="90"></div>
            <div style="order: 2;  width: 30px; height: 10px;" expect_left="10"></div>
            <div style="order: 4;  width: 40px; height: 10px;" expect_left="110"></div>
            <div style="order: 2;  width: 50px; height: 10px;" expect_left="40"></div>
          </div>
      "#
    )
}

// Case: Order with absolute/fixed positioned items
// Spec points:
// - Absolute/fixed items don't participate in flex layout
// - Order only affects in-flow flex items
// In this test:
// - Items 2 (fixed) and 3 (absolute) removed from flow
// - Only items 1, 4, 5 participate in flex layout
#[test]
fn order_6() {
    assert_xml!(
        r#"
          <div style="display: flex;">
            <div style="order: 1; width: 10px; height: 10px;" expect_left="0"></div>
            <div style="order: 3; position: fixed; width: 20px; height: 10px; left: 0px; height: 0px;" expect_left="0"></div>
            <div style="order: 2; position: absolute; width: 30px; height: 10px; left: 0px; height: 0px;" expect_left="0"></div>
            <div style="order: 4; width: 40px; height: 10px;" expect_left="60"></div>
            <div style="order: 2; width: 50px; height: 10px;" expect_left="10"></div>
          </div>
      "#
    )
}