mirror of
https://github.com/servo/servo.git
synced 2025-09-30 08:39:16 +01:00
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>
This commit is contained in:
parent
a9664c4199
commit
fd20a5df42
44 changed files with 260 additions and 553 deletions
|
@ -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),
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue