LibWeb: Propagate CSS-wide keyword to transition longhands

Previously we would treat CSS-wide keywords as equivalent to "none"
This commit is contained in:
Callum Law 2025-06-10 17:45:32 +12:00 committed by Sam Atkins
commit 3c6b8d5a2c
Notes: github-actions[bot] 2025-06-16 11:39:11 +00:00
3 changed files with 39 additions and 17 deletions

View file

@ -940,15 +940,14 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
} }
if (property_id == CSS::PropertyID::Transition) { if (property_id == CSS::PropertyID::Transition) {
if (!value.is_transition()) { if (value.to_keyword() == Keyword::None) {
// Handle `none` as a shorthand for `all 0s ease 0s`. // Handle `none` as a shorthand for `all 0s ease 0s`.
set_longhand_property(CSS::PropertyID::TransitionProperty, CSSKeywordValue::create(Keyword::All)); set_longhand_property(CSS::PropertyID::TransitionProperty, CSSKeywordValue::create(Keyword::All));
set_longhand_property(CSS::PropertyID::TransitionDuration, TimeStyleValue::create(CSS::Time::make_seconds(0))); set_longhand_property(CSS::PropertyID::TransitionDuration, TimeStyleValue::create(CSS::Time::make_seconds(0)));
set_longhand_property(CSS::PropertyID::TransitionDelay, TimeStyleValue::create(CSS::Time::make_seconds(0))); set_longhand_property(CSS::PropertyID::TransitionDelay, TimeStyleValue::create(CSS::Time::make_seconds(0)));
set_longhand_property(CSS::PropertyID::TransitionTimingFunction, EasingStyleValue::create(EasingStyleValue::CubicBezier::ease())); set_longhand_property(CSS::PropertyID::TransitionTimingFunction, EasingStyleValue::create(EasingStyleValue::CubicBezier::ease()));
set_longhand_property(CSS::PropertyID::TransitionBehavior, CSSKeywordValue::create(Keyword::Normal)); set_longhand_property(CSS::PropertyID::TransitionBehavior, CSSKeywordValue::create(Keyword::Normal));
return; } else if (value.is_transition()) {
}
auto const& transitions = value.as_transition().transitions(); auto const& transitions = value.as_transition().transitions();
Array<Vector<ValueComparingNonnullRefPtr<CSSStyleValue const>>, 5> transition_values; Array<Vector<ValueComparingNonnullRefPtr<CSSStyleValue const>>, 5> transition_values;
for (auto const& transition : transitions) { for (auto const& transition : transitions) {
@ -965,6 +964,14 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
set_longhand_property(CSS::PropertyID::TransitionDelay, StyleValueList::create(move(transition_values[2]), StyleValueList::Separator::Comma)); set_longhand_property(CSS::PropertyID::TransitionDelay, StyleValueList::create(move(transition_values[2]), StyleValueList::Separator::Comma));
set_longhand_property(CSS::PropertyID::TransitionTimingFunction, StyleValueList::create(move(transition_values[3]), StyleValueList::Separator::Comma)); set_longhand_property(CSS::PropertyID::TransitionTimingFunction, StyleValueList::create(move(transition_values[3]), StyleValueList::Separator::Comma));
set_longhand_property(CSS::PropertyID::TransitionBehavior, StyleValueList::create(move(transition_values[4]), StyleValueList::Separator::Comma)); set_longhand_property(CSS::PropertyID::TransitionBehavior, StyleValueList::create(move(transition_values[4]), StyleValueList::Separator::Comma));
} else {
set_longhand_property(CSS::PropertyID::TransitionProperty, value);
set_longhand_property(CSS::PropertyID::TransitionDuration, value);
set_longhand_property(CSS::PropertyID::TransitionDelay, value);
set_longhand_property(CSS::PropertyID::TransitionTimingFunction, value);
set_longhand_property(CSS::PropertyID::TransitionBehavior, value);
}
return; return;
} }

View file

@ -0,0 +1 @@
#a { transition: initial; }

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<style>
#a {
transition: initial;
}
</style>
<script src="../include.js"></script>
<script>
test(() => {
println(document.styleSheets[0].cssRules[0].cssText);
});
</script>
</html>