LibWeb: Map logical alias transition properties to physical counterparts

Transitions apply after logical properties are mapped to their physical
counterparts so we should apply this mapping to `transition` properties

Gains us 20 WPT tests.
This commit is contained in:
Callum Law 2025-09-11 16:18:50 +12:00 committed by Tim Ledbetter
commit a46453f234
Notes: github-actions[bot] 2025-09-11 05:09:02 +00:00
5 changed files with 33 additions and 30 deletions

View file

@ -1240,6 +1240,13 @@ static void compute_transitioned_properties(ComputedProperties const& style, DOM
auto property_value = transition_properties[i];
Vector<PropertyID> properties_for_this_transition;
auto const append_property_mapping_logical_aliases = [&](PropertyID property_id) {
if (property_is_logical_alias(property_id))
properties_for_this_transition.append(map_logical_alias_to_physical_property(property_id, LogicalAliasMappingContext { style.writing_mode(), style.direction() }));
else
properties_for_this_transition.append(property_id);
};
if (property_value->is_keyword()) {
auto keyword = property_value->as_keyword().keyword();
if (keyword == Keyword::None)
@ -1254,9 +1261,9 @@ static void compute_transitioned_properties(ComputedProperties const& style, DOM
auto transition_property = maybe_property.release_value();
if (property_is_shorthand(transition_property)) {
for (auto const& prop : expanded_longhands_for_shorthand(transition_property))
properties_for_this_transition.append(prop);
append_property_mapping_logical_aliases(prop);
} else {
properties_for_this_transition.append(transition_property);
append_property_mapping_logical_aliases(transition_property);
}
}

View file

@ -2,14 +2,13 @@ Harness status: OK
Found 24 tests
19 Pass
5 Fail
Fail CSS Transitions: property <margin-block> from [10px] to [20px] at (-0.3) should be [7px]
Fail CSS Transitions: property <margin-block> from [10px] to [20px] at (0) should be [10px]
Fail CSS Transitions: property <margin-block> from [10px] to [20px] at (0.3) should be [13px]
Fail CSS Transitions: property <margin-block> from [10px] to [20px] at (0.6) should be [16px]
24 Pass
Pass CSS Transitions: property <margin-block> from [10px] to [20px] at (-0.3) should be [7px]
Pass CSS Transitions: property <margin-block> from [10px] to [20px] at (0) should be [10px]
Pass CSS Transitions: property <margin-block> from [10px] to [20px] at (0.3) should be [13px]
Pass CSS Transitions: property <margin-block> from [10px] to [20px] at (0.6) should be [16px]
Pass CSS Transitions: property <margin-block> from [10px] to [20px] at (1) should be [20px]
Fail CSS Transitions: property <margin-block> from [10px] to [20px] at (1.5) should be [25px]
Pass CSS Transitions: property <margin-block> from [10px] to [20px] at (1.5) should be [25px]
Pass CSS Transitions with transition: all: property <margin-block> from [10px] to [20px] at (-0.3) should be [7px]
Pass CSS Transitions with transition: all: property <margin-block> from [10px] to [20px] at (0) should be [10px]
Pass CSS Transitions with transition: all: property <margin-block> from [10px] to [20px] at (0.3) should be [13px]

View file

@ -2,14 +2,13 @@ Harness status: OK
Found 24 tests
19 Pass
5 Fail
Fail CSS Transitions: property <margin-inline> from [10px] to [20px] at (-0.3) should be [7px]
Fail CSS Transitions: property <margin-inline> from [10px] to [20px] at (0) should be [10px]
Fail CSS Transitions: property <margin-inline> from [10px] to [20px] at (0.3) should be [13px]
Fail CSS Transitions: property <margin-inline> from [10px] to [20px] at (0.6) should be [16px]
24 Pass
Pass CSS Transitions: property <margin-inline> from [10px] to [20px] at (-0.3) should be [7px]
Pass CSS Transitions: property <margin-inline> from [10px] to [20px] at (0) should be [10px]
Pass CSS Transitions: property <margin-inline> from [10px] to [20px] at (0.3) should be [13px]
Pass CSS Transitions: property <margin-inline> from [10px] to [20px] at (0.6) should be [16px]
Pass CSS Transitions: property <margin-inline> from [10px] to [20px] at (1) should be [20px]
Fail CSS Transitions: property <margin-inline> from [10px] to [20px] at (1.5) should be [25px]
Pass CSS Transitions: property <margin-inline> from [10px] to [20px] at (1.5) should be [25px]
Pass CSS Transitions with transition: all: property <margin-inline> from [10px] to [20px] at (-0.3) should be [7px]
Pass CSS Transitions with transition: all: property <margin-inline> from [10px] to [20px] at (0) should be [10px]
Pass CSS Transitions with transition: all: property <margin-inline> from [10px] to [20px] at (0.3) should be [13px]

View file

@ -2,14 +2,13 @@ Harness status: OK
Found 24 tests
19 Pass
5 Fail
Fail CSS Transitions: property <padding-block> from [10px] to [20px] at (-0.3) should be [7px]
Fail CSS Transitions: property <padding-block> from [10px] to [20px] at (0) should be [10px]
Fail CSS Transitions: property <padding-block> from [10px] to [20px] at (0.3) should be [13px]
Fail CSS Transitions: property <padding-block> from [10px] to [20px] at (0.6) should be [16px]
24 Pass
Pass CSS Transitions: property <padding-block> from [10px] to [20px] at (-0.3) should be [7px]
Pass CSS Transitions: property <padding-block> from [10px] to [20px] at (0) should be [10px]
Pass CSS Transitions: property <padding-block> from [10px] to [20px] at (0.3) should be [13px]
Pass CSS Transitions: property <padding-block> from [10px] to [20px] at (0.6) should be [16px]
Pass CSS Transitions: property <padding-block> from [10px] to [20px] at (1) should be [20px]
Fail CSS Transitions: property <padding-block> from [10px] to [20px] at (1.5) should be [25px]
Pass CSS Transitions: property <padding-block> from [10px] to [20px] at (1.5) should be [25px]
Pass CSS Transitions with transition: all: property <padding-block> from [10px] to [20px] at (-0.3) should be [7px]
Pass CSS Transitions with transition: all: property <padding-block> from [10px] to [20px] at (0) should be [10px]
Pass CSS Transitions with transition: all: property <padding-block> from [10px] to [20px] at (0.3) should be [13px]

View file

@ -2,14 +2,13 @@ Harness status: OK
Found 24 tests
19 Pass
5 Fail
Fail CSS Transitions: property <padding-inline> from [10px] to [20px] at (-0.3) should be [7px]
Fail CSS Transitions: property <padding-inline> from [10px] to [20px] at (0) should be [10px]
Fail CSS Transitions: property <padding-inline> from [10px] to [20px] at (0.3) should be [13px]
Fail CSS Transitions: property <padding-inline> from [10px] to [20px] at (0.6) should be [16px]
24 Pass
Pass CSS Transitions: property <padding-inline> from [10px] to [20px] at (-0.3) should be [7px]
Pass CSS Transitions: property <padding-inline> from [10px] to [20px] at (0) should be [10px]
Pass CSS Transitions: property <padding-inline> from [10px] to [20px] at (0.3) should be [13px]
Pass CSS Transitions: property <padding-inline> from [10px] to [20px] at (0.6) should be [16px]
Pass CSS Transitions: property <padding-inline> from [10px] to [20px] at (1) should be [20px]
Fail CSS Transitions: property <padding-inline> from [10px] to [20px] at (1.5) should be [25px]
Pass CSS Transitions: property <padding-inline> from [10px] to [20px] at (1.5) should be [25px]
Pass CSS Transitions with transition: all: property <padding-inline> from [10px] to [20px] at (-0.3) should be [7px]
Pass CSS Transitions with transition: all: property <padding-inline> from [10px] to [20px] at (0) should be [10px]
Pass CSS Transitions with transition: all: property <padding-inline> from [10px] to [20px] at (0.3) should be [13px]