From d69e62425ef9fe8fddc0715a426f312906135477 Mon Sep 17 00:00:00 2001 From: Callum Law Date: Wed, 27 Aug 2025 15:17:18 +1200 Subject: [PATCH] LibWeb: Resolve CSS-wide keywords in keyframe properties Also resolves the `revert` keyword against longhand properties rather than potential shorthands as this could cause a crash. Gains us 20 WPT tests. --- Libraries/LibWeb/CSS/StyleComputer.cpp | 21 +++++++++++++--- .../Crash/CSS/animated-revert-shorthand.html | 7 ++++++ .../border-spacing-interpolation.txt | 24 +++++++++---------- .../animations/text-shadow-interpolation.txt | 24 +++++++++---------- 4 files changed, 49 insertions(+), 27 deletions(-) create mode 100644 Tests/LibWeb/Crash/CSS/animated-revert-shorthand.html diff --git a/Libraries/LibWeb/CSS/StyleComputer.cpp b/Libraries/LibWeb/CSS/StyleComputer.cpp index 2e50b80e8bd..51855a4210d 100644 --- a/Libraries/LibWeb/CSS/StyleComputer.cpp +++ b/Libraries/LibWeb/CSS/StyleComputer.cpp @@ -1129,8 +1129,6 @@ void StyleComputer::collect_animation_into(DOM::Element& element, Optionalis_pending_substitution()) continue; - if (style_value->is_revert() || style_value->is_revert_layer()) - style_value = computed_properties.property(property_id); if (style_value->is_unresolved()) style_value = Parser::Parser::resolve_unresolved_style_value(Parser::ParsingParams { element.document() }, element, pseudo_element, property_id, style_value->as_unresolved()); @@ -1146,9 +1144,26 @@ void StyleComputer::collect_animation_into(DOM::Element& element, Optional StyleValue const& { + if (longhand_value.is_inherit() || (longhand_value.is_unset() && is_inherited_property(longhand_id))) { + if (auto inherited_animated_value = get_animated_inherit_value(longhand_id, &element); inherited_animated_value.has_value()) + return inherited_animated_value.value(); + + return get_inherit_value(longhand_id, &element); + } + + if (longhand_value.is_initial() || longhand_value.is_unset()) + return property_initial_value(longhand_id); + + if (longhand_value.is_revert() || longhand_value.is_revert_layer()) + return computed_properties.property(longhand_id); + + return longhand_value; + }(); + longhands_set_by_property_id.set(physical_longhand_id, property_id); property_is_set_by_use_initial.set(physical_longhand_id_bitmap_index, is_use_initial); - result.set(physical_longhand_id, { longhand_value.absolutized(viewport_rect(), font_metrics, m_root_element_font_metrics) }); + result.set(physical_longhand_id, { specified_value_with_css_wide_keywords_applied.absolutized(viewport_rect(), font_metrics, m_root_element_font_metrics) }); }); } return result; diff --git a/Tests/LibWeb/Crash/CSS/animated-revert-shorthand.html b/Tests/LibWeb/Crash/CSS/animated-revert-shorthand.html new file mode 100644 index 00000000000..d739d24a326 --- /dev/null +++ b/Tests/LibWeb/Crash/CSS/animated-revert-shorthand.html @@ -0,0 +1,7 @@ + + +
+ + diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-tables/animations/border-spacing-interpolation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-tables/animations/border-spacing-interpolation.txt index 493419bd1f5..8f6d4bda752 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-tables/animations/border-spacing-interpolation.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-tables/animations/border-spacing-interpolation.txt @@ -2,8 +2,8 @@ Harness status: OK Found 120 tests -92 Pass -28 Fail +102 Pass +18 Fail Pass CSS Transitions: property from neutral to [20px] at (-0.3) should be [7px 7px] Pass CSS Transitions: property from neutral to [20px] at (0) should be [10px 10px] Pass CSS Transitions: property from neutral to [20px] at (0.3) should be [13px 13px] @@ -88,18 +88,18 @@ Pass CSS Transitions with transition: all: property from [unset Pass CSS Transitions with transition: all: property from [unset] to [20px] at (0.6) should be [24px 24px] Pass CSS Transitions with transition: all: property from [unset] to [20px] at (1) should be [20px 20px] Pass CSS Transitions with transition: all: property from [unset] to [20px] at (1.5) should be [15px 15px] -Fail CSS Animations: property from [unset] to [20px] at (-0.3) should be [33px 33px] -Fail CSS Animations: property from [unset] to [20px] at (0) should be [30px 30px] -Fail CSS Animations: property from [unset] to [20px] at (0.3) should be [27px 27px] -Fail CSS Animations: property from [unset] to [20px] at (0.6) should be [24px 24px] +Pass CSS Animations: property from [unset] to [20px] at (-0.3) should be [33px 33px] +Pass CSS Animations: property from [unset] to [20px] at (0) should be [30px 30px] +Pass CSS Animations: property from [unset] to [20px] at (0.3) should be [27px 27px] +Pass CSS Animations: property from [unset] to [20px] at (0.6) should be [24px 24px] Pass CSS Animations: property from [unset] to [20px] at (1) should be [20px 20px] -Fail CSS Animations: property from [unset] to [20px] at (1.5) should be [15px 15px] -Fail Web Animations: property from [unset] to [20px] at (-0.3) should be [33px 33px] -Fail Web Animations: property from [unset] to [20px] at (0) should be [30px 30px] -Fail Web Animations: property from [unset] to [20px] at (0.3) should be [27px 27px] -Fail Web Animations: property from [unset] to [20px] at (0.6) should be [24px 24px] +Pass CSS Animations: property from [unset] to [20px] at (1.5) should be [15px 15px] +Pass Web Animations: property from [unset] to [20px] at (-0.3) should be [33px 33px] +Pass Web Animations: property from [unset] to [20px] at (0) should be [30px 30px] +Pass Web Animations: property from [unset] to [20px] at (0.3) should be [27px 27px] +Pass Web Animations: property from [unset] to [20px] at (0.6) should be [24px 24px] Pass Web Animations: property from [unset] to [20px] at (1) should be [20px 20px] -Fail Web Animations: property from [unset] to [20px] at (1.5) should be [15px 15px] +Pass Web Animations: property from [unset] to [20px] at (1.5) should be [15px 15px] Fail CSS Transitions: property from [0px] to [10px] at (-0.3) should be [0px 0px] Pass CSS Transitions: property from [0px] to [10px] at (0) should be [0px 0px] Pass CSS Transitions: property from [0px] to [10px] at (0.3) should be [3px 3px] diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/animations/text-shadow-interpolation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/animations/text-shadow-interpolation.txt index 3bbd4a5e585..816af4880f8 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/animations/text-shadow-interpolation.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/animations/text-shadow-interpolation.txt @@ -2,8 +2,8 @@ Harness status: OK Found 168 tests -128 Pass -40 Fail +138 Pass +30 Fail Pass CSS Transitions: property from neutral to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 7px 33px 7px] Pass CSS Transitions: property from neutral to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 10px 30px 10px] Pass CSS Transitions: property from neutral to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 13px 27px 13px] @@ -88,18 +88,18 @@ Pass CSS Transitions with transition: all: property from [unset] t Pass CSS Transitions with transition: all: property from [unset] to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 24px 16px 24px] Pass CSS Transitions with transition: all: property from [unset] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] Pass CSS Transitions with transition: all: property from [unset] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px] -Fail CSS Animations: property from [unset] to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 33px 7px 33px] -Fail CSS Animations: property from [unset] to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 30px 10px 30px] -Fail CSS Animations: property from [unset] to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 27px 13px 27px] -Fail CSS Animations: property from [unset] to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 24px 16px 24px] +Pass CSS Animations: property from [unset] to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 33px 7px 33px] +Pass CSS Animations: property from [unset] to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 30px 10px 30px] +Pass CSS Animations: property from [unset] to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 27px 13px 27px] +Pass CSS Animations: property from [unset] to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 24px 16px 24px] Pass CSS Animations: property from [unset] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] -Fail CSS Animations: property from [unset] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px] -Fail Web Animations: property from [unset] to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 33px 7px 33px] -Fail Web Animations: property from [unset] to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 30px 10px 30px] -Fail Web Animations: property from [unset] to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 27px 13px 27px] -Fail Web Animations: property from [unset] to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 24px 16px 24px] +Pass CSS Animations: property from [unset] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px] +Pass Web Animations: property from [unset] to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 33px 7px 33px] +Pass Web Animations: property from [unset] to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 30px 10px 30px] +Pass Web Animations: property from [unset] to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 27px 13px 27px] +Pass Web Animations: property from [unset] to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 24px 16px 24px] Pass Web Animations: property from [unset] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] -Fail Web Animations: property from [unset] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px] +Pass Web Animations: property from [unset] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px] Fail CSS Transitions: property from [black 15px 10px 5px] to [orange -15px -10px 25px] at (-0.3) should be [rgb(0, 0, 0) 24px 16px 0px] Pass CSS Transitions: property from [black 15px 10px 5px] to [orange -15px -10px 25px] at (0) should be [rgb(0, 0, 0) 15px 10px 5px] Pass CSS Transitions: property from [black 15px 10px 5px] to [orange -15px -10px 25px] at (0.3) should be [rgb(77, 50, 0) 6px 4px 11px]