animations: Don't apply animation delay to every iteration

The delay should only be applied to the animation before the first iteration.
servo · Jun 18, 2020 · f921641 · f921641
1 parent 6d9b2ee
commit f921641
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 7 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,91 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Animation test: Automated test for animation-fill-mode.</title>
+<style>
+  .target {
+    width: 50px;
+    height: 50px;
+    background: red;
+  }
+
+  @keyframes width-animation {
+    from { width: 0px; }
+    to { width: 500px; }
+  }
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<body></body>
+
+<script>
+
+test(function() {
+  let testBinding = new window.TestBinding();
+  let element = document.createElement("div");
+  element.className = "target";
+
+  element.style.animationDelay = "1s";
+  element.style.animationDuration = "1s";
+  element.style.animationIterationCount = 1;
+  element.style.animationName = "width-animation";
+  element.style.animationTimingFunction = "linear";
+
+  document.body.appendChild(element);
+  assert_equals(getComputedStyle(element).getPropertyValue("width"), "50px");
+
+  testBinding.advanceClock(500);
+  assert_equals(getComputedStyle(element).getPropertyValue("width"), "50px");
+
+  testBinding.advanceClock(500);
+  assert_equals(getComputedStyle(element).getPropertyValue("width"), "0px");
+
+  testBinding.advanceClock(500);
+  assert_equals(getComputedStyle(element).getPropertyValue("width"), "250px");
+
+  testBinding.advanceClock(500);
+  assert_equals(getComputedStyle(element).getPropertyValue("width"), "500px");
+
+  testBinding.advanceClock(500);
+  assert_equals(getComputedStyle(element).getPropertyValue("width"), "50px");
+}, "animation-delay should function correctly");
+
+test(function() {
+  let testBinding = new window.TestBinding();
+  let element = document.createElement("div");
+  element.className = "target";
+
+  element.style.animationDelay = "3s";
+  element.style.animationDuration = "1s";
+  element.style.animationIterationCount = 2;
+  element.style.animationName = "width-animation";
+  element.style.animationTimingFunction = "linear";
+
+  document.body.appendChild(element);
+  assert_equals(getComputedStyle(element).getPropertyValue("width"), "50px");
+
+  testBinding.advanceClock(500);
+  assert_equals(getComputedStyle(element).getPropertyValue("width"), "50px");
+
+  testBinding.advanceClock(2500);
+  assert_equals(getComputedStyle(element).getPropertyValue("width"), "0px");
+
+  testBinding.advanceClock(500);
+  assert_equals(getComputedStyle(element).getPropertyValue("width"), "250px");
+
+  testBinding.advanceClock(500);
+  assert_equals(getComputedStyle(element).getPropertyValue("width"), "500px");
+
+  // There should not be another delay here.
+  testBinding.advanceClock(500);
+  assert_equals(getComputedStyle(element).getPropertyValue("width"), "250px");
+
+  testBinding.advanceClock(500);
+  assert_equals(getComputedStyle(element).getPropertyValue("width"), "500px");
+
+  testBinding.advanceClock(500);
+  assert_equals(getComputedStyle(element).getPropertyValue("width"), "50px");
+}, "animation-delay should function correctly with multiple iterations");
+
+</script>
diff --git 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 @@
   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 @@
 
   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");