diff --git a/Userland/Libraries/LibWeb/Animations/KeyframeEffect.h b/Userland/Libraries/LibWeb/Animations/KeyframeEffect.h index 4feb5fae296..2d2408d8ee2 100644 --- a/Userland/Libraries/LibWeb/Animations/KeyframeEffect.h +++ b/Userland/Libraries/LibWeb/Animations/KeyframeEffect.h @@ -107,6 +107,9 @@ public: virtual void update_style_properties() override; + Optional last_css_animation_play_state() const { return m_last_css_animation_play_state; } + void set_last_css_animation_play_state(CSS::AnimationPlayState state) { m_last_css_animation_play_state = state; } + private: KeyframeEffect(JS::Realm&); virtual ~KeyframeEffect() override = default; @@ -130,6 +133,8 @@ private: Vector m_keyframe_objects {}; RefPtr m_key_frame_set {}; + + Optional m_last_css_animation_play_state; }; } diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp index 0496ee7d5c4..e2d88a1d537 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp @@ -1410,11 +1410,7 @@ void StyleComputer::collect_animation_into(DOM::Element& element, Optional(*animation.effect()); @@ -1472,13 +1468,16 @@ static void apply_animation_properties(DOM::Document& document, StyleProperties& effect.set_fill_mode(Animations::css_fill_mode_to_bindings_fill_mode(fill_mode)); effect.set_playback_direction(Animations::css_animation_direction_to_bindings_playback_direction(direction)); - // If this is a new animation, we always want to play it - if (play_state == CSS::AnimationPlayState::Running && (animation_is_new == AnimationIsNew::Yes || animation.play_state() == Bindings::AnimationPlayState::Paused)) { - HTML::TemporaryExecutionContext context(document.relevant_settings_object()); - animation.play().release_value_but_fixme_should_propagate_errors(); - } else if (play_state == CSS::AnimationPlayState::Paused && animation.play_state() != Bindings::AnimationPlayState::Paused) { - HTML::TemporaryExecutionContext context(document.relevant_settings_object()); - animation.pause().release_value_but_fixme_should_propagate_errors(); + if (play_state != effect.last_css_animation_play_state()) { + if (play_state == CSS::AnimationPlayState::Running && animation.play_state() == Bindings::AnimationPlayState::Paused) { + HTML::TemporaryExecutionContext context(document.relevant_settings_object()); + animation.play().release_value_but_fixme_should_propagate_errors(); + } else if (play_state == CSS::AnimationPlayState::Paused && animation.play_state() != Bindings::AnimationPlayState::Paused) { + HTML::TemporaryExecutionContext context(document.relevant_settings_object()); + animation.pause().release_value_but_fixme_should_propagate_errors(); + } + + effect.set_last_css_animation_play_state(play_state); } } @@ -1559,7 +1558,7 @@ void StyleComputer::compute_cascaded_values(StyleProperties& style, DOM::Element animation->set_timeline(m_document->timeline()); animation->set_owning_element(element); animation->set_effect(effect); - apply_animation_properties(m_document, style, animation, AnimationIsNew::Yes); + apply_animation_properties(m_document, style, animation); if (pseudo_element.has_value()) effect->set_pseudo_element(Selector::PseudoElement { pseudo_element.value() }); @@ -1569,9 +1568,12 @@ void StyleComputer::compute_cascaded_values(StyleProperties& style, DOM::Element effect->set_target(&element); element.set_cached_animation_name_animation(animation); + + HTML::TemporaryExecutionContext context(m_document->relevant_settings_object()); + animation->play().release_value_but_fixme_should_propagate_errors(); } else { // The animation hasn't changed, but some properties of the animation may have - apply_animation_properties(m_document, style, *element.cached_animation_name_animation(), AnimationIsNew::No); + apply_animation_properties(m_document, style, *element.cached_animation_name_animation()); } } } else {