Fix intrinsic size of scroll containers that have a small explicit fl…

…ex-basis (#728) * Add tests to for issue 696 * Flexbox: prevent content size from affecting intrinsic main size if an item is a scroll container * Format fixtures * Fix clippy lints
DioxusLabs · Oct 22, 2024 · 9f1d71c · 9f1d71c
1 parent 343203d
commit 9f1d71c
Show file tree

Hide file tree

Showing 12 changed files with 967 additions and 1 deletion.
diff --git a/src/compute/flexbox.rs b/src/compute/flexbox.rs
@@ -97,6 +97,13 @@ struct FlexItem {
     offset_cross: f32,
 }
 
+impl FlexItem {
+    /// Returns true if the item is a <https://www.w3.org/TR/css-overflow-3/#scroll-container>
+    fn is_scroll_container(&self) -> bool {
+        self.overflow.x.is_scroll_container() | self.overflow.y.is_scroll_container()
+    }
+}
+
 /// A line of [`FlexItem`] used for intermediate computation
 struct FlexLine<'a> {
     /// The slice of items to iterate over during computation of this line
@@ -975,8 +982,12 @@ fn determine_container_main_size(
                                 pref.min(max).max(min) + item.margin.main_axis_sum(constants.dir)
                             }
                             (min, _, max) if max <= min => min + item.margin.main_axis_sum(constants.dir),
+
                             // Else compute the min- or -max content size and apply the full formula for computing the
-                            // min- or max- content contributuon
+                            // min- or max- content contribution
+                            _ if item.is_scroll_container() => {
+                                item.flex_basis + item.margin.main_axis_sum(constants.dir)
+                            }
                             _ => {
                                 // Parent size for child sizing
                                 let cross_axis_parent_size = constants.node_inner_size.cross(dir);

diff --git a/test_fixtures/flex/taffy_issue_696.html b/test_fixtures/flex/taffy_issue_696.html
@@ -0,0 +1,18 @@
+<!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="display: flex; flex-direction: column; width: 200px;">
+    <div style="display: flex; flex-direction: column; overflow: hidden; min-height: 100px; padding: 20px; flex-basis: 0px;">
+      <div style="display: flex; height: 200px; flex-shrink: 0;"></div>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/test_fixtures/flex/taffy_issue_696_flex_basis_20.html b/test_fixtures/flex/taffy_issue_696_flex_basis_20.html
@@ -0,0 +1,18 @@
+<!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="display: flex; flex-direction: column; width: 200px;">
+    <div style="display: flex; flex-direction: column; overflow: hidden; min-height: 100px; padding: 20px; flex-basis: 20px;">
+      <div style="display: flex; height: 200px; flex-shrink: 0;"></div>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/test_fixtures/flex/taffy_issue_696_min_height.html b/test_fixtures/flex/taffy_issue_696_min_height.html
@@ -0,0 +1,18 @@
+<!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="display: flex; flex-direction: column; width: 200px;">
+    <div style="display: flex; flex-direction: column; min-height: 100px; padding: 20px; flex-basis: 0px;">
+      <div style="display: flex; height: 200px; flex-shrink: 0;"></div>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/test_fixtures/flex/taffy_issue_696_no_flex_basis.html b/test_fixtures/flex/taffy_issue_696_no_flex_basis.html
@@ -0,0 +1,18 @@
+<!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="display: flex; flex-direction: column; width: 200px;">
+    <div style="display: flex; flex-direction: column; overflow: hidden; min-height: 100px; padding: 20px;">
+      <div style="display: flex; height: 200px; flex-shrink: 0;"></div>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/test_fixtures/flex/taffy_issue_696_overflow_hidden.html b/test_fixtures/flex/taffy_issue_696_overflow_hidden.html
@@ -0,0 +1,18 @@
+<!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="display: flex; flex-direction: column; width: 200px;">
+    <div style="display: flex; flex-direction: column; overflow: hidden; padding: 20px; flex-basis: 0px;">
+      <div style="display: flex; height: 200px; flex-shrink: 0;"></div>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/tests/generated/flex/mod.rs b/tests/generated/flex/mod.rs
diff --git a/tests/generated/flex/taffy_issue_696.rs b/tests/generated/flex/taffy_issue_696.rs