LibWeb: Parse the view-timeline shorthand CSS property

The remaining failing tests in view-timeline-shorthand.html are due to
either:
 a) incorrect tests, see web-platform-tests/wpt#56181 or;
 b) a wider issue where we collapse coordinating value list longhand
properties to a single value when we shouldn't.
This commit is contained in:
Callum Law 2025-11-21 23:02:44 +13:00 committed by Sam Atkins
parent e093c76eea
commit 6bb7224f4e
Notes: github-actions[bot] 2025-11-28 13:25:55 +00:00
8 changed files with 413 additions and 2 deletions

View file

@ -752,6 +752,8 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue const>> Parser::parse_css_value(Pr
case PropertyID::ScrollTimelineAxis:
case PropertyID::ScrollTimelineName:
return parse_all_as(tokens, [this, property_id](auto& tokens) { return parse_simple_comma_separated_value_list(property_id, tokens); });
case PropertyID::ViewTimeline:
return parse_all_as(tokens, [this](auto& tokens) { return parse_view_timeline_value(tokens); });
case PropertyID::ViewTimelineAxis:
case PropertyID::ViewTimelineInset:
case PropertyID::ViewTimelineName:
@ -6347,6 +6349,115 @@ RefPtr<StyleValue const> Parser::parse_white_space_shorthand(TokenStream<Compone
return make_whitespace_shorthand(white_space_collapse, text_wrap_mode, white_space_trim);
}
// https://drafts.csswg.org/scroll-animations-1/#view-timeline-shorthand
RefPtr<StyleValue const> Parser::parse_view_timeline_value(TokenStream<ComponentValue>& tokens)
{
// [ <'view-timeline-name'> [ <'view-timeline-axis'> || <'view-timeline-inset'> ]? ]#
StyleValueVector names;
StyleValueVector axes;
StyleValueVector insets;
auto transaction = tokens.begin_transaction();
do {
RefPtr<StyleValue const> name;
RefPtr<StyleValue const> axis;
RefPtr<StyleValue const> inset;
auto const append_entry = [&]() {
VERIFY(name);
names.append(name.release_nonnull());
// FIXME: Use the first entry in property_initial_value() to get the initial values for these longhands once
// we always parse them as lists.
if (axis)
axes.append(axis.release_nonnull());
else
axes.append(KeywordStyleValue::create(Keyword::Block));
if (inset)
insets.append(inset.release_nonnull());
else
insets.append(StyleValueList::create({ KeywordStyleValue::create(Keyword::Auto), KeywordStyleValue::create(Keyword::Auto) }, StyleValueList::Separator::Space));
};
tokens.discard_whitespace();
auto maybe_name = parse_css_value_for_property(PropertyID::ViewTimelineName, tokens);
if (!maybe_name)
return nullptr;
name = maybe_name;
tokens.discard_whitespace();
if (tokens.next_token().is(Token::Type::Comma)) {
tokens.discard_a_token();
// Disallow trailing commas
if (!tokens.has_next_token())
return nullptr;
append_entry();
continue;
}
auto remaining_longhands = Vector { PropertyID::ViewTimelineAxis, PropertyID::ViewTimelineInset };
while (tokens.has_next_token() && !tokens.next_token().is(Token::Type::Comma)) {
tokens.discard_whitespace();
auto property_and_value = parse_css_value_for_properties(remaining_longhands, tokens);
if (!property_and_value.has_value())
return nullptr;
remove_property(remaining_longhands, property_and_value->property);
switch (property_and_value->property) {
case PropertyID::ViewTimelineAxis:
if (axis)
return nullptr;
axis = property_and_value->style_value;
break;
case PropertyID::ViewTimelineInset:
if (inset)
return nullptr;
inset = property_and_value->style_value;
break;
default:
VERIFY_NOT_REACHED();
}
}
append_entry();
if (tokens.next_token().is(Token::Type::Comma)) {
tokens.discard_a_token();
// Disallow trailing commas
if (!tokens.has_next_token())
return nullptr;
continue;
}
if (tokens.has_next_token())
return nullptr;
} while (tokens.has_next_token());
transaction.commit();
return ShorthandStyleValue::create(PropertyID::ViewTimeline,
{ PropertyID::ViewTimelineName, PropertyID::ViewTimelineAxis, PropertyID::ViewTimelineInset },
{ StyleValueList::create(move(names), StyleValueList::Separator::Comma),
StyleValueList::create(move(axes), StyleValueList::Separator::Comma),
StyleValueList::create(move(insets), StyleValueList::Separator::Comma) });
}
// https://drafts.csswg.org/css-will-change/#will-change
RefPtr<StyleValue const> Parser::parse_will_change_value(TokenStream<ComponentValue>& tokens)
{