Fix calculation of auto-fill/auto-fit repetition count when conta…

…iner has a definite percentage size
DioxusLabs · Oct 22, 2024 · 6043567 · 6043567
1 parent c14a177
commit 6043567
Show file tree

Hide file tree

Showing 6 changed files with 718 additions and 3 deletions.
diff --git a/RELEASES.md b/RELEASES.md
@@ -1,5 +1,10 @@
 # Release Notes
 
+## Unreleased
+
+### Fixes
+- Fix calculation of `auto-fill`/`auto-fit` repetition count when container has a definite percentage size
+
 ## 0.6.0
 
 ### Highlights

diff --git a/src/compute/grid/explicit_grid.rs b/src/compute/grid/explicit_grid.rs
@@ -7,7 +7,7 @@ use crate::style_helpers::TaffyAuto;
 use crate::util::sys::Vec;
 use crate::util::MaybeMath;
 use crate::util::ResolveOrZero;
-use crate::GridContainerStyle;
+use crate::{GridContainerStyle, MaybeResolve};
 
 #[cfg(not(feature = "std"))]
 use num_traits::float::FloatCore;
@@ -91,8 +91,10 @@ pub(crate) fn compute_explicit_grid_size_in_axis(
     // Otherwise, if the grid container has a definite min size in the relevant axis:
     //   - then the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement
     // Otherwise, the specified track list repeats only once.
-    let size_is_maximum =
-        style.size().get_abs(axis).into_option().is_some() || style.max_size().get_abs(axis).into_option().is_some();
+    let style_size_is_definite = style.size().get_abs(axis).maybe_resolve(inner_container_size.get_abs(axis)).is_some();
+    let style_max_size_is_definite =
+        style.max_size().get_abs(axis).maybe_resolve(inner_container_size.get_abs(axis)).is_some();
+    let size_is_maximum = style_size_is_definite | style_max_size_is_definite;
 
     // Determine the number of repetitions
     let num_repetitions: u16 = match inner_container_size.get_abs(axis) {

diff --git a/test_fixtures/grid/grid_auto_fit_definite_percentage.html b/test_fixtures/grid/grid_auto_fit_definite_percentage.html
@@ -0,0 +1,26 @@
+<!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="height: 300px; width: 730px;">
+  <div style="display: grid; width: 100%; height: 100%; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 10px; background-color: yellow;">
+    <div style="display: block; background-color: teal;"></div>
+    <div style="display: block; background-color: pink;"></div>
+    <div style="display: block; background-color: royalblue;"></div>
+    <div style="display: block; background-color: violet;"></div>
+    <div style="display: block; background-color: beige;"></div>
+    <div style="display: block; background-color: burlywood;"></div>
+    <div style="display: block; background-color: lightslategrey;"></div>
+    <div style="display: block; background-color: lightseagreen;"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/test_fixtures/grid/taffy_issue_721.html b/test_fixtures/grid/taffy_issue_721.html
@@ -0,0 +1,26 @@
+<!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="height: 300px; width: 730px;">
+  <div style="display: grid; width: 100%; height: 100%; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 10px; background-color: yellow;">
+    <div style="display: block; background-color: teal;"></div>
+    <div style="display: block; background-color: pink;"></div>
+    <div style="display: block; background-color: royalblue;"></div>
+    <div style="display: block; background-color: violet;"></div>
+    <div style="display: block; background-color: beige;"></div>
+    <div style="display: block; background-color: burlywood;"></div>
+    <div style="display: block; background-color: lightslategrey;"></div>
+    <div style="display: block; background-color: lightseagreen;"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/tests/generated/grid/mod.rs b/tests/generated/grid/mod.rs