Skip to content

Commit 87eb723

Browse files
Calme1709Calme1709
committed
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.
1 parent ba69846 commit 87eb723

File tree

8 files changed

+410
-2
lines changed

8 files changed

+410
-2
lines changed

‎Libraries/LibWeb/CSS/Parser/Parser.h‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -532,6 +532,7 @@ class Parser {
532532
RefPtr<StyleValue const> parse_grid_area_shorthand_value(TokenStream<ComponentValue>&);
533533
RefPtr<StyleValue const> parse_grid_shorthand_value(TokenStream<ComponentValue>&);
534534
RefPtr<StyleValue const> parse_touch_action_value(TokenStream<ComponentValue>&);
535+
RefPtr<StyleValue const> parse_view_timeline_value(TokenStream<ComponentValue>&);
535536
RefPtr<StyleValue const> parse_white_space_shorthand(TokenStream<ComponentValue>&);
536537
RefPtr<StyleValue const> parse_white_space_trim_value(TokenStream<ComponentValue>&);
537538
RefPtr<StyleValue const> parse_will_change_value(TokenStream<ComponentValue>&);

‎Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -752,6 +752,8 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue const>> Parser::parse_css_value(Pr
752752
case PropertyID::ScrollTimelineAxis:
753753
case PropertyID::ScrollTimelineName:
754754
return parse_all_as(tokens, [this, property_id](auto& tokens) { return parse_simple_comma_separated_value_list(property_id, tokens); });
755+
case PropertyID::ViewTimeline:
756+
return parse_all_as(tokens, [this](auto& tokens) { return parse_view_timeline_value(tokens); });
755757
case PropertyID::ViewTimelineAxis:
756758
case PropertyID::ViewTimelineInset:
757759
case PropertyID::ViewTimelineName:
@@ -6347,6 +6349,112 @@ RefPtr<StyleValue const> Parser::parse_white_space_shorthand(TokenStream<Compone
63476349
return make_whitespace_shorthand(white_space_collapse, text_wrap_mode, white_space_trim);
63486350
}
63496351

6352+
// https://drafts.csswg.org/scroll-animations-1/#view-timeline-shorthand
6353+
RefPtr<StyleValue const> Parser::parse_view_timeline_value(TokenStream<ComponentValue>& tokens)
6354+
{
6355+
// [ <'view-timeline-name'> [ <'view-timeline-axis'> || <'view-timeline-inset'> ]? ]#
6356+
StyleValueVector names;
6357+
StyleValueVector axes;
6358+
StyleValueVector insets;
6359+
6360+
auto transaction = tokens.begin_transaction();
6361+
6362+
do {
6363+
RefPtr<StyleValue const> name;
6364+
RefPtr<StyleValue const> axis;
6365+
RefPtr<StyleValue const> inset;
6366+
6367+
auto const append_entry = [&]() {
6368+
names.append(name.release_nonnull());
6369+
6370+
if (axis)
6371+
axes.append(axis.release_nonnull());
6372+
else
6373+
axes.append(KeywordStyleValue::create(Keyword::Block));
6374+
6375+
if (inset)
6376+
insets.append(inset.release_nonnull());
6377+
else
6378+
insets.append(StyleValueList::create({ KeywordStyleValue::create(Keyword::Auto), KeywordStyleValue::create(Keyword::Auto) }, StyleValueList::Separator::Space));
6379+
};
6380+
6381+
tokens.discard_whitespace();
6382+
6383+
auto name_value = parse_css_value_for_property(PropertyID::ViewTimelineName, tokens);
6384+
6385+
if (!name_value)
6386+
return nullptr;
6387+
6388+
name = name_value.release_nonnull();
6389+
6390+
tokens.discard_whitespace();
6391+
6392+
if (tokens.next_token().is(Token::Type::Comma)) {
6393+
tokens.discard_a_token();
6394+
6395+
// Disallow trailing commas
6396+
if (!tokens.has_next_token())
6397+
return nullptr;
6398+
6399+
append_entry();
6400+
continue;
6401+
}
6402+
6403+
auto remaining_longhands = Vector { PropertyID::ViewTimelineAxis, PropertyID::ViewTimelineInset };
6404+
6405+
while (tokens.has_next_token() && !tokens.next_token().is(Token::Type::Comma)) {
6406+
tokens.discard_whitespace();
6407+
6408+
auto property_and_value = parse_css_value_for_properties(remaining_longhands, tokens);
6409+
6410+
if (!property_and_value.has_value())
6411+
return nullptr;
6412+
6413+
remove_property(remaining_longhands, property_and_value->property);
6414+
6415+
switch (property_and_value->property) {
6416+
case PropertyID::ViewTimelineAxis:
6417+
if (axis)
6418+
return nullptr;
6419+
6420+
axis = property_and_value->style_value;
6421+
break;
6422+
case PropertyID::ViewTimelineInset:
6423+
if (inset)
6424+
return nullptr;
6425+
6426+
inset = property_and_value->style_value;
6427+
break;
6428+
default:
6429+
VERIFY_NOT_REACHED();
6430+
}
6431+
}
6432+
6433+
append_entry();
6434+
6435+
if (tokens.next_token().is(Token::Type::Comma)) {
6436+
tokens.discard_a_token();
6437+
6438+
// Disallow trailing commas
6439+
if (!tokens.has_next_token())
6440+
return nullptr;
6441+
6442+
continue;
6443+
}
6444+
6445+
if (tokens.has_next_token())
6446+
return nullptr;
6447+
} while (tokens.has_next_token());
6448+
6449+
transaction.commit();
6450+
6451+
return ShorthandStyleValue::create(PropertyID::ViewTimeline,
6452+
{ PropertyID::ViewTimelineName, PropertyID::ViewTimelineAxis, PropertyID::ViewTimelineInset },
6453+
{ StyleValueList::create(move(names), StyleValueList::Separator::Comma),
6454+
StyleValueList::create(move(axes), StyleValueList::Separator::Comma),
6455+
StyleValueList::create(move(insets), StyleValueList::Separator::Comma) });
6456+
}
6457+
63506458
// https://drafts.csswg.org/css-will-change/#will-change
63516459
RefPtr<StyleValue const> Parser::parse_will_change_value(TokenStream<ComponentValue>& tokens)
63526460
{

‎Libraries/LibWeb/CSS/Properties.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4013,6 +4013,17 @@
40134013
"unitless-length"
40144014
]
40154015
},
4016+
"view-timeline": {
4017+
"affects-layout": false,
4018+
"inherited": false,
4019+
"initial": "none",
4020+
"multiplicity": "coordinating-list",
4021+
"longhands": [
4022+
"view-timeline-name",
4023+
"view-timeline-axis",
4024+
"view-timeline-inset"
4025+
]
4026+
},
40164027
"view-timeline-axis": {
40174028
"affects-layout": false,
40184029
"animation-type": "none",

‎Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -849,6 +849,36 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const
849849
}
850850
case PropertyID::Transition:
851851
return coordinating_value_list_shorthand_to_string("all"sv);
852+
case PropertyID::ViewTimeline: {
853+
// FIXME: We can use coordinating_value_list_shorthand_to_string function once parse_comma_separated_value_list
854+
// always returns a list, currently it doesn't properly handle the fact that the entries for
855+
// view-timeline-inset are themselves StyleValueLists
856+
StringBuilder builder;
857+
858+
auto const& name_values = style_value_as_value_list(longhand(PropertyID::ViewTimelineName));
859+
auto const& axis_values = style_value_as_value_list(longhand(PropertyID::ViewTimelineAxis));
860+
auto const& inset_values = style_value_as_value_list(longhand(PropertyID::ViewTimelineInset));
861+
862+
if (name_values.size() != axis_values.size())
863+
return ""_string;
864+
865+
for (size_t i = 0; i < name_values.size(); i++) {
866+
if (!builder.is_empty())
867+
builder.append(", "sv);
868+
869+
builder.append(name_values[i]->to_string(mode));
870+
871+
if (axis_values[i]->to_keyword() != Keyword::Block)
872+
builder.appendff(" {}", axis_values[i]->to_string(mode));
873+
874+
auto stringified_inset = inset_values[i]->to_string(mode);
875+
876+
if (stringified_inset != "auto"sv)
877+
builder.appendff(" {}", inset_values[i]->to_string(mode));
878+
}
879+
880+
return builder.to_string_without_validation();
881+
}
852882
case PropertyID::WhiteSpace: {
853883
auto white_space_collapse_property = longhand(PropertyID::WhiteSpaceCollapse);
854884
auto text_wrap_mode_property = longhand(PropertyID::TextWrapMode);

‎Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -801,6 +801,8 @@ All supported properties and their default values exposed from CSSStylePropertie
801801
'user-select': 'auto'
802802
'verticalAlign': 'baseline'
803803
'vertical-align': 'baseline'
804+
'viewTimeline': 'none'
805+
'view-timeline': 'none'
804806
'viewTimelineAxis': 'block'
805807
'view-timeline-axis': 'block'
806808
'viewTimelineInset': 'auto'

‎Tests/LibWeb/Text/expected/wpt-import/css/css-cascade/all-prop-revert-layer.txt‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
Harness status: OK
22

3-
Found 274 tests
3+
Found 277 tests
44

5-
268 Pass
5+
271 Pass
66
6 Fail
77
Pass accent-color
88
Pass border-collapse
@@ -271,6 +271,9 @@ Pass translate
271271
Pass unicode-bidi
272272
Pass user-select
273273
Pass vertical-align
274+
Pass view-timeline-axis
275+
Pass view-timeline-inset
276+
Pass view-timeline-name
274277
Pass view-transition-name
275278
Pass white-space-trim
276279
Fail width

‎Tests/LibWeb/Text/expected/wpt-import/scroll-animations/css/view-timeline-shorthand.txt‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
Harness status: OK
2+
3+
Found 83 tests
4+
5+
78 Pass
6+
5 Fail
7+
Pass e.style['view-timeline'] = "--abcd" should set the property value
8+
Pass e.style['view-timeline'] = "none block" should set the property value
9+
Pass e.style['view-timeline'] = "none inline" should set the property value
10+
Pass e.style['view-timeline'] = "--inline block" should set the property value
11+
Pass e.style['view-timeline'] = "--block block" should set the property value
12+
Pass e.style['view-timeline'] = "--y block" should set the property value
13+
Pass e.style['view-timeline'] = "--x block" should set the property value
14+
Pass e.style['view-timeline'] = "--a, --b, --c" should set the property value
15+
Pass e.style['view-timeline'] = "--a inline, --b block, --c y" should set the property value
16+
Pass e.style['view-timeline'] = "--auto" should set the property value
17+
Pass e.style['view-timeline'] = "--abcd block auto" should set the property value
18+
Pass e.style['view-timeline'] = "--abcd block auto auto" should set the property value
19+
Pass e.style['view-timeline'] = "--abcd block 1px 2px" should set the property value
20+
Pass e.style['view-timeline'] = "--abcd inline 1px 2px" should set the property value
21+
Pass e.style['view-timeline'] = "--abcd 1px 2px inline" should set the property value
22+
Pass e.style['view-timeline'] = "--abcd 1px 2px block" should set the property value
23+
Pass e.style['view-timeline'] = "--abcd auto auto block" should set the property value
24+
Pass e.style['view-timeline'] = "--abcd auto block" should set the property value
25+
Pass e.style['view-timeline'] = "--abcd block 1px 1px" should set the property value
26+
Pass e.style['view-timeline'] = "--abc --abc" should not set the property value
27+
Pass e.style['view-timeline'] = "block none" should not set the property value
28+
Pass e.style['view-timeline'] = "none none" should not set the property value
29+
Pass e.style['view-timeline'] = "default" should not set the property value
30+
Pass e.style['view-timeline'] = "," should not set the property value
31+
Pass e.style['view-timeline'] = ",,--block,," should not set the property value
32+
Pass e.style['view-timeline'] = "auto" should not set the property value
33+
Pass e.style['view-timeline'] = "auto auto" should not set the property value
34+
Pass e.style['view-timeline'] = "--abc 500kg" should not set the property value
35+
Pass e.style['view-timeline'] = "--abc #ff0000" should not set the property value
36+
Pass e.style['view-timeline'] = "--abc red red" should not set the property value
37+
Pass Property view-timeline value '--abcd'
38+
Pass Property view-timeline value 'none block'
39+
Pass Property view-timeline value 'none inline'
40+
Pass Property view-timeline value '--inline block'
41+
Pass Property view-timeline value '--block block'
42+
Pass Property view-timeline value '--y block'
43+
Pass Property view-timeline value '--x block'
44+
Pass Property view-timeline value '--a, --b, --c'
45+
Pass Property view-timeline value '--a inline, --b block, --c y'
46+
Pass Property view-timeline value '--abcd block auto'
47+
Pass Property view-timeline value '--abcd block auto auto'
48+
Pass Property view-timeline value '--abcd block 1px 2px'
49+
Pass Property view-timeline value '--abcd inline 1px 2px'
50+
Pass Property view-timeline value '--abcd 1px 2px inline'
51+
Pass Property view-timeline value '--abcd 1px 2px block'
52+
Pass Property view-timeline value '--abcd auto auto block'
53+
Pass Property view-timeline value '--abcd auto block'
54+
Pass Property view-timeline value '--abcd block 1px 1px'
55+
Pass e.style['view-timeline'] = "--abc y" should set view-timeline-axis
56+
Pass e.style['view-timeline'] = "--abc y" should set view-timeline-inset
57+
Pass e.style['view-timeline'] = "--abc y" should set view-timeline-name
58+
Pass e.style['view-timeline'] = "--abc y" should not set unrelated longhands
59+
Pass e.style['view-timeline'] = "--abc y, --def" should set view-timeline-axis
60+
Fail e.style['view-timeline'] = "--abc y, --def" should set view-timeline-inset
61+
Pass e.style['view-timeline'] = "--abc y, --def" should set view-timeline-name
62+
Pass e.style['view-timeline'] = "--abc y, --def" should not set unrelated longhands
63+
Fail e.style['view-timeline'] = "--abc, --def" should set view-timeline-axis
64+
Fail e.style['view-timeline'] = "--abc, --def" should set view-timeline-inset
65+
Pass e.style['view-timeline'] = "--abc, --def" should set view-timeline-name
66+
Pass e.style['view-timeline'] = "--abc, --def" should not set unrelated longhands
67+
Pass e.style['view-timeline'] = "--inline x" should set view-timeline-axis
68+
Pass e.style['view-timeline'] = "--inline x" should set view-timeline-inset
69+
Pass e.style['view-timeline'] = "--inline x" should set view-timeline-name
70+
Pass e.style['view-timeline'] = "--inline x" should not set unrelated longhands
71+
Pass e.style['view-timeline'] = "--abc 1px 2px" should set view-timeline-axis
72+
Pass e.style['view-timeline'] = "--abc 1px 2px" should set view-timeline-inset
73+
Pass e.style['view-timeline'] = "--abc 1px 2px" should set view-timeline-name
74+
Pass e.style['view-timeline'] = "--abc 1px 2px" should not set unrelated longhands
75+
Pass e.style['view-timeline'] = "--abc 1px" should set view-timeline-axis
76+
Pass e.style['view-timeline'] = "--abc 1px" should set view-timeline-inset
77+
Pass e.style['view-timeline'] = "--abc 1px" should set view-timeline-name
78+
Pass e.style['view-timeline'] = "--abc 1px" should not set unrelated longhands
79+
Pass e.style['view-timeline'] = "--abc 1px inline" should set view-timeline-axis
80+
Pass e.style['view-timeline'] = "--abc 1px inline" should set view-timeline-inset
81+
Pass e.style['view-timeline'] = "--abc 1px inline" should set view-timeline-name
82+
Pass e.style['view-timeline'] = "--abc 1px inline" should not set unrelated longhands
83+
Pass Shorthand contraction of view-timeline-name:--abc:undefined;view-timeline-axis:inline:undefined;view-timeline-inset:auto:undefined
84+
Pass Shorthand contraction of view-timeline-name:--a, --b:undefined;view-timeline-axis:inline, block:undefined;view-timeline-inset:auto, auto:undefined
85+
Pass Shorthand contraction of view-timeline-name:--a, --b:undefined;view-timeline-axis:inline, block:undefined;view-timeline-inset:1px 2px, 3px 3px:undefined
86+
Pass Shorthand contraction of view-timeline-name:none, none:undefined;view-timeline-axis:block, block:undefined;view-timeline-inset:auto auto, auto:undefined
87+
Fail Shorthand contraction of view-timeline-name:--a, --b, --c:undefined;view-timeline-axis:inline, inline:undefined;view-timeline-inset:auto, auto:undefined
88+
Fail Shorthand contraction of view-timeline-name:--a, --b:undefined;view-timeline-axis:inline, inline, inline:undefined;view-timeline-inset:auto, auto, auto:undefined
89+
Pass Shorthand contraction of view-timeline-name:--a, --b:undefined;view-timeline-axis:inline, inline:undefined;view-timeline-inset:auto, auto, auto:undefined

0 commit comments

Comments
 (0)