gioser

tawasuyu/taffy

A high performance rust-powered UI layout library

HTML 5364Rust 86Markdown 12TOML 91841 Definiciones

⎇ 0.7.x tests/relayout.rs Rust · 392 líneas · 13.3 KB Historia Quién tocó qué crudo

Add `taffy_test_helpers` crate (#755) 2a3e8476b · Nico Burns ·

1use taffy::prelude::*;
2use taffy_test_helpers::new_test_tree;
3
4#[test]
5fn relayout() {
6    let mut taffy = new_test_tree();
7    let node1 = taffy
8        .new_leaf(taffy::style::Style {
9            size: taffy::geometry::Size { width: length(8.0), height: length(80.0) },
10            ..Default::default()
11        })
12        .unwrap();
13    let node0 = taffy
14        .new_with_children(
15            taffy::style::Style {
16                align_self: Some(taffy::prelude::AlignSelf::Center),
17                size: taffy::geometry::Size { width: Dimension::Auto, height: Dimension::Auto },
18                // size: taffy::geometry::Size { width: Dimension::Percent(1.0), height: Dimension::Percent(1.0) },
19                ..Default::default()
20            },
21            &[node1],
22        )
23        .unwrap();
24    let node = taffy
25        .new_with_children(
26            taffy::style::Style {
27                size: taffy::geometry::Size { width: Dimension::Percent(1f32), height: Dimension::Percent(1f32) },
28                ..Default::default()
29            },
30            &[node0],
31        )
32        .unwrap();
33    taffy
34        .compute_layout(
35            node,
36            taffy::geometry::Size { width: AvailableSpace::Definite(100f32), height: AvailableSpace::Definite(100f32) },
37        )
38        .unwrap();
39    let initial = taffy.layout(node).unwrap().location;
40    let initial0 = taffy.layout(node0).unwrap().location;
41    let initial1 = taffy.layout(node1).unwrap().location;
42    for _ in 1..10 {
43        taffy
44            .compute_layout(
45                node,
46                taffy::geometry::Size {
47                    width: AvailableSpace::Definite(100f32),
48                    height: AvailableSpace::Definite(100f32),
49                },
50            )
51            .unwrap();
52        assert_eq!(taffy.layout(node).unwrap().location, initial);
53        assert_eq!(taffy.layout(node0).unwrap().location, initial0);
54        assert_eq!(taffy.layout(node1).unwrap().location, initial1);
55    }
56}
57
58#[test]
59fn toggle_root_display_none() {
60    let hidden_style = Style {
61        display: Display::None,
62        size: Size { width: length(100.0), height: length(100.0) },
63        ..Default::default()
64    };
65
66    let flex_style = Style {
67        display: Display::Flex,
68        size: Size { width: length(100.0), height: length(100.0) },
69        ..Default::default()
70    };
71
72    // Setup
73    let mut taffy = new_test_tree();
74    let node = taffy.new_leaf(hidden_style.clone()).unwrap();
75
76    // Layout 1 (None)
77    taffy.compute_layout(node, Size::MAX_CONTENT).unwrap();
78    let layout = taffy.layout(node).unwrap();
79    assert_eq!(layout.location.x, 0.0);
80    assert_eq!(layout.location.y, 0.0);
81    assert_eq!(layout.size.width, 0.0);
82    assert_eq!(layout.size.height, 0.0);
83
84    // Layout 2 (Flex)
85    taffy.set_style(node, flex_style).unwrap();
86    taffy.compute_layout(node, Size::MAX_CONTENT).unwrap();
87    let layout = taffy.layout(node).unwrap();
88    assert_eq!(layout.location.x, 0.0);
89    assert_eq!(layout.location.y, 0.0);
90    assert_eq!(layout.size.width, 100.0);
91    assert_eq!(layout.size.height, 100.0);
92
93    // Layout 3 (None)
94    taffy.set_style(node, hidden_style).unwrap();
95    taffy.compute_layout(node, Size::MAX_CONTENT).unwrap();
96    let layout = taffy.layout(node).unwrap();
97    assert_eq!(layout.location.x, 0.0);
98    assert_eq!(layout.location.y, 0.0);
99    assert_eq!(layout.size.width, 0.0);
100    assert_eq!(layout.size.height, 0.0);
101}
102
103#[test]
104fn toggle_root_display_none_with_children() {
105    use taffy::prelude::*;
106
107    let mut taffy = new_test_tree();
108
109    let child = taffy
110        .new_leaf(Style { size: Size { width: length(800.0), height: length(100.0) }, ..Default::default() })
111        .unwrap();
112
113    let parent = taffy
114        .new_with_children(
115            Style { size: Size { width: length(800.0), height: length(100.0) }, ..Default::default() },
116            &[child],
117        )
118        .unwrap();
119
120    let root = taffy.new_with_children(Style::default(), &[parent]).unwrap();
121    taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
122    assert_eq!(taffy.layout(child).unwrap().size.width, 800.0);
123    assert_eq!(taffy.layout(child).unwrap().size.height, 100.0);
124
125    taffy.set_style(root, Style { display: Display::None, ..Default::default() }).unwrap();
126    taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
127    assert_eq!(taffy.layout(child).unwrap().size.width, 0.0);
128    assert_eq!(taffy.layout(child).unwrap().size.height, 0.0);
129
130    taffy.set_style(root, Style::default()).unwrap();
131    taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
132    assert_eq!(taffy.layout(parent).unwrap().size.width, 800.0);
133    assert_eq!(taffy.layout(parent).unwrap().size.height, 100.0);
134    assert_eq!(taffy.layout(child).unwrap().size.width, 800.0);
135    assert_eq!(taffy.layout(child).unwrap().size.height, 100.0);
136}
137
138#[test]
139fn toggle_flex_child_display_none() {
140    let hidden_style = Style {
141        display: Display::None,
142        size: Size { width: length(100.0), height: length(100.0) },
143        ..Default::default()
144    };
145
146    let flex_style = Style {
147        display: Display::Flex,
148        size: Size { width: length(100.0), height: length(100.0) },
149        ..Default::default()
150    };
151
152    // Setup
153    let mut taffy = new_test_tree();
154    let node = taffy.new_leaf(hidden_style.clone()).unwrap();
155    let root = taffy.new_with_children(flex_style.clone(), &[node]).unwrap();
156
157    // Layout 1 (None)
158    taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
159    let layout = taffy.layout(node).unwrap();
160    assert_eq!(layout.location.x, 0.0);
161    assert_eq!(layout.location.y, 0.0);
162    assert_eq!(layout.size.width, 0.0);
163    assert_eq!(layout.size.height, 0.0);
164
165    // Layout 2 (Flex)
166    taffy.set_style(node, flex_style).unwrap();
167    taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
168    let layout = taffy.layout(node).unwrap();
169    assert_eq!(layout.location.x, 0.0);
170    assert_eq!(layout.location.y, 0.0);
171    assert_eq!(layout.size.width, 100.0);
172    assert_eq!(layout.size.height, 100.0);
173
174    // Layout 3 (None)
175    taffy.set_style(node, hidden_style).unwrap();
176    taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
177    let layout = taffy.layout(node).unwrap();
178    assert_eq!(layout.location.x, 0.0);
179    assert_eq!(layout.location.y, 0.0);
180    assert_eq!(layout.size.width, 0.0);
181    assert_eq!(layout.size.height, 0.0);
182}
183
184#[test]
185fn toggle_flex_container_display_none() {
186    let hidden_style = Style {
187        display: Display::None,
188        size: Size { width: length(100.0), height: length(100.0) },
189        ..Default::default()
190    };
191
192    let flex_style = Style {
193        display: Display::Flex,
194        size: Size { width: length(100.0), height: length(100.0) },
195        ..Default::default()
196    };
197
198    // Setup
199    let mut taffy = new_test_tree();
200    let node = taffy.new_leaf(hidden_style.clone()).unwrap();
201    let root = taffy.new_with_children(hidden_style.clone(), &[node]).unwrap();
202
203    // Layout 1 (None)
204    taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
205    let layout = taffy.layout(root).unwrap();
206    assert_eq!(layout.location.x, 0.0);
207    assert_eq!(layout.location.y, 0.0);
208    assert_eq!(layout.size.width, 0.0);
209    assert_eq!(layout.size.height, 0.0);
210
211    // Layout 2 (Flex)
212    taffy.set_style(root, flex_style).unwrap();
213    taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
214    let layout = taffy.layout(root).unwrap();
215    assert_eq!(layout.location.x, 0.0);
216    assert_eq!(layout.location.y, 0.0);
217    assert_eq!(layout.size.width, 100.0);
218    assert_eq!(layout.size.height, 100.0);
219
220    // Layout 3 (None)
221    taffy.set_style(root, hidden_style).unwrap();
222    taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
223    let layout = taffy.layout(root).unwrap();
224    assert_eq!(layout.location.x, 0.0);
225    assert_eq!(layout.location.y, 0.0);
226    assert_eq!(layout.size.width, 0.0);
227    assert_eq!(layout.size.height, 0.0);
228}
229
230#[test]
231fn toggle_grid_child_display_none() {
232    let hidden_style = Style {
233        display: Display::None,
234        size: Size { width: length(100.0), height: length(100.0) },
235        ..Default::default()
236    };
237
238    let grid_style = Style {
239        display: Display::Grid,
240        size: Size { width: length(100.0), height: length(100.0) },
241        ..Default::default()
242    };
243
244    // Setup
245    let mut taffy = new_test_tree();
246    let node = taffy.new_leaf(hidden_style.clone()).unwrap();
247    let root = taffy.new_with_children(grid_style.clone(), &[node]).unwrap();
248
249    // Layout 1 (None)
250    taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
251    let layout = taffy.layout(node).unwrap();
252    assert_eq!(layout.location.x, 0.0);
253    assert_eq!(layout.location.y, 0.0);
254    assert_eq!(layout.size.width, 0.0);
255    assert_eq!(layout.size.height, 0.0);
256
257    // Layout 2 (Flex)
258    taffy.set_style(node, grid_style).unwrap();
259    taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
260    let layout = taffy.layout(node).unwrap();
261    assert_eq!(layout.location.x, 0.0);
262    assert_eq!(layout.location.y, 0.0);
263    assert_eq!(layout.size.width, 100.0);
264    assert_eq!(layout.size.height, 100.0);
265
266    // Layout 3 (None)
267    taffy.set_style(node, hidden_style).unwrap();
268    taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
269    let layout = taffy.layout(node).unwrap();
270    assert_eq!(layout.location.x, 0.0);
271    assert_eq!(layout.location.y, 0.0);
272    assert_eq!(layout.size.width, 0.0);
273    assert_eq!(layout.size.height, 0.0);
274}
275
276#[test]
277fn toggle_grid_container_display_none() {
278    let hidden_style = Style {
279        display: Display::None,
280        size: Size { width: length(100.0), height: length(100.0) },
281        ..Default::default()
282    };
283
284    let grid_style = Style {
285        display: Display::Grid,
286        size: Size { width: length(100.0), height: length(100.0) },
287        ..Default::default()
288    };
289
290    // Setup
291    let mut taffy = new_test_tree();
292    let node = taffy.new_leaf(hidden_style.clone()).unwrap();
293    let root = taffy.new_with_children(hidden_style.clone(), &[node]).unwrap();
294
295    // Layout 1 (None)
296    taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
297    let layout = taffy.layout(root).unwrap();
298    assert_eq!(layout.location.x, 0.0);
299    assert_eq!(layout.location.y, 0.0);
300    assert_eq!(layout.size.width, 0.0);
301    assert_eq!(layout.size.height, 0.0);
302
303    // Layout 2 (Flex)
304    taffy.set_style(root, grid_style).unwrap();
305    taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
306    let layout = taffy.layout(root).unwrap();
307    assert_eq!(layout.location.x, 0.0);
308    assert_eq!(layout.location.y, 0.0);
309    assert_eq!(layout.size.width, 100.0);
310    assert_eq!(layout.size.height, 100.0);
311
312    // Layout 3 (None)
313    taffy.set_style(root, hidden_style).unwrap();
314    taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
315    let layout = taffy.layout(root).unwrap();
316    assert_eq!(layout.location.x, 0.0);
317    assert_eq!(layout.location.y, 0.0);
318    assert_eq!(layout.size.width, 0.0);
319    assert_eq!(layout.size.height, 0.0);
320}
321
322#[test]
323fn relayout_is_stable_with_rounding() {
324    let mut taffy = new_test_tree();
325    taffy.enable_rounding();
326
327    // <div style="width: 1920px; height: 1080px">
328    //     <div style="width: 100%; left: 1.5px">
329    //         <div style="width: 150px; justify-content: end">
330    //             <div style="min-width: 300px" />
331    //         </div>
332    //     </div>
333    // </div>
334
335    let inner =
336        taffy.new_leaf(Style { min_size: Size { width: length(300.), height: auto() }, ..Default::default() }).unwrap();
337    let wrapper = taffy
338        .new_with_children(
339            Style {
340                size: Size { width: length(150.), height: auto() },
341                justify_content: Some(JustifyContent::End),
342                ..Default::default()
343            },
344            &[inner],
345        )
346        .unwrap();
347    let outer = taffy
348        .new_with_children(
349            Style {
350                size: Size { width: percent(1.), height: auto() },
351                inset: Rect { left: length(1.5), right: auto(), top: auto(), bottom: auto() },
352                ..Default::default()
353            },
354            &[wrapper],
355        )
356        .unwrap();
357    let root = taffy
358        .new_with_children(
359            Style { size: Size { width: length(1920.), height: length(1080.) }, ..Default::default() },
360            &[outer],
361        )
362        .unwrap();
363    for _ in 0..5 {
364        taffy.mark_dirty(root).ok();
365        taffy.compute_layout(root, Size::MAX_CONTENT).ok();
366        taffy.print_tree(root);
367
368        let root_layout = taffy.layout(root).unwrap();
369        assert_eq!(root_layout.location.x, 0.0);
370        assert_eq!(root_layout.location.y, 0.0);
371        assert_eq!(root_layout.size.width, 1920.0);
372        assert_eq!(root_layout.size.height, 1080.0);
373
374        let outer_layout = taffy.layout(outer).unwrap();
375        assert_eq!(outer_layout.location.x, 2.0);
376        assert_eq!(outer_layout.location.y, 0.0);
377        assert_eq!(outer_layout.size.width, 1920.0);
378        assert_eq!(outer_layout.size.height, 1080.0);
379
380        let wrapper_layout = taffy.layout(wrapper).unwrap();
381        assert_eq!(wrapper_layout.location.x, 0.0);
382        assert_eq!(wrapper_layout.location.y, 0.0);
383        assert_eq!(wrapper_layout.size.width, 150.0);
384        assert_eq!(wrapper_layout.size.height, 1080.0);
385
386        let inner_layout = taffy.layout(inner).unwrap();
387        assert_eq!(inner_layout.location.x, -150.0);
388        assert_eq!(inner_layout.location.y, 0.0);
389        assert_eq!(inner_layout.size.width, 301.0);
390        assert_eq!(inner_layout.size.height, 1080.0);
391    }
392}