LibWeb: Don't deassociate animations when deregistering transitions

Also renames the `clear_transitions` function to clarify this doesn't
affect the associated transition animations.

This fixes an issue where transitions weren't being cancelled when the
relevant transition-property entry was no longer present
This commit is contained in:
Callum Law 2025-11-18 16:24:40 +13:00 committed by Jelle Raaijmakers
parent b262902b02
commit 025274cd86
Notes: github-actions[bot] 2025-11-23 08:44:52 +00:00
5 changed files with 30 additions and 4 deletions

View file

@ -224,14 +224,13 @@ void Animatable::remove_transition(Optional<CSS::PseudoElement> pseudo_element,
transition.associated_transitions.remove(property_id);
}
void Animatable::clear_transitions(Optional<CSS::PseudoElement> pseudo_element)
void Animatable::clear_registered_transitions(Optional<CSS::PseudoElement> pseudo_element)
{
auto maybe_transition = ensure_transition(pseudo_element);
if (!maybe_transition)
return;
auto& transition = *maybe_transition;
transition.associated_transitions.clear();
transition.transition_attribute_indices.clear();
transition.transition_attributes.clear();
}

View file

@ -68,7 +68,7 @@ public:
void remove_transition(Optional<CSS::PseudoElement>, CSS::PropertyID);
Vector<CSS::PropertyID> property_ids_with_existing_transitions(Optional<CSS::PseudoElement>) const;
GC::Ptr<CSS::CSSTransition> property_transition(Optional<CSS::PseudoElement>, CSS::PropertyID) const;
void clear_transitions(Optional<CSS::PseudoElement>);
void clear_registered_transitions(Optional<CSS::PseudoElement>);
void remove_animations_from_timeline();

View file

@ -1232,7 +1232,7 @@ static void compute_transitioned_properties(ComputedProperties const& style, DOM
if (source_declaration == element.cached_transition_property_source(pseudo_element))
return;
// Reparse this transition property
element.clear_transitions(pseudo_element);
element.clear_registered_transitions(pseudo_element);
element.set_cached_transition_property_source(pseudo_element, *source_declaration);
auto coordinated_transition_list = style.assemble_coordinated_value_list(

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<style>
#foo {
transition: transform 100s;
}
</style>
<div id="foo"></div>
<script src="../include.js"></script>
<script>
test(() => {
// No animations to start with
println(document.getAnimations().length);
foo.style.transform = "rotate(90deg)";
// One animation when transition starts
println(document.getAnimations().length);
foo.style.transitionProperty = "none";
// No animations after transition is cancelled because relevant transition property no longer exists
println(document.getAnimations().length);
});
</script>