Merge pull request DioxusLabs#372 from nicoburns/fix/border-floors-no…

…de-size Make padding/border size floor node size
nicoburns · Mar 9, 2023 · c2f99bf · c2f99bf
2 parents 6be6a47 + aa251a1
commit c2f99bf
Show file tree

Hide file tree

Showing 36 changed files with 1,140 additions and 121 deletions.
diff --git a/src/compute/flexbox.rs b/src/compute/flexbox.rs
diff --git a/src/compute/grid/alignment.rs b/src/compute/grid/alignment.rs
@@ -7,7 +7,7 @@ use crate::geometry::{Line, Point, Rect, Size};
 use crate::layout::{Layout, SizingMode};
 use crate::math::MaybeMath;
 use crate::node::Node;
-use crate::resolve::MaybeResolve;
+use crate::resolve::{MaybeResolve, ResolveOrZero};
 use crate::style::{AlignContent, AlignItems, AlignSelf, AvailableSpace, Position};
 use crate::sys::{f32_max, f32_min};
 use crate::tree::LayoutTree;
@@ -90,8 +90,16 @@ pub(super) fn align_and_position_item(
     let position = style.position;
     let inset_horizontal = style.inset.horizontal_components().map(|size| size.resolve_to_option(grid_area_size.width));
     let inset_vertical = style.inset.vertical_components().map(|size| size.resolve_to_option(grid_area_size.height));
+    let padding = style.padding.map(|p| p.resolve_or_zero(Some(grid_area_size.width)));
+    let border = style.border.map(|p| p.resolve_or_zero(Some(grid_area_size.width)));
+    let padding_border_size = (padding + border).sum_axes();
     let inherent_size = style.size.maybe_resolve(grid_area_size).maybe_apply_aspect_ratio(aspect_ratio);
-    let min_size = style.min_size.maybe_resolve(grid_area_size).maybe_apply_aspect_ratio(aspect_ratio);
+    let min_size = style
+        .min_size
+        .maybe_resolve(grid_area_size)
+        .or(padding_border_size.map(Some))
+        .maybe_max(padding_border_size)
+        .maybe_apply_aspect_ratio(aspect_ratio);
     let max_size = style.max_size.maybe_resolve(grid_area_size).maybe_apply_aspect_ratio(aspect_ratio);
 
     // Resolve default alignment styles if they are set on neither the parent or the node itself
@@ -149,6 +157,7 @@ pub(super) fn align_and_position_item(
 
         None
     });
+
     // Reapply aspect ratio after stretch and absolute position width adjustments
     let Size { width, height } = Size { width, height: inherent_size.height }.maybe_apply_aspect_ratio(aspect_ratio);
 

diff --git a/src/compute/grid/mod.rs b/src/compute/grid/mod.rs
@@ -141,6 +141,7 @@ pub fn compute(
     // https://www.w3.org/TR/css-grid-1/#available-grid-space
     let padding = style.padding.resolve_or_zero(parent_size.width);
     let border = style.border.resolve_or_zero(parent_size.width);
+    let padding_border_size = (padding + border).sum_axes();
     let aspect_ratio = style.aspect_ratio;
     let min_size = style.min_size.maybe_resolve(parent_size).maybe_apply_aspect_ratio(aspect_ratio);
     let max_size = style.max_size.maybe_resolve(parent_size).maybe_apply_aspect_ratio(aspect_ratio);
@@ -236,10 +237,12 @@ pub fn compute(
     let container_border_box = Size {
         width: resolved_style_size
             .get(AbstractAxis::Inline)
-            .unwrap_or_else(|| initial_column_sum + padding.horizontal_axis_sum() + border.horizontal_axis_sum()),
+            .unwrap_or_else(|| initial_column_sum + padding.horizontal_axis_sum() + border.horizontal_axis_sum())
+            .max(padding_border_size.width),
         height: resolved_style_size
             .get(AbstractAxis::Block)
-            .unwrap_or_else(|| initial_row_sum + padding.vertical_axis_sum() + border.vertical_axis_sum()),
+            .unwrap_or_else(|| initial_row_sum + padding.vertical_axis_sum() + border.vertical_axis_sum())
+            .max(padding_border_size.height),
     };
     let container_content_box = Size {
         width: container_border_box.width - padding.horizontal_axis_sum() - border.horizontal_axis_sum(),

diff --git a/src/compute/leaf.rs b/src/compute/leaf.rs
@@ -72,6 +72,12 @@ pub(crate) fn compute(
         }
     };
 
+    // Note: both horizontal and vertical percentage padding/borders are resolved against the container's inline size (i.e. width).
+    // This is not a bug, but is how CSS is specified (see: https://developer.mozilla.org/en-US/docs/Web/CSS/padding#values)
+    let padding = style.padding.resolve_or_zero(parent_size.width);
+    let border = style.border.resolve_or_zero(parent_size.width);
+    let padding_border = padding + border;
+
     #[cfg(feature = "debug")]
     NODE_LOGGER.log("LEAF");
     #[cfg(feature = "debug")]
@@ -83,7 +89,9 @@ pub(crate) fn compute(
 
     // Return early if both width and height are known
     if let Size { width: Some(width), height: Some(height) } = node_size {
-        let size = Size { width, height }.maybe_clamp(node_min_size, node_max_size);
+        let size = Size { width, height }
+            .maybe_clamp(node_min_size, node_max_size)
+            .maybe_max(padding_border.sum_axes().map(Some));
         return SizeAndBaselines { size, first_baselines: Point::NONE };
     };
 
@@ -111,25 +119,29 @@ pub(crate) fn compute(
         };
 
         let size = node_size.unwrap_or(measured_size).maybe_clamp(node_min_size, node_max_size);
+        let size = size.maybe_max(padding_border.sum_axes().map(Some));
         return SizeAndBaselines { size, first_baselines: Point::NONE };
     }
 
-    // Note: both horizontal and vertical percentage padding/borders are resolved against the container's inline size (i.e. width).
-    // This is not a bug, but is how CSS is specified (see: https://developer.mozilla.org/en-US/docs/Web/CSS/padding#values)
-    let padding = style.padding.resolve_or_zero(parent_size.width);
-    let border = style.border.resolve_or_zero(parent_size.width);
-
     let size = Size {
         width: node_size
             .width
             // .unwrap_or(0.0) + padding.horizontal_axis_sum() + border.horizontal_axis_sum(), // content-box
-            .unwrap_or(0.0 + padding.horizontal_axis_sum() + border.horizontal_axis_sum()) // border-box
-            .maybe_clamp(node_min_size.width, node_max_size.width),
+            .unwrap_or(0.0) // border-box
+            .maybe_clamp(node_min_size.width, node_max_size.width)
+            .maybe_max(padding_border.horizontal_axis_sum().into()),
         height: node_size
             .height
             // .unwrap_or(0.0) + padding.vertical_axis_sum() + border.vertical_axis_sum(), // content-box
-            .unwrap_or(0.0 + padding.vertical_axis_sum() + border.vertical_axis_sum()) // border-box
-            .maybe_clamp(node_min_size.height, node_max_size.height),
+            .unwrap_or(0.0) // border-box
+            .maybe_clamp(node_min_size.height, node_max_size.height)
+            .maybe_max(padding_border.vertical_axis_sum().into()),
     };
+
+    let size = Size {
+        width: f32_max(size.width, aspect_ratio.map(|ratio| size.height * ratio).unwrap_or(0.0)),
+        height: f32_max(size.height, aspect_ratio.map(|ratio| size.width / ratio).unwrap_or(0.0)),
+    };
+
     SizeAndBaselines { size, first_baselines: Point::NONE }
 }
diff --git a/test_fixtures/absolute_padding_border_overrides_max_size.html b/test_fixtures/absolute_padding_border_overrides_max_size.html
@@ -0,0 +1,17 @@
+<!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">
+  <div style="position:absolute;max-width: 12px; max-height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
+</div>
+
+</body>
+</html>
diff --git a/test_fixtures/absolute_padding_border_overrides_size.html b/test_fixtures/absolute_padding_border_overrides_size.html
@@ -0,0 +1,17 @@
+<!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">
+  <div style="position:absolute;width: 12px; height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
+</div>
+
+</body>
+</html>
diff --git a/test_fixtures/grid_padding_border_overrides_container_max_size.html b/test_fixtures/grid_padding_border_overrides_container_max_size.html
@@ -0,0 +1,17 @@
+<!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: grid;max-width: 12px; max-height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red">
+  <div></div>
+</div>
+
+</body>
+</html>
diff --git a/test_fixtures/grid_padding_border_overrides_container_size.html b/test_fixtures/grid_padding_border_overrides_container_size.html
@@ -0,0 +1,17 @@
+<!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: grid;width: 12px; height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red solid red">
+  <div></div>
+</div>
+
+</body>
+</html>
diff --git a/test_fixtures/grid_padding_border_overrides_max_size.html b/test_fixtures/grid_padding_border_overrides_max_size.html
@@ -0,0 +1,17 @@
+<!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:grid">
+  <div style="max-width: 12px; max-height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
+</div>
+
+</body>
+</html>
diff --git a/test_fixtures/grid_padding_border_overrides_min_size.html b/test_fixtures/grid_padding_border_overrides_min_size.html
@@ -0,0 +1,17 @@
+<!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: grid">
+  <div style="min-width: 0px; min-height: 0px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
+</div>
+
+</body>
+</html>
diff --git a/test_fixtures/grid_padding_border_overrides_size.html b/test_fixtures/grid_padding_border_overrides_size.html
@@ -0,0 +1,17 @@
+<!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: grid">
+  <div style="width: 12px; height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
+</div>
+
+</body>
+</html>
diff --git a/test_fixtures/leaf_padding_border_overrides_max_size.html b/test_fixtures/leaf_padding_border_overrides_max_size.html
@@ -0,0 +1,15 @@
+<!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="max-width: 12px; max-height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
+
+</body>
+</html>
diff --git a/test_fixtures/leaf_padding_border_overrides_min_size.html b/test_fixtures/leaf_padding_border_overrides_min_size.html
@@ -0,0 +1,15 @@
+<!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="min-width: 0px; min-height: 0px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
+
+</body>
+</html>
diff --git a/test_fixtures/leaf_padding_border_overrides_size.html b/test_fixtures/leaf_padding_border_overrides_size.html
@@ -0,0 +1,15 @@
+<!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="width: 12px; height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
+
+</body>
+</html>
diff --git a/test_fixtures/padding_border_overrides_max_size.html b/test_fixtures/padding_border_overrides_max_size.html
@@ -0,0 +1,17 @@
+<!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">
+  <div style="max-width: 12px; max-height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
+</div>
+
+</body>
+</html>
diff --git a/test_fixtures/padding_border_overrides_min_size.html b/test_fixtures/padding_border_overrides_min_size.html
@@ -0,0 +1,17 @@
+<!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">
+  <div style="min-width: 0px; min-height: 0px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
+</div>
+
+</body>
+</html>
diff --git a/test_fixtures/padding_border_overrides_size.html b/test_fixtures/padding_border_overrides_size.html
@@ -0,0 +1,17 @@
+<!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">
+  <div style="width: 12px; height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
+</div>
+
+</body>
+</html>
diff --git a/test_fixtures/padding_border_overrides_size_flex_basis_0.html b/test_fixtures/padding_border_overrides_size_flex_basis_0.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">
+  <div style="flex-basis: 0;width: 12px; height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
+  <div style="flex-basis: 0;width: 12px; height: 12px"></div>
+</div>
+
+</body>
+</html>