Skip to content

Commit

Permalink
animations: Don't apply animation delay to every iteration
Browse files Browse the repository at this point in the history
The delay should only be applied to the animation before the first
iteration.
  • Loading branch information
mrobinson committed Jun 18, 2020
1 parent 6d9b2ee commit f921641
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 7 deletions.
2 changes: 1 addition & 1 deletion components/style/animation.rs
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
9 changes: 8 additions & 1 deletion tests/wpt/mozilla/meta/MANIFEST.json
Original file line number Diff line number Diff line change
Expand Up @@ -12866,6 +12866,13 @@
},
"css": {
"animations": {
"animation-delay.html": [
"0d2053a9134d8ff0ade7b5dc37ecfce305557c44",
[
null,
{}
]
],
"animation-events.html": [
"0975aa64ec47ca4b4c8fc1e0a40414a51719ad67",
[
Expand All @@ -12876,7 +12883,7 @@
]
],
"animation-fill-mode.html": [
"4cfaab9fbce0adccd83f592935e63fa8ff58a1cf",
"9602ec9f0e0eb1f6efcc2e7bd95181ef65339bae",
[
null,
{}
Expand Down
91 changes: 91 additions & 0 deletions tests/wpt/mozilla/tests/css/animations/animation-delay.html
Original file line number Diff line number Diff line change
@@ -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>
15 changes: 10 additions & 5 deletions tests/wpt/mozilla/tests/css/animations/animation-fill-mode.html
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -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");
Expand Down

0 comments on commit f921641

Please sign in to comment.