diff --git a/src/compute/flexbox.rs b/src/compute/flexbox.rs index 143a1dea3..8e3a7c1d6 100644 --- a/src/compute/flexbox.rs +++ b/src/compute/flexbox.rs @@ -1,4 +1,6 @@ //! Computes the [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) layout algorithm on [`TaffyTree`](crate::TaffyTree) according to the [spec](https://www.w3.org/TR/css-flexbox-1/) +use core::ops::Add; + use crate::compute::common::alignment::compute_alignment_offset; use crate::geometry::{Line, Point, Rect, Size}; use crate::style::{ @@ -171,7 +173,17 @@ pub fn compute_flexbox_layout(tree: &mut impl LayoutPartialTree, node: NodeId, i (Some(min), Some(max)) if max <= min => Some(min), _ => None, }); - let styled_based_known_dimensions = known_dimensions.or(min_max_definite_size).or(clamped_style_size); + + // if the sum of the padding and border is greater than the size of the container, the + // the result overwrites the size of the container + let padding_border_sum = style + .padding + .resolve_or_zero(parent_size.width) + .sum_axes() + .add(style.border.resolve_or_zero(parent_size.width).sum_axes()); + + let styled_based_known_dimensions = + known_dimensions.or(min_max_definite_size).or(clamped_style_size).maybe_max(padding_border_sum); // Short-circuit layout if the container's size is fully determined by the container's size and the run mode // is ComputeSize (and thus the container's size is all that we're interested in) @@ -2167,9 +2179,10 @@ mod tests { use crate::{ geometry::Size, + prelude::{length, TaffyMaxContent}, style::{FlexWrap, Style}, util::{MaybeMath, ResolveOrZero}, - TaffyTree, + Rect, TaffyTree, }; // Make sure we get correct constants @@ -2208,4 +2221,31 @@ mod tests { assert_eq!(constants.container_size, Size::zero()); assert_eq!(constants.inner_container_size, Size::zero()); } + + #[test] + pub fn test_padding_and_border_larger_than_definite_size() { + let mut tree: TaffyTree<()> = TaffyTree::with_capacity(16); + + let child = tree.new_leaf(Style::default()).unwrap(); + + let root = tree + .new_with_children( + Style { + size: Size { width: length(10.0), height: length(10.0) }, + padding: Rect { left: length(10.0), right: length(10.0), top: length(10.0), bottom: length(10.0) }, + + border: Rect { left: length(10.0), right: length(10.0), top: length(10.0), bottom: length(10.0) }, + ..Default::default() + }, + &[child], + ) + .unwrap(); + + tree.compute_layout(root, Size::MAX_CONTENT).unwrap(); + + let layout = tree.layout(root).unwrap(); + + assert_eq!(layout.size.width, 40.0); + assert_eq!(layout.size.height, 40.0); + } }