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

Implement animation-fill-mode

Browse source 
Fixes #26460.
This commit is contained in:
Martin Robinson 2020-05-11 19:07:24 +02:00
parent 0a00ea3db3
commit 183f15d5aa
16 changed files with 241 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

2
tests/wpt/metadata/css/css-animations/animation-delay-010.html.ini
View file

@ -1,3 +1,3 @@
[animation-delay-010.html]
bug: https://github.com/servo/servo/issues/17335
expected: TIMEOUT
expected: FAIL

3
tests/wpt/metadata/css/css-variables/variable-animation-substitute-into-keyframe-shorthand.html.ini
View file

@ -1,5 +1,2 @@
[variable-animation-substitute-into-keyframe-shorthand.html]
bug: https://github.com/servo/servo/issues/21564
[Verify border-bottom-color before animation]
expected: FAIL

3
tests/wpt/metadata/css/css-variables/variable-animation-substitute-into-keyframe.html.ini
View file

@ -1,5 +1,2 @@
[variable-animation-substitute-into-keyframe.html]
bug: https://github.com/servo/servo/issues/21564
[Verify color before animation]
expected: FAIL

3
tests/wpt/metadata/css/css-variables/variable-animation-substitute-within-keyframe-fallback.html.ini
View file

@ -1,8 +1,5 @@
[variable-animation-substitute-within-keyframe-fallback.html]
bug: https://github.com/servo/servo/issues/21564
[Verify color before animation]
expected: FAIL
[Verify color after animation]
expected: FAIL

3
tests/wpt/metadata/css/css-variables/variable-animation-substitute-within-keyframe-multiple.html.ini
View file

@ -1,8 +1,5 @@
[variable-animation-substitute-within-keyframe-multiple.html]
bug: https://github.com/servo/servo/issues/21564
[Verify color before animation]
expected: FAIL
[Verify color after animation]
expected: FAIL

3
tests/wpt/metadata/css/css-variables/variable-animation-substitute-within-keyframe.html.ini
View file

@ -1,8 +1,5 @@
[variable-animation-substitute-within-keyframe.html]
bug: https://github.com/servo/servo/issues/21564
[Verify color before animation]
expected: FAIL
[Verify color after animation]
expected: FAIL

4
tests/wpt/metadata/css/cssom/getComputedStyle-animations-replaced-into-ib-split.html.ini
View file

@ -1,4 +0,0 @@
[getComputedStyle-animations-replaced-into-ib-split.html]
[getComputedStyle() should return animation styles for nodes just inserted into the document, even if they're in an IB-split]
expected: FAIL

2
tests/wpt/mozilla/meta-layout-2020/css/animations/__dir__.ini Normal file
View file

@ -0,0 +1,2 @@
prefs: ["layout.animations.test.enabled:true",
"dom.testbinding.enabled:true"]

16
tests/wpt/mozilla/meta-layout-2020/css/animations/animation-fill-mode.html.ini Normal file
View file

@ -0,0 +1,16 @@
[animation-fill-mode.html]
[animation-fill-mode: both should function correctly]
expected: FAIL
[animation-fill-mode: both on animation with multiple iterations]
expected: FAIL
[animation-fill-mode: forwards should function correctly]
expected: FAIL
[animation-fill-mode: both on reversed animation]
expected: FAIL
[animation-fill-mode: backwards should function correctly]
expected: FAIL

5
tests/wpt/mozilla/meta-layout-2020/css/animations/basic-transition.html.ini
View file

@ -1,5 +0,0 @@
[basic-transition.html]
expected: ERROR
[Transition test]
expected: TIMEOUT

5
tests/wpt/mozilla/meta-layout-2020/css/animations/transition-raf.html.ini
View file

@ -1,2 +1,5 @@
[transition-raf.html]
expected: ERROR
expected: TIMEOUT
[Transitions should work during RAF loop]
expected: TIMEOUT

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

@ -12849,6 +12849,13 @@
},
"css": {
"animations": {
"animation-fill-mode.html": [
"4cfaab9fbce0adccd83f592935e63fa8ff58a1cf",
[
null,
{}
]
],
"basic-linear-width.html": [
"634b09dca5924b8bea58ac8532d9d46c20d8a0ad",
[

116
tests/wpt/mozilla/tests/css/animations/animation-fill-mode.html Normal file
View file

@ -0,0 +1,116 @@
<!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>
function setAndTriggerAnimationOnElement(fillMode, direction = "normal", iterationCount = "1") {
let element = document.createElement("div");
element.className = "target";
element.style.animationDelay = "1s";
element.style.animationDirection = direction;
element.style.animationDuration = "1s";
element.style.animationFillMode = fillMode;
element.style.animationIterationCount = iterationCount;
element.style.animationName = "width-animation";
element.style.animationTimingFunction = "linear";
document.body.appendChild(element);
return element;
}
function runThroughAnimation(testBinding, element) {
testBinding.advanceClock(1000);
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");
}
test(function() {
let testBinding = new window.TestBinding();
let div = setAndTriggerAnimationOnElement("both");
// The style should reflect the first and last keyframe of the animation
// before and after the animation runs.
assert_equals(getComputedStyle(div).getPropertyValue("width"), "0px");
runThroughAnimation(testBinding, div);
testBinding.advanceClock(2000);
assert_equals(getComputedStyle(div).getPropertyValue("width"), "500px");
}, "animation-fill-mode: both should function correctly");
test(function() {
let testBinding = new window.TestBinding();
let div = setAndTriggerAnimationOnElement("forwards");
// The style should reflect the last keyframe of the animation after the animation runs.
assert_equals(getComputedStyle(div).getPropertyValue("width"), "50px");
runThroughAnimation(testBinding, div);
testBinding.advanceClock(2000);
assert_equals(getComputedStyle(div).getPropertyValue("width"), "500px");
}, "animation-fill-mode: forwards should function correctly");
test(function() {
let testBinding = new window.TestBinding();
let div = setAndTriggerAnimationOnElement("backwards");
// The style should reflect the first keyframe of the animation before the animation runs.
assert_equals(getComputedStyle(div).getPropertyValue("width"), "0px");
runThroughAnimation(testBinding, div);
testBinding.advanceClock(2000);
assert_equals(getComputedStyle(div).getPropertyValue("width"), "50px");
}, "animation-fill-mode: backwards should function correctly");
test(function() {
let testBinding = new window.TestBinding();
let div = setAndTriggerAnimationOnElement("both", "reverse");
// The style should reflect the first keyframe of the animation before the animation runs.
assert_equals(getComputedStyle(div).getPropertyValue("width"), "500px");
testBinding.advanceClock(1000);
assert_equals(getComputedStyle(div).getPropertyValue("width"), "500px");
testBinding.advanceClock(500);
assert_equals(getComputedStyle(div).getPropertyValue("width"), "250px");
testBinding.advanceClock(500);
assert_equals(getComputedStyle(div).getPropertyValue("width"), "0px");
testBinding.advanceClock(2000);
assert_equals(getComputedStyle(div).getPropertyValue("width"), "0px");
}, "animation-fill-mode: both on reversed animation");
test(function() {
let testBinding = new window.TestBinding();
let div = setAndTriggerAnimationOnElement("both", "normal", "3");
assert_equals(getComputedStyle(div).getPropertyValue("width"), "0px");
runThroughAnimation(testBinding, div);
runThroughAnimation(testBinding, div);
runThroughAnimation(testBinding, div);
testBinding.advanceClock(1000);
assert_equals(getComputedStyle(div).getPropertyValue("width"), "500px");
}, "animation-fill-mode: both on animation with multiple iterations");
</script>