Stowage/ladybird
2
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-12-07 21:59:54 +00:00
Code Issues Projects Releases Packages Wiki Activity

LibWeb: Use correct play state for handling animations on display change

Browse source 
Previously we were doing a couple things wrong:
 - Using the cascaded rather than computed value (so we didn't support
   CSS-wide keywords)
 - Only supporting the case where we had one animation-play-state
This commit is contained in:
Callum Law 2025-11-12 23:01:04 +13:00 • committed by Sam Atkins
parent 1af0364cfc
commit 5371862d11
Notes: github-actions[bot] 2025-12-01 10:19:18 +00:00
3 changed files with 70 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

17
Libraries/LibWeb/DOM/Element.cpp
View file

@ -4213,19 +4213,14 @@ void Element::play_or_cancel_animations_after_display_property_change()
auto has_display_none_inclusive_ancestor = this->has_inclusive_ancestor_with_display_none();
auto play_or_cancel_depending_on_display = [&](HashMap<FlyString, GC::Ref<Animations::Animation>>& animations, Optional<CSS::PseudoElement> pseudo_element) {
auto play_or_cancel_depending_on_display = [&](HashMap<FlyString, GC::Ref<Animations::Animation>>& animations) {
for (auto& [_, animation] : animations) {
if (has_display_none_inclusive_ancestor) {
animation->cancel();
} else {
auto play_state { CSS::AnimationPlayState::Running };
if (auto play_state_property = cascaded_properties(pseudo_element)->property(CSS::PropertyID::AnimationPlayState);
play_state_property && play_state_property->is_keyword()) {
if (auto play_state_value = keyword_to_animation_play_state(
play_state_property->to_keyword());
play_state_value.has_value())
play_state = *play_state_value;
}
// NOTE: It is safe to assume this has a value as it is set when creating a CSS defined animation
auto play_state = animation->last_css_animation_play_state().value();
if (play_state == CSS::AnimationPlayState::Running) {
HTML::TemporaryExecutionContext context(realm());
animation->play().release_value_but_fixme_should_propagate_errors();
@ -4237,11 +4232,11 @@ void Element::play_or_cancel_animations_after_display_property_change()
}
};
play_or_cancel_depending_on_display(*css_defined_animations({}), {});
play_or_cancel_depending_on_display(*css_defined_animations({}));
for (auto i = 0; i < to_underlying(CSS::PseudoElement::KnownPseudoElementCount); i++) {
auto pseudo_element = static_cast<CSS::PseudoElement>(i);
play_or_cancel_depending_on_display(*css_defined_animations(pseudo_element), pseudo_element);
play_or_cancel_depending_on_display(*css_defined_animations(pseudo_element));
}
}

3
Tests/LibWeb/Text/expected/css/atypical-play-state-property-on-display-property-change.txt Normal file
View file

@ -0,0 +1,3 @@
foo: PASS!
bar: PASS!
baz: PASS!

61
Tests/LibWeb/Text/input/css/atypical-play-state-property-on-display-property-change.html Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<style>
@keyframes anim {
from {
left: 0;
}
to {
left: 100px;
}
}
.test {
display: none;
}
#foo-parent {
animation-play-state: paused;
}
#foo {
animation: 1s anim;
animation-play-state: inherit;
}
#bar {
animation: invalid-anim, 1s anim paused;
}
#baz {
--paused: paused;
animation: 1s anim;
animation-play-state: var(--paused);
}
</style>
<div id="foo-parent"><div id="foo" class="test"></div></div>
<div id="bar" class="test"></div>
<div id="baz" class="test"></div>
<script src="../include.js"></script>
<script>
test(() => {
for (const element of document.getElementsByClassName("test")) {
const id = element.id;
element.style.display = "block";
const animations = element.getAnimations();
if (animations.length != 1) {
println(id + ": FAIL! Expected an animation");
continue;
}
if (animations[0].playState != "paused") {
println(id + ": FAIL! Expected animation to be paused");
continue;
}
println(id + ": PASS!");
}
});
</script>