diff --git a/Libraries/LibWeb/CSS/StyleComputer.cpp b/Libraries/LibWeb/CSS/StyleComputer.cpp index aa6a414f7f2..260dd496585 100644 --- a/Libraries/LibWeb/CSS/StyleComputer.cpp +++ b/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 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) diff --git a/Libraries/LibWeb/DOM/Element.cpp b/Libraries/LibWeb/DOM/Element.cpp index 02953b4a88f..0ffda5362e3 100644 --- a/Libraries/LibWeb/DOM/Element.cpp +++ b/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 pseudo_element) { if (has_display_none_inclusive_ancestor) { animation.cancel(); } else { - HTML::TemporaryExecutionContext context(realm()); - animation.play().release_value_but_fixme_should_propagate_errors(); + 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; + } + 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(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); } } diff --git a/Tests/LibWeb/Text/expected/css/initially-paused-animation.txt b/Tests/LibWeb/Text/expected/css/initially-paused-animation.txt new file mode 100644 index 00000000000..5af2a907385 --- /dev/null +++ b/Tests/LibWeb/Text/expected/css/initially-paused-animation.txt @@ -0,0 +1,2 @@ +paused +running diff --git a/Tests/LibWeb/Text/expected/css/showing-hidden-animation.txt b/Tests/LibWeb/Text/expected/css/showing-hidden-animation.txt new file mode 100644 index 00000000000..b903bd6726b --- /dev/null +++ b/Tests/LibWeb/Text/expected/css/showing-hidden-animation.txt @@ -0,0 +1,4 @@ +paused +running +running +paused diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/animations/background-image-interpolation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/animations/background-image-interpolation.txt index 048428fb706..67e4bc9d620 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/animations/background-image-interpolation.txt +++ b/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 -96 Fail +198 Pass +90 Fail Fail CSS Transitions: property from neutral to [url(../resources/green-100.png)] at (-0.3) should be [url(../resources/blue-100.png)] Fail CSS Transitions: property from neutral to [url(../resources/green-100.png)] at (0) should be [url(../resources/blue-100.png)] Fail CSS Transitions: property 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 from neut Pass CSS Transitions with transition: all: property 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 from neutral to [url(../resources/green-100.png)] at (1) should be [url(../resources/green-100.png)] Pass CSS Transitions with transition: all: property from neutral to [url(../resources/green-100.png)] at (1.5) should be [url(../resources/green-100.png)] -Fail CSS Animations: property from neutral to [url(../resources/green-100.png)] at (-0.3) should be [url(../resources/blue-100.png)] -Fail CSS Animations: property from neutral to [url(../resources/green-100.png)] at (0) should be [url(../resources/blue-100.png)] -Fail CSS Animations: property from neutral to [url(../resources/green-100.png)] at (0.3) should be [url(../resources/blue-100.png)] +Pass CSS Animations: property from neutral to [url(../resources/green-100.png)] at (-0.3) should be [url(../resources/blue-100.png)] +Pass CSS Animations: property from neutral to [url(../resources/green-100.png)] at (0) should be [url(../resources/blue-100.png)] +Pass CSS Animations: property from neutral to [url(../resources/green-100.png)] at (0.3) should be [url(../resources/blue-100.png)] Pass CSS Animations: property from neutral to [url(../resources/green-100.png)] at (0.6) should be [url(../resources/green-100.png)] Pass CSS Animations: property from neutral to [url(../resources/green-100.png)] at (1) should be [url(../resources/green-100.png)] Pass CSS Animations: property from neutral to [url(../resources/green-100.png)] at (1.5) should be [url(../resources/green-100.png)] -Fail Web Animations: property from neutral to [url(../resources/green-100.png)] at (-0.3) should be [url(../resources/blue-100.png)] -Fail Web Animations: property from neutral to [url(../resources/green-100.png)] at (0) should be [url(../resources/blue-100.png)] -Fail Web Animations: property from neutral to [url(../resources/green-100.png)] at (0.3) should be [url(../resources/blue-100.png)] +Pass Web Animations: property from neutral to [url(../resources/green-100.png)] at (-0.3) should be [url(../resources/blue-100.png)] +Pass Web Animations: property from neutral to [url(../resources/green-100.png)] at (0) should be [url(../resources/blue-100.png)] +Pass Web Animations: property from neutral to [url(../resources/green-100.png)] at (0.3) should be [url(../resources/blue-100.png)] Pass Web Animations: property from neutral to [url(../resources/green-100.png)] at (0.6) should be [url(../resources/green-100.png)] Pass Web Animations: property from neutral to [url(../resources/green-100.png)] at (1) should be [url(../resources/green-100.png)] Pass Web Animations: property from neutral to [url(../resources/green-100.png)] at (1.5) should be [url(../resources/green-100.png)] diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/animations/border-radius-interpolation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/animations/border-radius-interpolation.txt index bf99980b841..873381e3a28 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/animations/border-radius-interpolation.txt +++ b/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 -148 Fail +50 Pass +146 Fail Fail CSS Transitions: property 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 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 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 fro Pass CSS Transitions with transition: all: property from neutral to [20px] at (1) should be [20px] Fail CSS Transitions with transition: all: property from neutral to [20px] at (1.5) should be [25px] Fail CSS Animations: property from neutral to [20px] at (-0.3) should be [7px] -Fail CSS Animations: property from neutral to [20px] at (0) should be [10px] +Pass CSS Animations: property from neutral to [20px] at (0) should be [10px] Fail CSS Animations: property from neutral to [20px] at (0.3) should be [13px] Fail CSS Animations: property from neutral to [20px] at (0.6) should be [16px] Pass CSS Animations: property from neutral to [20px] at (1) should be [20px] Fail CSS Animations: property from neutral to [20px] at (1.5) should be [25px] Fail Web Animations: property from neutral to [20px] at (-0.3) should be [7px] -Fail Web Animations: property from neutral to [20px] at (0) should be [10px] +Pass Web Animations: property from neutral to [20px] at (0) should be [10px] Fail Web Animations: property from neutral to [20px] at (0.3) should be [13px] Fail Web Animations: property from neutral to [20px] at (0.6) should be [16px] Pass Web Animations: property from neutral to [20px] at (1) should be [20px] diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-masking/animations/clip-path-interpolation-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-masking/animations/clip-path-interpolation-002.txt index 0f55ce32a6f..7a2d2fae91f 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-masking/animations/clip-path-interpolation-002.txt +++ b/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 -178 Fail +544 Pass +176 Fail Fail CSS Transitions: property from neutral to [inset(20px)] at (-0.3) should be [inset(7px)] Fail CSS Transitions: property from neutral to [inset(20px)] at (0) should be [inset(10px)] Fail CSS Transitions: property from neutral to [inset(20px)] at (0.3) should be [inset(13px)] @@ -17,13 +17,13 @@ Fail CSS Transitions with transition: all: property from neutral to Pass CSS Transitions with transition: all: property from neutral to [inset(20px)] at (1) should be [inset(20px)] Fail CSS Transitions with transition: all: property from neutral to [inset(20px)] at (1.5) should be [inset(25px)] Fail CSS Animations: property from neutral to [inset(20px)] at (-0.3) should be [inset(7px)] -Fail CSS Animations: property from neutral to [inset(20px)] at (0) should be [inset(10px)] +Pass CSS Animations: property from neutral to [inset(20px)] at (0) should be [inset(10px)] Fail CSS Animations: property from neutral to [inset(20px)] at (0.3) should be [inset(13px)] Fail CSS Animations: property from neutral to [inset(20px)] at (0.6) should be [inset(16px)] Pass CSS Animations: property from neutral to [inset(20px)] at (1) should be [inset(20px)] Fail CSS Animations: property from neutral to [inset(20px)] at (1.5) should be [inset(25px)] Fail Web Animations: property from neutral to [inset(20px)] at (-0.3) should be [inset(7px)] -Fail Web Animations: property from neutral to [inset(20px)] at (0) should be [inset(10px)] +Pass Web Animations: property from neutral to [inset(20px)] at (0) should be [inset(10px)] Fail Web Animations: property from neutral to [inset(20px)] at (0.3) should be [inset(13px)] Fail Web Animations: property from neutral to [inset(20px)] at (0.6) should be [inset(16px)] Pass Web Animations: property from neutral to [inset(20px)] at (1) should be [inset(20px)] diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/animations/z-index-interpolation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/animations/z-index-interpolation.txt index bea6d21ec5f..5ff7085b8ab 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/animations/z-index-interpolation.txt +++ b/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 -46 Fail +212 Pass +38 Fail Pass CSS Transitions: property from neutral to [5] at (-0.3) should be [-4] Pass CSS Transitions: property from neutral to [5] at (0) should be [-2] Pass CSS Transitions: property from neutral to [5] at (0.3) should be [0] @@ -16,16 +16,16 @@ Fail CSS Transitions with transition: all: property from neutral to [5 Fail CSS Transitions with transition: all: property from neutral to [5] at (0.6) should be [2] Pass CSS Transitions with transition: all: property from neutral to [5] at (1) should be [5] Fail CSS Transitions with transition: all: property from neutral to [5] at (1.5) should be [9] -Fail CSS Animations: property from neutral to [5] at (-0.3) should be [-4] -Fail CSS Animations: property from neutral to [5] at (0) should be [-2] -Fail CSS Animations: property from neutral to [5] at (0.3) should be [0] -Fail CSS Animations: property from neutral to [5] at (0.6) should be [2] +Pass CSS Animations: property from neutral to [5] at (-0.3) should be [-4] +Pass CSS Animations: property from neutral to [5] at (0) should be [-2] +Pass CSS Animations: property from neutral to [5] at (0.3) should be [0] +Pass CSS Animations: property from neutral to [5] at (0.6) should be [2] Pass CSS Animations: property from neutral to [5] at (1) should be [5] Fail CSS Animations: property from neutral to [5] at (1.5) should be [9] -Fail Web Animations: property from neutral to [5] at (-0.3) should be [-4] -Fail Web Animations: property from neutral to [5] at (0) should be [-2] -Fail Web Animations: property from neutral to [5] at (0.3) should be [0] -Fail Web Animations: property from neutral to [5] at (0.6) should be [2] +Pass Web Animations: property from neutral to [5] at (-0.3) should be [-4] +Pass Web Animations: property from neutral to [5] at (0) should be [-2] +Pass Web Animations: property from neutral to [5] at (0.3) should be [0] +Pass Web Animations: property from neutral to [5] at (0.6) should be [2] Pass Web Animations: property from neutral to [5] at (1) should be [5] Fail Web Animations: property from neutral to [5] at (1.5) should be [9] Pass CSS Transitions with transition-behavior:allow-discrete: property from [initial] to [5] at (-0.3) should be [initial] diff --git a/Tests/LibWeb/Text/input/WebAnimations/misc/animation-events-basic.html b/Tests/LibWeb/Text/input/WebAnimations/misc/animation-events-basic.html index b0ccd2dc6c4..0256477c285 100644 --- a/Tests/LibWeb/Text/input/WebAnimations/misc/animation-events-basic.html +++ b/Tests/LibWeb/Text/input/WebAnimations/misc/animation-events-basic.html @@ -41,6 +41,7 @@ div.style.display = "none"; done(); }); + div.style.animationPlayState = "running"; }); diff --git a/Tests/LibWeb/Text/input/css/initially-paused-animation.html b/Tests/LibWeb/Text/input/css/initially-paused-animation.html new file mode 100644 index 00000000000..5da6d2dfca3 --- /dev/null +++ b/Tests/LibWeb/Text/input/css/initially-paused-animation.html @@ -0,0 +1,32 @@ + + + + +
+ diff --git a/Tests/LibWeb/Text/input/css/showing-hidden-animation.html b/Tests/LibWeb/Text/input/css/showing-hidden-animation.html new file mode 100644 index 00000000000..29bfec466c2 --- /dev/null +++ b/Tests/LibWeb/Text/input/css/showing-hidden-animation.html @@ -0,0 +1,59 @@ + + + + + + +