Skip to content

Commit e96338d

Browse files
Gingehgmta
Gingeh
authored and
gmta
committed
LibWeb: Don't play initially-paused animations
1 parent 6169e91 commit e96338d

File tree

11 files changed

+143
-37
lines changed

11 files changed

+143
-37
lines changed

‎Libraries/LibWeb/CSS/StyleComputer.cpp

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1281,7 +1281,7 @@ static void apply_animation_properties(DOM::Document& document, CascadedProperti
12811281
effect.set_playback_direction(Animations::css_animation_direction_to_bindings_playback_direction(direction));
12821282

12831283
if (play_state != effect.last_css_animation_play_state()) {
1284-
if (play_state == CSS::AnimationPlayState::Running && animation.play_state() == Bindings::AnimationPlayState::Paused) {
1284+
if (play_state == CSS::AnimationPlayState::Running && animation.play_state() != Bindings::AnimationPlayState::Running) {
12851285
HTML::TemporaryExecutionContext context(document.realm());
12861286
animation.play().release_value_but_fixme_should_propagate_errors();
12871287
} else if (play_state == CSS::AnimationPlayState::Paused && animation.play_state() != Bindings::AnimationPlayState::Paused) {
@@ -2655,11 +2655,6 @@ GC::Ref<ComputedProperties> StyleComputer::compute_properties(DOM::Element& elem
26552655

26562656
effect->set_target(&element);
26572657
element.set_cached_animation_name_animation(animation, pseudo_element);
2658-
2659-
if (!element.has_inclusive_ancestor_with_display_none()) {
2660-
HTML::TemporaryExecutionContext context(realm);
2661-
animation->play().release_value_but_fixme_should_propagate_errors();
2662-
}
26632658
} else {
26642659
// The animation hasn't changed, but some properties of the animation may have
26652660
if (auto animation = element.cached_animation_name_animation(pseudo_element); animation)

‎Libraries/LibWeb/DOM/Element.cpp

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3967,21 +3967,34 @@ void Element::play_or_cancel_animations_after_display_property_change()
39673967

39683968
auto has_display_none_inclusive_ancestor = this->has_inclusive_ancestor_with_display_none();
39693969

3970-
auto play_or_cancel_depending_on_display = [&](Animations::Animation& animation) {
3970+
auto play_or_cancel_depending_on_display = [&](Animations::Animation& animation, Optional<CSS::PseudoElement> pseudo_element) {
39713971
if (has_display_none_inclusive_ancestor) {
39723972
animation.cancel();
39733973
} else {
3974-
HTML::TemporaryExecutionContext context(realm());
3975-
animation.play().release_value_but_fixme_should_propagate_errors();
3974+
auto play_state { CSS::AnimationPlayState::Running };
3975+
if (auto play_state_property = cascaded_properties(pseudo_element)->property(CSS::PropertyID::AnimationPlayState);
3976+
play_state_property && play_state_property->is_keyword()) {
3977+
if (auto play_state_value = keyword_to_animation_play_state(
3978+
play_state_property->to_keyword());
3979+
play_state_value.has_value())
3980+
play_state = *play_state_value;
3981+
}
3982+
if (play_state == CSS::AnimationPlayState::Running) {
3983+
HTML::TemporaryExecutionContext context(realm());
3984+
animation.play().release_value_but_fixme_should_propagate_errors();
3985+
} else if (play_state == CSS::AnimationPlayState::Paused) {
3986+
HTML::TemporaryExecutionContext context(realm());
3987+
animation.pause().release_value_but_fixme_should_propagate_errors();
3988+
}
39763989
}
39773990
};
39783991

39793992
if (auto animation = cached_animation_name_animation({}))
3980-
play_or_cancel_depending_on_display(*animation);
3993+
play_or_cancel_depending_on_display(*animation, {});
39813994
for (auto i = 0; i < to_underlying(CSS::PseudoElement::KnownPseudoElementCount); i++) {
39823995
auto pseudo_element = static_cast<CSS::PseudoElement>(i);
39833996
if (auto animation = cached_animation_name_animation(pseudo_element))
3984-
play_or_cancel_depending_on_display(*animation);
3997+
play_or_cancel_depending_on_display(*animation, pseudo_element);
39853998
}
39863999
}
39874000

‎Tests/LibWeb/Text/expected/css/initially-paused-animation.txt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
paused
2+
running

‎Tests/LibWeb/Text/expected/css/showing-hidden-animation.txt

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
paused
2+
running
3+
running
4+
paused

‎Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/animations/background-image-interpolation.txt

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ Harness status: OK
22

33
Found 288 tests
44

5-
192 Pass
6-
96 Fail
5+
198 Pass
6+
90 Fail
77
Fail CSS Transitions: property <background-image> from neutral to [url(../resources/green-100.png)] at (-0.3) should be [url(../resources/blue-100.png)]
88
Fail CSS Transitions: property <background-image> from neutral to [url(../resources/green-100.png)] at (0) should be [url(../resources/blue-100.png)]
99
Fail CSS Transitions: property <background-image> from neutral to [url(../resources/green-100.png)] at (0.3) should be [url(../resources/blue-100.png)]
@@ -16,15 +16,15 @@ Fail CSS Transitions with transition: all: property <background-image> from neut
1616
Pass CSS Transitions with transition: all: property <background-image> from neutral to [url(../resources/green-100.png)] at (0.6) should be [url(../resources/green-100.png)]
1717
Pass CSS Transitions with transition: all: property <background-image> from neutral to [url(../resources/green-100.png)] at (1) should be [url(../resources/green-100.png)]
1818
Pass CSS Transitions with transition: all: property <background-image> from neutral to [url(../resources/green-100.png)] at (1.5) should be [url(../resources/green-100.png)]
19-
Fail CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (-0.3) should be [url(../resources/blue-100.png)]
20-
Fail CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0) should be [url(../resources/blue-100.png)]
21-
Fail CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0.3) should be [url(../resources/blue-100.png)]
19+
Pass CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (-0.3) should be [url(../resources/blue-100.png)]
20+
Pass CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0) should be [url(../resources/blue-100.png)]
21+
Pass CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0.3) should be [url(../resources/blue-100.png)]
2222
Pass CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0.6) should be [url(../resources/green-100.png)]
2323
Pass CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (1) should be [url(../resources/green-100.png)]
2424
Pass CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (1.5) should be [url(../resources/green-100.png)]
25-
Fail Web Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (-0.3) should be [url(../resources/blue-100.png)]
26-
Fail Web Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0) should be [url(../resources/blue-100.png)]
27-
Fail Web Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0.3) should be [url(../resources/blue-100.png)]
25+
Pass Web Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (-0.3) should be [url(../resources/blue-100.png)]
26+
Pass Web Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0) should be [url(../resources/blue-100.png)]
27+
Pass Web Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0.3) should be [url(../resources/blue-100.png)]
2828
Pass Web Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0.6) should be [url(../resources/green-100.png)]
2929
Pass Web Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (1) should be [url(../resources/green-100.png)]
3030
Pass Web Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (1.5) should be [url(../resources/green-100.png)]

‎Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/animations/border-radius-interpolation.txt

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ Harness status: OK
22

33
Found 196 tests
44

5-
48 Pass
6-
148 Fail
5+
50 Pass
6+
146 Fail
77
Fail CSS Transitions: property <border-radius> from [20px 40px 60px 80px / 120px 140px 160px 180px] to [30px 50px 70px 90px / 130px 150px 170px 190px] at (-0.3) should be [17px 37px 57px 77px / 117px 137px 157px 177px]
88
Fail CSS Transitions: property <border-radius> from [20px 40px 60px 80px / 120px 140px 160px 180px] to [30px 50px 70px 90px / 130px 150px 170px 190px] at (0) should be [20px 40px 60px 80px / 120px 140px 160px 180px]
99
Fail CSS Transitions: property <border-radius> from [20px 40px 60px 80px / 120px 140px 160px 180px] to [30px 50px 70px 90px / 130px 150px 170px 190px] at (0.3) should be [23px 43px 63px 83px / 123px 143px 163px 183px]
@@ -41,13 +41,13 @@ Fail CSS Transitions with transition: all: property <border-top-left-radius> fro
4141
Pass CSS Transitions with transition: all: property <border-top-left-radius> from neutral to [20px] at (1) should be [20px]
4242
Fail CSS Transitions with transition: all: property <border-top-left-radius> from neutral to [20px] at (1.5) should be [25px]
4343
Fail CSS Animations: property <border-top-left-radius> from neutral to [20px] at (-0.3) should be [7px]
44-
Fail CSS Animations: property <border-top-left-radius> from neutral to [20px] at (0) should be [10px]
44+
Pass CSS Animations: property <border-top-left-radius> from neutral to [20px] at (0) should be [10px]
4545
Fail CSS Animations: property <border-top-left-radius> from neutral to [20px] at (0.3) should be [13px]
4646
Fail CSS Animations: property <border-top-left-radius> from neutral to [20px] at (0.6) should be [16px]
4747
Pass CSS Animations: property <border-top-left-radius> from neutral to [20px] at (1) should be [20px]
4848
Fail CSS Animations: property <border-top-left-radius> from neutral to [20px] at (1.5) should be [25px]
4949
Fail Web Animations: property <border-top-left-radius> from neutral to [20px] at (-0.3) should be [7px]
50-
Fail Web Animations: property <border-top-left-radius> from neutral to [20px] at (0) should be [10px]
50+
Pass Web Animations: property <border-top-left-radius> from neutral to [20px] at (0) should be [10px]
5151
Fail Web Animations: property <border-top-left-radius> from neutral to [20px] at (0.3) should be [13px]
5252
Fail Web Animations: property <border-top-left-radius> from neutral to [20px] at (0.6) should be [16px]
5353
Pass Web Animations: property <border-top-left-radius> from neutral to [20px] at (1) should be [20px]

‎Tests/LibWeb/Text/expected/wpt-import/css/css-masking/animations/clip-path-interpolation-002.txt

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ Harness status: OK
22

33
Found 720 tests
44

5-
542 Pass
6-
178 Fail
5+
544 Pass
6+
176 Fail
77
Fail CSS Transitions: property <clip-path> from neutral to [inset(20px)] at (-0.3) should be [inset(7px)]
88
Fail CSS Transitions: property <clip-path> from neutral to [inset(20px)] at (0) should be [inset(10px)]
99
Fail CSS Transitions: property <clip-path> from neutral to [inset(20px)] at (0.3) should be [inset(13px)]
@@ -17,13 +17,13 @@ Fail CSS Transitions with transition: all: property <clip-path> from neutral to
1717
Pass CSS Transitions with transition: all: property <clip-path> from neutral to [inset(20px)] at (1) should be [inset(20px)]
1818
Fail CSS Transitions with transition: all: property <clip-path> from neutral to [inset(20px)] at (1.5) should be [inset(25px)]
1919
Fail CSS Animations: property <clip-path> from neutral to [inset(20px)] at (-0.3) should be [inset(7px)]
20-
Fail CSS Animations: property <clip-path> from neutral to [inset(20px)] at (0) should be [inset(10px)]
20+
Pass CSS Animations: property <clip-path> from neutral to [inset(20px)] at (0) should be [inset(10px)]
2121
Fail CSS Animations: property <clip-path> from neutral to [inset(20px)] at (0.3) should be [inset(13px)]
2222
Fail CSS Animations: property <clip-path> from neutral to [inset(20px)] at (0.6) should be [inset(16px)]
2323
Pass CSS Animations: property <clip-path> from neutral to [inset(20px)] at (1) should be [inset(20px)]
2424
Fail CSS Animations: property <clip-path> from neutral to [inset(20px)] at (1.5) should be [inset(25px)]
2525
Fail Web Animations: property <clip-path> from neutral to [inset(20px)] at (-0.3) should be [inset(7px)]
26-
Fail Web Animations: property <clip-path> from neutral to [inset(20px)] at (0) should be [inset(10px)]
26+
Pass Web Animations: property <clip-path> from neutral to [inset(20px)] at (0) should be [inset(10px)]
2727
Fail Web Animations: property <clip-path> from neutral to [inset(20px)] at (0.3) should be [inset(13px)]
2828
Fail Web Animations: property <clip-path> from neutral to [inset(20px)] at (0.6) should be [inset(16px)]
2929
Pass Web Animations: property <clip-path> from neutral to [inset(20px)] at (1) should be [inset(20px)]

‎Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/animations/z-index-interpolation.txt

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ Harness status: OK
22

33
Found 250 tests
44

5-
204 Pass
6-
46 Fail
5+
212 Pass
6+
38 Fail
77
Pass CSS Transitions: property <z-index> from neutral to [5] at (-0.3) should be [-4]
88
Pass CSS Transitions: property <z-index> from neutral to [5] at (0) should be [-2]
99
Pass CSS Transitions: property <z-index> from neutral to [5] at (0.3) should be [0]
@@ -16,16 +16,16 @@ Fail CSS Transitions with transition: all: property <z-index> from neutral to [5
1616
Fail CSS Transitions with transition: all: property <z-index> from neutral to [5] at (0.6) should be [2]
1717
Pass CSS Transitions with transition: all: property <z-index> from neutral to [5] at (1) should be [5]
1818
Fail CSS Transitions with transition: all: property <z-index> from neutral to [5] at (1.5) should be [9]
19-
Fail CSS Animations: property <z-index> from neutral to [5] at (-0.3) should be [-4]
20-
Fail CSS Animations: property <z-index> from neutral to [5] at (0) should be [-2]
21-
Fail CSS Animations: property <z-index> from neutral to [5] at (0.3) should be [0]
22-
Fail CSS Animations: property <z-index> from neutral to [5] at (0.6) should be [2]
19+
Pass CSS Animations: property <z-index> from neutral to [5] at (-0.3) should be [-4]
20+
Pass CSS Animations: property <z-index> from neutral to [5] at (0) should be [-2]
21+
Pass CSS Animations: property <z-index> from neutral to [5] at (0.3) should be [0]
22+
Pass CSS Animations: property <z-index> from neutral to [5] at (0.6) should be [2]
2323
Pass CSS Animations: property <z-index> from neutral to [5] at (1) should be [5]
2424
Fail CSS Animations: property <z-index> from neutral to [5] at (1.5) should be [9]
25-
Fail Web Animations: property <z-index> from neutral to [5] at (-0.3) should be [-4]
26-
Fail Web Animations: property <z-index> from neutral to [5] at (0) should be [-2]
27-
Fail Web Animations: property <z-index> from neutral to [5] at (0.3) should be [0]
28-
Fail Web Animations: property <z-index> from neutral to [5] at (0.6) should be [2]
25+
Pass Web Animations: property <z-index> from neutral to [5] at (-0.3) should be [-4]
26+
Pass Web Animations: property <z-index> from neutral to [5] at (0) should be [-2]
27+
Pass Web Animations: property <z-index> from neutral to [5] at (0.3) should be [0]
28+
Pass Web Animations: property <z-index> from neutral to [5] at (0.6) should be [2]
2929
Pass Web Animations: property <z-index> from neutral to [5] at (1) should be [5]
3030
Fail Web Animations: property <z-index> from neutral to [5] at (1.5) should be [9]
3131
Pass CSS Transitions with transition-behavior:allow-discrete: property <z-index> from [initial] to [5] at (-0.3) should be [initial]

‎Tests/LibWeb/Text/input/WebAnimations/misc/animation-events-basic.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
div.style.display = "none";
4242
done();
4343
});
44+
div.style.animationPlayState = "running";
4445
});
4546
</script>
4647
</body>

‎Tests/LibWeb/Text/input/css/initially-paused-animation.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<style>
3+
div {
4+
width: 100px;
5+
height: 100px;
6+
background-color: #3498db;
7+
position: relative;
8+
animation: moveRight 0.1s linear;
9+
animation-play-state: paused;
10+
}
11+
12+
@keyframes moveRight {
13+
0% {
14+
left: 0;
15+
}
16+
17+
100% {
18+
left: 100px;
19+
}
20+
}
21+
</style>
22+
<body>
23+
<script src="../include.js"></script>
24+
<div></div>
25+
<script>
26+
test(() => {
27+
let animation = document.querySelector("div").getAnimations()[0];
28+
println(animation.playState);
29+
animation.play();
30+
println(animation.playState);
31+
});
32+
</script>

0 commit comments

Comments
 (0)