LibWeb: Allow transition-property with multiple values

This commit is contained in:
Tim Ledbetter 2025-04-09 07:55:06 +01:00 committed by Sam Atkins
parent 5d48652890
commit 1f8f3804a3
Notes: github-actions[bot] 2025-04-23 20:04:28 +00:00
4 changed files with 65 additions and 0 deletions

View file

@ -423,6 +423,7 @@ private:
RefPtr<CSSStyleValue const> parse_transform_value(TokenStream<ComponentValue>&);
RefPtr<CSSStyleValue const> parse_transform_origin_value(TokenStream<ComponentValue>&);
RefPtr<CSSStyleValue const> parse_transition_value(TokenStream<ComponentValue>&);
RefPtr<CSSStyleValue const> parse_transition_property_value(TokenStream<ComponentValue>&);
RefPtr<CSSStyleValue const> parse_translate_value(TokenStream<ComponentValue>&);
RefPtr<CSSStyleValue const> parse_scale_value(TokenStream<ComponentValue>&);
RefPtr<CSSStyleValue const> parse_grid_track_size_list(TokenStream<ComponentValue>&, bool allow_separate_line_name_blocks = false);

View file

@ -670,6 +670,10 @@ Parser::ParseErrorOr<NonnullRefPtr<CSSStyleValue const>> Parser::parse_css_value
if (auto parsed_value = parse_transition_value(tokens); parsed_value && !tokens.has_next_token())
return parsed_value.release_nonnull();
return ParseError::SyntaxError;
case PropertyID::TransitionProperty:
if (auto parsed_value = parse_transition_property_value(tokens); parsed_value && !tokens.has_next_token())
return parsed_value.release_nonnull();
return ParseError::SyntaxError;
case PropertyID::Translate:
if (auto parsed_value = parse_translate_value(tokens); parsed_value && !tokens.has_next_token())
return parsed_value.release_nonnull();
@ -3775,6 +3779,33 @@ RefPtr<CSSStyleValue const> Parser::parse_transition_value(TokenStream<Component
return TransitionStyleValue::create(move(transitions));
}
RefPtr<CSSStyleValue const> Parser::parse_transition_property_value(TokenStream<ComponentValue>& tokens)
{
// https://drafts.csswg.org/css-transitions/#transition-property-property
// none | <single-transition-property>#
// none
if (auto none = parse_all_as_single_keyword_value(tokens, Keyword::None))
return none;
// <single-transition-property>#
// <single-transition-property> = all | <custom-ident>
auto transaction = tokens.begin_transaction();
auto transition_property_values = parse_a_comma_separated_list_of_component_values(tokens);
StyleValueVector transition_properties;
for (auto const& value : transition_property_values) {
TokenStream transition_property_tokens { value };
auto custom_ident = parse_custom_ident_value(transition_property_tokens, { { "none"sv } });
if (!custom_ident || transition_property_tokens.has_next_token())
return nullptr;
transition_properties.append(custom_ident.release_nonnull());
}
transaction.commit();
return StyleValueList::create(move(transition_properties), StyleValueList::Separator::Comma);
}
RefPtr<CSSStyleValue const> Parser::parse_translate_value(TokenStream<ComponentValue>& tokens)
{
if (tokens.remaining_token_count() == 1) {

View file

@ -0,0 +1,11 @@
Harness status: OK
Found 6 tests
6 Pass
Pass e.style['transition-property'] = "none" should set the property value
Pass e.style['transition-property'] = "all" should set the property value
Pass e.style['transition-property'] = "one" should set the property value
Pass e.style['transition-property'] = "one-two-three" should set the property value
Pass e.style['transition-property'] = "one, two, three" should set the property value
Pass e.style['transition-property'] = "width, all" should set the property value

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transitions: parsing transition-property with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-property">
<meta name="assert" content="transition-property supports the full grammar 'none | <single-transition-property> #'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("transition-property", 'none');
test_valid_value("transition-property", 'all');
test_valid_value("transition-property", 'one');
test_valid_value("transition-property", 'one-two-three');
test_valid_value("transition-property", 'one, two, three');
test_valid_value("transition-property", 'width, all');
</script>
</body>
</html>