diff --git a/components/style/animation.rs b/components/style/animation.rs index 4576b91ef57..78b15d22cfb 100644 --- a/components/style/animation.rs +++ b/components/style/animation.rs @@ -483,7 +483,7 @@ impl Animation { // Update the next iteration direction if applicable. // TODO(mrobinson): The duration might now be wrong for floating point iteration counts. - self.started_at += self.duration + self.delay; + self.started_at += self.duration; match self.direction { AnimationDirection::Alternate | AnimationDirection::AlternateReverse => { self.current_direction = match self.current_direction { diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json index b4444f14352..7923f209acb 100644 --- a/tests/wpt/mozilla/meta/MANIFEST.json +++ b/tests/wpt/mozilla/meta/MANIFEST.json @@ -12866,6 +12866,13 @@ }, "css": { "animations": { + "animation-delay.html": [ + "0d2053a9134d8ff0ade7b5dc37ecfce305557c44", + [ + null, + {} + ] + ], "animation-events.html": [ "0975aa64ec47ca4b4c8fc1e0a40414a51719ad67", [ @@ -12876,7 +12883,7 @@ ] ], "animation-fill-mode.html": [ - "4cfaab9fbce0adccd83f592935e63fa8ff58a1cf", + "9602ec9f0e0eb1f6efcc2e7bd95181ef65339bae", [ null, {} diff --git a/tests/wpt/mozilla/tests/css/animations/animation-delay.html b/tests/wpt/mozilla/tests/css/animations/animation-delay.html new file mode 100644 index 00000000000..0d2053a9134 --- /dev/null +++ b/tests/wpt/mozilla/tests/css/animations/animation-delay.html @@ -0,0 +1,91 @@ + + +Animation test: Automated test for animation-fill-mode. + + + + + + + diff --git a/tests/wpt/mozilla/tests/css/animations/animation-fill-mode.html b/tests/wpt/mozilla/tests/css/animations/animation-fill-mode.html index 4cfaab9fbce..9602ec9f0e0 100644 --- a/tests/wpt/mozilla/tests/css/animations/animation-fill-mode.html +++ b/tests/wpt/mozilla/tests/css/animations/animation-fill-mode.html @@ -36,9 +36,14 @@ function setAndTriggerAnimationOnElement(fillMode, direction = "normal", iterati return element; } -function runThroughAnimation(testBinding, element) { - testBinding.advanceClock(1000); - assert_equals(getComputedStyle(element).getPropertyValue("width"), "0px"); +function runThroughAnimation(testBinding, element, waitForDelay = true) { + // If this is the first iteration, then we should wait for the delay and + // verify that the animation has started. Otherwise the animation will start + // immediately. + if (waitForDelay) { + testBinding.advanceClock(1000); + assert_equals(getComputedStyle(element).getPropertyValue("width"), "0px"); + } testBinding.advanceClock(500); assert_equals(getComputedStyle(element).getPropertyValue("width"), "250px"); @@ -107,8 +112,8 @@ test(function() { assert_equals(getComputedStyle(div).getPropertyValue("width"), "0px"); runThroughAnimation(testBinding, div); - runThroughAnimation(testBinding, div); - runThroughAnimation(testBinding, div); + runThroughAnimation(testBinding, div, false); + runThroughAnimation(testBinding, div, false); testBinding.advanceClock(1000); assert_equals(getComputedStyle(div).getPropertyValue("width"), "500px"); }, "animation-fill-mode: both on animation with multiple iterations");