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");