mirror of
https://github.com/servo/servo.git
synced 2025-09-29 16:19:14 +01:00
fd20a5df42
### 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>
296 lines
11 KiB
Rust
296 lines
11 KiB
Rust
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* 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/. */
|
|
|
|
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() {
|
|
stylo::UnpackedLengthPercentage::Length(len) => length(len.px()),
|
|
stylo::UnpackedLengthPercentage::Percentage(percentage) => percent(percentage.0),
|
|
// TODO: Support calc
|
|
stylo::UnpackedLengthPercentage::Calc(_) => percent(0.0),
|
|
}
|
|
}
|
|
|
|
#[inline]
|
|
pub fn dimension(val: &stylo::Size) -> taffy::Dimension {
|
|
match val {
|
|
stylo::Size::LengthPercentage(val) => length_percentage(&val.0).into(),
|
|
stylo::Size::Auto => taffy::Dimension::AUTO,
|
|
|
|
// TODO: implement other values in Taffy
|
|
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
|
|
stylo::Size::AnchorSizeFunction(_) => unreachable!(),
|
|
stylo::Size::AnchorContainingCalcFunction(_) => unreachable!(),
|
|
}
|
|
}
|
|
|
|
#[inline]
|
|
pub fn max_size_dimension(val: &stylo::MaxSize) -> taffy::Dimension {
|
|
match val {
|
|
stylo::MaxSize::LengthPercentage(val) => length_percentage(&val.0).into(),
|
|
stylo::MaxSize::None => taffy::Dimension::AUTO,
|
|
|
|
// TODO: implement other values in Taffy
|
|
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
|
|
stylo::MaxSize::AnchorSizeFunction(_) => unreachable!(),
|
|
stylo::MaxSize::AnchorContainingCalcFunction(_) => unreachable!(),
|
|
}
|
|
}
|
|
|
|
#[inline]
|
|
pub fn margin(val: &stylo::MarginVal) -> taffy::LengthPercentageAuto {
|
|
match val {
|
|
stylo::MarginVal::Auto => taffy::LengthPercentageAuto::AUTO,
|
|
stylo::MarginVal::LengthPercentage(val) => length_percentage(val).into(),
|
|
|
|
// Anchor positioning will be flagged off for time being
|
|
stylo::MarginVal::AnchorSizeFunction(_) => unreachable!(),
|
|
stylo::MarginVal::AnchorContainingCalcFunction(_) => unreachable!(),
|
|
}
|
|
}
|
|
|
|
#[inline]
|
|
pub fn inset(val: &stylo::InsetVal) -> taffy::LengthPercentageAuto {
|
|
match val {
|
|
stylo::InsetVal::Auto => taffy::LengthPercentageAuto::AUTO,
|
|
stylo::InsetVal::LengthPercentage(val) => length_percentage(val).into(),
|
|
|
|
// Anchor positioning will be flagged off for time being
|
|
stylo::InsetVal::AnchorSizeFunction(_) => unreachable!(),
|
|
stylo::InsetVal::AnchorFunction(_) => unreachable!(),
|
|
stylo::InsetVal::AnchorContainingCalcFunction(_) => unreachable!(),
|
|
}
|
|
}
|
|
|
|
#[inline]
|
|
pub fn is_block(input: stylo::Display) -> bool {
|
|
matches!(input.outside(), stylo::DisplayOutside::Block) &&
|
|
matches!(
|
|
input.inside(),
|
|
stylo::DisplayInside::Flow | stylo::DisplayInside::FlowRoot
|
|
)
|
|
}
|
|
|
|
#[inline]
|
|
pub fn box_generation_mode(input: stylo::Display) -> taffy::BoxGenerationMode {
|
|
match input.inside() {
|
|
stylo::DisplayInside::None => taffy::BoxGenerationMode::None,
|
|
_ => taffy::BoxGenerationMode::Normal,
|
|
}
|
|
}
|
|
|
|
#[inline]
|
|
pub fn box_sizing(input: stylo::BoxSizing) -> taffy::BoxSizing {
|
|
match input {
|
|
stylo::BoxSizing::BorderBox => taffy::BoxSizing::BorderBox,
|
|
stylo::BoxSizing::ContentBox => taffy::BoxSizing::ContentBox,
|
|
}
|
|
}
|
|
|
|
#[inline]
|
|
pub fn position(input: stylo::Position) -> taffy::Position {
|
|
match input {
|
|
// TODO: support position:static
|
|
stylo::Position::Relative => taffy::Position::Relative,
|
|
stylo::Position::Static => taffy::Position::Relative,
|
|
|
|
// TODO: support position:fixed and sticky
|
|
stylo::Position::Absolute => taffy::Position::Absolute,
|
|
stylo::Position::Fixed => taffy::Position::Absolute,
|
|
stylo::Position::Sticky => taffy::Position::Relative,
|
|
}
|
|
}
|
|
|
|
#[inline]
|
|
pub fn overflow(input: stylo::Overflow) -> taffy::Overflow {
|
|
// TODO: Enable Overflow::Clip in servo configuration of stylo
|
|
match input {
|
|
stylo::Overflow::Visible => taffy::Overflow::Visible,
|
|
stylo::Overflow::Hidden => taffy::Overflow::Hidden,
|
|
stylo::Overflow::Scroll => taffy::Overflow::Scroll,
|
|
stylo::Overflow::Clip => taffy::Overflow::Clip,
|
|
// TODO: Support Overflow::Auto in Taffy
|
|
stylo::Overflow::Auto => taffy::Overflow::Scroll,
|
|
}
|
|
}
|
|
|
|
#[inline]
|
|
pub fn aspect_ratio(input: stylo::AspectRatio) -> Option<f32> {
|
|
match input.ratio {
|
|
stylo::PreferredRatio::None => None,
|
|
stylo::PreferredRatio::Ratio(val) => Some(val.0.0 / val.1.0),
|
|
}
|
|
}
|
|
|
|
#[inline]
|
|
pub fn content_alignment(input: stylo::ContentDistribution) -> Option<taffy::AlignContent> {
|
|
match input.primary().value() {
|
|
stylo::AlignFlags::NORMAL => None,
|
|
stylo::AlignFlags::AUTO => None,
|
|
stylo::AlignFlags::START => Some(taffy::AlignContent::Start),
|
|
stylo::AlignFlags::END => Some(taffy::AlignContent::End),
|
|
stylo::AlignFlags::LEFT => Some(taffy::AlignContent::Start),
|
|
stylo::AlignFlags::RIGHT => Some(taffy::AlignContent::End),
|
|
stylo::AlignFlags::FLEX_START => Some(taffy::AlignContent::FlexStart),
|
|
stylo::AlignFlags::STRETCH => Some(taffy::AlignContent::Stretch),
|
|
stylo::AlignFlags::FLEX_END => Some(taffy::AlignContent::FlexEnd),
|
|
stylo::AlignFlags::CENTER => Some(taffy::AlignContent::Center),
|
|
stylo::AlignFlags::SPACE_BETWEEN => Some(taffy::AlignContent::SpaceBetween),
|
|
stylo::AlignFlags::SPACE_AROUND => Some(taffy::AlignContent::SpaceAround),
|
|
stylo::AlignFlags::SPACE_EVENLY => Some(taffy::AlignContent::SpaceEvenly),
|
|
// Should never be hit. But no real reason to panic here.
|
|
_ => None,
|
|
}
|
|
}
|
|
|
|
#[inline]
|
|
pub fn item_alignment(input: stylo::AlignFlags) -> Option<taffy::AlignItems> {
|
|
match input.value() {
|
|
stylo::AlignFlags::AUTO => None,
|
|
stylo::AlignFlags::NORMAL => Some(taffy::AlignItems::Stretch),
|
|
stylo::AlignFlags::STRETCH => Some(taffy::AlignItems::Stretch),
|
|
stylo::AlignFlags::FLEX_START => Some(taffy::AlignItems::FlexStart),
|
|
stylo::AlignFlags::FLEX_END => Some(taffy::AlignItems::FlexEnd),
|
|
stylo::AlignFlags::SELF_START => Some(taffy::AlignItems::Start),
|
|
stylo::AlignFlags::SELF_END => Some(taffy::AlignItems::End),
|
|
stylo::AlignFlags::START => Some(taffy::AlignItems::Start),
|
|
stylo::AlignFlags::END => Some(taffy::AlignItems::End),
|
|
stylo::AlignFlags::LEFT => Some(taffy::AlignItems::Start),
|
|
stylo::AlignFlags::RIGHT => Some(taffy::AlignItems::End),
|
|
stylo::AlignFlags::CENTER => Some(taffy::AlignItems::Center),
|
|
stylo::AlignFlags::BASELINE => Some(taffy::AlignItems::Baseline),
|
|
// Should never be hit. But no real reason to panic here.
|
|
_ => None,
|
|
}
|
|
}
|
|
|
|
#[inline]
|
|
pub fn gap(input: &stylo::Gap) -> taffy::LengthPercentage {
|
|
match input {
|
|
// For Flexbox and CSS Grid the "normal" value is 0px. This may need to be updated
|
|
// if we ever implement multi-column layout.
|
|
stylo::Gap::Normal => taffy::LengthPercentage::ZERO,
|
|
stylo::Gap::LengthPercentage(val) => length_percentage(&val.0),
|
|
}
|
|
}
|
|
|
|
// CSS Grid styles
|
|
// ===============
|
|
|
|
#[inline]
|
|
pub fn grid_auto_flow(input: stylo::GridAutoFlow) -> taffy::GridAutoFlow {
|
|
let is_row = input.contains(stylo::GridAutoFlow::ROW);
|
|
let is_dense = input.contains(stylo::GridAutoFlow::DENSE);
|
|
|
|
match (is_row, is_dense) {
|
|
(true, false) => taffy::GridAutoFlow::Row,
|
|
(true, true) => taffy::GridAutoFlow::RowDense,
|
|
(false, false) => taffy::GridAutoFlow::Column,
|
|
(false, true) => taffy::GridAutoFlow::ColumnDense,
|
|
}
|
|
}
|
|
|
|
#[inline]
|
|
pub fn grid_line(input: &stylo::GridLine) -> taffy::GridPlacement<Atom> {
|
|
if input.is_auto() {
|
|
taffy::GridPlacement::Auto
|
|
} else if input.is_span {
|
|
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::GridPlacement::Auto
|
|
}
|
|
}
|
|
|
|
#[inline]
|
|
pub fn track_repeat(input: stylo::RepeatCount<i32>) -> taffy::RepetitionCount {
|
|
match input {
|
|
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 track_size(input: &stylo::TrackSize<stylo::LengthPercentage>) -> taffy::TrackSizingFunction {
|
|
match input {
|
|
stylo::TrackSize::Breadth(breadth) => taffy::MinMax {
|
|
min: min_track(breadth),
|
|
max: max_track(breadth),
|
|
},
|
|
stylo::TrackSize::Minmax(min, max) => taffy::MinMax {
|
|
min: min_track(min),
|
|
max: max_track(max),
|
|
},
|
|
stylo::TrackSize::FitContent(limit) => taffy::MinMax {
|
|
min: taffy::MinTrackSizingFunction::AUTO,
|
|
max: match limit {
|
|
stylo::TrackBreadth::Breadth(lp) => {
|
|
MaxTrackSizingFunction::fit_content(length_percentage(lp))
|
|
},
|
|
|
|
// Are these valid? Taffy doesn't support this in any case
|
|
stylo::TrackBreadth::Fr(_) => unreachable!(),
|
|
stylo::TrackBreadth::Auto => unreachable!(),
|
|
stylo::TrackBreadth::MinContent => unreachable!(),
|
|
stylo::TrackBreadth::MaxContent => unreachable!(),
|
|
},
|
|
},
|
|
}
|
|
}
|
|
|
|
#[inline]
|
|
pub fn min_track(
|
|
input: &stylo::TrackBreadth<stylo::LengthPercentage>,
|
|
) -> taffy::MinTrackSizingFunction {
|
|
match input {
|
|
stylo::TrackBreadth::Breadth(lp) => length_percentage(lp).into(),
|
|
stylo::TrackBreadth::Fr(_) => taffy::MinTrackSizingFunction::AUTO,
|
|
stylo::TrackBreadth::Auto => taffy::MinTrackSizingFunction::AUTO,
|
|
stylo::TrackBreadth::MinContent => taffy::MinTrackSizingFunction::MIN_CONTENT,
|
|
stylo::TrackBreadth::MaxContent => taffy::MinTrackSizingFunction::MAX_CONTENT,
|
|
}
|
|
}
|
|
|
|
#[inline]
|
|
pub fn max_track(
|
|
input: &stylo::TrackBreadth<stylo::LengthPercentage>,
|
|
) -> taffy::MaxTrackSizingFunction {
|
|
match input {
|
|
stylo::TrackBreadth::Breadth(lp) => length_percentage(lp).into(),
|
|
stylo::TrackBreadth::Fr(val) => fr(*val),
|
|
stylo::TrackBreadth::Auto => taffy::MaxTrackSizingFunction::AUTO,
|
|
stylo::TrackBreadth::MinContent => taffy::MaxTrackSizingFunction::MIN_CONTENT,
|
|
stylo::TrackBreadth::MaxContent => taffy::MaxTrackSizingFunction::MAX_CONTENT,
|
|
}
|
|
}
|