Merge pull request #388 from nicoburns/bevy/issue-8017

Prevent percentages contributing to min-content sizes
DioxusLabs · Mar 10, 2023 · 99613cb · 99613cb
2 parents c2f99bf + 320256b
commit 99613cb
Show file tree

Hide file tree

Showing 6 changed files with 265 additions and 1 deletion.
diff --git a/src/compute/flexbox.rs b/src/compute/flexbox.rs
@@ -706,11 +706,14 @@ fn determine_flex_base_size(
         child.hypothetical_inner_size.set_main(constants.dir, hypothetical_inner_size);
         child.hypothetical_outer_size.set_main(constants.dir, hypothetical_outer_size);
 
+        // Note that it is important that the `parent_size` parameter is not set for this function call
+        // as it used to resolve percentages against, and percentage size should not contribute to a
+        // min-content contribution. See https://drafts.csswg.org/css-sizing-3/#min-percentage-contribution
         let min_content_size = GenericAlgorithm::measure_size(
             tree,
             child.node,
             Size::NONE,
-            constants.node_inner_size,
+            Size::NONE,
             Size::MIN_CONTENT,
             SizingMode::ContentSize,
         );

diff --git a/test_fixtures/bevy_issue_8017.html b/test_fixtures/bevy_issue_8017.html
@@ -0,0 +1,24 @@
+<!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>
+    Bevy #8017
+</title>
+</head>
+<body>
+
+<div id="test-root" style="display: flex; flex-direction: column; gap: 8px;width: 400px;height:400px;padding: 8px;">
+  <div style="display: flex; gap: 8px; width: 100%; height: 50%;">
+      <div style="width: 100%; height: 100%;"></div>
+      <div style="width: 100%; height: 100%;"></div>
+  </div>
+  <div style="display: flex; gap: 8px; width: 100%; height: 50%;">
+      <div style="width: 100%; height: 100%;"></div>
+      <div style="width: 100%; height: 100%;"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/test_fixtures/bevy_issue_8017_reduced.html b/test_fixtures/bevy_issue_8017_reduced.html
@@ -0,0 +1,22 @@
+<!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>
+    Bevy #8017
+</title>
+</head>
+<body>
+
+<div id="test-root" style="flex-direction: column;width: 200px;height:400px;gap: 8px;">
+  <div style="height: 50%;">
+      <div></div>
+  </div>
+  <div style="height: 50%;">
+      <div></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/tests/generated/bevy_issue_8017.rs b/tests/generated/bevy_issue_8017.rs
diff --git a/tests/generated/bevy_issue_8017_reduced.rs b/tests/generated/bevy_issue_8017_reduced.rs
diff --git a/tests/generated/mod.rs b/tests/generated/mod.rs