Fix layout of direct flex children with `display:none` set (#380)
* Add test for toggling display:none
* Add test for toggling display:none on a flexbox child
* Fix layout direct flex children with `display:none` set
* Add test for toggling display:none on flexbox container
acda6300f93b0c046a4d6f3a4a3fda5da0b8aae8 · by Nico Burns · 2023-03-07T20:35:12Z (3 years ago) · parent deac6dcefbrowse the tree at this commit
diff --git a/src/compute/flexbox.rs b/src/compute/flexbox.rs
index 9aa125a5a..10f136520 100644
--- a/src/compute/flexbox.rs
+++ b/src/compute/flexbox.rs
@@ -403,8 +403,8 @@ fn compute_preliminary(
for order in 0..len {
let child = tree.child(node, order);
if tree.style(child).display == Display::None {
- *tree.layout_mut(node) = Layout::with_order(order as u32);
- GenericAlgorithm::measure_size(
+ *tree.layout_mut(child) = Layout::with_order(order as u32);
+ GenericAlgorithm::perform_layout(
tree,
child,
Size::NONE,
diff --git a/tests/relayout.rs b/tests/relayout.rs
index 067bd2b9a..865c21b8e 100644
--- a/tests/relayout.rs
+++ b/tests/relayout.rs
@@ -1,11 +1,11 @@
-use taffy::style::{AvailableSpace, Dimension};
+use taffy::prelude::*;
#[test]
fn relayout() {
let mut taffy = taffy::Taffy::new();
let node1 = taffy
.new_leaf(taffy::style::Style {
- size: taffy::geometry::Size { width: Dimension::Points(8f32), height: Dimension::Points(80f32) },
+ size: taffy::geometry::Size { width: points(8.0), height: points(80.0) },
..Default::default()
})
.unwrap();
@@ -55,3 +55,140 @@ fn relayout() {
assert_eq!(taffy.layout(node1).unwrap().location, initial1);
}
}
+
+#[test]
+fn toggle_root_display_none() {
+ let hidden_style = Style {
+ display: Display::None,
+ size: Size { width: points(100.0), height: points(100.0) },
+ ..Default::default()
+ };
+
+ let flex_style = Style {
+ display: Display::Flex,
+ size: Size { width: points(100.0), height: points(100.0) },
+ ..Default::default()
+ };
+
+ // Setup
+ let mut taffy = taffy::Taffy::new();
+ let node = taffy.new_leaf(hidden_style.clone()).unwrap();
+
+ // Layout 1 (None)
+ taffy.compute_layout(node, Size::MAX_CONTENT).unwrap();
+ let layout = taffy.layout(node).unwrap();
+ assert_eq!(layout.location.x, 0.0);
+ assert_eq!(layout.location.y, 0.0);
+ assert_eq!(layout.size.width, 0.0);
+ assert_eq!(layout.size.height, 0.0);
+
+ // Layout 2 (Flex)
+ taffy.set_style(node, flex_style).unwrap();
+ taffy.compute_layout(node, Size::MAX_CONTENT).unwrap();
+ let layout = taffy.layout(node).unwrap();
+ assert_eq!(layout.location.x, 0.0);
+ assert_eq!(layout.location.y, 0.0);
+ assert_eq!(layout.size.width, 100.0);
+ assert_eq!(layout.size.height, 100.0);
+
+ // Layout 3 (None)
+ taffy.set_style(node, hidden_style).unwrap();
+ taffy.compute_layout(node, Size::MAX_CONTENT).unwrap();
+ let layout = taffy.layout(node).unwrap();
+ assert_eq!(layout.location.x, 0.0);
+ assert_eq!(layout.location.y, 0.0);
+ assert_eq!(layout.size.width, 0.0);
+ assert_eq!(layout.size.height, 0.0);
+}
+
+#[test]
+fn toggle_flex_child_display_none() {
+ let hidden_style = Style {
+ display: Display::None,
+ size: Size { width: points(100.0), height: points(100.0) },
+ ..Default::default()
+ };
+
+ let flex_style = Style {
+ display: Display::Flex,
+ size: Size { width: points(100.0), height: points(100.0) },
+ ..Default::default()
+ };
+
+ // Setup
+ let mut taffy = taffy::Taffy::new();
+ let node = taffy.new_leaf(hidden_style.clone()).unwrap();
+ let root = taffy.new_with_children(flex_style.clone(), &[node]).unwrap();
+
+ // Layout 1 (None)
+ taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
+ let layout = taffy.layout(node).unwrap();
+ assert_eq!(layout.location.x, 0.0);
+ assert_eq!(layout.location.y, 0.0);
+ assert_eq!(layout.size.width, 0.0);
+ assert_eq!(layout.size.height, 0.0);
+
+ // Layout 2 (Flex)
+ taffy.set_style(node, flex_style).unwrap();
+ taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
+ let layout = taffy.layout(node).unwrap();
+ assert_eq!(layout.location.x, 0.0);
+ assert_eq!(layout.location.y, 0.0);
+ assert_eq!(layout.size.width, 100.0);
+ assert_eq!(layout.size.height, 100.0);
+
+ // Layout 3 (None)
+ taffy.set_style(node, hidden_style).unwrap();
+ taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
+ let layout = taffy.layout(node).unwrap();
+ assert_eq!(layout.location.x, 0.0);
+ assert_eq!(layout.location.y, 0.0);
+ assert_eq!(layout.size.width, 0.0);
+ assert_eq!(layout.size.height, 0.0);
+}
+
+#[test]
+fn toggle_flex_container_display_none() {
+ let hidden_style = Style {
+ display: Display::None,
+ size: Size { width: points(100.0), height: points(100.0) },
+ ..Default::default()
+ };
+
+ let flex_style = Style {
+ display: Display::Flex,
+ size: Size { width: points(100.0), height: points(100.0) },
+ ..Default::default()
+ };
+
+ // Setup
+ let mut taffy = taffy::Taffy::new();
+ let node = taffy.new_leaf(hidden_style.clone()).unwrap();
+ let root = taffy.new_with_children(hidden_style.clone(), &[node]).unwrap();
+
+ // Layout 1 (None)
+ taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
+ let layout = taffy.layout(root).unwrap();
+ assert_eq!(layout.location.x, 0.0);
+ assert_eq!(layout.location.y, 0.0);
+ assert_eq!(layout.size.width, 0.0);
+ assert_eq!(layout.size.height, 0.0);
+
+ // Layout 2 (Flex)
+ taffy.set_style(root, flex_style).unwrap();
+ taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
+ let layout = taffy.layout(root).unwrap();
+ assert_eq!(layout.location.x, 0.0);
+ assert_eq!(layout.location.y, 0.0);
+ assert_eq!(layout.size.width, 100.0);
+ assert_eq!(layout.size.height, 100.0);
+
+ // Layout 3 (None)
+ taffy.set_style(root, hidden_style).unwrap();
+ taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
+ let layout = taffy.layout(root).unwrap();
+ assert_eq!(layout.location.x, 0.0);
+ assert_eq!(layout.location.y, 0.0);
+ assert_eq!(layout.size.width, 0.0);
+ assert_eq!(layout.size.height, 0.0);
+}