mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-24 19:28:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 11

LibWeb: Resolve calculated time values in animations and transitions
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
Details
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
Details
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
Details
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Details
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Details
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Details
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Details
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Details
Lint Code / lint (push) Waiting to run
Details
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Details
Push notes / build (push) Waiting to run
Details

Browse source 
This lets us play animations and transitions when time values are
stored in the form of calculated values, such as `calc(1s + 500ms)`.
This commit is contained in:
aplefull 2025-07-23 13:27:17 +02:00 • committed by Sam Atkins
commit 34f0ac15fd
Notes: github-actions[bot] 2025-07-23 14:22:48 +00:00
2 changed files with 40 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

21
Libraries/LibWeb/Animations/Animatable.cpp
View file

@ -152,8 +152,25 @@ void Animatable::add_transitioned_properties(Optional<CSS::PseudoElement> pseudo
auto& transition = *maybe_transition; auto& transition = *maybe_transition;
for (size_t i = 0; i < properties.size(); i++) { for (size_t i = 0; i < properties.size(); i++) {
size_t index_of_this_transition = transition.transition_attributes.size(); size_t index_of_this_transition = transition.transition_attributes.size();
auto delay = delays[i]->is_time() ? delays[i]->as_time().time().to_milliseconds() : 0; double delay = 0.0;
auto duration = durations[i]->is_time() ? durations[i]->as_time().time().to_milliseconds() : 0; if (delays[i]->is_time()) {
delay = delays[i]->as_time().time().to_milliseconds();
} else if (delays[i]->is_calculated() && delays[i]->as_calculated().resolves_to_time()) {
auto resolved_time = delays[i]->as_calculated().resolve_time({});
if (resolved_time.has_value()) {
delay = resolved_time.value().to_milliseconds();
}
}
double duration = 0.0;
if (durations[i]->is_time()) {
duration = durations[i]->as_time().time().to_milliseconds();
} else if (durations[i]->is_calculated() && durations[i]->as_calculated().resolves_to_time()) {
auto resolved_time = durations[i]->as_calculated().resolve_time({});
if (resolved_time.has_value()) {
duration = resolved_time.value().to_milliseconds();
}
}
auto timing_function = timing_functions[i]->is_easing() ? timing_functions[i]->as_easing().function() : CSS::EasingStyleValue::CubicBezier::ease(); auto timing_function = timing_functions[i]->is_easing() ? timing_functions[i]->as_easing().function() : CSS::EasingStyleValue::CubicBezier::ease();
auto transition_behavior = CSS::keyword_to_transition_behavior(transition_behaviors[i]->to_keyword()).value_or(CSS::TransitionBehavior::Normal); auto transition_behavior = CSS::keyword_to_transition_behavior(transition_behaviors[i]->to_keyword()).value_or(CSS::TransitionBehavior::Normal);
VERIFY(timing_functions[i]->is_easing()); VERIFY(timing_functions[i]->is_easing());

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

@ -1193,12 +1193,25 @@ static void apply_animation_properties(DOM::Document& document, CascadedProperti
} else if (duration_value->is_keyword() && duration_value->as_keyword().keyword() == Keyword::Auto) { } else if (duration_value->is_keyword() && duration_value->as_keyword().keyword() == Keyword::Auto) {
// We use empty optional to represent "auto". // We use empty optional to represent "auto".
duration = {}; duration = {};
} else if (duration_value->is_calculated() && duration_value->as_calculated().resolves_to_time()) {
auto resolved_time = duration_value->as_calculated().resolve_time({});
if (resolved_time.has_value()) {
duration = resolved_time.value();
}
} }
} }
CSS::Time delay { 0, CSS::Time::Type::S }; CSS::Time delay { 0, CSS::Time::Type::S };
if (auto delay_value = cascaded_properties.property(PropertyID::AnimationDelay); delay_value && delay_value->is_time()) if (auto delay_value = cascaded_properties.property(PropertyID::AnimationDelay); delay_value) {
delay = delay_value->as_time().time(); if (delay_value->is_time()) {
delay = delay_value->as_time().time();
} else if (delay_value->is_calculated() && delay_value->as_calculated().resolves_to_time()) {
auto resolved_time = delay_value->as_calculated().resolve_time({});
if (resolved_time.has_value()) {
delay = resolved_time.value();
}
}
}
double iteration_count = 1.0; double iteration_count = 1.0;
if (auto iteration_count_value = cascaded_properties.property(PropertyID::AnimationIterationCount); iteration_count_value) { if (auto iteration_count_value = cascaded_properties.property(PropertyID::AnimationIterationCount); iteration_count_value) {
@ -1206,6 +1219,12 @@ static void apply_animation_properties(DOM::Document& document, CascadedProperti
iteration_count = HUGE_VAL; iteration_count = HUGE_VAL;
else if (iteration_count_value->is_number()) else if (iteration_count_value->is_number())
iteration_count = iteration_count_value->as_number().number(); iteration_count = iteration_count_value->as_number().number();
else if (iteration_count_value->is_calculated() && iteration_count_value->as_calculated().resolves_to_number()) {
auto resolved_number = iteration_count_value->as_calculated().resolve_number({});
if (resolved_number.has_value()) {
iteration_count = resolved_number.value();
}
}
} }
CSS::AnimationFillMode fill_mode { CSS::AnimationFillMode::None }; CSS::AnimationFillMode fill_mode { CSS::AnimationFillMode::None };