mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-07 08:39:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Propagate CSS-wide keyword to transition longhands

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

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

@ -940,31 +940,38 @@ 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) { transition_values[0].append(*transition.property_name);
transition_values[0].append(*transition.property_name); transition_values[1].append(transition.duration.as_style_value());
transition_values[1].append(transition.duration.as_style_value()); transition_values[2].append(transition.delay.as_style_value());
transition_values[2].append(transition.delay.as_style_value()); if (transition.easing)
if (transition.easing) transition_values[3].append(*transition.easing);
transition_values[3].append(*transition.easing); transition_values[4].append(CSSKeywordValue::create(to_keyword(transition.transition_behavior)));
transition_values[4].append(CSSKeywordValue::create(to_keyword(transition.transition_behavior))); }
set_longhand_property(CSS::PropertyID::TransitionProperty, StyleValueList::create(move(transition_values[0]), StyleValueList::Separator::Comma));
set_longhand_property(CSS::PropertyID::TransitionDuration, StyleValueList::create(move(transition_values[1]), 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::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);
} }
set_longhand_property(CSS::PropertyID::TransitionProperty, StyleValueList::create(move(transition_values[0]), StyleValueList::Separator::Comma));
set_longhand_property(CSS::PropertyID::TransitionDuration, StyleValueList::create(move(transition_values[1]), 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::TransitionBehavior, StyleValueList::create(move(transition_values[4]), StyleValueList::Separator::Comma));
return; return;
} }

1
Tests/LibWeb/Text/expected/css/transition-css-wide-keyword.txt Normal file
View file

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

14
Tests/LibWeb/Text/input/css/transition-css-wide-keyword.html Normal file
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>