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

animations: Finish support for fractional iteration counts

Browse source 
This change also improves support for creating animations with negative
delays, as that is necessary to test support for fractional iteration
lengths.

This change also adjusts existing Servo animation tests which assumed
that advancing to the exact moment of the end of the animation would be
considered "before the end." With this change, this moment is "after the
end."

Fixes: #14858
This commit is contained in:
Martin Robinson 2020-06-22 16:18:29 +02:00
parent 99d409f15d
commit 954b5177f0
19 changed files with 163 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

46
tests/wpt/web-platform-tests/css/css-animations/animation-iteration-count-009.html Normal file
View file

@ -0,0 +1,46 @@
<!doctype html>
<meta charset=utf-8>
<title>CSS Animation Test: fractional animation-iteration-count</title>
<link rel="help" href="https://drafts.csswg.org/css-animations/#animation-iteration-count">
<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes margin-animation {
from {
margin-left: 0px;
}
to {
margin-left: 100px;
}
}
</style>
<div id="log"></div>
<script>
'use strict';
promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'margin-animation 1s -10s linear 1.5 normal forwards paused';
assert_equals(getComputedStyle(div).marginLeft, '50px');
}, 'Basic floating point iteration count');
promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'margin-animation 1s -10s linear 3.25 normal forwards paused';
assert_equals(getComputedStyle(div).marginLeft, '25px');
}, 'Floating point iteration count after multiple iterations');
promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'margin-animation 1s -10s linear 0.75 normal forwards paused';
assert_equals(getComputedStyle(div).marginLeft, '75px');
}, 'Floating point iteration count during first iteration');
promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'margin-animation 1s -10s linear 1.75 alternate forwards paused';
assert_equals(getComputedStyle(div).marginLeft, '25px');
}, 'Floating point iteration count with alternating directions');
</script>