Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 12:40:06 +01:00
Code Issues Projects Releases Packages Wiki Activity

Auto merge of #26970 - mrobinson:fix-animation-delay, r=jdm

Browse source 
animations: Don't apply animation delay to every iteration

The delay should only be applied to the animation before the first
iteration.

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] There are tests for these changes

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->
This commit is contained in:
bors-servo 2020-06-18 17:24:18 -04:00 • committed by GitHub
commit 60f4fedcbf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 110 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/style/animation.rs
View file

@ -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 {

9
tests/wpt/mozilla/meta/MANIFEST.json
View file

@ -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,
{}

91
tests/wpt/mozilla/tests/css/animations/animation-delay.html Normal file
View file

@ -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
tests/wpt/mozilla/tests/css/animations/animation-fill-mode.html
View file

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