LibWeb: Don't play initially-paused animations

Author: https://github.com/Gingeh
Commit: e96338dd63
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5114
Reviewed-by: https://github.com/gmta ✅
Reviewed-by: https://github.com/tcl3

Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -1281,7 +1281,7 @@ static void apply_animation_properties(DOM::Document& document, CascadedProperti
     effect.set_playback_direction(Animations::css_animation_direction_to_bindings_playback_direction(direction));
 
     if (play_state != effect.last_css_animation_play_state()) {
-        if (play_state == CSS::AnimationPlayState::Running && animation.play_state() == Bindings::AnimationPlayState::Paused) {
+        if (play_state == CSS::AnimationPlayState::Running && animation.play_state() != Bindings::AnimationPlayState::Running) {
             HTML::TemporaryExecutionContext context(document.realm());
             animation.play().release_value_but_fixme_should_propagate_errors();
         } 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
 
                 effect->set_target(&element);
                 element.set_cached_animation_name_animation(animation, pseudo_element);
-
-                if (!element.has_inclusive_ancestor_with_display_none()) {
-                    HTML::TemporaryExecutionContext context(realm);
-                    animation->play().release_value_but_fixme_should_propagate_errors();
-                }
             } else {
                 // The animation hasn't changed, but some properties of the animation may have
                 if (auto animation = element.cached_animation_name_animation(pseudo_element); animation)

Libraries/LibWeb/DOM/Element.cpp

@@ -3967,21 +3967,34 @@ 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 = [&](Animations::Animation& animation) {
+    auto play_or_cancel_depending_on_display = [&](Animations::Animation& animation, Optional<CSS::PseudoElement> pseudo_element) {
         if (has_display_none_inclusive_ancestor) {
             animation.cancel();
         } else {
-            HTML::TemporaryExecutionContext context(realm());
+            auto play_state { CSS::AnimationPlayState::Running };
-            animation.play().release_value_but_fixme_should_propagate_errors();
+            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;
+            }
+            if (play_state == CSS::AnimationPlayState::Running) {
+                HTML::TemporaryExecutionContext context(realm());
+                animation.play().release_value_but_fixme_should_propagate_errors();
+            } else if (play_state == CSS::AnimationPlayState::Paused) {
+                HTML::TemporaryExecutionContext context(realm());
+                animation.pause().release_value_but_fixme_should_propagate_errors();
+            }
         }
     };
 
     if (auto animation = cached_animation_name_animation({}))
-        play_or_cancel_depending_on_display(*animation);
+        play_or_cancel_depending_on_display(*animation, {});
     for (auto i = 0; i < to_underlying(CSS::PseudoElement::KnownPseudoElementCount); i++) {
         auto pseudo_element = static_cast<CSS::PseudoElement>(i);
         if (auto animation = cached_animation_name_animation(pseudo_element))
-            play_or_cancel_depending_on_display(*animation);
+            play_or_cancel_depending_on_display(*animation, pseudo_element);
     }
 }
 

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

@@ -0,0 +1,2 @@
+paused
+running

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

@@ -0,0 +1,4 @@
+paused
+running
+running
+paused

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

@@ -2,8 +2,8 @@ Harness status: OK
 
 Found 288 tests
 
-192 Pass
+198 Pass
-96 Fail
+90 Fail
 Fail	CSS Transitions: property <background-image> from neutral to [url(../resources/green-100.png)] at (-0.3) should be [url(../resources/blue-100.png)]
 Fail	CSS Transitions: property <background-image> from neutral to [url(../resources/green-100.png)] at (0) should be [url(../resources/blue-100.png)]
 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
 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)]
 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)]
 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)]
-Fail	CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (-0.3) should be [url(../resources/blue-100.png)]
+Pass	CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (-0.3) should be [url(../resources/blue-100.png)]
-Fail	CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0) should be [url(../resources/blue-100.png)]
+Pass	CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0) should be [url(../resources/blue-100.png)]
-Fail	CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0.3) should be [url(../resources/blue-100.png)]
+Pass	CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0.3) should be [url(../resources/blue-100.png)]
 Pass	CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0.6) should be [url(../resources/green-100.png)]
 Pass	CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (1) should be [url(../resources/green-100.png)]
 Pass	CSS Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (1.5) should be [url(../resources/green-100.png)]
-Fail	Web Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (-0.3) should be [url(../resources/blue-100.png)]
+Pass	Web Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (-0.3) should be [url(../resources/blue-100.png)]
-Fail	Web Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0) should be [url(../resources/blue-100.png)]
+Pass	Web Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0) should be [url(../resources/blue-100.png)]
-Fail	Web Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0.3) should be [url(../resources/blue-100.png)]
+Pass	Web Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0.3) should be [url(../resources/blue-100.png)]
 Pass	Web Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (0.6) should be [url(../resources/green-100.png)]
 Pass	Web Animations: property <background-image> from neutral to [url(../resources/green-100.png)] at (1) should be [url(../resources/green-100.png)]
 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

@@ -2,8 +2,8 @@ Harness status: OK
 
 Found 196 tests
 
-48 Pass
+50 Pass
-148 Fail
+146 Fail
 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]
 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]
 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
 Pass	CSS Transitions with transition: all: property <border-top-left-radius> from neutral to [20px] at (1) should be [20px]
 Fail	CSS Transitions with transition: all: property <border-top-left-radius> from neutral to [20px] at (1.5) should be [25px]
 Fail	CSS Animations: property <border-top-left-radius> from neutral to [20px] at (-0.3) should be [7px]
-Fail	CSS Animations: property <border-top-left-radius> from neutral to [20px] at (0) should be [10px]
+Pass	CSS Animations: property <border-top-left-radius> from neutral to [20px] at (0) should be [10px]
 Fail	CSS Animations: property <border-top-left-radius> from neutral to [20px] at (0.3) should be [13px]
 Fail	CSS Animations: property <border-top-left-radius> from neutral to [20px] at (0.6) should be [16px]
 Pass	CSS Animations: property <border-top-left-radius> from neutral to [20px] at (1) should be [20px]
 Fail	CSS Animations: property <border-top-left-radius> from neutral to [20px] at (1.5) should be [25px]
 Fail	Web Animations: property <border-top-left-radius> from neutral to [20px] at (-0.3) should be [7px]
-Fail	Web Animations: property <border-top-left-radius> from neutral to [20px] at (0) should be [10px]
+Pass	Web Animations: property <border-top-left-radius> from neutral to [20px] at (0) should be [10px]
 Fail	Web Animations: property <border-top-left-radius> from neutral to [20px] at (0.3) should be [13px]
 Fail	Web Animations: property <border-top-left-radius> from neutral to [20px] at (0.6) should be [16px]
 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

@@ -2,8 +2,8 @@ Harness status: OK
 
 Found 720 tests
 
-542 Pass
+544 Pass
-178 Fail
+176 Fail
 Fail	CSS Transitions: property <clip-path> from neutral to [inset(20px)] at (-0.3) should be [inset(7px)]
 Fail	CSS Transitions: property <clip-path> from neutral to [inset(20px)] at (0) should be [inset(10px)]
 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
 Pass	CSS Transitions with transition: all: property <clip-path> from neutral to [inset(20px)] at (1) should be [inset(20px)]
 Fail	CSS Transitions with transition: all: property <clip-path> from neutral to [inset(20px)] at (1.5) should be [inset(25px)]
 Fail	CSS Animations: property <clip-path> from neutral to [inset(20px)] at (-0.3) should be [inset(7px)]
-Fail	CSS Animations: property <clip-path> from neutral to [inset(20px)] at (0) should be [inset(10px)]
+Pass	CSS Animations: property <clip-path> from neutral to [inset(20px)] at (0) should be [inset(10px)]
 Fail	CSS Animations: property <clip-path> from neutral to [inset(20px)] at (0.3) should be [inset(13px)]
 Fail	CSS Animations: property <clip-path> from neutral to [inset(20px)] at (0.6) should be [inset(16px)]
 Pass	CSS Animations: property <clip-path> from neutral to [inset(20px)] at (1) should be [inset(20px)]
 Fail	CSS Animations: property <clip-path> from neutral to [inset(20px)] at (1.5) should be [inset(25px)]
 Fail	Web Animations: property <clip-path> from neutral to [inset(20px)] at (-0.3) should be [inset(7px)]
-Fail	Web Animations: property <clip-path> from neutral to [inset(20px)] at (0) should be [inset(10px)]
+Pass	Web Animations: property <clip-path> from neutral to [inset(20px)] at (0) should be [inset(10px)]
 Fail	Web Animations: property <clip-path> from neutral to [inset(20px)] at (0.3) should be [inset(13px)]
 Fail	Web Animations: property <clip-path> from neutral to [inset(20px)] at (0.6) should be [inset(16px)]
 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

@@ -2,8 +2,8 @@ Harness status: OK
 
 Found 250 tests
 
-204 Pass
+212 Pass
-46 Fail
+38 Fail
 Pass	CSS Transitions: property <z-index> from neutral to [5] at (-0.3) should be [-4]
 Pass	CSS Transitions: property <z-index> from neutral to [5] at (0) should be [-2]
 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
 Fail	CSS Transitions with transition: all: property <z-index> from neutral to [5] at (0.6) should be [2]
 Pass	CSS Transitions with transition: all: property <z-index> from neutral to [5] at (1) should be [5]
 Fail	CSS Transitions with transition: all: property <z-index> from neutral to [5] at (1.5) should be [9]
-Fail	CSS Animations: property <z-index> from neutral to [5] at (-0.3) should be [-4]
+Pass	CSS Animations: property <z-index> from neutral to [5] at (-0.3) should be [-4]
-Fail	CSS Animations: property <z-index> from neutral to [5] at (0) should be [-2]
+Pass	CSS Animations: property <z-index> from neutral to [5] at (0) should be [-2]
-Fail	CSS Animations: property <z-index> from neutral to [5] at (0.3) should be [0]
+Pass	CSS Animations: property <z-index> from neutral to [5] at (0.3) should be [0]
-Fail	CSS Animations: property <z-index> from neutral to [5] at (0.6) should be [2]
+Pass	CSS Animations: property <z-index> from neutral to [5] at (0.6) should be [2]
 Pass	CSS Animations: property <z-index> from neutral to [5] at (1) should be [5]
 Fail	CSS Animations: property <z-index> from neutral to [5] at (1.5) should be [9]
-Fail	Web Animations: property <z-index> from neutral to [5] at (-0.3) should be [-4]
+Pass	Web Animations: property <z-index> from neutral to [5] at (-0.3) should be [-4]
-Fail	Web Animations: property <z-index> from neutral to [5] at (0) should be [-2]
+Pass	Web Animations: property <z-index> from neutral to [5] at (0) should be [-2]
-Fail	Web Animations: property <z-index> from neutral to [5] at (0.3) should be [0]
+Pass	Web Animations: property <z-index> from neutral to [5] at (0.3) should be [0]
-Fail	Web Animations: property <z-index> from neutral to [5] at (0.6) should be [2]
+Pass	Web Animations: property <z-index> from neutral to [5] at (0.6) should be [2]
 Pass	Web Animations: property <z-index> from neutral to [5] at (1) should be [5]
 Fail	Web Animations: property <z-index> from neutral to [5] at (1.5) should be [9]
 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

@@ -41,6 +41,7 @@
             div.style.display = "none";
             done();
         });
+        div.style.animationPlayState = "running";
     });
 </script>
 </body>

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

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<style>
+    div {
+        width: 100px;
+        height: 100px;
+        background-color: #3498db;
+        position: relative;
+        animation: moveRight 0.1s linear;
+        animation-play-state: paused;
+    }
+
+    @keyframes moveRight {
+        0% {
+            left: 0;
+        }
+
+        100% {
+            left: 100px;
+        }
+    }
+</style>
+<body>
+<script src="../include.js"></script>
+<div></div>
+<script>
+    test(() => {
+        let animation = document.querySelector("div").getAnimations()[0];
+        println(animation.playState);
+        animation.play();
+        println(animation.playState);
+    });
+</script>

Tests/LibWeb/Text/input/css/showing-hidden-animation.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<style>
+    #paused, #running, #pseudo::before, #pseudo::after {
+        width: 100px;
+        height: 100px;
+        background-color: #3498db;
+        position: relative;
+        animation: moveRight 1s linear;
+        animation-iteration-count: infinite;
+    }
+
+    #paused {
+        animation-play-state: paused;
+    }
+
+    #running {
+        animation-play-state: running;
+    }
+
+    #pseudo::before {
+        content: 'running';
+        animation-play-state: running;
+    }
+
+    #pseudo::after {
+        content: 'paused';
+        animation-play-state: paused;
+    }
+
+    @keyframes moveRight {
+        0% {
+            left: 0;
+        }
+
+        100% {
+            left: 100px;
+        }
+    }
+</style>
+
+<body>
+    <script src="../include.js"></script>
+    <div id="outer" style="display: none;">
+        <div id="paused"></div>
+        <div id="running"></div>
+        <div id="pseudo"></div>
+    </div>
+    <script>
+        asyncTest((done) => {
+            setTimeout(() => {
+                document.getElementById("outer").style.display = "block";
+                println(document.getElementById("paused").getAnimations()[0].playState);
+                println(document.getElementById("running").getAnimations()[0].playState);
+                println(document.getElementById("pseudo").getAnimations()[0].playState);
+                println(document.getElementById("pseudo").getAnimations()[1].playState);
+                done();
+            }, 100);
+        });
+    </script>