layout(grid): implement named grid lines and areas (#38306)

### Changes made

This implements named grid lines (line names in `grid-template-*`),
named grid areas (`grid-template-areas`), and the ability to target
those using `grid-{row,column}-{start,end}`. It also includes a bunch of
miscelaneous fixes for `repeat(auto-fill | auto-fit, ...)` syntax as
that interacts with the specification of line names.

The actual layout implementation is in Taffy. The bulk of this PR is
updating Servo to translate (CSS Grid-related) Stylo types into Taffy
types using a new iterator-based API which uses iterators and lazy
translation for efficiency (which is more important now that we're
dealing with string data, even though they're `Atom`s).

### Testing

This functionality has lots of WPT tests. It fixes some seemingly random
CSS Grid tests that use named lines/areas even though that's not what
they're testing.

### Screenshots

wikipedia.org

<img width="1624" height="1056" alt="Screenshot 2025-07-27 at 20 03 16"
src="https://github.com/user-attachments/assets/2c50b96f-ae36-4405-ac48-b771bfdcb515"
/>

bbc.co.uk:

<img width="1624" height="1056" alt="Screenshot 2025-07-27 at 20 32 57"
src="https://github.com/user-attachments/assets/ba84e211-65d2-4411-95fb-7b9b91bea31c"
/>

theguardian.com:

<img width="1624" height="1056" alt="Screenshot 2025-07-27 at 20 33 29"
src="https://github.com/user-attachments/assets/e85daaa6-5fb0-45d4-b9ec-b22b38b087ec"
/>

---------

Signed-off-by: Nico Burns <nico@nicoburns.com>

components/layout/taffy/layout.rs

@@ -4,10 +4,10 @@
 
 use app_units::Au;
 use atomic_refcell::{AtomicRef, AtomicRefCell};
-use style::Zero;
 use style::properties::ComputedValues;
 use style::values::specified::align::AlignFlags;
 use style::values::specified::box_::DisplayInside;
+use style::{Atom, Zero};
 use taffy::style_helpers::{TaffyMaxContent, TaffyMinContent};
 use taffy::{AvailableSpace, MaybeMath, RequestedAxis, RunMode};
 
@@ -98,6 +98,8 @@ impl taffy::TraversePartialTree for TaffyContainerContext<'_> {
 }
 
 impl taffy::LayoutPartialTree for TaffyContainerContext<'_> {
+    type CustomIdent = Atom;
+
     type CoreContainerStyle<'a>
         = TaffyStyloStyle<&'a ComputedValues>
     where

components/layout/taffy/stylo_taffy/convert.rs

@@ -2,40 +2,13 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-/// Private module of type aliases so we can refer to stylo types with nicer names
-mod stylo {
-    pub(crate) use style::properties::generated::longhands::box_sizing::computed_value::T as BoxSizing;
-    pub(crate) use style::properties::longhands::aspect_ratio::computed_value::T as AspectRatio;
-    pub(crate) use style::properties::longhands::position::computed_value::T as Position;
-    pub(crate) use style::values::computed::length_percentage::Unpacked as UnpackedLengthPercentage;
-    pub(crate) use style::values::computed::{LengthPercentage, Percentage};
-    pub(crate) use style::values::generics::NonNegative;
-    pub(crate) use style::values::generics::length::{
-        GenericLengthPercentageOrNormal, GenericMargin, GenericMaxSize, GenericSize,
-    };
-    pub(crate) use style::values::generics::position::{Inset as GenericInset, PreferredRatio};
-    pub(crate) use style::values::specified::align::{AlignFlags, ContentDistribution};
-    pub(crate) use style::values::specified::box_::{
-        Display, DisplayInside, DisplayOutside, Overflow,
-    };
-    pub(crate) type MarginVal = GenericMargin<LengthPercentage>;
-    pub(crate) type InsetVal = GenericInset<Percentage, LengthPercentage>;
-    pub(crate) type Size = GenericSize<NonNegative<LengthPercentage>>;
-    pub(crate) type MaxSize = GenericMaxSize<NonNegative<LengthPercentage>>;
-
-    pub(crate) type Gap = GenericLengthPercentageOrNormal<NonNegative<LengthPercentage>>;
-
-    pub(crate) use style::computed_values::grid_auto_flow::T as GridAutoFlow;
-    pub(crate) use style::values::computed::{GridLine, GridTemplateComponent, ImplicitGridTracks};
-    pub(crate) use style::values::generics::grid::{
-        RepeatCount, TrackBreadth, TrackListValue, TrackSize,
-    };
-    pub(crate) use style::values::specified::GenericGridTemplateComponent;
-}
-
+use style::Atom;
+use stylo_atoms::atom;
 use taffy::MaxTrackSizingFunction;
 use taffy::style_helpers::*;
 
+use super::stylo;
+
 #[inline]
 pub fn length_percentage(val: &stylo::LengthPercentage) -> taffy::LengthPercentage {
     match val.unpack() {
@@ -238,66 +211,38 @@ pub fn grid_auto_flow(input: stylo::GridAutoFlow) -> taffy::GridAutoFlow {
 }
 
 #[inline]
-pub fn grid_line(input: &stylo::GridLine) -> taffy::GridPlacement {
+pub fn grid_line(input: &stylo::GridLine) -> taffy::GridPlacement<Atom> {
     if input.is_auto() {
         taffy::GridPlacement::Auto
     } else if input.is_span {
-        taffy::style_helpers::span(input.line_num.try_into().unwrap())
-    } else if input.line_num == 0 {
-        taffy::GridPlacement::Auto
+        if input.ident.0 != atom!("") {
+            taffy::GridPlacement::NamedSpan(
+                input.ident.0.clone(),
+                input.line_num.try_into().unwrap(),
+            )
+        } else {
+            taffy::GridPlacement::Span(input.line_num as u16)
+        }
+    } else if input.ident.0 != atom!("") {
+        taffy::GridPlacement::NamedLine(input.ident.0.clone(), input.line_num as i16)
+    } else if input.line_num != 0 {
+        taffy::style_helpers::line(input.line_num as i16)
     } else {
-        taffy::style_helpers::line(input.line_num.try_into().unwrap())
+        taffy::GridPlacement::Auto
     }
 }
 
 #[inline]
-pub fn grid_template_tracks(
-    input: &stylo::GridTemplateComponent,
-) -> Vec<taffy::TrackSizingFunction> {
+pub fn track_repeat(input: stylo::RepeatCount<i32>) -> taffy::RepetitionCount {
     match input {
-        stylo::GenericGridTemplateComponent::None => Vec::new(),
-        stylo::GenericGridTemplateComponent::TrackList(list) => list
-            .values
-            .iter()
-            .map(|track| match track {
-                stylo::TrackListValue::TrackSize(size) => {
-                    taffy::TrackSizingFunction::Single(track_size(size))
-                },
-                stylo::TrackListValue::TrackRepeat(repeat) => taffy::TrackSizingFunction::Repeat(
-                    track_repeat(repeat.count),
-                    repeat.track_sizes.iter().map(track_size).collect(),
-                ),
-            })
-            .collect(),
-
-        // TODO: Implement subgrid and masonry
-        stylo::GenericGridTemplateComponent::Subgrid(_) => Vec::new(),
-        stylo::GenericGridTemplateComponent::Masonry => Vec::new(),
+        stylo::RepeatCount::Number(val) => taffy::RepetitionCount::Count(val.try_into().unwrap()),
+        stylo::RepeatCount::AutoFill => taffy::RepetitionCount::AutoFill,
+        stylo::RepeatCount::AutoFit => taffy::RepetitionCount::AutoFit,
     }
 }
 
 #[inline]
-pub fn grid_auto_tracks(
-    input: &stylo::ImplicitGridTracks,
-) -> Vec<taffy::NonRepeatedTrackSizingFunction> {
-    input.0.iter().map(track_size).collect()
-}
-
-#[inline]
-pub fn track_repeat(input: stylo::RepeatCount<i32>) -> taffy::GridTrackRepetition {
-    match input {
-        stylo::RepeatCount::Number(val) => {
-            taffy::GridTrackRepetition::Count(val.try_into().unwrap())
-        },
-        stylo::RepeatCount::AutoFill => taffy::GridTrackRepetition::AutoFill,
-        stylo::RepeatCount::AutoFit => taffy::GridTrackRepetition::AutoFit,
-    }
-}
-
-#[inline]
-pub fn track_size(
-    input: &stylo::TrackSize<stylo::LengthPercentage>,
-) -> taffy::NonRepeatedTrackSizingFunction {
+pub fn track_size(input: &stylo::TrackSize<stylo::LengthPercentage>) -> taffy::TrackSizingFunction {
     match input {
         stylo::TrackSize::Breadth(breadth) => taffy::MinMax {
             min: min_track(breadth),

components/layout/taffy/stylo_taffy/mod.rs

@@ -6,4 +6,36 @@
 
 mod convert;
 mod wrapper;
+
 pub(crate) use wrapper::TaffyStyloStyle;
+
+/// Private module of type aliases so we can refer to stylo types with nicer names
+mod stylo {
+    pub(crate) use style::properties::generated::longhands::box_sizing::computed_value::T as BoxSizing;
+    pub(crate) use style::properties::longhands::aspect_ratio::computed_value::T as AspectRatio;
+    pub(crate) use style::properties::longhands::position::computed_value::T as Position;
+    pub(crate) use style::values::computed::length_percentage::Unpacked as UnpackedLengthPercentage;
+    pub(crate) use style::values::computed::{LengthPercentage, Percentage};
+    pub(crate) use style::values::generics::NonNegative;
+    pub(crate) use style::values::generics::length::{
+        GenericLengthPercentageOrNormal, GenericMargin, GenericMaxSize, GenericSize,
+    };
+    pub(crate) use style::values::generics::position::{Inset as GenericInset, PreferredRatio};
+    pub(crate) use style::values::specified::align::{AlignFlags, ContentDistribution};
+    pub(crate) use style::values::specified::box_::{
+        Display, DisplayInside, DisplayOutside, Overflow,
+    };
+    pub(crate) type MarginVal = GenericMargin<LengthPercentage>;
+    pub(crate) type InsetVal = GenericInset<Percentage, LengthPercentage>;
+    pub(crate) type Size = GenericSize<NonNegative<LengthPercentage>>;
+    pub(crate) type MaxSize = GenericMaxSize<NonNegative<LengthPercentage>>;
+
+    pub(crate) type Gap = GenericLengthPercentageOrNormal<NonNegative<LengthPercentage>>;
+
+    pub(crate) use style::computed_values::grid_auto_flow::T as GridAutoFlow;
+    pub(crate) use style::values::computed::GridLine;
+    pub(crate) use style::values::generics::grid::{
+        RepeatCount, TrackBreadth, TrackListValue, TrackSize,
+    };
+    pub(crate) use style::values::specified::GenericGridTemplateComponent;
+}

components/layout/taffy/stylo_taffy/wrapper.rs

@@ -5,8 +5,13 @@
 use std::ops::Deref;
 
 use style::properties::ComputedValues;
+use style::values::CustomIdent;
+use style::values::computed::{GridTemplateAreas, LengthPercentage};
+use style::values::generics::grid::{TrackListValue, TrackRepeat, TrackSize};
+use style::values::specified::position::NamedArea;
+use style::{Atom, OwnedSlice};
 
-use super::convert;
+use super::{convert, stylo};
 
 /// A wrapper struct for anything that Deref's to a [`ComputedValues`], which
 /// implements Taffy's layout traits and can used with Taffy's layout algorithms.
@@ -25,6 +30,8 @@ impl<T: Deref<Target = ComputedValues>> TaffyStyloStyle<T> {
 }
 
 impl<T: Deref<Target = ComputedValues>> taffy::CoreStyle for TaffyStyloStyle<T> {
+    type CustomIdent = Atom;
+
     #[inline]
     fn box_generation_mode(&self) -> taffy::BoxGenerationMode {
         convert::box_generation_mode(self.style.get_box().display)
@@ -141,34 +148,199 @@ impl<T: Deref<Target = ComputedValues>> taffy::CoreStyle for TaffyStyloStyle<T>
     }
 }
 
-impl<T: Deref<Target = ComputedValues>> taffy::GridContainerStyle for TaffyStyloStyle<T> {
-    type TemplateTrackList<'a>
-        = Vec<taffy::TrackSizingFunction>
+type SliceMapIter<'a, Input, Output> =
+    core::iter::Map<core::slice::Iter<'a, Input>, for<'c> fn(&'c Input) -> Output>;
+type SliceMapRefIter<'a, Input, Output> =
+    core::iter::Map<core::slice::Iter<'a, Input>, for<'c> fn(&'c Input) -> &'c Output>;
+
+// Line name iterator type aliases
+type LineNameSetIter<'a> = SliceMapRefIter<'a, CustomIdent, Atom>;
+type LineNameIter<'a> = core::iter::Map<
+    core::slice::Iter<'a, OwnedSlice<CustomIdent>>,
+    fn(&OwnedSlice<CustomIdent>) -> LineNameSetIter<'_>,
+>;
+
+#[derive(Clone)]
+pub struct StyloLineNameIter<'a>(LineNameIter<'a>);
+impl<'a> StyloLineNameIter<'a> {
+    fn new(names: &'a OwnedSlice<OwnedSlice<CustomIdent>>) -> Self {
+        Self(names.iter().map(|names| names.iter().map(|ident| &ident.0)))
+    }
+}
+impl<'a> Iterator for StyloLineNameIter<'a> {
+    type Item = core::iter::Map<core::slice::Iter<'a, CustomIdent>, fn(&CustomIdent) -> &Atom>;
+    fn next(&mut self) -> Option<Self::Item> {
+        self.0.next()
+    }
+    fn size_hint(&self) -> (usize, Option<usize>) {
+        self.0.size_hint()
+    }
+}
+impl ExactSizeIterator for StyloLineNameIter<'_> {}
+impl<'a> taffy::TemplateLineNames<'a, Atom> for StyloLineNameIter<'a> {
+    type LineNameSet<'b>
+        = SliceMapRefIter<'b, CustomIdent, Atom>
+    where
+        Self: 'b;
+}
+
+pub struct RepetitionWrapper<'a>(&'a TrackRepeat<LengthPercentage, i32>);
+
+impl taffy::GenericRepetition for RepetitionWrapper<'_> {
+    type CustomIdent = Atom;
+
+    type RepetitionTrackList<'a>
+        = SliceMapIter<'a, stylo::TrackSize<LengthPercentage>, taffy::TrackSizingFunction>
     where
         Self: 'a;
+
+    type TemplateLineNames<'a>
+        = StyloLineNameIter<'a>
+    where
+        Self: 'a;
+
+    fn count(&self) -> taffy::RepetitionCount {
+        convert::track_repeat(self.0.count)
+    }
+
+    fn tracks(&self) -> Self::RepetitionTrackList<'_> {
+        self.0.track_sizes.iter().map(convert::track_size)
+    }
+
+    fn lines_names(&self) -> Self::TemplateLineNames<'_> {
+        StyloLineNameIter::new(&self.0.line_names)
+    }
+}
+
+impl<T: Deref<Target = ComputedValues>> taffy::GridContainerStyle for TaffyStyloStyle<T> {
+    type Repetition<'a>
+        = RepetitionWrapper<'a>
+    where
+        Self: 'a;
+
+    type TemplateTrackList<'a>
+        = core::iter::Map<
+        core::slice::Iter<'a, TrackListValue<LengthPercentage, i32>>,
+        fn(
+            &'a TrackListValue<LengthPercentage, i32>,
+        ) -> taffy::GenericGridTemplateComponent<Atom, RepetitionWrapper<'a>>,
+    >
+    where
+        Self: 'a;
+
     type AutoTrackList<'a>
-        = Vec<taffy::NonRepeatedTrackSizingFunction>
+        = SliceMapIter<'a, TrackSize<LengthPercentage>, taffy::TrackSizingFunction>
+    where
+        Self: 'a;
+
+    type TemplateLineNames<'a>
+        = StyloLineNameIter<'a>
+    where
+        Self: 'a;
+    type GridTemplateAreas<'a>
+        = SliceMapIter<'a, NamedArea, taffy::GridTemplateArea<Atom>>
     where
         Self: 'a;
 
     #[inline]
-    fn grid_template_rows(&self) -> Self::TemplateTrackList<'_> {
-        convert::grid_template_tracks(&self.style.get_position().grid_template_rows)
+    fn grid_template_rows(&self) -> Option<Self::TemplateTrackList<'_>> {
+        match &self.style.get_position().grid_template_rows {
+            stylo::GenericGridTemplateComponent::None => None,
+            stylo::GenericGridTemplateComponent::TrackList(list) => {
+                Some(list.values.iter().map(|track| match track {
+                    stylo::TrackListValue::TrackSize(size) => {
+                        taffy::GenericGridTemplateComponent::Single(convert::track_size(size))
+                    },
+                    stylo::TrackListValue::TrackRepeat(repeat) => {
+                        taffy::GenericGridTemplateComponent::Repeat(RepetitionWrapper(repeat))
+                    },
+                }))
+            },
+
+            // TODO: Implement subgrid and masonry
+            stylo::GenericGridTemplateComponent::Subgrid(_) => None,
+            stylo::GenericGridTemplateComponent::Masonry => None,
+        }
     }
 
     #[inline]
-    fn grid_template_columns(&self) -> Self::TemplateTrackList<'_> {
-        convert::grid_template_tracks(&self.style.get_position().grid_template_columns)
+    fn grid_template_columns(&self) -> Option<Self::TemplateTrackList<'_>> {
+        match &self.style.get_position().grid_template_columns {
+            stylo::GenericGridTemplateComponent::None => None,
+            stylo::GenericGridTemplateComponent::TrackList(list) => {
+                Some(list.values.iter().map(|track| match track {
+                    stylo::TrackListValue::TrackSize(size) => {
+                        taffy::GenericGridTemplateComponent::Single(convert::track_size(size))
+                    },
+                    stylo::TrackListValue::TrackRepeat(repeat) => {
+                        taffy::GenericGridTemplateComponent::Repeat(RepetitionWrapper(repeat))
+                    },
+                }))
+            },
+
+            // TODO: Implement subgrid and masonry
+            stylo::GenericGridTemplateComponent::Subgrid(_) => None,
+            stylo::GenericGridTemplateComponent::Masonry => None,
+        }
     }
 
     #[inline]
     fn grid_auto_rows(&self) -> Self::AutoTrackList<'_> {
-        convert::grid_auto_tracks(&self.style.get_position().grid_auto_rows)
+        self.style
+            .get_position()
+            .grid_auto_rows
+            .0
+            .iter()
+            .map(convert::track_size)
     }
 
     #[inline]
     fn grid_auto_columns(&self) -> Self::AutoTrackList<'_> {
-        convert::grid_auto_tracks(&self.style.get_position().grid_auto_columns)
+        self.style
+            .get_position()
+            .grid_auto_columns
+            .0
+            .iter()
+            .map(convert::track_size)
+    }
+
+    fn grid_template_areas(&self) -> Option<Self::GridTemplateAreas<'_>> {
+        match &self.style.get_position().grid_template_areas {
+            GridTemplateAreas::Areas(areas) => {
+                Some(areas.0.areas.iter().map(|area| taffy::GridTemplateArea {
+                    name: area.name.clone(),
+                    row_start: area.rows.start as u16,
+                    row_end: area.rows.end as u16,
+                    column_start: area.columns.start as u16,
+                    column_end: area.columns.end as u16,
+                }))
+            },
+            GridTemplateAreas::None => None,
+        }
+    }
+
+    fn grid_template_column_names(&self) -> Option<Self::TemplateLineNames<'_>> {
+        match &self.style.get_position().grid_template_columns {
+            stylo::GenericGridTemplateComponent::None => None,
+            stylo::GenericGridTemplateComponent::TrackList(list) => {
+                Some(StyloLineNameIter::new(&list.line_names))
+            },
+            // TODO: Implement subgrid and masonry
+            stylo::GenericGridTemplateComponent::Subgrid(_) => None,
+            stylo::GenericGridTemplateComponent::Masonry => None,
+        }
+    }
+
+    fn grid_template_row_names(&self) -> Option<Self::TemplateLineNames<'_>> {
+        match &self.style.get_position().grid_template_rows {
+            stylo::GenericGridTemplateComponent::None => None,
+            stylo::GenericGridTemplateComponent::TrackList(list) => {
+                Some(StyloLineNameIter::new(&list.line_names))
+            },
+            // TODO: Implement subgrid and masonry
+            stylo::GenericGridTemplateComponent::Subgrid(_) => None,
+            stylo::GenericGridTemplateComponent::Masonry => None,
+        }
     }
 
     #[inline]
@@ -208,7 +380,7 @@ impl<T: Deref<Target = ComputedValues>> taffy::GridContainerStyle for TaffyStylo
 
 impl<T: Deref<Target = ComputedValues>> taffy::GridItemStyle for TaffyStyloStyle<T> {
     #[inline]
-    fn grid_row(&self) -> taffy::Line<taffy::GridPlacement> {
+    fn grid_row(&self) -> taffy::Line<taffy::GridPlacement<Atom>> {
         let position_styles = self.style.get_position();
         taffy::Line {
             start: convert::grid_line(&position_styles.grid_row_start),
@@ -217,7 +389,7 @@ impl<T: Deref<Target = ComputedValues>> taffy::GridItemStyle for TaffyStyloStyle
     }
 
     #[inline]
-    fn grid_column(&self) -> taffy::Line<taffy::GridPlacement> {
+    fn grid_column(&self) -> taffy::Line<taffy::GridPlacement<Atom>> {
         let position_styles = self.style.get_position();
         taffy::Line {
             start: convert::grid_line(&position_styles.grid_column_start),