Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-10-04 02:29:12 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444

Browse source
This commit is contained in:
Josh Matthews 2017-04-17 12:06:02 +10:00 • committed by Anthony Ramine
parent 25e8bf69e6
commit 665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
Download patch file Download diff file Expand all files Collapse all files

42
tests/wpt/web-platform-tests/web-animations/README.md
View file

@ -50,29 +50,29 @@ Guidelines for writing tests
e.g.
```javascript
test(function(t) {
var anim = createDiv(t).animate(null);
assert_class_string(anim, 'Animation', 'Returned object is an Animation');
}, 'Element.animate() creates an Animation object');
```
```javascript
test(function(t) {
const animation = createDiv(t).animate(null);
assert_class_string(animation, 'Animation', 'Returned object is an Animation');
}, 'Element.animate() creates an Animation object');
```
```javascript
test(function(t) {
assert_throws({ name: 'TypeError' }, function() {
createDiv(t).animate(null, -1);
});
}, 'Setting a negative duration throws a TypeError');
```
```javascript
test(function(t) {
assert_throws({ name: 'TypeError' }, function() {
createDiv(t).animate(null, -1);
});
}, 'Setting a negative duration throws a TypeError');
```
```javascript
promise_test(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
return animation.ready.then(function() {
assert_greater_than(animation.startTime, 0, 'startTime when running');
});
}, 'startTime is resolved when running');
```
```javascript
promise_test(function(t) {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
return animation.ready.then(function() {
assert_greater_than(animation.startTime, 0, 'startTime when running');
});
}, 'startTime is resolved when running');
```
If you're generating complex test loops and factoring out utility functions
that affect the logic of the test (other than, say, simple assertion utility

334
tests/wpt/web-platform-tests/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html
View file

@ -8,7 +8,6 @@
<script src="../../resources/easing-tests.js"></script>
<body>
<div id="log"></div>
<div id="target"></div>
<script>
'use strict';
@ -80,338 +79,5 @@ gEasingTests.forEach(params => {
`with a ${params.desc} does not alter the result`);
});
// Test that different easing functions correctly handle inputs outside the
// range [0, 1]. This only occurs when we have an easing specified on the
// effect that produces a value outside [0, 1] which we then pass to an easing
// on a keyframe.
function assert_style_left_at(animation, time, easingFunction) {
animation.currentTime = time;
var portion = time / animation.effect.timing.duration;
assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left),
easingFunction(portion) * 100,
0.01,
'The left of the animation should be approximately ' +
easingFunction(portion) * 100 + ' at ' + time + 'ms');
}
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-start' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
// The bezier function produces values greater than 1 (but always less than 2)
// in (0.23368794, 1)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 230;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 250;
assert_equals(getComputedStyle(target).left, '200px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-start easing with input progress greater than 1');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-end' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
// The bezier function produces values greater than 1 (but always less than 2)
// in (0.23368794, 1)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 230;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 250;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-end easing with input progress greater than 1');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-end' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 3, 1, 3)' });
// The bezier function produces values greater than 2 (but always less than 3)
// in the range (~0.245, ~0.882)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 500;
assert_equals(getComputedStyle(target).left, '200px');
anim.currentTime = 900;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-end easing with input progress greater than 2');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-start' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
// The bezier function produces negative values (but always greater than -1)
// in (0, 0.766312060)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 750;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 800;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-start easing with input progress less than 0');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-start' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, -2, 1, -2)' });
// The bezier function produces values less than -1 (but always greater than
// -2) in the range (~0.118, ~0.755)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '100px');
anim.currentTime = 100;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 500;
assert_equals(getComputedStyle(target).left, '-100px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-start easing with input progress less than -1');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate([ { left: '0px', easing: 'step-end' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
// The bezier function produces negative values (but always greater than -1)
// in (0, 0.766312060)
anim.currentTime = 0;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 750;
assert_equals(getComputedStyle(target).left, '-100px');
anim.currentTime = 800;
assert_equals(getComputedStyle(target).left, '0px');
anim.currentTime = 1000;
assert_equals(getComputedStyle(target).left, '100px');
}, 'step-end easing with input progress less than 0');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate(
// http://cubic-bezier.com/#.5,1,.5,0
[ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
var keyframeEasing = function(x) {
assert_greater_than_equal(x, 0.0,
'This function should be called in [0, 1.0] range');
assert_less_than_equal(x, 1.0,
'This function should be called in [0, 1.0] range');
return cubicBezier(0.5, 1, 0.5, 0)(x);
}
var keyframeEasingExtrapolated = function(x) {
assert_greater_than(x, 1.0,
'This function should be called in (1.0, infinity) range');
// p3x + (p2y - p3y) / (p2x - p3x) * (x - p3x)
return 1.0 + (0 - 1) / (0.5 - 1) * (x - 1.0);
}
var effectEasing = function(x) {
return cubicBezier(0, 1.5, 1, 1.5)(x);
}
// The effect-easing produces values greater than 1 in (0.23368794, 1)
assert_style_left_at(anim, 0, function(x) {
return keyframeEasing(effectEasing(x));
});
assert_style_left_at(anim, 230, function(x) {
return keyframeEasing(effectEasing(x));
});
assert_style_left_at(anim, 240, function(x) {
return keyframeEasingExtrapolated(effectEasing(x));
});
// Near the extreme point of the effect-easing function
assert_style_left_at(anim, 700, function(x) {
return keyframeEasingExtrapolated(effectEasing(x));
});
assert_style_left_at(anim, 990, function(x) {
return keyframeEasingExtrapolated(effectEasing(x));
});
assert_style_left_at(anim, 1000, function(x) {
return keyframeEasing(effectEasing(x));
});
}, 'cubic-bezier easing with input progress greater than 1');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate(
// http://cubic-bezier.com/#0,1.5,1,1.5
[ { left: '0px', easing: 'cubic-bezier(0, 1.5, 1, 1.5)' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
var easing = function(x) {
assert_greater_than_equal(x, 0.0,
'This function should be called in [0, 1.0] range');
assert_less_than_equal(x, 1.0,
'This function should be called in [0, 1.0] range');
return cubicBezier(0, 1.5, 1, 1.5)(x);
}
var easingExtrapolated = function(x) {
assert_greater_than(x, 1.0,
'This function should be called in negative range');
// For cubic-bezier(0, 1.5, 1, 1.5), the tangent at the
// endpoint (x = 1.0) is infinity so we should just return 1.0.
return 1.0;
}
// The effect-easing produces values greater than 1 in (0.23368794, 1)
assert_style_left_at(anim, 0, function(x) {
return easing(easing(x))
});
assert_style_left_at(anim, 230, function(x) {
return easing(easing(x))
});
assert_style_left_at(anim, 240, function(x) {
return easingExtrapolated(easing(x));
});
// Near the extreme point of the effect-easing function
assert_style_left_at(anim, 700, function(x) {
return easingExtrapolated(easing(x));
});
assert_style_left_at(anim, 990, function(x) {
return easingExtrapolated(easing(x));
});
assert_style_left_at(anim, 1000, function(x) {
return easing(easing(x))
});
}, 'cubic-bezier easing with input progress greater than 1 and where the ' +
'tangent on the upper boundary is infinity');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate(
// http://cubic-bezier.com/#.5,1,.5,0
[ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
var keyframeEasing = function(x) {
assert_greater_than_equal(x, 0.0,
'This function should be called in [0, 1.0] range');
assert_less_than_equal(x, 1.0,
'This function should be called in [0, 1.0] range');
return cubicBezier(0.5, 1, 0.5, 0)(x);
}
var keyframeEasingExtrapolated = function(x) {
assert_less_than(x, 0.0,
'This function should be called in negative range');
// p0x + (p1y - p0y) / (p1x - p0x) * (x - p0x)
return (1 / 0.5) * x;
}
var effectEasing = function(x) {
return cubicBezier(0, -0.5, 1, -0.5)(x);
}
// The effect-easing produces negative values in (0, 0.766312060)
assert_style_left_at(anim, 0, function(x) {
return keyframeEasing(effectEasing(x));
});
assert_style_left_at(anim, 10, function(x) {
return keyframeEasingExtrapolated(effectEasing(x));
});
// Near the extreme point of the effect-easing function
assert_style_left_at(anim, 300, function(x) {
return keyframeEasingExtrapolated(effectEasing(x));
});
assert_style_left_at(anim, 750, function(x) {
return keyframeEasingExtrapolated(effectEasing(x));
});
assert_style_left_at(anim, 770, function(x) {
return keyframeEasing(effectEasing(x));
});
assert_style_left_at(anim, 1000, function(x) {
return keyframeEasing(effectEasing(x));
});
}, 'cubic-bezier easing with input progress less than 0');
test(function(t) {
var target = createDiv(t);
target.style.position = 'absolute';
var anim = target.animate(
// http://cubic-bezier.com/#0,-0.5,1,-0.5
[ { left: '0px', easing: 'cubic-bezier(0, -0.5, 1, -0.5)' },
{ left: '100px' } ],
{ duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
var easing = function(x) {
assert_greater_than_equal(x, 0.0,
'This function should be called in [0, 1.0] range');
assert_less_than_equal(x, 1.0,
'This function should be called in [0, 1.0] range');
return cubicBezier(0, -0.5, 1, -0.5)(x);
}
var easingExtrapolated = function(x) {
assert_less_than(x, 0.0,
'This function should be called in negative range');
// For cubic-bezier(0, -0.5, 1, -0.5), the tangent at the
// endpoint (x = 0.0) is infinity so we should just return 0.0.
return 0.0;
}
// The effect-easing produces negative values in (0, 0.766312060)
assert_style_left_at(anim, 0, function(x) {
return easing(easing(x))
});
assert_style_left_at(anim, 10, function(x) {
return easingExtrapolated(easing(x));
});
// Near the extreme point of the effect-easing function
assert_style_left_at(anim, 300, function(x) {
return easingExtrapolated(easing(x));
});
assert_style_left_at(anim, 750, function(x) {
return easingExtrapolated(easing(x));
});
assert_style_left_at(anim, 770, function(x) {
return easing(easing(x))
});
assert_style_left_at(anim, 1000, function(x) {
return easing(easing(x))
});
}, 'cubic-bezier easing with input progress less than 0 and where the ' +
'tangent on the lower boundary is infinity');
</script>
</body>

9
tests/wpt/web-platform-tests/web-animations/interfaces/Animatable/animate.html
View file

@ -72,6 +72,15 @@ test(function(t) {
+ ' whose AnimationEffectTiming object is created in the relevant realm'
+ ' of the target element');
gEmptyKeyframeListTests.forEach(function(subTest) {
test(function(t) {
var div = createDiv(t);
var anim = div.animate(subTest, 2000);
assert_not_equals(anim, null);
}, 'Element.animate() accepts empty keyframe lists ' +
`(input: ${JSON.stringify(subTest)})`);
});
gPropertyIndexedKeyframesTests.forEach(function(subtest) {
test(function(t) {
var div = createDiv(t);

19
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/effect.html
View file

@ -19,5 +19,24 @@ test(function(t) {
assert_equals(anim.effect, newEffect, "new effect is set");
}, "effect is set correctly.");
test(function(t) {
var div = createDiv(t);
var animation = div.animate({ left: ['100px', '100px'] },
{ fill: 'forwards' });
var effect = animation.effect;
assert_equals(getComputedStyle(div).left, '100px',
'animation is initially having an effect');
animation.effect = null;
assert_equals(getComputedStyle(div).left, 'auto',
'animation no longer has an effect');
animation.effect = effect;
assert_equals(getComputedStyle(div).left, '100px',
'animation has an effect again');
}, 'Clearing and setting Animation.effect should update the computed style'
+ ' of the target element');
</script>
</body>

51
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/idlharness.html Normal file
View file

@ -0,0 +1,51 @@
<!doctype html>
<meta charset=utf-8>
<title>Animation interface automated IDL tests</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/WebIDLParser.js"></script>
<script src="/resources/idlharness.js"></script>
<script src="../../testcommon.js"></script>
<div id="log"></div>
<script type="text/plain" id="Animation-IDL">
enum AnimationPlayState { "idle", "pending", "running", "paused", "finished" };
[Constructor (optional AnimationEffectReadOnly? effect = null,
optional AnimationTimeline? timeline)]
interface Animation : EventTarget {
attribute DOMString id;
attribute AnimationEffectReadOnly? effect;
attribute AnimationTimeline? timeline;
attribute double? startTime;
attribute double? currentTime;
attribute double playbackRate;
readonly attribute AnimationPlayState playState;
readonly attribute Promise<Animation> ready;
readonly attribute Promise<Animation> finished;
attribute EventHandler onfinish;
attribute EventHandler oncancel;
void cancel ();
void finish ();
void play ();
void pause ();
void reverse ();
};
</script>
<script>
'use strict';
test(function(t) {
const idlArray = new IdlArray();
idlArray.add_untested_idls('interface AnimationTimeline {};');
idlArray.add_untested_idls('interface EventHandler {};');
idlArray.add_untested_idls('interface EventTarget {};');
idlArray.add_idls(
document.getElementById('Animation-IDL').textContent);
// const animation = createDiv(t).animate(null);
idlArray.add_objects( { Animation: ['new Animation()'] } );
idlArray.test();
});
</script>

41
tests/wpt/web-platform-tests/web-animations/interfaces/Animation/ready.html
View file

@ -12,7 +12,7 @@
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var animation = div.animate(null, 100 * MS_PER_SEC);
var originalReadyPromise = animation.ready;
var pauseReadyPromise;
@ -35,7 +35,7 @@ promise_test(function(t) {
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var animation = div.animate(null, 100 * MS_PER_SEC);
return animation.ready.then(function() {
var promiseBeforeCallingPlay = animation.ready;
@ -48,7 +48,7 @@ promise_test(function(t) {
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var animation = div.animate(null, 100 * MS_PER_SEC);
return animation.ready.then(function(resolvedAnimation) {
assert_equals(resolvedAnimation, animation,
@ -57,40 +57,5 @@ promise_test(function(t) {
});
}, 'The ready promise is fulfilled with its Animation');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
var retPromise = animation.ready.then(function() {
assert_unreached('ready promise was fulfilled');
}).catch(function(err) {
assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError');
});
animation.cancel();
return retPromise;
}, 'ready promise is rejected when a play-pending animation is cancelled by'
+ ' calling cancel()');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
return animation.ready.then(function() {
animation.pause();
// Set up listeners on pause-pending ready promise
var retPromise = animation.ready.then(function() {
assert_unreached('ready promise was fulfilled');
}).catch(function(err) {
assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError');
});
animation.cancel();
return retPromise;
});
}, 'ready promise is rejected when a pause-pending animation is cancelled by'
+ ' calling cancel()');
</script>
</body>

19
tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/duration.html
View file

@ -148,6 +148,25 @@ test(function(t) {
});
}, 'set duration string 100');
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
return anim.ready.then(function() {
var originalStartTime = anim.startTime;
var originalCurrentTime = anim.currentTime;
assert_equals(anim.effect.getComputedTiming().duration, 100 * MS_PER_SEC,
'Initial duration should be as set on KeyframeEffect');
anim.effect.timing.duration = 200 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().duration, 200 * MS_PER_SEC,
'Effect duration should have been updated');
assert_times_equal(anim.startTime, originalStartTime,
'startTime should be unaffected by changing effect ' +
'duration');
assert_times_equal(anim.currentTime, originalCurrentTime,
'currentTime should be unaffected by changing effect ' +
'duration');
});
}, 'Extending an effect\'s duration does not change the start or current time');
</script>
</body>

8
tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/easing.html
View file

@ -56,6 +56,14 @@ gInvalidEasings.forEach(function(invalidEasing) {
}, 'Invalid effect easing value test: \'' + invalidEasing + '\'');
});
gRoundtripEasings.forEach(easing => {
test(function(t) {
const anim = createDiv(t).animate(null);
anim.effect.timing.easing = easing;
assert_equals(anim.effect.timing.easing, easing);
}, `Canonical easing '${easing}' is returned as set`);
});
test(function(t) {
var delay = 1000 * MS_PER_SEC;

19
tests/wpt/web-platform-tests/web-animations/interfaces/AnimationTimeline/document-timeline.html
View file

@ -56,4 +56,23 @@ promise_test(function(t) {
}));
}, 'document.timeline.currentTime liveness tests');
async_test(function(t) {
var startTime = document.timeline.currentTime;
var firstRafTime;
requestAnimationFrame(function() {
t.step(function() {
assert_greater_than_equal(document.timeline.currentTime, startTime, 'currentTime should have progressed');
firstRafTime = document.timeline.currentTime;
});
});
requestAnimationFrame(function() {
t.step(function() {
assert_equals(document.timeline.currentTime, firstRafTime, 'currentTime should be the same');
});
t.done();
});
}, 'document.timeline.currentTime time should be the same for all RAF callbacks in a frame');
</script>

40
tests/wpt/web-platform-tests/web-animations/resources/easing-tests.js
View file

@ -38,6 +38,11 @@ var gEasingTests = [
easingFunction: stepEnd(2),
serialization: 'steps(2)'
},
{
desc: 'frames function',
easing: 'frames(5)',
easingFunction: framesTiming(5)
},
{
desc: 'linear function',
easing: 'linear', // cubic-bezier(0, 0, 1.0, 1.0)
@ -75,13 +80,44 @@ var gEasingTests = [
}
];
var gInvalidEasings = [
const gInvalidEasings = [
'',
'7',
'test',
'initial',
'inherit',
'unset',
'cubic-bezier(1.1, 0, 1, 1)',
'cubic-bezier(0, 0, 1.1, 1)',
'cubic-bezier(-0.1, 0, 1, 1)',
'cubic-bezier(0, 0, -0.1, 1)',
'cubic-bezier(0.1, 0, 4, 0.4)',
'steps(-1, start)',
'steps(0.1, start)'
'steps(0.1, start)',
'steps(3, nowhere)',
'steps(-3, end)',
'function (a){return a}',
'function (x){return x}',
'function(x, y){return 0.3}',
'frames(1)',
'frames',
'frames()',
'frames(,)',
'frames(a)',
'frames(2.0)',
'frames(2.5)',
'frames(2 3)',
];
// Easings that should serialize to the same string
const gRoundtripEasings = [
'ease',
'linear',
'ease-in',
'ease-out',
'ease-in-out',
'cubic-bezier(0.1, 5, 0.23, 0)',
'steps(3, start)',
'steps(3)',
'frames(3)',
];

22
tests/wpt/web-platform-tests/web-animations/resources/keyframe-utils.js
View file

@ -253,10 +253,14 @@ var gKeyframeSequenceTests = [
{ offset: 1, computedOffset: 1, easing: "linear", top: "30px" },
{ offset: 1, computedOffset: 1, easing: "linear", left: "40px" }]
},
{ desc: "a single keyframe sequence with omitted offsets",
{ desc: "a single keyframe sequence with omitted offset",
input: [{ left: "10px" }],
output: [{ offset: null, computedOffset: 1, easing: "linear",
left: "10px" }] },
{ desc: "a single keyframe sequence with null offset",
input: [{ offset: null, left: "10px" }],
output: [{ offset: null, computedOffset: 1, easing: "linear",
left: "10px" }] },
{ desc: "a single keyframe sequence with string offset",
input: [{ offset: '0.5', left: "10px" }],
output: [{ offset: 0.5, computedOffset: 0.5, easing: "linear",
@ -277,6 +281,22 @@ var gKeyframeSequenceTests = [
left: "40px" },
{ offset: 1.00, computedOffset: 1.00, easing: "linear",
left: "50px" }] },
{ desc: "a one property keyframe sequence with some null offsets",
input: [{ offset: 0.00, left: "10px" },
{ offset: 0.25, left: "20px" },
{ offset: null, left: "30px" },
{ offset: null, left: "40px" },
{ offset: 1.00, left: "50px" }],
output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear",
left: "10px" },
{ offset: 0.25, computedOffset: 0.25, easing: "linear",
left: "20px" },
{ offset: null, computedOffset: 0.50, easing: "linear",
left: "30px" },
{ offset: null, computedOffset: 0.75, easing: "linear",
left: "40px" },
{ offset: 1.00, computedOffset: 1.00, easing: "linear",
left: "50px" }] },
{ desc: "a two property keyframe sequence with some omitted offsets",
input: [{ offset: 0.00, left: "10px", top: "20px" },
{ offset: 0.25, left: "30px" },

12
tests/wpt/web-platform-tests/web-animations/testcommon.js
View file

@ -90,11 +90,6 @@ function createPseudo(test, type) {
return anim.effect.target;
}
// Convert px unit value to a Number
function pxToNum(str) {
return Number(String(str).match(/^(-?[\d.]+)px$/)[1]);
}
// Cubic bezier with control points (0, 0), (x1, y1), (x2, y2), and (1, 1).
function cubicBezier(x1, y1, x2, y2) {
function xForT(t) {
@ -146,6 +141,13 @@ function stepStart(nsteps) {
}
}
function framesTiming(nframes) {
return function framesClosure(x) {
var result = Math.floor(x * nframes) / (nframes - 1);
return (result > 1.0 && x <= 1.0) ? 1.0 : result;
}
}
function waitForAnimationFrames(frameCount) {
return new Promise(function(resolve, reject) {
function handleFrame() {

62
tests/wpt/web-platform-tests/web-animations/timing-model/animations/canceling-an-animation.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Canceling an animation</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#canceling-an-animation-section">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
"use strict";
promise_test(function(t) {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
const retPromise = animation.ready.then(() => {
assert_unreached('ready promise was fulfilled');
}).catch(err => {
assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError');
});
animation.cancel();
return retPromise;
}, 'A play-pending ready promise should be rejected when the animation is'
+ ' canceled');
promise_test(function(t) {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
return animation.ready.then(() => {
animation.pause();
// Set up listeners on pause-pending ready promise
var retPromise = animation.ready.then(function() {
assert_unreached('ready promise was fulfilled');
}).catch(err => {
assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError');
});
animation.cancel();
return retPromise;
});
}, 'A pause-pending ready promise should be rejected when the animation is'
+ ' canceled');
promise_test(function(t) {
const animation = createDiv(t).animate(null);
animation.cancel();
return animation.ready.then(function(p) {
assert_equals(p, animation);
});
}, 'When an animation is canceled, it should create a resolved Promise');
test(function(t) {
const animation = createDiv(t).animate(null);
const promise = animation.ready;
animation.cancel();
assert_not_equals(animation.ready, promise);
}, 'The ready promise should be replaced when the animation is canceled');
</script>
</body>

31
tests/wpt/web-platform-tests/web-animations/timing-model/animations/finishing-an-animation.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Finishing an animation</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#finishing-an-animation-section">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
promise_test(function(t) {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
const promise = animation.ready;
let readyResolved = false;
animation.finish();
animation.ready.then(() => { readyResolved = true; });
return animation.finished.then(p => {
assert_equals(p, animation);
assert_equals(animation.ready, promise);
assert_true(readyResolved);
});
}, 'A pending ready promise should be resolved and not replaced when the'
+ ' animation is finished');
</script>
</body>

27
tests/wpt/web-platform-tests/web-animations/timing-model/animations/pausing-an-animation.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Pausing an animation</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#finishing-an-animation-section">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
promise_test(function(t) {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
const promise = animation.ready;
animation.pause();
return promise.then(p => {
assert_equals(p, animation);
assert_equals(animation.ready, promise);
assert_equals(animation.playState, 'paused');
});
}, 'A pending ready promise should be resolved and not replaced when the'
+ ' animation is paused');
</script>
</body>

59
tests/wpt/web-platform-tests/web-animations/timing-model/animations/playing-an-animation.html Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Playing an animation</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#playing-an-animation-section">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
test(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.currentTime = 1 * MS_PER_SEC;
assert_times_equal(animation.currentTime, 1 * MS_PER_SEC);
animation.play();
assert_times_equal(animation.currentTime, 1 * MS_PER_SEC);
}, 'Playing a running animation leaves the current time unchanged');
test(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.finish();
assert_times_equal(animation.currentTime, 100 * MS_PER_SEC);
animation.play();
assert_times_equal(animation.currentTime, 0);
}, 'Playing a finished animation seeks back to the start');
test(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.playbackRate = -1;
animation.currentTime = 0;
assert_times_equal(animation.currentTime, 0);
animation.play();
assert_times_equal(animation.currentTime, 100 * MS_PER_SEC);
}, 'Playing a finished and reversed animation seeks to end');
test(function(t) {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.cancel();
const promise = animation.ready;
animation.play();
assert_not_equals(animation.ready, promise);
}, 'The ready promise should be replaced if the animation is not already'
+ ' pending');
promise_test(function(t) {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
const promise = animation.ready;
return promise.then(p => {
assert_equals(p, animation);
assert_equals(animation.ready, promise);
});
}, 'A pending ready promise should be resolved and not replaced when the'
+ ' animation enters the running state');
</script>
</body>

42
tests/wpt/web-platform-tests/web-animations/timing-model/time-transformations/transformed-progress.html
View file

@ -32,9 +32,10 @@ gEasingTests.forEach(params => {
}, 'Transformed progress for ' + params.desc);
});
// Additional tests for various boundary conditions of step timing functions
// Additional tests for various boundary conditions of step timing functions and
// frames timing functions.
var gStepTimingFunctionTests = [
var gStepAndFramesTimingFunctionTests = [
{
description: 'Test bounds point of step-start easing',
effect: {
@ -252,10 +253,45 @@ var gStepTimingFunctionTests = [
{ currentTime: 2000, progress: 0.5 },
{ currentTime: 2500, progress: 0.5 },
]
},
{
description: 'Test bounds point of frames easing',
effect: {
delay: 1000,
duration: 1000,
fill: 'both',
easing: 'frames(2)'
},
conditions: [
{ currentTime: 0, progress: 0 },
{ currentTime: 1000, progress: 0 },
{ currentTime: 1499, progress: 0 },
{ currentTime: 1500, progress: 1 },
{ currentTime: 2000, progress: 1 }
]
},
{
description: 'Test bounds point of frames easing ' +
'with iterationStart and delay',
effect: {
delay: 1000,
duration: 1000,
fill: 'both',
iterationStart: 0.5,
easing: 'frames(2)'
},
conditions: [
{ currentTime: 0, progress: 1 },
{ currentTime: 1000, progress: 1 },
{ currentTime: 1499, progress: 1 },
{ currentTime: 1500, progress: 0 },
{ currentTime: 1999, progress: 0 },
{ currentTime: 2000, progress: 1 }
]
}
];
gStepTimingFunctionTests.forEach(function(options) {
gStepAndFramesTimingFunctionTests.forEach(function(options) {
test(function(t) {
var target = createDiv(t);
var animation = target.animate(null, options.effect);