layout: Implement the fit-content() sizing function

Spec: https://drafts.csswg.org/css-sizing-3/#funcdef-width-fit-content

It's similar to the `fit-content` keyword but, instead of clamping the
stretch size between `min-content` and `max-content`, it clamps the
provided argument.

So now that we support `fit-content`, it's quite straightforward to add.
It's just not completely clear what should happen when the argument has
a cyclic percentage, so this may need some further adjustments depending
on the outcome of w3c/csswg-drafts#11805

Signed-off-by: Oriol Brufau <[email protected]>

Author: Loirooriol

Cargo.lock

@@ -117,27 +117,27 @@ rustls-pemfile = "2.0"
 rustls-pki-types = "1.11"
 script_layout_interface = { path = "components/shared/script_layout" }
 script_traits = { path = "components/shared/script" }
-selectors = { git = "https://github.com/servo/stylo", branch = "2025-03-15" }
+selectors = { git = "https://github.com/servo/stylo", rev = "refs/pull/153/head" }
 serde = "1.0.219"
 serde_bytes = "0.11"
 serde_json = "1.0"
 servo-media = { git = "https://github.com/servo/media" }
 servo-media-dummy = { git = "https://github.com/servo/media" }
 servo-media-gstreamer = { git = "https://github.com/servo/media" }
-servo_arc = { git = "https://github.com/servo/stylo", branch = "2025-03-15" }
-stylo_atoms = { git = "https://github.com/servo/stylo", branch = "2025-03-15" }
+servo_arc = { git = "https://github.com/servo/stylo", rev = "refs/pull/153/head" }
+stylo_atoms = { git = "https://github.com/servo/stylo", rev = "refs/pull/153/head" }
 smallbitvec = "2.6.0"
 smallvec = "1.14"
 static_assertions = "1.1"
 string_cache = "0.8"
 string_cache_codegen = "0.5"
 strum = "0.26"
 strum_macros = "0.26"
-stylo = { git = "https://github.com/servo/stylo", branch = "2025-03-15" }
-stylo_config = { git = "https://github.com/servo/stylo", branch = "2025-03-15" }
-stylo_dom = { git = "https://github.com/servo/stylo", branch = "2025-03-15" }
-stylo_malloc_size_of = { git = "https://github.com/servo/stylo", branch = "2025-03-15" }
-stylo_traits = { git = "https://github.com/servo/stylo", branch = "2025-03-15" }
+stylo = { git = "https://github.com/servo/stylo", rev = "refs/pull/153/head" }
+stylo_config = { git = "https://github.com/servo/stylo", rev = "refs/pull/153/head" }
+stylo_dom = { git = "https://github.com/servo/stylo", rev = "refs/pull/153/head" }
+stylo_malloc_size_of = { git = "https://github.com/servo/stylo", rev = "refs/pull/153/head" }
+stylo_traits = { git = "https://github.com/servo/stylo", rev = "refs/pull/153/head" }
 surfman = { git = "https://github.com/servo/surfman", rev = "f7688b4585f9e0b5d4bf8ee8e4a91e82349610b1", features = ["chains"] }
 syn = { version = "2", default-features = false, features = ["clone-impls", "derive", "parsing"] }
 synstructure = "0.13"

Cargo.toml

@@ -2599,11 +2599,10 @@ impl FlexItemBox {
                             BoxSizing::BorderBox => length - main_padding_border_sum,
                         }
                     };
-                    size.maybe_map(|v| {
+                    size.maybe_map_for_preferred(|v| {
                         v.maybe_to_used_value(container_definite_main_size)
                             .map(apply_box_sizing)
                     })
-                    .unwrap_or_default()
                 },
             },
         }

components/layout_2020/flexbox/layout.rs

@@ -2144,9 +2144,11 @@ impl<'container> PlacementState<'container> {
 
 fn block_size_is_zero_or_intrinsic(size: &StyleSize, containing_block: &ContainingBlock) -> bool {
     match size {
-        StyleSize::Auto | StyleSize::MinContent | StyleSize::MaxContent | StyleSize::FitContent => {
-            true
-        },
+        StyleSize::Auto |
+        StyleSize::MinContent |
+        StyleSize::MaxContent |
+        StyleSize::FitContent |
+        StyleSize::FitContentFunction(_) => true,
         StyleSize::Stretch => {
             // TODO: Should this return true when the containing block has a definite size of 0px?
             !containing_block.size.block.is_definite()

components/layout_2020/flow/mod.rs

@@ -133,6 +133,17 @@ impl<T: Clone> LogicalVec2<T> {
             block: f(&self.block),
         }
     }
+
+    pub(crate) fn map_with<U, V>(
+        &self,
+        other: &LogicalVec2<U>,
+        f: impl Fn(&T, &U) -> V,
+    ) -> LogicalVec2<V> {
+        LogicalVec2 {
+            inline: f(&self.inline, &other.inline),
+            block: f(&self.block, &other.block),
+        }
+    }
 }
 
 impl<T: Add<Output = T> + Copy> Add<LogicalVec2<T>> for LogicalVec2<T> {
@@ -697,6 +708,8 @@ pub(crate) enum Size<T> {
     MaxContent,
     /// <https://drafts.csswg.org/css-sizing-4/#valdef-width-fit-content>
     FitContent,
+    /// <https://drafts.csswg.org/css-sizing-3/#funcdef-width-fit-content>
+    FitContentFunction(T),
     /// <https://drafts.csswg.org/css-sizing-4/#valdef-width-stretch>
     Stretch,
     /// Represents a numeric `<length-percentage>`, but resolved as a `T`.
@@ -730,34 +743,50 @@ impl<T: Clone> Size<T> {
     }
 
     #[inline]
-    pub fn map<U>(&self, f: impl FnOnce(T) -> U) -> Size<U> {
+    pub(crate) fn map<U>(&self, f: impl FnOnce(T) -> U) -> Size<U> {
         match self {
             Size::Initial => Size::Initial,
             Size::MinContent => Size::MinContent,
             Size::MaxContent => Size::MaxContent,
             Size::FitContent => Size::FitContent,
+            Size::FitContentFunction(size) => Size::FitContentFunction(f(size.clone())),
             Size::Stretch => Size::Stretch,
             Size::Numeric(numeric) => Size::Numeric(f(numeric.clone())),
         }
     }
 
     #[inline]
-    pub fn maybe_map<U>(&self, f: impl FnOnce(T) -> Option<U>) -> Option<Size<U>> {
-        Some(match self {
-            Size::Numeric(numeric) => Size::Numeric(f(numeric.clone())?),
+    pub(crate) fn maybe_map_for_preferred<U>(&self, f: impl FnOnce(T) -> Option<U>) -> Size<U> {
+        match self {
+            Size::Numeric(numeric) => f(numeric.clone()).map_or(Size::Initial, Size::Numeric),
+            Size::FitContentFunction(numeric) => {
+                f(numeric.clone()).map_or(Size::FitContent, Size::FitContentFunction)
+            },
             _ => self.map(|_| unreachable!("This shouldn't be called for keywords")),
-        })
+        }
+    }
+
+    #[inline]
+    pub(crate) fn maybe_map_for_max<U>(&self, f: impl FnOnce(T) -> Option<U>) -> Size<U> {
+        match self {
+            Size::Numeric(numeric) => f(numeric.clone()).map_or(Size::Initial, Size::Numeric),
+            Size::FitContentFunction(numeric) => {
+                f(numeric.clone()).map_or(Size::MaxContent, Size::FitContentFunction)
+            },
+            _ => self.map(|_| unreachable!("This shouldn't be called for keywords")),
+        }
     }
 }
 
 impl From<StyleSize> for Size<LengthPercentage> {
     fn from(size: StyleSize) -> Self {
         match size {
-            StyleSize::LengthPercentage(length) => Size::Numeric(length.0),
+            StyleSize::LengthPercentage(lp) => Size::Numeric(lp.0),
             StyleSize::Auto => Size::Initial,
             StyleSize::MinContent => Size::MinContent,
             StyleSize::MaxContent => Size::MaxContent,
             StyleSize::FitContent => Size::FitContent,
+            StyleSize::FitContentFunction(lp) => Size::FitContentFunction(lp.0),
             StyleSize::Stretch => Size::Stretch,
             StyleSize::AnchorSizeFunction(_) => unreachable!("anchor-size() should be disabled"),
         }
@@ -767,11 +796,12 @@ impl From<StyleSize> for Size<LengthPercentage> {
 impl From<StyleMaxSize> for Size<LengthPercentage> {
     fn from(max_size: StyleMaxSize) -> Self {
         match max_size {
-            StyleMaxSize::LengthPercentage(length) => Size::Numeric(length.0),
+            StyleMaxSize::LengthPercentage(lp) => Size::Numeric(lp.0),
             StyleMaxSize::None => Size::Initial,
             StyleMaxSize::MinContent => Size::MinContent,
             StyleMaxSize::MaxContent => Size::MaxContent,
             StyleMaxSize::FitContent => Size::FitContent,
+            StyleMaxSize::FitContentFunction(lp) => Size::FitContentFunction(lp.0),
             StyleMaxSize::Stretch => Size::Stretch,
             StyleMaxSize::AnchorSizeFunction(_) => unreachable!("anchor-size() should be disabled"),
         }
@@ -787,22 +817,6 @@ impl Size<LengthPercentage> {
 }
 
 impl LogicalVec2<Size<LengthPercentage>> {
-    pub(crate) fn maybe_percentages_relative_to_basis(
-        &self,
-        basis: &LogicalVec2<Option<Au>>,
-    ) -> LogicalVec2<Size<Au>> {
-        LogicalVec2 {
-            inline: self
-                .inline
-                .maybe_map(|v| v.maybe_to_used_value(basis.inline))
-                .unwrap_or_default(),
-            block: self
-                .block
-                .maybe_map(|v| v.maybe_to_used_value(basis.block))
-                .unwrap_or_default(),
-        }
-    }
-
     pub(crate) fn percentages_relative_to_basis(
         &self,
         basis: &LogicalVec2<Au>,
@@ -831,6 +845,7 @@ impl Size<Au> {
             },
             Self::MinContent => content_size.min_content,
             Self::MaxContent => content_size.max_content,
+            Self::FitContentFunction(size) => content_size.shrink_to_fit(*size),
             Self::FitContent => {
                 content_size.shrink_to_fit(stretch_size.unwrap_or_else(|| content_size.max_content))
             },
@@ -852,6 +867,7 @@ impl Size<Au> {
             Self::Initial => get_automatic_minimum_size(),
             Self::MinContent => content_size.min_content,
             Self::MaxContent => content_size.max_content,
+            Self::FitContentFunction(size) => content_size.shrink_to_fit(*size),
             Self::FitContent => content_size.shrink_to_fit(stretch_size.unwrap_or_default()),
             Self::Stretch => stretch_size.unwrap_or_default(),
             Self::Numeric(numeric) => *numeric,
@@ -870,6 +886,7 @@ impl Size<Au> {
             Self::Initial => return None,
             Self::MinContent => content_size.min_content,
             Self::MaxContent => content_size.max_content,
+            Self::FitContentFunction(size) => content_size.shrink_to_fit(*size),
             Self::FitContent => content_size.shrink_to_fit(stretch_size.unwrap_or(MAX_AU)),
             Self::Stretch => return stretch_size,
             Self::Numeric(numeric) => *numeric,
@@ -888,7 +905,11 @@ impl Size<Au> {
     #[inline]
     pub(crate) fn maybe_resolve_extrinsic(&self, stretch_size: Option<Au>) -> Option<Au> {
         match self {
-            Self::Initial | Self::MinContent | Self::MaxContent | Self::FitContent => None,
+            Self::Initial |
+            Self::MinContent |
+            Self::MaxContent |
+            Self::FitContent |
+            Self::FitContentFunction(_) => None,
             Self::Stretch => stretch_size,
             Self::Numeric(numeric) => Some(*numeric),
         }

components/layout_2020/geom.rs

@@ -191,6 +191,10 @@ pub(crate) fn outer_inline(
                 content_size.sizes.max_content,
                 content_size.depends_on_block_constraints,
             ),
+            Size::FitContentFunction(size) => {
+                let size = content_size.sizes.shrink_to_fit(size);
+                (size, size, content_size.depends_on_block_constraints)
+            },
             Size::Stretch => return stretch_values,
         })
     };

components/layout_2020/sizing.rs

@@ -992,18 +992,16 @@ impl LayoutStyle<'_> {
             depends_on_block_constraints(&max_size.block) ||
             style.depends_on_block_constraints_due_to_relative_positioning(writing_mode);
 
-        let box_size = box_size.maybe_percentages_relative_to_basis(&containing_block.size);
-        let content_box_size = style
-            .content_box_size_for_box_size(box_size, &pbm)
-            .map(|v| v.map(Au::from));
+        let box_size = box_size.map_with(&containing_block.size, |size, basis| {
+            size.maybe_map_for_preferred(|v| v.maybe_to_used_value(*basis))
+        });
+        let content_box_size = style.content_box_size_for_box_size(box_size, &pbm);
         let min_size = min_size.percentages_relative_to_basis(&containing_block_size_or_zero);
-        let content_min_box_size = style
-            .content_min_box_size_for_min_size(min_size, &pbm)
-            .map(|v| v.map(Au::from));
-        let max_size = max_size.maybe_percentages_relative_to_basis(&containing_block.size);
-        let content_max_box_size = style
-            .content_max_box_size_for_max_size(max_size, &pbm)
-            .map(|v| v.map(Au::from));
+        let content_min_box_size = style.content_min_box_size_for_min_size(min_size, &pbm);
+        let max_size = max_size.map_with(&containing_block.size, |size, basis| {
+            size.maybe_map_for_max(|v| v.maybe_to_used_value(*basis))
+        });
+        let content_max_box_size = style.content_max_box_size_for_max_size(max_size, &pbm);
         ContentBoxSizesAndPBM {
             content_box_sizes: LogicalVec2 {
                 block: Sizes::new(

components/layout_2020/style_ext.rs

@@ -54,6 +54,7 @@ pub fn dimension(val: &stylo::Size) -> taffy::Dimension {
         stylo::Size::MaxContent => taffy::Dimension::Auto,
         stylo::Size::MinContent => taffy::Dimension::Auto,
         stylo::Size::FitContent => taffy::Dimension::Auto,
+        stylo::Size::FitContentFunction(_) => taffy::Dimension::Auto,
         stylo::Size::Stretch => taffy::Dimension::Auto,
 
         // Anchor positioning will be flagged off for time being
@@ -71,6 +72,7 @@ pub fn max_size_dimension(val: &stylo::MaxSize) -> taffy::Dimension {
         stylo::MaxSize::MaxContent => taffy::Dimension::Auto,
         stylo::MaxSize::MinContent => taffy::Dimension::Auto,
         stylo::MaxSize::FitContent => taffy::Dimension::Auto,
+        stylo::MaxSize::FitContentFunction(_) => taffy::Dimension::Auto,
         stylo::MaxSize::Stretch => taffy::Dimension::Auto,
 
         // Anchor positioning will be flagged off for time being