gioser

tawasuyu/taffy

A high performance rust-powered UI layout library

Rust 501HTML 254C 19JavaScript 81412 Definiciones

Fix/additional flex gap tests (#284)

* Import additional flexbox gap tests from yoga (ba27f9d1ecfa7518019845b84b035d3d4a2a6658)

* Fix gap being re-resolved against the column-gap style rather than main-axis gap style

* Update release notes with gap fix

d8c8bb472833ba92d694a9420e4c5bd8308e32e3 · por Nico Burns · (hace 3 años) · padre 0329b51e0 · ver el árbol en este commit

Delta semántico · 10

benches/generated/gap_column_gap_determines_parent_width.rs

benches/generated/gap_row_gap_determines_parent_height.rs

benches/generated/mod.rs

src/compute/flexbox.rs

tests/generated/gap_column_gap_determines_parent_width.rs

tests/generated/gap_row_gap_determines_parent_height.rs

10 archivos · +263 −1

diff --git a/RELEASES.md b/RELEASES.md
index 4a4782b5a..6b3a3a7b3 100644
--- a/RELEASES.md
+++ b/RELEASES.md
@@ -11,6 +11,10 @@
 - Added `child_count`  method to `LayoutTree` for querying the number of children of a node. Required because the `children` method now returns an iterator instead of an array.
 - Added `is_childless` method to `LayoutTree` for querying whether a node has no children.
 
+### Fixes
+
+- Fix case where column-gap style could be used in place of row-gap style (when using a percentage gap with an indefinite container size)
+
 ## 0.2.2
 
 ### Fixes
diff --git a/benches/generated/gap_column_gap_determines_parent_width.rs b/benches/generated/gap_column_gap_determines_parent_width.rs
new file mode 100644
index 000000000..7f66a30d0
--- /dev/null
+++ b/benches/generated/gap_column_gap_determines_parent_width.rs
@@ -0,0 +1,43 @@
+pub fn compute() {
+    #[allow(unused_imports)]
+    use taffy::prelude::*;
+    let mut taffy = taffy::Taffy::new();
+    let node0 = taffy
+        .new_with_children(
+            taffy::style::Style {
+                size: taffy::geometry::Size { width: taffy::style::Dimension::Points(10f32), ..Size::auto() },
+                ..Default::default()
+            },
+            &[],
+        )
+        .unwrap();
+    let node1 = taffy
+        .new_with_children(
+            taffy::style::Style {
+                size: taffy::geometry::Size { width: taffy::style::Dimension::Points(20f32), ..Size::auto() },
+                ..Default::default()
+            },
+            &[],
+        )
+        .unwrap();
+    let node2 = taffy
+        .new_with_children(
+            taffy::style::Style {
+                size: taffy::geometry::Size { width: taffy::style::Dimension::Points(30f32), ..Size::auto() },
+                ..Default::default()
+            },
+            &[],
+        )
+        .unwrap();
+    let node = taffy
+        .new_with_children(
+            taffy::style::Style {
+                gap: taffy::geometry::Size { width: taffy::style::LengthPercentage::Points(10f32), ..Size::zero() },
+                size: taffy::geometry::Size { height: taffy::style::Dimension::Points(100f32), ..Size::auto() },
+                ..Default::default()
+            },
+            &[node0, node1, node2],
+        )
+        .unwrap();
+    taffy.compute_layout(node, taffy::geometry::Size::MAX_CONTENT).unwrap();
+}
diff --git a/benches/generated/gap_row_gap_determines_parent_height.rs b/benches/generated/gap_row_gap_determines_parent_height.rs
new file mode 100644
index 000000000..10eb4fd03
--- /dev/null
+++ b/benches/generated/gap_row_gap_determines_parent_height.rs
@@ -0,0 +1,44 @@
+pub fn compute() {
+    #[allow(unused_imports)]
+    use taffy::prelude::*;
+    let mut taffy = taffy::Taffy::new();
+    let node0 = taffy
+        .new_with_children(
+            taffy::style::Style {
+                size: taffy::geometry::Size { height: taffy::style::Dimension::Points(10f32), ..Size::auto() },
+                ..Default::default()
+            },
+            &[],
+        )
+        .unwrap();
+    let node1 = taffy
+        .new_with_children(
+            taffy::style::Style {
+                size: taffy::geometry::Size { height: taffy::style::Dimension::Points(20f32), ..Size::auto() },
+                ..Default::default()
+            },
+            &[],
+        )
+        .unwrap();
+    let node2 = taffy
+        .new_with_children(
+            taffy::style::Style {
+                size: taffy::geometry::Size { height: taffy::style::Dimension::Points(30f32), ..Size::auto() },
+                ..Default::default()
+            },
+            &[],
+        )
+        .unwrap();
+    let node = taffy
+        .new_with_children(
+            taffy::style::Style {
+                flex_direction: taffy::style::FlexDirection::Column,
+                gap: taffy::geometry::Size { height: taffy::style::LengthPercentage::Points(10f32), ..Size::zero() },
+                size: taffy::geometry::Size { width: taffy::style::Dimension::Points(100f32), ..Size::auto() },
+                ..Default::default()
+            },
+            &[node0, node1, node2],
+        )
+        .unwrap();
+    taffy.compute_layout(node, taffy::geometry::Size::MAX_CONTENT).unwrap();
+}
diff --git a/benches/generated/mod.rs b/benches/generated/mod.rs
index 557da7503..7985a324b 100644
--- a/benches/generated/mod.rs
+++ b/benches/generated/mod.rs
@@ -110,6 +110,7 @@ mod flex_wrap_align_stretch_fits_one_row;
 mod flex_wrap_children_with_min_main_overriding_flex_basis;
 mod flex_wrap_wrap_to_child_height;
 mod gap_column_gap_child_margins;
+mod gap_column_gap_determines_parent_width;
 mod gap_column_gap_flexible;
 mod gap_column_gap_flexible_undefined_parent;
 mod gap_column_gap_inflexible;
@@ -137,6 +138,7 @@ mod gap_percentage_row_gap_wrapping;
 mod gap_row_gap_align_items_end;
 mod gap_row_gap_align_items_stretch;
 mod gap_row_gap_column_child_margins;
+mod gap_row_gap_determines_parent_height;
 mod gap_row_gap_row_wrap_child_margins;
 mod justify_content_column_center;
 mod justify_content_column_flex_end;
@@ -388,6 +390,7 @@ fn benchmark(c: &mut Criterion) {
             flex_wrap_children_with_min_main_overriding_flex_basis::compute();
             flex_wrap_wrap_to_child_height::compute();
             gap_column_gap_child_margins::compute();
+            gap_column_gap_determines_parent_width::compute();
             gap_column_gap_flexible::compute();
             gap_column_gap_flexible_undefined_parent::compute();
             gap_column_gap_inflexible::compute();
@@ -415,6 +418,7 @@ fn benchmark(c: &mut Criterion) {
             gap_row_gap_align_items_end::compute();
             gap_row_gap_align_items_stretch::compute();
             gap_row_gap_column_child_margins::compute();
+            gap_row_gap_determines_parent_height::compute();
             gap_row_gap_row_wrap_child_margins::compute();
             justify_content_column_center::compute();
             justify_content_column_flex_end::compute();
diff --git a/src/compute/flexbox.rs b/src/compute/flexbox.rs
index f6b0b35c6..fc4aaa558 100644
--- a/src/compute/flexbox.rs
+++ b/src/compute/flexbox.rs
@@ -213,7 +213,7 @@ fn compute_preliminary(
         });
 
         let style = tree.style(node);
-        let new_gap = style.gap.width.maybe_resolve(longest_line_length).unwrap_or(0.0);
+        let new_gap = style.gap.main(constants.dir).maybe_resolve(longest_line_length).unwrap_or(0.0);
         constants.gap.set_main(constants.dir, new_gap);
     }
 
diff --git a/test_fixtures/gap_column_gap_determines_parent_width.html b/test_fixtures/gap_column_gap_determines_parent_width.html
new file mode 100644
index 000000000..f215a37af
--- /dev/null
+++ b/test_fixtures/gap_column_gap_determines_parent_width.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <script src="../scripts/gentest/test_helper.js"></script>
+  <link rel="stylesheet" type="text/css" href="../scripts/gentest/test_base_style.css">
+  <title>
+    Test description
+  </title>
+<head/>
+<body>
+
+<div id="test-root" style="flex-direction: row; height: 100px; align-items: stretch; column-gap: 10px;">
+  <div style="width: 10px;"></div>
+  <div style="width: 20px;"></div>
+  <div style="width: 30px;"></div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/test_fixtures/gap_row_gap_determines_parent_height.html b/test_fixtures/gap_row_gap_determines_parent_height.html
new file mode 100644
index 000000000..0ac42b855
--- /dev/null
+++ b/test_fixtures/gap_row_gap_determines_parent_height.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <script src="../scripts/gentest/test_helper.js"></script>
+  <link rel="stylesheet" type="text/css" href="../scripts/gentest/test_base_style.css">
+  <title>
+    Test description
+  </title>
+<head/>
+<body>
+
+<div id="test-root" style="flex-direction: column; width: 100px; align-items: stretch; row-gap: 10px;">
+  <div style="height: 10px;"></div>
+  <div style="height: 20px"></div>
+  <div style="height: 30px"></div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/tests/generated/gap_column_gap_determines_parent_width.rs b/tests/generated/gap_column_gap_determines_parent_width.rs
new file mode 100644
index 000000000..a88bd2c5d
--- /dev/null
+++ b/tests/generated/gap_column_gap_determines_parent_width.rs
@@ -0,0 +1,63 @@
+#[test]
+fn gap_column_gap_determines_parent_width() {
+    #[allow(unused_imports)]
+    use taffy::prelude::*;
+    let mut taffy = taffy::Taffy::new();
+    let node0 = taffy
+        .new_with_children(
+            taffy::style::Style {
+                size: taffy::geometry::Size { width: taffy::style::Dimension::Points(10f32), ..Size::auto() },
+                ..Default::default()
+            },
+            &[],
+        )
+        .unwrap();
+    let node1 = taffy
+        .new_with_children(
+            taffy::style::Style {
+                size: taffy::geometry::Size { width: taffy::style::Dimension::Points(20f32), ..Size::auto() },
+                ..Default::default()
+            },
+            &[],
+        )
+        .unwrap();
+    let node2 = taffy
+        .new_with_children(
+            taffy::style::Style {
+                size: taffy::geometry::Size { width: taffy::style::Dimension::Points(30f32), ..Size::auto() },
+                ..Default::default()
+            },
+            &[],
+        )
+        .unwrap();
+    let node = taffy
+        .new_with_children(
+            taffy::style::Style {
+                gap: taffy::geometry::Size { width: taffy::style::LengthPercentage::Points(10f32), ..Size::zero() },
+                size: taffy::geometry::Size { height: taffy::style::Dimension::Points(100f32), ..Size::auto() },
+                ..Default::default()
+            },
+            &[node0, node1, node2],
+        )
+        .unwrap();
+    taffy.compute_layout(node, taffy::geometry::Size::MAX_CONTENT).unwrap();
+    println!("\nComputed tree:");
+    taffy::debug::print_tree(&taffy, node);
+    println!();
+    assert_eq!(taffy.layout(node).unwrap().size.width, 80f32);
+    assert_eq!(taffy.layout(node).unwrap().size.height, 100f32);
+    assert_eq!(taffy.layout(node).unwrap().location.x, 0f32);
+    assert_eq!(taffy.layout(node).unwrap().location.y, 0f32);
+    assert_eq!(taffy.layout(node0).unwrap().size.width, 10f32);
+    assert_eq!(taffy.layout(node0).unwrap().size.height, 100f32);
+    assert_eq!(taffy.layout(node0).unwrap().location.x, 0f32);
+    assert_eq!(taffy.layout(node0).unwrap().location.y, 0f32);
+    assert_eq!(taffy.layout(node1).unwrap().size.width, 20f32);
+    assert_eq!(taffy.layout(node1).unwrap().size.height, 100f32);
+    assert_eq!(taffy.layout(node1).unwrap().location.x, 20f32);
+    assert_eq!(taffy.layout(node1).unwrap().location.y, 0f32);
+    assert_eq!(taffy.layout(node2).unwrap().size.width, 30f32);
+    assert_eq!(taffy.layout(node2).unwrap().size.height, 100f32);
+    assert_eq!(taffy.layout(node2).unwrap().location.x, 50f32);
+    assert_eq!(taffy.layout(node2).unwrap().location.y, 0f32);
+}
diff --git a/tests/generated/gap_row_gap_determines_parent_height.rs b/tests/generated/gap_row_gap_determines_parent_height.rs
new file mode 100644
index 000000000..7feb61ce8
--- /dev/null
+++ b/tests/generated/gap_row_gap_determines_parent_height.rs
@@ -0,0 +1,64 @@
+#[test]
+fn gap_row_gap_determines_parent_height() {
+    #[allow(unused_imports)]
+    use taffy::prelude::*;
+    let mut taffy = taffy::Taffy::new();
+    let node0 = taffy
+        .new_with_children(
+            taffy::style::Style {
+                size: taffy::geometry::Size { height: taffy::style::Dimension::Points(10f32), ..Size::auto() },
+                ..Default::default()
+            },
+            &[],
+        )
+        .unwrap();
+    let node1 = taffy
+        .new_with_children(
+            taffy::style::Style {
+                size: taffy::geometry::Size { height: taffy::style::Dimension::Points(20f32), ..Size::auto() },
+                ..Default::default()
+            },
+            &[],
+        )
+        .unwrap();
+    let node2 = taffy
+        .new_with_children(
+            taffy::style::Style {
+                size: taffy::geometry::Size { height: taffy::style::Dimension::Points(30f32), ..Size::auto() },
+                ..Default::default()
+            },
+            &[],
+        )
+        .unwrap();
+    let node = taffy
+        .new_with_children(
+            taffy::style::Style {
+                flex_direction: taffy::style::FlexDirection::Column,
+                gap: taffy::geometry::Size { height: taffy::style::LengthPercentage::Points(10f32), ..Size::zero() },
+                size: taffy::geometry::Size { width: taffy::style::Dimension::Points(100f32), ..Size::auto() },
+                ..Default::default()
+            },
+            &[node0, node1, node2],
+        )
+        .unwrap();
+    taffy.compute_layout(node, taffy::geometry::Size::MAX_CONTENT).unwrap();
+    println!("\nComputed tree:");
+    taffy::debug::print_tree(&taffy, node);
+    println!();
+    assert_eq!(taffy.layout(node).unwrap().size.width, 100f32);
+    assert_eq!(taffy.layout(node).unwrap().size.height, 80f32);
+    assert_eq!(taffy.layout(node).unwrap().location.x, 0f32);
+    assert_eq!(taffy.layout(node).unwrap().location.y, 0f32);
+    assert_eq!(taffy.layout(node0).unwrap().size.width, 100f32);
+    assert_eq!(taffy.layout(node0).unwrap().size.height, 10f32);
+    assert_eq!(taffy.layout(node0).unwrap().location.x, 0f32);
+    assert_eq!(taffy.layout(node0).unwrap().location.y, 0f32);
+    assert_eq!(taffy.layout(node1).unwrap().size.width, 100f32);
+    assert_eq!(taffy.layout(node1).unwrap().size.height, 20f32);
+    assert_eq!(taffy.layout(node1).unwrap().location.x, 0f32);
+    assert_eq!(taffy.layout(node1).unwrap().location.y, 20f32);
+    assert_eq!(taffy.layout(node2).unwrap().size.width, 100f32);
+    assert_eq!(taffy.layout(node2).unwrap().size.height, 30f32);
+    assert_eq!(taffy.layout(node2).unwrap().location.x, 0f32);
+    assert_eq!(taffy.layout(node2).unwrap().location.y, 50f32);
+}
diff --git a/tests/generated/mod.rs b/tests/generated/mod.rs
index 86c85b642..5e0a9186c 100644
--- a/tests/generated/mod.rs
+++ b/tests/generated/mod.rs
@@ -109,6 +109,7 @@ mod flex_wrap_align_stretch_fits_one_row;
 mod flex_wrap_children_with_min_main_overriding_flex_basis;
 mod flex_wrap_wrap_to_child_height;
 mod gap_column_gap_child_margins;
+mod gap_column_gap_determines_parent_width;
 mod gap_column_gap_flexible;
 mod gap_column_gap_flexible_undefined_parent;
 mod gap_column_gap_inflexible;
@@ -136,6 +137,7 @@ mod gap_percentage_row_gap_wrapping;
 mod gap_row_gap_align_items_end;
 mod gap_row_gap_align_items_stretch;
 mod gap_row_gap_column_child_margins;
+mod gap_row_gap_determines_parent_height;
 mod gap_row_gap_row_wrap_child_margins;
 mod justify_content_column_center;
 mod justify_content_column_flex_end;