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 bda2059150dca8ab47f088b4cc619fcdc1f262fa

Browse source
This commit is contained in:
Ms2ger 2016-05-30 09:58:25 +02:00
parent 3535f3f6c2
commit 7c4281f3da
182 changed files with 7692 additions and 1042 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,107 @@
Web Animations Tests
====================
Web Animations Test Suite
=========================
Specification: http://w3c.github.io/web-animations/
Specification: https://w3c.github.io/web-animations/
Guidelines for writing tests
----------------------------
* Try to follow the spec outline where possible.
For example, if you want to test setting the start time, you might be
tempted to put all the tests in:
> `/web-animations/Animation/startTime.html`
However, in the spec most of the logic is in the “Set the animation
start time“ procedure in the “Timing model” section.
Instead, try something like:
> * `/web-animations/timing-model/animation/set-the-animation-start-time.html`<br>
> Tests all the branches and inputs to the procedure as defined in the
> spec (using the `Animation.startTime` API).
> * `/web-animations/Animation/startTime.html`<br>
> Tests API-layer specific issues like mapping unresolved values to
> null, etc.
On that note, two levels of subdirectories is enough even if the spec has
deeper nesting.
Note that most of the existing tests in the suite _don't_ do this well yet.
That's the direction we're heading, however.
* Test the spec.
* If the spec defines a timing calculation that is directly
reflected in the iteration progress
(i.e. `anim.effect.getComputedTiming().progress`), test that instead
of calling `getComputedStyle(elem).marginLeft`.
* Likewise, don't add needless tests for `anim.playbackState`.
The playback state is a calculated value based on other values.
It's rarely necessary to test directly unless you need, for example,
to check that a pending task is scheduled (which isn't observable
elsewhere other than waiting for the corresponding promise to
complete).
* Try to keep tests as simple and focused as possible.
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) {
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');
```
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
functions), you're probably doing it wrong.
It should be possible to understand exactly what the test is doing at a
glance without having to scroll up and down the test file and refer to
other files.
See Justin Searls' presentation, [&ldquo;How to stop hating your
tests&rdquo;](http://blog.testdouble.com/posts/2015-11-16-how-to-stop-hating-your-tests.html)
for some tips on making your tests simpler.
* Assume tests will run on under-performing hardware where the time between
animation frames might run into 10s of seconds.
As a result, animations that are expected to still be running during
the test should be at least 100s in length.
* Avoid using `GLOBAL_CONSTS` that make the test harder to read.
It's fine to repeat the the same parameter values like `100 * MS_PER_SEC`
over and over again since it makes it easy to read and debug a test in
isolation.
Remember, even if we do need to make all tests take, say 200s each, text
editors are very good at search and replace.
* Use the `assert_times_equal` assertion for comparing calculated times.
It tests times are equal using the precision recommended in the spec whilst
allowing implementations to override the function to meet their own
precision requirements.
* There are quite a few bad tests in the repository. We're learning as
we go. Don't just copy them blindly&mdash;please fix them!

120
tests/wpt/web-platform-tests/web-animations/animation-model/animation-types/not-animatable.html
View file

@ -1,120 +0,0 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Tests for not animatable properties</title>
<link rel="help" href="https://w3c.github.io/web-animations/#not-animatable-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 div = createDiv(t);
var anim = div.animate({ display: [ 'inline', 'inline-block' ] }, 1000);
assert_equals(anim.effect.getFrames().length, 0,
'Animation specified using property-indexed notation but'
+ ' consisting of only non-animatable properties should not'
+ ' contain any keyframes');
}, '\'display\' property cannot be animated using property-indexed notation');
test(function(t) {
var div = createDiv(t);
var anim = div.animate([ { display: 'inline' }, { display: 'inline-block' } ],
1000);
assert_equals(anim.effect.getFrames().length, 2,
'Animation specified using a keyframe sequence where each'
+ ' keyframe contains only non-animatable properties should'
+ ' return an equal number of (empty) keyframes');
assert_false(anim.effect.getFrames()[0].hasOwnProperty('display'),
'Initial keyframe should not have the \'display\' property');
assert_false(anim.effect.getFrames()[1].hasOwnProperty('display'),
'Final keyframe should not have the \'display\' property');
}, '\'display\' property cannot be animated using a keyframe sequence');
test(function(t) {
var properties = {
// CSS Animations properties
animation: [ 'anim 1s', 'anim 2s' ],
animationName: [ 'abc', 'xyz' ],
animationTimingFunction: [ 'ease', 'steps(2)' ],
animationDelay: [ '1s', '2s' ],
animationIterationCount: [ 1, 2 ],
animationDirection: [ 'normal', 'reverse' ],
animationFillMode: [ 'forwards', 'backwards' ],
animationPlayState: [ 'paused', 'running' ],
// CSS Transitions properties
transition: [ 'all 1s', 'all 2s' ],
transitionDelay: [ '1s', '2s' ],
transitionDuration: [ '1s', '2s' ],
transitionProperty: [ 'all', 'opacity' ],
transitionTimingFunction: [ 'ease', 'ease-out' ]
};
var div = createDiv(t);
var anim = div.animate(properties, 1000);
assert_equals(anim.effect.getFrames().length, 0,
'Animation specified using property-indexed notation but'
+ ' consisting of only non-animatable properties should not'
+ ' contain any keyframes');
}, 'CSS animations and CSS transitions properties cannot be animated using'
+ ' property-indexed notation');
test(function(t) {
var frames = [
{
animation: 'anim 1s',
animationName: 'abc',
animationTimingFunction: 'ease',
animationDelay: '1s',
animationIterationCount: 1,
animationDirection: 'normal',
animationFillMode: 'forwards',
animationPlayState: 'paused',
transition: 'all 1s',
transitionDelay: '1s',
transitionDuration: '1s',
transitionProperty: 'opacity',
transitionTimingFunction: 'ease'
},
{
animation: 'anim 2s',
animationName: 'xyz',
animationTimingFunction: 'steps(2)',
animationDelay: '2s',
animationIterationCount: 2,
animationDirection: 'reverse',
animationFillMode: 'backwards',
animationPlayState: 'running',
transition: 'all 2s',
transitionDelay: '2s',
transitionDuration: '2s',
transitionProperty: 'all',
transitionTimingFunction: 'ease-out'
}
];
var defaultKeyframeProperties = [ 'computedOffset', 'easing', 'offset' ];
var div = createDiv(t);
var anim = div.animate(frames, 1000);
assert_equals(anim.effect.getFrames().length, 2,
'Animation specified using a keyframe sequence where each'
+ ' keyframe contains only non-animatable properties should'
+ ' return an equal number of (empty) keyframes');
assert_array_equals(Object.keys(anim.effect.getFrames()[0]),
defaultKeyframeProperties,
'Initial keyframe should not contain any properties other'
+ ' than the default keyframe properties');
assert_array_equals(Object.keys(anim.effect.getFrames()[1]),
defaultKeyframeProperties,
'Final keyframe should not contain any properties other'
+ ' than the default keyframe properties');
}, 'CSS animations and CSS transitions properties cannot be animated using'
+ ' a sequence of keyframes');
</script>

0
tests/wpt/web-platform-tests/web-animations/animation-model/keyframes/effect-value-context.html → tests/wpt/web-platform-tests/web-animations/animation-model/keyframe-effects/effect-value-context.html
View file

3
tests/wpt/web-platform-tests/web-animations/keyframe-effect/keyframe-handling.html → tests/wpt/web-platform-tests/web-animations/animation-model/keyframe-effects/the-effect-value-of-a-keyframe-effect.html
View file

@ -2,10 +2,9 @@
<meta charset=utf-8>
<title>Keyframe handling tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#the-effect-value-of-a-keyframe-animation-effect">
<link rel="author" title="Brian Birtles" href="mailto:bbirtles@mozilla.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<div id="target"></div>

8
tests/wpt/web-platform-tests/web-animations/animatable/animate.html → tests/wpt/web-platform-tests/web-animations/interfaces/Animatable/animate.html
View file

@ -4,8 +4,8 @@
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animatable-animate">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../resources/keyframe-utils.js"></script>
<script src="../../testcommon.js"></script>
<script src="../../resources/keyframe-utils.js"></script>
<body>
<div id="log"></div>
<script>
@ -30,7 +30,7 @@ gPropertyIndexedKeyframesTests.forEach(function(subtest) {
test(function(t) {
var div = createDiv(t);
var anim = div.animate(subtest.input, 2000);
assert_frame_lists_equal(anim.effect.getFrames(), subtest.output);
assert_frame_lists_equal(anim.effect.getKeyframes(), subtest.output);
}, 'Element.animate() accepts ' + subtest.desc);
});
@ -38,7 +38,7 @@ gKeyframeSequenceTests.forEach(function(subtest) {
test(function(t) {
var div = createDiv(t);
var anim = div.animate(subtest.input, 2000);
assert_frame_lists_equal(anim.effect.getFrames(), subtest.output);
assert_frame_lists_equal(anim.effect.getKeyframes(), subtest.output);
}, 'Element.animate() accepts ' + subtest.desc);
});

2
tests/wpt/web-platform-tests/web-animations/animation/cancel.html → tests/wpt/web-platform-tests/web-animations/interfaces/Animation/cancel.html
View file

@ -4,7 +4,7 @@
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-cancel">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>

2
tests/wpt/web-platform-tests/web-animations/animation/constructor.html → tests/wpt/web-platform-tests/web-animations/interfaces/Animation/constructor.html
View file

@ -5,7 +5,7 @@
<link rel="author" title="Hiroyuki Ikezoe" href="mailto:hiikezoe@mozilla-japan.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<div id="target"></div>

2
tests/wpt/web-platform-tests/web-animations/animation/finish.html → tests/wpt/web-platform-tests/web-animations/interfaces/Animation/finish.html
View file

@ -4,7 +4,7 @@
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-finish">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>

2
tests/wpt/web-platform-tests/web-animations/animation/finished.html → tests/wpt/web-platform-tests/web-animations/interfaces/Animation/finished.html
View file

@ -4,7 +4,7 @@
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-finished">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>

2
tests/wpt/web-platform-tests/web-animations/animation/id.html → tests/wpt/web-platform-tests/web-animations/interfaces/Animation/id.html
View file

@ -4,7 +4,7 @@
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-id">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>

2
tests/wpt/web-platform-tests/web-animations/animation/oncancel.html → tests/wpt/web-platform-tests/web-animations/interfaces/Animation/oncancel.html
View file

@ -4,7 +4,7 @@
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-oncancel">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>

2
tests/wpt/web-platform-tests/web-animations/animation/onfinish.html → tests/wpt/web-platform-tests/web-animations/interfaces/Animation/onfinish.html
View file

@ -4,7 +4,7 @@
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-onfinish">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>

2
tests/wpt/web-platform-tests/web-animations/animation/pause.html → tests/wpt/web-platform-tests/web-animations/interfaces/Animation/pause.html
View file

@ -4,7 +4,7 @@
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-pause">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>

2
tests/wpt/web-platform-tests/web-animations/animation/play.html → tests/wpt/web-platform-tests/web-animations/interfaces/Animation/play.html
View file

@ -4,7 +4,7 @@
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-play">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>

2
tests/wpt/web-platform-tests/web-animations/animation/playState.html → tests/wpt/web-platform-tests/web-animations/interfaces/Animation/playState.html
View file

@ -4,7 +4,7 @@
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-playstate">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>

2
tests/wpt/web-platform-tests/web-animations/animation/playbackRate.html → tests/wpt/web-platform-tests/web-animations/interfaces/Animation/playbackRate.html
View file

@ -4,7 +4,7 @@
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-playbackrate">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>

2
tests/wpt/web-platform-tests/web-animations/animation/ready.html → tests/wpt/web-platform-tests/web-animations/interfaces/Animation/ready.html
View file

@ -4,7 +4,7 @@
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-ready">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>

2
tests/wpt/web-platform-tests/web-animations/animation/reverse.html → tests/wpt/web-platform-tests/web-animations/interfaces/Animation/reverse.html
View file

@ -4,7 +4,7 @@
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-reverse">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>

2
tests/wpt/web-platform-tests/web-animations/animation/startTime.html → tests/wpt/web-platform-tests/web-animations/interfaces/Animation/startTime.html
View file

@ -5,7 +5,7 @@
href="https://w3c.github.io/web-animations/#dom-animation-starttime">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>

2
tests/wpt/web-platform-tests/web-animations/animation-effect-timing/delay.html → tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/delay.html
View file

@ -5,7 +5,7 @@
<link rel="author" title="Daisuke Akatsuka" href="mailto:daisuke@mozilla-japan.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>

2
tests/wpt/web-platform-tests/web-animations/animation-effect-timing/direction.html → tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/direction.html
View file

@ -5,7 +5,7 @@
<link rel="author" title="Ryo Kato" href="mailto:foobar094@gmail.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>

2
tests/wpt/web-platform-tests/web-animations/animation-effect-timing/duration.html → tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/duration.html
View file

@ -5,7 +5,7 @@
<link rel="author" title="Ryo Motozawa" href="mailto:motozawa@mozilla-japan.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>

4
tests/wpt/web-platform-tests/web-animations/animation-effect-timing/easing.html → tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/easing.html
View file

@ -4,8 +4,8 @@
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-easing">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../resources/effect-easing-tests.js"></script>
<script src="../../testcommon.js"></script>
<script src="../../resources/effect-easing-tests.js"></script>
<body>
<div id="log"></div>
<script>

2
tests/wpt/web-platform-tests/web-animations/animation-effect-timing/endDelay.html → tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/endDelay.html
View file

@ -5,7 +5,7 @@
<link rel="author" title="Ryo Motozawa" href="mailto:motozawa@mozilla-japan.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>

2
tests/wpt/web-platform-tests/web-animations/animation-effect-timing/fill.html → tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/fill.html
View file

@ -4,7 +4,7 @@
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-fill">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>

2
tests/wpt/web-platform-tests/web-animations/animation-effect-timing/getAnimations.html → tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/getAnimations.html
View file

@ -5,7 +5,7 @@
<link rel="author" title="Ryo Motozawa" href="mailto:motozawa@mozilla-japan.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>

2
tests/wpt/web-platform-tests/web-animations/animation-effect-timing/getComputedStyle.html → tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/getComputedStyle.html
View file

@ -5,7 +5,7 @@
<link rel="author" title="Ryo Motozawa" href="mailto:motozawa@mozilla-japan.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>

2
tests/wpt/web-platform-tests/web-animations/animation-effect-timing/iterationStart.html → tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/iterationStart.html
View file

@ -5,7 +5,7 @@
<link rel="author" title="Daisuke Akatsuka" href="mailto:daisuke@mozilla-japan.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>

2
tests/wpt/web-platform-tests/web-animations/animation-effect-timing/iterations.html → tests/wpt/web-platform-tests/web-animations/interfaces/AnimationEffectTiming/iterations.html
View file

@ -4,7 +4,7 @@
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-iterations">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>

0
tests/wpt/web-platform-tests/web-animations/animation-timeline/document-timeline.html → tests/wpt/web-platform-tests/web-animations/interfaces/AnimationTimeline/document-timeline.html
View file

0
tests/wpt/web-platform-tests/web-animations/animation-timeline/idlharness.html → tests/wpt/web-platform-tests/web-animations/interfaces/AnimationTimeline/idlharness.html
View file

2
tests/wpt/web-platform-tests/web-animations/document/getAnimations.html → tests/wpt/web-platform-tests/web-animations/interfaces/Document/getAnimations.html
View file

@ -4,7 +4,7 @@
<link rel="help" href="https://w3c.github.io/web-animations/#dom-document-getanimations">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<div id="target"></div>

45
tests/wpt/web-platform-tests/web-animations/keyframe-effect/constructor.html → tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/constructor.html
View file

@ -4,8 +4,8 @@
<link rel="help" href="https://w3c.github.io/web-animations/#the-keyframeeffect-interfaces">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../resources/keyframe-utils.js"></script>
<script src="../../testcommon.js"></script>
<script src="../../resources/keyframe-utils.js"></script>
<body>
<div id="log"></div>
<div id="target"></div>
@ -21,7 +21,8 @@ var target = document.getElementById("target");
test(function(t) {
gEmptyKeyframeListTests.forEach(function(frames) {
assert_equals(new KeyframeEffectReadOnly(target, frames).getFrames().length,
assert_equals(new KeyframeEffectReadOnly(target, frames)
.getKeyframes().length,
0, "number of frames for " + JSON.stringify(frames));
});
}, "a KeyframeEffectReadOnly can be constructed with no frames");
@ -34,7 +35,7 @@ test(function(t) {
left: ["10px", "20px"],
easing: easing
});
assert_equals(effect.getFrames()[0].easing, expected,
assert_equals(effect.getKeyframes()[0].easing, expected,
"resulting easing for '" + easing + "'");
});
}, "easing values are parsed correctly when passed to the " +
@ -48,7 +49,7 @@ test(function(t) {
{ offset: 0, left: "10px", easing: easing },
{ offset: 1, left: "20px" }
]);
assert_equals(effect.getFrames()[0].easing, expected,
assert_equals(effect.getKeyframes()[0].easing, expected,
"resulting easing for '" + easing + "'");
});
}, "easing values are parsed correctly when passed to the " +
@ -68,37 +69,37 @@ test(function(t) {
"KeyframeEffectReadOnly constructor in KeyframeTimingOptions");
test(function(t) {
var getFrame = function(composite) {
var getKeyframe = function(composite) {
return { left: [ "10px", "20px" ], composite: composite };
};
gGoodKeyframeCompositeValueTests.forEach(function(composite) {
var effect = new KeyframeEffectReadOnly(target, getFrame(composite));
assert_equals(effect.getFrames()[0].composite, composite,
var effect = new KeyframeEffectReadOnly(target, getKeyframe(composite));
assert_equals(effect.getKeyframes()[0].composite, composite,
"resulting composite for '" + composite + "'");
});
gBadCompositeValueTests.forEach(function(composite) {
assert_throws(new TypeError, function() {
new KeyframeEffectReadOnly(target, getFrame(composite));
new KeyframeEffectReadOnly(target, getKeyframe(composite));
});
});
}, "composite values are parsed correctly when passed to the " +
"KeyframeEffectReadOnly constructor in property-indexed keyframes");
test(function(t) {
var getFrames = function(composite) {
var getKeyframes = function(composite) {
return [
{ offset: 0, left: "10px", composite: composite },
{ offset: 1, left: "20px" }
];
};
gGoodKeyframeCompositeValueTests.forEach(function(composite) {
var effect = new KeyframeEffectReadOnly(target, getFrames(composite));
assert_equals(effect.getFrames()[0].composite, composite,
var effect = new KeyframeEffectReadOnly(target, getKeyframes(composite));
assert_equals(effect.getKeyframes()[0].composite, composite,
"resulting composite for '" + composite + "'");
});
gBadCompositeValueTests.forEach(function(composite) {
assert_throws(new TypeError, function() {
new KeyframeEffectReadOnly(target, getFrames(composite));
new KeyframeEffectReadOnly(target, getKeyframes(composite));
});
});
}, "composite values are parsed correctly when passed to the " +
@ -109,7 +110,7 @@ test(function(t) {
var effect = new KeyframeEffectReadOnly(target, {
left: ["10px", "20px"]
}, { composite: composite });
assert_equals(effect.getFrames()[0].composite, composite,
assert_equals(effect.getKeyframes()[0].composite, composite,
"resulting composite for '" + composite + "'");
});
gBadCompositeValueTests.forEach(function(composite) {
@ -125,13 +126,15 @@ test(function(t) {
gPropertyIndexedKeyframesTests.forEach(function(subtest) {
test(function(t) {
var effect = new KeyframeEffectReadOnly(target, subtest.input);
assert_frame_lists_equal(effect.getFrames(), subtest.output);
assert_frame_lists_equal(effect.getKeyframes(), subtest.output);
}, "a KeyframeEffectReadOnly can be constructed with " + subtest.desc);
test(function(t) {
var effect = new KeyframeEffectReadOnly(target, subtest.input);
var secondEffect = new KeyframeEffectReadOnly(target, effect.getFrames());
assert_frame_lists_equal(secondEffect.getFrames(), effect.getFrames());
var secondEffect =
new KeyframeEffectReadOnly(target, effect.getKeyframes());
assert_frame_lists_equal(secondEffect.getKeyframes(),
effect.getKeyframes());
}, "a KeyframeEffectReadOnly constructed with " + subtest.desc +
" roundtrips");
});
@ -159,13 +162,15 @@ test(function(t) {
gKeyframeSequenceTests.forEach(function(subtest) {
test(function(t) {
var effect = new KeyframeEffectReadOnly(target, subtest.input);
assert_frame_lists_equal(effect.getFrames(), subtest.output);
assert_frame_lists_equal(effect.getKeyframes(), subtest.output);
}, "a KeyframeEffectReadOnly can be constructed with " + subtest.desc);
test(function(t) {
var effect = new KeyframeEffectReadOnly(target, subtest.input);
var secondEffect = new KeyframeEffectReadOnly(target, effect.getFrames());
assert_frame_lists_equal(secondEffect.getFrames(), effect.getFrames());
var secondEffect =
new KeyframeEffectReadOnly(target, effect.getKeyframes());
assert_frame_lists_equal(secondEffect.getKeyframes(),
effect.getKeyframes());
}, "a KeyframeEffectReadOnly constructed with " + subtest.desc +
" roundtrips");
});

4
tests/wpt/web-platform-tests/web-animations/keyframe-effect/effect-easing.html → tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/effect-easing.html
View file

@ -5,8 +5,8 @@
<link rel="author" title="Hiroyuki Ikezoe" href="mailto:hiikezoe@mozilla-japan.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../resources/effect-easing-tests.js"></script>
<script src="../../testcommon.js"></script>
<script src="../../resources/effect-easing-tests.js"></script>
<body>
<div id="log"></div>
<div id="target"></div>

5
tests/wpt/web-platform-tests/web-animations/keyframe-effect/getComputedTiming.html → tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/getComputedTiming.html
View file

@ -5,7 +5,7 @@
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<div id="target"></div>
@ -141,9 +141,6 @@ var gActiveDurationTests = [
{ desc: "an infinite duration and infinite iteration count",
input: { duration: Infinity, iterations: Infinity },
expected: Infinity },
{ desc: "an infinite duration and zero iteration count",
input: { duration: Infinity, iterations: 0 },
expected: 0 }
];
gActiveDurationTests.forEach(function(stest) {

89
tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument.html Normal file
View file

@ -0,0 +1,89 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>KeyframeEffectReadOnly constructor tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#processing-a-keyframes-argument">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<div id="target"></div>
<script>
'use strict';
// Test the "process a keyframe-like object" procedure.
//
// This file only tests the KeyframeEffectReadOnly constructor since it is
// assumed that the implementation of the KeyframeEffect constructor,
// Animatable.animate() method, and KeyframeEffect.setKeyframes() method will
// all share common machinery and it is not necessary to test each method.
// Test that only animatable properties are accessed
var gNonAnimatableProps = [
'animation', // Shorthands where all the longhand sub-properties are not
// animatable, are also not animatable.
'animationDelay',
'animationDirection',
'animationDuration',
'animationFillMode',
'animationIterationCount',
'animationName',
'animationPlayState',
'animationTimingFunction',
'transition',
'transitionDelay',
'transitionDuration',
'transitionProperty',
'transitionTimingFunction',
'display',
'unsupportedProperty',
];
function TestKeyframe(testProp) {
var _propAccessCount = 0;
Object.defineProperty(this, testProp, {
get: function() { _propAccessCount++; },
enumerable: true
});
Object.defineProperty(this, 'propAccessCount', {
get: function() { return _propAccessCount; }
});
}
function GetTestKeyframeSequence(testProp) {
return [ new TestKeyframe(testProp) ]
}
gNonAnimatableProps.forEach(function(prop) {
test(function(t) {
var testKeyframe = new TestKeyframe(prop);
new KeyframeEffectReadOnly(null, testKeyframe);
assert_equals(testKeyframe.propAccessCount, 0, 'Accessor not called');
}, 'non-animatable property \'' + prop + '\' is not accessed when using'
+ ' a property-indexed keyframe object');
});
gNonAnimatableProps.forEach(function(prop) {
test(function(t) {
var testKeyframes = GetTestKeyframeSequence(prop);
new KeyframeEffectReadOnly(null, testKeyframes);
assert_equals(testKeyframes[0].propAccessCount, 0, 'Accessor not called');
}, 'non-animatable property \'' + prop + '\' is not accessed when using'
+ ' a keyframe sequence');
});
// FIXME: Test that non-enumerable properties are not accessed
// FIXME: Test that properties are accessed in ascending order by Unicode
// codepoint
// (There is an existing test for this in
// keyframe-effect/constructor.html that should be moved here.)
</script>

22
tests/wpt/web-platform-tests/web-animations/keyframe-effect/setFrames.html → tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/setKeyframes.html
View file

@ -1,11 +1,11 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>KeyframeEffect setFrames() tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-keyframeeffect-setframes">
<title>KeyframeEffect setKeyframes() tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-keyframeeffect-setkeyframes">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../resources/keyframe-utils.js"></script>
<script src="../../testcommon.js"></script>
<script src="../../resources/keyframe-utils.js"></script>
<body>
<div id="log"></div>
<div id="target"></div>
@ -17,24 +17,24 @@ var target = document.getElementById('target');
test(function(t) {
gEmptyKeyframeListTests.forEach(function(frame) {
var effect = new KeyframeEffect(target, {});
effect.setFrames(frame);
assert_frame_lists_equal(effect.getFrames(), []);
effect.setKeyframes(frame);
assert_frame_lists_equal(effect.getKeyframes(), []);
});
}, 'Keyframes can be replaced with an empty keyframe');
gPropertyIndexedKeyframesTests.forEach(function(subtest) {
test(function(t) {
var effect = new KeyframeEffect(target, {});
effect.setFrames(subtest.input);
assert_frame_lists_equal(effect.getFrames(), subtest.output);
effect.setKeyframes(subtest.input);
assert_frame_lists_equal(effect.getKeyframes(), subtest.output);
}, 'Keyframes can be replaced with ' + subtest.desc);
});
gKeyframeSequenceTests.forEach(function(subtest) {
test(function(t) {
var effect = new KeyframeEffect(target, {});
effect.setFrames(subtest.input);
assert_frame_lists_equal(effect.getFrames(), subtest.output);
effect.setKeyframes(subtest.input);
assert_frame_lists_equal(effect.getKeyframes(), subtest.output);
}, 'Keyframes can be replaced with ' + subtest.desc);
});
@ -42,7 +42,7 @@ gInvalidKeyframesTests.forEach(function(subtest) {
test(function(t) {
var effect = new KeyframeEffect(target, {});
assert_throws(subtest.expected, function() {
effect.setFrames(subtest.input);
effect.setKeyframes(subtest.input);
});
}, 'KeyframeEffect constructor throws with ' + subtest.desc);
});

2
tests/wpt/web-platform-tests/web-animations/keyframe-effect/setTarget.html → tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/setTarget.html
View file

@ -5,7 +5,7 @@
href="https://w3c.github.io/web-animations/#dom-keyframeeffect-target">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>

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

@ -140,6 +140,20 @@ var gPropertyIndexedKeyframesTests = [
opacity: "0" },
{ offset: null, computedOffset: 1, easing: "linear",
opacity: "1" }] },
{ desc: "a property-indexed keyframes specification with a CSS variable"
+ " reference",
input: { left: [ "var(--dist)", "calc(var(--dist) + 100px)" ] },
output: [{ offset: null, computedOffset: 0.0, easing: "linear",
left: "var(--dist)" },
{ offset: null, computedOffset: 1.0, easing: "linear",
left: "calc(var(--dist) + 100px)" }] },
{ desc: "a property-indexed keyframes specification with a CSS variable"
+ " reference in a shorthand property",
input: { margin: [ "var(--dist)", "calc(var(--dist) + 100px)" ] },
output: [{ offset: null, computedOffset: 0.0, easing: "linear",
margin: "var(--dist)" },
{ offset: null, computedOffset: 1.0, easing: "linear",
margin: "calc(var(--dist) + 100px)" }] },
{ desc: "a one property one value property-indexed keyframes specification",
input: { left: ["10px"] },
output: [{ offset: null, computedOffset: 1, easing: "linear",
@ -163,38 +177,6 @@ var gPropertyIndexedKeyframesTests = [
left: "10px" },
{ offset: null, computedOffset: 1, easing: "linear",
left: "invalid" }] },
{ desc: "a two property property-indexed keyframes specification where one"
+ " property is missing from the first keyframe",
input: [{ offset: 0, left: "10px" },
{ offset: 1, left: "20px", top: "30px" }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear",
left: "20px", top: "30px" }] },
{ desc: "a two property property-indexed keyframes specification where one"
+ " property is missing from the last keyframe",
input: [{ offset: 0, left: "10px", top: "20px" },
{ offset: 1, left: "30px" }],
output: [{ offset: 0, computedOffset: 0, easing: "linear",
left: "10px" , top: "20px" },
{ offset: 1, computedOffset: 1, easing: "linear",
left: "30px" }] },
{ desc: "a property-indexed keyframes specification with repeated values"
+ " at offset 0 with different easings",
input: [{ offset: 0.0, left: "100px", easing: "ease" },
{ offset: 0.0, left: "200px", easing: "ease" },
{ offset: 0.5, left: "300px", easing: "linear" },
{ offset: 1.0, left: "400px", easing: "ease-out" },
{ offset: 1.0, left: "500px", easing: "step-end" }],
output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease",
left: "100px" },
{ offset: 0.0, computedOffset: 0.0, easing: "ease",
left: "200px" },
{ offset: 0.5, computedOffset: 0.5, easing: "linear",
left: "300px" },
{ offset: 1.0, computedOffset: 1.0, easing: "ease-out",
left: "400px" },
{ offset: 1.0, computedOffset: 1.0, easing: "step-end",
left: "500px" }] },
];
var gKeyframeSequenceTests = [
@ -370,6 +352,21 @@ var gKeyframeSequenceTests = [
output: [{ offset: 0, computedOffset: 0, easing: "linear", opacity: "0" },
{ offset: 1, computedOffset: 1, easing: "linear", opacity: "1" }]
},
{ desc: "a keyframe sequence with a CSS variable reference",
input: [{ left: "var(--dist)" },
{ left: "calc(var(--dist) + 100px)" }],
output: [{ offset: null, computedOffset: 0.0, easing: "linear",
left: "var(--dist)" },
{ offset: null, computedOffset: 1.0, easing: "linear",
left: "calc(var(--dist) + 100px)" }] },
{ desc: "a keyframe sequence with a CSS variable reference in a shorthand"
+ " property",
input: [{ margin: "var(--dist)" },
{ margin: "calc(var(--dist) + 100px)" }],
output: [{ offset: null, computedOffset: 0.0, easing: "linear",
margin: "var(--dist)" },
{ offset: null, computedOffset: 1.0, easing: "linear",
margin: "calc(var(--dist) + 100px)" }] },
{ desc: "a keyframe sequence where shorthand precedes longhand",
input: [{ offset: 0, margin: "10px", marginRight: "20px" },
{ offset: 1, margin: "30px" }],
@ -404,7 +401,39 @@ var gKeyframeSequenceTests = [
border: "2px dotted rgb(4, 5, 6)",
borderLeft: "1px solid rgb(1, 2, 3)" },
{ offset: 1, computedOffset: 1, easing: "linear",
border: "3px dashed rgb(7, 8, 9)" }] }
border: "3px dashed rgb(7, 8, 9)" }] },
{ desc: "a two property keyframe sequence where one property is missing"
+ " from the first keyframe",
input: [{ offset: 0, left: "10px" },
{ offset: 1, left: "20px", top: "30px" }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear",
left: "20px", top: "30px" }] },
{ desc: "a two property keyframe sequence where one property is missing"
+ " from the last keyframe",
input: [{ offset: 0, left: "10px", top: "20px" },
{ offset: 1, left: "30px" }],
output: [{ offset: 0, computedOffset: 0, easing: "linear",
left: "10px" , top: "20px" },
{ offset: 1, computedOffset: 1, easing: "linear",
left: "30px" }] },
{ desc: "a keyframe sequence with repeated values at offset 1 with"
+ " different easings",
input: [{ offset: 0.0, left: "100px", easing: "ease" },
{ offset: 0.0, left: "200px", easing: "ease" },
{ offset: 0.5, left: "300px", easing: "linear" },
{ offset: 1.0, left: "400px", easing: "ease-out" },
{ offset: 1.0, left: "500px", easing: "step-end" }],
output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease",
left: "100px" },
{ offset: 0.0, computedOffset: 0.0, easing: "ease",
left: "200px" },
{ offset: 0.5, computedOffset: 0.5, easing: "linear",
left: "300px" },
{ offset: 1.0, computedOffset: 1.0, easing: "ease-out",
left: "400px" },
{ offset: 1.0, computedOffset: 1.0, easing: "step-end",
left: "500px" }] },
];
var gInvalidKeyframesTests = [