LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-01-08 12:19:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Respect the animation-fill-mode CSS property

Browse Source
This commit is contained in:
Ali Mohammad Pur 2023-05-27 09:45:21 +03:30 committed by Andreas Kling
parent 2e71263c5c
commit 19c92fa354
Notes: sideshowbarker 2024-07-17 11:29:41 +09:00 
Author: https://github.com/alimpfard
Commit: https://github.com/SerenityOS/serenity/commit/19c92fa354
Pull-request: https://github.com/SerenityOS/serenity/pull/19050
Reviewed-by: https://github.com/AtkinsSJ
Reviewed-by: https://github.com/Lubrsi
2 changed files with 43 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
View File

@ -1114,8 +1114,11 @@ static ErrorOr<NonnullRefPtr<StyleValue>> interpolate_property(StyleValue const&
ErrorOr<void> StyleComputer::Animation::collect_into(StyleProperties& style_properties, RuleCache const& rule_cache) const
{
if (remaining_delay.to_milliseconds() != 0)
return {};
if (remaining_delay.to_milliseconds() != 0) {
// If the fill mode is backwards or both, we'll pretend that the animation is started, but stuck at progress 0
if (fill_mode != CSS::AnimationFillMode::Backwards && fill_mode != CSS::AnimationFillMode::Both)
return {};
}
auto matching_keyframes = rule_cache.rules_by_animation_keyframes.get(name);
if (!matching_keyframes.has_value())
@ -1163,6 +1166,11 @@ ErrorOr<void> StyleComputer::Animation::collect_into(StyleProperties& style_prop
dbgln_if(LIBWEB_CSS_ANIMATION_DEBUG, "Animation {} contains {} properties to interpolate, progress = {}%", name, valid_properties, progress_in_keyframe * 100);
if (fill_mode == CSS::AnimationFillMode::Forwards || fill_mode == CSS::AnimationFillMode::Both) {
if (!active_state_if_fill_forward)
active_state_if_fill_forward = make<AnimationStateSnapshot>();
}
UnderlyingType<PropertyID> property_id_value = 0;
for (auto const& property : keyframe_values.resolved_properties) {
auto property_id = static_cast<PropertyID>(property_id_value++);
@ -1173,11 +1181,11 @@ ErrorOr<void> StyleComputer::Animation::collect_into(StyleProperties& style_prop
return property.visit(
[](Empty) -> RefPtr<StyleValue const> { VERIFY_NOT_REACHED(); },
[&](AnimationKeyFrameSet::ResolvedKeyFrame::UseInitial) {
if (auto value = initial_state[to_underlying(property_id)])
if (auto value = initial_state.state[to_underlying(property_id)])
return value;
auto value = style_properties.maybe_null_property(property_id);
initial_state[to_underlying(property_id)] = value;
initial_state.state[to_underlying(property_id)] = value;
return value;
},
[&](RefPtr<StyleValue const> value) { return value; });
@ -1206,6 +1214,8 @@ ErrorOr<void> StyleComputer::Animation::collect_into(StyleProperties& style_prop
auto next_value = TRY(interpolate_property(*start, *end, progress_in_keyframe));
dbgln_if(LIBWEB_CSS_ANIMATION_DEBUG, "Interpolated value for property {} at {}: {} -> {} = {}", string_from_property_id(property_id), progress_in_keyframe, start->to_string(), end->to_string(), next_value->to_string());
style_properties.set_property(property_id, next_value);
if (active_state_if_fill_forward)
active_state_if_fill_forward->state[to_underlying(property_id)] = next_value;
}
return {};
@ -1248,29 +1258,29 @@ void StyleComputer::ensure_animation_timer() const
break;
case AnimationStepTransition::IdleOrBeforeToAfter:
// FIXME: Dispatch `animationstart` then `animationend`.
m_finished_animations.set(it.key);
m_finished_animations.set(it.key, move(it.value->active_state_if_fill_forward));
break;
case AnimationStepTransition::ActiveToBefore:
// FIXME: Dispatch `animationend`.
m_finished_animations.set(it.key);
m_finished_animations.set(it.key, move(it.value->active_state_if_fill_forward));
break;
case AnimationStepTransition::ActiveToActiveChangingTheIteration:
// FIXME: Dispatch `animationiteration`.
break;
case AnimationStepTransition::ActiveToAfter:
// FIXME: Dispatch `animationend`.
m_finished_animations.set(it.key);
m_finished_animations.set(it.key, move(it.value->active_state_if_fill_forward));
break;
case AnimationStepTransition::AfterToActive:
// FIXME: Dispatch `animationstart`.
break;
case AnimationStepTransition::AfterToBefore:
// FIXME: Dispatch `animationstart` then `animationend`.
m_finished_animations.set(it.key);
m_finished_animations.set(it.key, move(it.value->active_state_if_fill_forward));
break;
case AnimationStepTransition::Cancelled:
// FIXME: Dispatch `animationcancel`.
m_finished_animations.set(it.key);
m_finished_animations.set(it.key, nullptr);
break;
}
if (it.value->is_done())
@ -1346,9 +1356,17 @@ ErrorOr<void> StyleComputer::compute_cascaded_values(StyleProperties& style, DOM
.element = &element,
};
if (m_finished_animations.contains(animation_key)) {
if (auto finished_state = m_finished_animations.get(animation_key); finished_state.has_value()) {
// We've already finished going through this animation, so drop it from the active animations.
m_active_animations.remove(animation_key);
// If the animation's fill mode was set to forwards/both, we need to collect and use the final frame's styles.
if (*finished_state) {
auto& state = (*finished_state)->state;
for (size_t property_id_value = 0; property_id_value < state.size(); ++property_id_value) {
if (auto& property_value = state[property_id_value])
style.set_property(static_cast<PropertyID>(property_id_value), *property_value);
}
}
} else if (auto name = TRY(animation_name->to_string()); !name.is_empty()) {
auto active_animation = m_active_animations.get(animation_key);
if (!active_animation.has_value()) {
@ -1369,13 +1387,19 @@ ErrorOr<void> StyleComputer::compute_cascaded_values(StyleProperties& style, DOM
iteration_count = static_cast<size_t>(iteration_count_value->as_numeric().number());
}
CSS::AnimationFillMode fill_mode { CSS::AnimationFillMode::None };
if (auto fill_mode_property = style.maybe_null_property(PropertyID::AnimationFillMode); fill_mode_property && fill_mode_property->is_identifier()) {
if (auto fill_mode_value = value_id_to_animation_fill_mode(fill_mode_property->to_identifier()); fill_mode_value.has_value())
fill_mode = *fill_mode_value;
}
auto animation = make<Animation>(Animation {
.name = move(name),
.duration = duration,
.delay = delay,
.iteration_count = iteration_count,
.direction = Animation::Direction::Normal,
.fill_mode = Animation::FillMode::None,
.fill_mode = fill_mode,
.owning_element = TRY(element.try_make_weak_ptr<DOM::Element>()),
.progress = CSS::Percentage(0),
.remaining_delay = delay,

10
Userland/Libraries/LibWeb/CSS/StyleComputer.h
View File

@ -185,6 +185,10 @@ private:
Active,
};
struct AnimationStateSnapshot {
Array<RefPtr<StyleValue const>, to_underlying(last_property_id) + 1> state;
};
struct Animation {
String name;
CSS::Time duration;
@ -197,7 +201,9 @@ private:
CSS::Percentage progress { 0 };
CSS::Time remaining_delay { 0, CSS::Time::Type::Ms };
AnimationState current_state { AnimationState::Before };
mutable Array<RefPtr<StyleValue const>, to_underlying(last_property_id) + 1> initial_state {};
mutable AnimationStateSnapshot initial_state {};
mutable OwnPtr<AnimationStateSnapshot> active_state_if_fill_forward {};
AnimationStepTransition step(CSS::Time const& time_step);
ErrorOr<void> collect_into(StyleProperties&, RuleCache const&) const;
@ -205,7 +211,7 @@ private:
};
mutable HashMap<AnimationKey, NonnullOwnPtr<Animation>> m_active_animations;
mutable HashTable<AnimationKey> m_finished_animations;
mutable HashMap<AnimationKey, OwnPtr<AnimationStateSnapshot>> m_finished_animations; // If fill-mode is forward/both, this is non-null and contains the final state.
mutable RefPtr<Platform::Timer> m_animation_driver_timer;
};