mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-25 18:58:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Resolve CSS-wide keywords in keyframe properties

Browse source 
Also resolves the `revert` keyword against longhand properties rather
than potential shorthands as this could cause a crash.

Gains us 20 WPT tests.
This commit is contained in:
Callum Law 2025-08-27 15:17:18 +12:00 • committed by Jelle Raaijmakers
commit d69e62425e
Notes: github-actions[bot] 2025-08-27 12:52:27 +00:00
4 changed files with 49 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

21
Libraries/LibWeb/CSS/StyleComputer.cpp
View file

@ -1129,8 +1129,6 @@ void StyleComputer::collect_animation_into(DOM::Element& element, Optional<CSS::
if (style_value->is_pending_substitution()) if (style_value->is_pending_substitution())
continue; continue;
if (style_value->is_revert() || style_value->is_revert_layer())
style_value = computed_properties.property(property_id);
if (style_value->is_unresolved()) 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()); 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<CSS::
if (result.contains(physical_longhand_id) && result.get(physical_longhand_id) != nullptr && !property_is_set_by_use_initial.get(physical_longhand_id_bitmap_index) && !is_property_preferred(property_id, longhands_set_by_property_id.get(physical_longhand_id).value())) if (result.contains(physical_longhand_id) && result.get(physical_longhand_id) != nullptr && !property_is_set_by_use_initial.get(physical_longhand_id_bitmap_index) && !is_property_preferred(property_id, longhands_set_by_property_id.get(physical_longhand_id).value()))
return; return;
auto const& specified_value_with_css_wide_keywords_applied = [&]() -> 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); 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); 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; return result;

7
Tests/LibWeb/Crash/CSS/animated-revert-shorthand.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<html>
<div id="foo"></div>
<script>
foo.animate([{ margin: "revert" }, { margin: "0" }], 1000);
</script>
</html>

24
Tests/LibWeb/Text/expected/wpt-import/css/css-tables/animations/border-spacing-interpolation.txt
View file

@ -2,8 +2,8 @@ Harness status: OK
Found 120 tests Found 120 tests
92 Pass 102 Pass
28 Fail 18 Fail
Pass CSS Transitions: property <border-spacing> from neutral to [20px] at (-0.3) should be [7px 7px] Pass CSS Transitions: property <border-spacing> from neutral to [20px] at (-0.3) should be [7px 7px]
Pass CSS Transitions: property <border-spacing> from neutral to [20px] at (0) should be [10px 10px] Pass CSS Transitions: property <border-spacing> from neutral to [20px] at (0) should be [10px 10px]
Pass CSS Transitions: property <border-spacing> from neutral to [20px] at (0.3) should be [13px 13px] Pass CSS Transitions: property <border-spacing> from neutral to [20px] at (0.3) should be [13px 13px]
@ -88,18 +88,18 @@ Pass CSS Transitions with transition: all: property <border-spacing> from [unset
Pass CSS Transitions with transition: all: property <border-spacing> from [unset] to [20px] at (0.6) should be [24px 24px] Pass CSS Transitions with transition: all: property <border-spacing> from [unset] to [20px] at (0.6) should be [24px 24px]
Pass CSS Transitions with transition: all: property <border-spacing> from [unset] to [20px] at (1) should be [20px 20px] Pass CSS Transitions with transition: all: property <border-spacing> from [unset] to [20px] at (1) should be [20px 20px]
Pass CSS Transitions with transition: all: property <border-spacing> from [unset] to [20px] at (1.5) should be [15px 15px] Pass CSS Transitions with transition: all: property <border-spacing> from [unset] to [20px] at (1.5) should be [15px 15px]
Fail CSS Animations: property <border-spacing> from [unset] to [20px] at (-0.3) should be [33px 33px] Pass CSS Animations: property <border-spacing> from [unset] to [20px] at (-0.3) should be [33px 33px]
Fail CSS Animations: property <border-spacing> from [unset] to [20px] at (0) should be [30px 30px] Pass CSS Animations: property <border-spacing> from [unset] to [20px] at (0) should be [30px 30px]
Fail CSS Animations: property <border-spacing> from [unset] to [20px] at (0.3) should be [27px 27px] Pass CSS Animations: property <border-spacing> from [unset] to [20px] at (0.3) should be [27px 27px]
Fail CSS Animations: property <border-spacing> from [unset] to [20px] at (0.6) should be [24px 24px] Pass CSS Animations: property <border-spacing> from [unset] to [20px] at (0.6) should be [24px 24px]
Pass CSS Animations: property <border-spacing> from [unset] to [20px] at (1) should be [20px 20px] Pass CSS Animations: property <border-spacing> from [unset] to [20px] at (1) should be [20px 20px]
Fail CSS Animations: property <border-spacing> from [unset] to [20px] at (1.5) should be [15px 15px] Pass CSS Animations: property <border-spacing> from [unset] to [20px] at (1.5) should be [15px 15px]
Fail Web Animations: property <border-spacing> from [unset] to [20px] at (-0.3) should be [33px 33px] Pass Web Animations: property <border-spacing> from [unset] to [20px] at (-0.3) should be [33px 33px]
Fail Web Animations: property <border-spacing> from [unset] to [20px] at (0) should be [30px 30px] Pass Web Animations: property <border-spacing> from [unset] to [20px] at (0) should be [30px 30px]
Fail Web Animations: property <border-spacing> from [unset] to [20px] at (0.3) should be [27px 27px] Pass Web Animations: property <border-spacing> from [unset] to [20px] at (0.3) should be [27px 27px]
Fail Web Animations: property <border-spacing> from [unset] to [20px] at (0.6) should be [24px 24px] Pass Web Animations: property <border-spacing> from [unset] to [20px] at (0.6) should be [24px 24px]
Pass Web Animations: property <border-spacing> from [unset] to [20px] at (1) should be [20px 20px] Pass Web Animations: property <border-spacing> from [unset] to [20px] at (1) should be [20px 20px]
Fail Web Animations: property <border-spacing> from [unset] to [20px] at (1.5) should be [15px 15px] Pass Web Animations: property <border-spacing> from [unset] to [20px] at (1.5) should be [15px 15px]
Fail CSS Transitions: property <border-spacing> from [0px] to [10px] at (-0.3) should be [0px 0px] Fail CSS Transitions: property <border-spacing> from [0px] to [10px] at (-0.3) should be [0px 0px]
Pass CSS Transitions: property <border-spacing> from [0px] to [10px] at (0) should be [0px 0px] Pass CSS Transitions: property <border-spacing> from [0px] to [10px] at (0) should be [0px 0px]
Pass CSS Transitions: property <border-spacing> from [0px] to [10px] at (0.3) should be [3px 3px] Pass CSS Transitions: property <border-spacing> from [0px] to [10px] at (0.3) should be [3px 3px]

24
Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/animations/text-shadow-interpolation.txt
View file

@ -2,8 +2,8 @@ Harness status: OK
Found 168 tests Found 168 tests
128 Pass 138 Pass
40 Fail 30 Fail
Pass CSS Transitions: property <text-shadow> from neutral to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 7px 33px 7px] Pass CSS Transitions: property <text-shadow> from neutral to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 7px 33px 7px]
Pass CSS Transitions: property <text-shadow> from neutral to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 10px 30px 10px] Pass CSS Transitions: property <text-shadow> from neutral to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 10px 30px 10px]
Pass CSS Transitions: property <text-shadow> from neutral to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 13px 27px 13px] Pass CSS Transitions: property <text-shadow> 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 <text-shadow> from [unset] t
Pass CSS Transitions with transition: all: property <text-shadow> 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 <text-shadow> 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 <text-shadow> 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 <text-shadow> 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 <text-shadow> from [unset] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px] Pass CSS Transitions with transition: all: property <text-shadow> from [unset] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px]
Fail CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 33px 7px 33px] Pass CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 33px 7px 33px]
Fail CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 30px 10px 30px] Pass CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 30px 10px 30px]
Fail CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 27px 13px 27px] Pass CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 27px 13px 27px]
Fail CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 24px 16px 24px] Pass CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 24px 16px 24px]
Pass CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] Pass CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px]
Fail CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px] Pass CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px]
Fail Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 33px 7px 33px] Pass Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 33px 7px 33px]
Fail Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 30px 10px 30px] Pass Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 30px 10px 30px]
Fail Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 27px 13px 27px] Pass Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 27px 13px 27px]
Fail Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 24px 16px 24px] Pass Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 24px 16px 24px]
Pass Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] Pass Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px]
Fail Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px] Pass Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px]
Fail CSS Transitions: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (-0.3) should be [rgb(0, 0, 0) 24px 16px 0px] Fail CSS Transitions: property <text-shadow> 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 <text-shadow> 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 <text-shadow> 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 <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (0.3) should be [rgb(77, 50, 0) 6px 4px 11px] Pass CSS Transitions: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (0.3) should be [rgb(77, 50, 0) 6px 4px 11px]