Skip to content
Permalink
Browse files
[Web Animations] Add Web Platform tests
https://bugs.webkit.org/show_bug.cgi?id=178999

Patch by Antoine Quint <graouts@apple.com> on 2017-10-30
Reviewed by Sam Weinig.

The vast majority is failing, as expected due to the nascent status of our Web Animations implementation.

* http/wpt/web-animations/OWNERS: Added.
* http/wpt/web-animations/README.md: Added.
* http/wpt/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt: Added.
* http/wpt/web-animations/animation-model/animation-types/accumulation-per-property.html: Added.
* http/wpt/web-animations/animation-model/animation-types/addition-per-property-expected.txt: Added.
* http/wpt/web-animations/animation-model/animation-types/addition-per-property.html: Added.
* http/wpt/web-animations/animation-model/animation-types/discrete-animation-expected.txt: Added.
* http/wpt/web-animations/animation-model/animation-types/discrete-animation.html: Added.
* http/wpt/web-animations/animation-model/animation-types/interpolation-per-property-expected.txt: Added.
* http/wpt/web-animations/animation-model/animation-types/interpolation-per-property.html: Added.
* http/wpt/web-animations/animation-model/animation-types/property-list.js: Added.
(testAnimationSamplesWithAnyOrder):
(isSupported):
(TestKeyframe.):
(TestKeyframe.get Object):
(TestKeyframe):
(get propertyToIDL):
(calcFromPercentage):
* http/wpt/web-animations/animation-model/animation-types/property-types.js: Added.
(const.discreteType.):
(const.discreteType.testInterpolation):
(const.discreteType.testAdditionOrAccumulation):
(const.discreteType.testAddition):
(const.discreteType.testAccumulation):
(const.lengthType.testInterpolation):
(const.lengthType.testAdditionOrAccumulation):
(const.lengthType.testAddition):
(const.lengthType.testAccumulation):
(const.lengthPairType.testInterpolation):
(const.lengthPairType.testAdditionOrAccumulation):
(const.lengthPairType.testAddition):
(const.lengthPairType.testAccumulation):
(const.percentageType.testInterpolation):
(const.percentageType.testAdditionOrAccumulation):
(const.percentageType.testAddition):
(const.percentageType.testAccumulation):
(const.integerType.testInterpolation):
(const.integerType.testAdditionOrAccumulation):
(const.integerType.testAddition):
(const.integerType.testAccumulation):
(const.positiveIntegerType.testInterpolation):
(const.positiveIntegerType.testAdditionOrAccumulation):
(const.positiveIntegerType.testAddition):
(const.positiveIntegerType.testAccumulation):
(const.lengthPercentageOrCalcType.testInterpolation):
(const.lengthPercentageOrCalcType.testAdditionOrAccumulation):
(const.lengthPercentageOrCalcType.testAddition):
(const.lengthPercentageOrCalcType.testAccumulation):
(const.positiveNumberType.testInterpolation):
(const.positiveNumberType.testAdditionOrAccumulation):
(const.positiveNumberType.testAddition):
(const.positiveNumberType.testAccumulation):
(const.opacityType.testInterpolation):
(const.opacityType.testAdditionOrAccumulation):
(const.opacityType.testAddition):
(const.opacityType.testAccumulation):
(const.visibilityType.testInterpolation):
(const.visibilityType.testAdditionOrAccumulation):
(const.visibilityType.testAddition):
(const.visibilityType.testAccumulation):
(const.colorType.testInterpolation):
(const.colorType.testAdditionOrAccumulation):
(const.colorType.testAddition):
(const.colorType.testAccumulation):
(const.transformListType.testInterpolation):
(const.transformListType.testAddition):
(const.transformListType.testAccumulation):
(const.filterListType.testInterpolation):
(const.filterListType.testAddition):
(const.filterListType.testAccumulation):
(const.textShadowListType.testInterpolation):
(const.textShadowListType.testAddition):
(const.textShadowListType.testAccumulation):
(const.boxShadowListType.testInterpolation):
(const.boxShadowListType.testAddition):
(const.boxShadowListType.testAccumulation):
(const.positionType.testInterpolation):
(const.positionType.testAdditionOrAccumulation):
(const.positionType.testAddition):
(const.positionType.testAccumulation):
(const.rectType.testInterpolation):
(const.rectType.testAdditionOrAccumulation):
(const.rectType.testAddition):
(const.rectType.testAccumulation):
(const.dasharrayType.testInterpolation):
(const.dasharrayType.testAdditionOrAccumulation):
(const.dasharrayType.testAddition):
(const.dasharrayType.testAccumulation):
(const.fontStretchType.testInterpolation):
(const.fontStretchType.testAdditionOrAccumulation):
(const.fontStretchType.testAddition):
(const.fontStretchType.testAccumulation):
(const.fontVariationSettingsType.testInterpolation):
(const.fontVariationSettingsType.testAdditionOrAccumulation):
(const.fontVariationSettingsType.testAddition):
(const.fontVariationSettingsType.testAccumulation):
* http/wpt/web-animations/animation-model/combining-effects/effect-composition-expected.txt: Added.
* http/wpt/web-animations/animation-model/combining-effects/effect-composition.html: Added.
* http/wpt/web-animations/animation-model/keyframe-effects/effect-value-context-expected.txt: Added.
* http/wpt/web-animations/animation-model/keyframe-effects/effect-value-context.html: Added.
* http/wpt/web-animations/animation-model/keyframe-effects/effect-value-overlapping-keyframes-expected.txt: Added.
* http/wpt/web-animations/animation-model/keyframe-effects/effect-value-overlapping-keyframes.html: Added.
* http/wpt/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance-expected.txt: Added.
* http/wpt/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html: Added.
* http/wpt/web-animations/animation-model/keyframe-effects/effect-value-visibility-expected.txt: Added.
* http/wpt/web-animations/animation-model/keyframe-effects/effect-value-visibility.html: Added.
* http/wpt/web-animations/interfaces/Animatable/animate-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animatable/animate-no-browsing-context-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animatable/animate-no-browsing-context.html: Added.
* http/wpt/web-animations/interfaces/Animatable/animate.html: Added.
* http/wpt/web-animations/interfaces/Animatable/getAnimations-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animatable/getAnimations.html: Added.
* http/wpt/web-animations/interfaces/Animation/cancel-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animation/cancel.html: Added.
* http/wpt/web-animations/interfaces/Animation/constructor-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animation/constructor.html: Added.
* http/wpt/web-animations/interfaces/Animation/effect-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animation/effect.html: Added.
* http/wpt/web-animations/interfaces/Animation/finish-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animation/finish.html: Added.
* http/wpt/web-animations/interfaces/Animation/finished-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animation/finished.html: Added.
* http/wpt/web-animations/interfaces/Animation/id-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animation/id.html: Added.
* http/wpt/web-animations/interfaces/Animation/idlharness-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animation/idlharness.html: Added.
* http/wpt/web-animations/interfaces/Animation/oncancel-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animation/oncancel.html: Added.
* http/wpt/web-animations/interfaces/Animation/onfinish-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animation/onfinish.html: Added.
* http/wpt/web-animations/interfaces/Animation/pause-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animation/pause.html: Added.
* http/wpt/web-animations/interfaces/Animation/play-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animation/play.html: Added.
* http/wpt/web-animations/interfaces/Animation/playState-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animation/playState.html: Added.
* http/wpt/web-animations/interfaces/Animation/playbackRate-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animation/playbackRate.html: Added.
* http/wpt/web-animations/interfaces/Animation/ready-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animation/ready.html: Added.
* http/wpt/web-animations/interfaces/Animation/startTime-expected.txt: Added.
* http/wpt/web-animations/interfaces/Animation/startTime.html: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/delay-expected.txt: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/delay.html: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/direction-expected.txt: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/direction.html: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/duration-expected.txt: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/duration.html: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/easing-expected.txt: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/easing.html: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/endDelay-expected.txt: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/endDelay.html: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/fill-expected.txt: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/fill.html: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/getAnimations-expected.txt: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/getAnimations.html: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/getComputedStyle-expected.txt: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/getComputedStyle.html: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/iterationStart-expected.txt: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/iterationStart.html: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/iterations-expected.txt: Added.
* http/wpt/web-animations/interfaces/AnimationEffectTiming/iterations.html: Added.
* http/wpt/web-animations/interfaces/AnimationTimeline/document-timeline-expected.txt: Added.
* http/wpt/web-animations/interfaces/AnimationTimeline/document-timeline.html: Added.
* http/wpt/web-animations/interfaces/AnimationTimeline/idlharness-expected.txt: Added.
* http/wpt/web-animations/interfaces/AnimationTimeline/idlharness.html: Added.
* http/wpt/web-animations/interfaces/Document/getAnimations-expected.txt: Added.
* http/wpt/web-animations/interfaces/Document/getAnimations.html: Added.
* http/wpt/web-animations/interfaces/DocumentTimeline/constructor-expected.txt: Added.
* http/wpt/web-animations/interfaces/DocumentTimeline/constructor.html: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/composite-expected.txt: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/composite.html: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/constructor-expected.txt: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/constructor.html: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/copy-constructor-expected.txt: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/copy-constructor.html: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/getComputedTiming-expected.txt: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/getComputedTiming.html: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/iterationComposite-expected.txt: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/iterationComposite.html: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-001-expected.txt: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-001.html: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-002-expected.txt: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-002.html: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/setKeyframes-expected.txt: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/setKeyframes.html: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/setTarget-expected.txt: Added.
* http/wpt/web-animations/interfaces/KeyframeEffect/setTarget.html: Added.
* http/wpt/web-animations/interfaces/KeyframeEffectReadOnly/copy-constructor-expected.txt: Added.
* http/wpt/web-animations/interfaces/KeyframeEffectReadOnly/copy-constructor.html: Added.
* http/wpt/web-animations/resources/easing-tests.js: Added.
(easingFunction.stepStart):
(easingFunction.stepEnd):
(easingFunction.framesTiming):
(easingFunction.cubicBezier):
* http/wpt/web-animations/resources/effect-tests.js: Added.
(assert_computed_timing_for_each_phase):
* http/wpt/web-animations/resources/keyframe-utils.js: Added.
(assert_frame_lists_equal):
(assert_frames_equal):
* http/wpt/web-animations/resources/xhr-doc.py: Added.
(main):
* http/wpt/web-animations/testcommon.js: Added.
(window.assert_times_equal.window.assert_times_equal):
(createDiv):
(createElement):
(createStyle):
(createPseudo):
(xForT):
(yForT):
(tForX):
(return.bezierClosure):
(cubicBezier):
(stepEnd.return.stepEndClosure):
(stepEnd):
(stepStart.return.stepStartClosure):
(stepStart):
(framesTiming.return.framesClosure):
(framesTiming):
(waitForAnimationFrames):
(rotate3dToMatrix3d):
(rotate3dToMatrix):
(assert_matrix_equals):
* http/wpt/web-animations/timing-model/animation-effects/active-time-expected.txt: Added.
* http/wpt/web-animations/timing-model/animation-effects/active-time.html: Added.
* http/wpt/web-animations/timing-model/animation-effects/current-iteration-expected.txt: Added.
* http/wpt/web-animations/timing-model/animation-effects/current-iteration.html: Added.
* http/wpt/web-animations/timing-model/animation-effects/local-time-expected.txt: Added.
* http/wpt/web-animations/timing-model/animation-effects/local-time.html: Added.
* http/wpt/web-animations/timing-model/animation-effects/phases-and-states-expected.txt: Added.
* http/wpt/web-animations/timing-model/animation-effects/phases-and-states.html: Added.
* http/wpt/web-animations/timing-model/animation-effects/simple-iteration-progress-expected.txt: Added.
* http/wpt/web-animations/timing-model/animation-effects/simple-iteration-progress.html: Added.
* http/wpt/web-animations/timing-model/animations/canceling-an-animation-expected.txt: Added.
* http/wpt/web-animations/timing-model/animations/canceling-an-animation.html: Added.
* http/wpt/web-animations/timing-model/animations/current-time-expected.txt: Added.
* http/wpt/web-animations/timing-model/animations/current-time.html: Added.
* http/wpt/web-animations/timing-model/animations/finishing-an-animation-expected.txt: Added.
* http/wpt/web-animations/timing-model/animations/finishing-an-animation.html: Added.
* http/wpt/web-animations/timing-model/animations/pausing-an-animation-expected.txt: Added.
* http/wpt/web-animations/timing-model/animations/pausing-an-animation.html: Added.
* http/wpt/web-animations/timing-model/animations/playing-an-animation-expected.txt: Added.
* http/wpt/web-animations/timing-model/animations/playing-an-animation.html: Added.
* http/wpt/web-animations/timing-model/animations/reversing-an-animation-expected.txt: Added.
* http/wpt/web-animations/timing-model/animations/reversing-an-animation.html: Added.
* http/wpt/web-animations/timing-model/animations/set-the-animation-start-time-expected.txt: Added.
* http/wpt/web-animations/timing-model/animations/set-the-animation-start-time.html: Added.
* http/wpt/web-animations/timing-model/animations/set-the-target-effect-of-an-animation-expected.txt: Added.
* http/wpt/web-animations/timing-model/animations/set-the-target-effect-of-an-animation.html: Added.
* http/wpt/web-animations/timing-model/animations/set-the-timeline-of-an-animation-expected.txt: Added.
* http/wpt/web-animations/timing-model/animations/set-the-timeline-of-an-animation.html: Added.
* http/wpt/web-animations/timing-model/animations/updating-the-finished-state-expected.txt: Added.
* http/wpt/web-animations/timing-model/animations/updating-the-finished-state.html: Added.
* http/wpt/web-animations/timing-model/time-transformations/transformed-progress-expected.txt: Added.
* http/wpt/web-animations/timing-model/time-transformations/transformed-progress.html: Added.

Canonical link: https://commits.webkit.org/195147@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@224182 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
graouts authored and webkit-commit-queue committed Oct 30, 2017
1 parent 603ba84 commit 74d6234812cb2a70f082c28422d48f69e2b4251b
Showing 144 changed files with 15,510 additions and 0 deletions.

Large diffs are not rendered by default.

@@ -0,0 +1 @@
@birtles
@@ -0,0 +1,107 @@
Web Animations Test Suite
=========================

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/interfaces/Animation/startTime.html`
However, in the spec most of the logic is in the &ldquo;Set the animation
start time&ldquo; procedure in the &ldquo;Timing model&rdquo; section.

Instead, try something like:

> * `/web-animations/timing-model/animations/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/interfaces/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) {
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
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
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!
@@ -0,0 +1,4 @@

Harness Error (TIMEOUT), message = null


@@ -0,0 +1,58 @@
<!doctype html>
<meta charset=utf-8>
<title>Tests for animation type of accumulation</title>
<link rel="help" href="https://w3c.github.io/web-animations/#animation-types">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<script src="property-list.js"></script>
<script src="property-types.js"></script>
<style>
html {
font-size: 10px;
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';

for (var property in gCSSProperties) {
if (!isSupported(property)) {
continue;
}

var animationTypes = gCSSProperties[property].types;
var setupFunction = gCSSProperties[property].setup;
animationTypes.forEach(function(animationType) {
var typeObject;
var animationTypeString;
if (typeof animationType === 'string') {
typeObject = types[animationType];
animationTypeString = animationType;
} else if (typeof animationType === 'object' &&
animationType.type && typeof animationType.type === 'string') {
typeObject = types[animationType.type];
animationTypeString = animationType.type;
}

// First, test that the animation type object has 'testAccumulation'.
// We use test() function here so that we can continue the remainder tests
// even if this test fails.
test(function(t) {
assert_own_property(typeObject, 'testAccumulation', animationTypeString +
' should have testAccumulation property');
assert_equals(typeof typeObject.testAccumulation, 'function',
'testAccumulation method should be a function');
}, property + ' (type: ' + animationTypeString +
') has testAccumulation function');

if (typeObject.testAccumulation &&
typeof typeObject.testAccumulation === 'function') {
typeObject.testAccumulation(property,
setupFunction,
animationType.options);
}
});
}
</script>
@@ -0,0 +1,4 @@

Harness Error (TIMEOUT), message = null


@@ -0,0 +1,58 @@
<!doctype html>
<meta charset=utf-8>
<title>Tests for animation type of addition</title>
<link rel="help" href="https://w3c.github.io/web-animations/#animation-types">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<script src="property-list.js"></script>
<script src="property-types.js"></script>
<style>
html {
font-size: 10px;
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';

for (var property in gCSSProperties) {
if (!isSupported(property)) {
continue;
}

var animationTypes = gCSSProperties[property].types;
var setupFunction = gCSSProperties[property].setup;
animationTypes.forEach(function(animationType) {
var typeObject;
var animationTypeString;
if (typeof animationType === 'string') {
typeObject = types[animationType];
animationTypeString = animationType;
} else if (typeof animationType === 'object' &&
animationType.type && typeof animationType.type === 'string') {
typeObject = types[animationType.type];
animationTypeString = animationType.type;
}

// First, test that the animation type object has 'testAddition'.
// We use test() function here so that we can continue the remainder tests
// even if this test fails.
test(function(t) {
assert_own_property(typeObject, 'testAddition', animationTypeString +
' should have testAddition property');
assert_equals(typeof typeObject.testAddition, 'function',
'testAddition method should be a function');
}, property + ' (type: ' + animationTypeString +
') has testAddition function');

if (typeObject.testAddition &&
typeof typeObject.testAddition === 'function') {
typeObject.testAddition(property,
setupFunction,
animationType.options);
}
});
}
</script>
@@ -0,0 +1,9 @@

FAIL Test animating discrete values div.animate is not a function. (In 'div.animate({ fontStyle: [ 'normal', 'italic' ] },
{ duration: 1000, fill: 'forwards' })', 'div.animate' is undefined)
FAIL Test discrete animation is used when interpolation fails div.animate is not a function. (In 'div.animate({ height: [ 'auto', '200px' ] },
{ duration: 1000, fill: 'forwards' })', 'div.animate' is undefined)
FAIL Test discrete animation is used only for pairs of values that cannot be interpolated undefined is not a function (near '...div.animate...')
FAIL Test the 50% switch point for discrete animation is based on the effect easing undefined is not a function (near '...div.animate...')
FAIL Test the 50% switch point for discrete animation is based on the keyframe easing undefined is not a function (near '...div.animate...')

@@ -0,0 +1,135 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Tests for discrete animation</title>
<link rel="help" href="http://w3c.github.io/web-animations/#animatable-as-string-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({ fontStyle: [ 'normal', 'italic' ] },
{ duration: 1000, fill: 'forwards' });

assert_equals(getComputedStyle(div).fontStyle, 'normal',
'Animation produces \'from\' value at start of interval');
anim.currentTime = anim.effect.getComputedTiming().duration / 2 - 1;
assert_equals(getComputedStyle(div).fontStyle, 'normal',
'Animation produces \'from\' value just before the middle of'
+ ' the interval');
anim.currentTime++;
assert_equals(getComputedStyle(div).fontStyle, 'italic',
'Animation produces \'to\' value at exact middle of'
+ ' the interval');
anim.finish();
assert_equals(getComputedStyle(div).fontStyle, 'italic',
'Animation produces \'to\' value during forwards fill');
}, 'Test animating discrete values');

test(function(t) {
var div = createDiv(t);
var originalHeight = getComputedStyle(div).height;

var anim = div.animate({ height: [ 'auto', '200px' ] },
{ duration: 1000, fill: 'forwards' });

assert_equals(getComputedStyle(div).height, originalHeight,
'Animation produces \'from\' value at start of interval');
anim.currentTime = anim.effect.getComputedTiming().duration / 2 - 1;
assert_equals(getComputedStyle(div).height, originalHeight,
'Animation produces \'from\' value just before the middle of'
+ ' the interval');
anim.currentTime++;
assert_equals(getComputedStyle(div).height, '200px',
'Animation produces \'to\' value at exact middle of'
+ ' the interval');
anim.finish();
assert_equals(getComputedStyle(div).height, '200px',
'Animation produces \'to\' value during forwards fill');
}, 'Test discrete animation is used when interpolation fails');

test(function(t) {
var div = createDiv(t);
var originalHeight = getComputedStyle(div).height;

var anim = div.animate({ height: [ 'auto',
'200px',
'300px',
'auto',
'400px' ] },
{ duration: 1000, fill: 'forwards' });

// There are five values, so there are four pairs to try to interpolate.
// We test at the middle of each pair.
assert_equals(getComputedStyle(div).height, originalHeight,
'Animation produces \'from\' value at start of interval');
anim.currentTime = 125;
assert_equals(getComputedStyle(div).height, '200px',
'First non-interpolable pair uses discrete interpolation');
anim.currentTime += 250;
assert_equals(getComputedStyle(div).height, '250px',
'Second interpolable pair uses linear interpolation');
anim.currentTime += 250;
assert_equals(getComputedStyle(div).height, originalHeight,
'Third non-interpolable pair uses discrete interpolation');
anim.currentTime += 250;
assert_equals(getComputedStyle(div).height, '400px',
'Fourth non-interpolable pair uses discrete interpolation');
}, 'Test discrete animation is used only for pairs of values that cannot'
+ ' be interpolated');

test(function(t) {
var div = createDiv(t);
var originalHeight = getComputedStyle(div).height;

// Easing: http://cubic-bezier.com/#.68,0,1,.01
// With this curve, we don't reach the 50% point until about 95% of
// the time has expired.
var anim = div.animate({ fontStyle: [ 'normal', 'italic' ] },
{ duration: 1000, fill: 'forwards',
easing: 'cubic-bezier(0.68,0,1,0.01)' });

assert_equals(getComputedStyle(div).fontStyle, 'normal',
'Animation produces \'from\' value at start of interval');
anim.currentTime = 940;
assert_equals(getComputedStyle(div).fontStyle, 'normal',
'Animation produces \'from\' value at 94% of the iteration'
+ ' time');
anim.currentTime = 960;
assert_equals(getComputedStyle(div).fontStyle, 'italic',
'Animation produces \'to\' value at 96% of the iteration'
+ ' time');
}, 'Test the 50% switch point for discrete animation is based on the'
+ ' effect easing');

test(function(t) {
var div = createDiv(t);
var originalHeight = getComputedStyle(div).height;

// Easing: http://cubic-bezier.com/#.68,0,1,.01
// With this curve, we don't reach the 50% point until about 95% of
// the time has expired.
var anim = div.animate([ { fontStyle: 'normal',
easing: 'cubic-bezier(0.68,0,1,0.01)' },
{ fontStyle: 'italic' } ],
{ duration: 1000, fill: 'forwards' });

assert_equals(getComputedStyle(div).fontStyle, 'normal',
'Animation produces \'from\' value at start of interval');
anim.currentTime = 940;
assert_equals(getComputedStyle(div).fontStyle, 'normal',
'Animation produces \'from\' value at 94% of the iteration'
+ ' time');
anim.currentTime = 960;
assert_equals(getComputedStyle(div).fontStyle, 'italic',
'Animation produces \'to\' value at 96% of the iteration'
+ ' time');
}, 'Test the 50% switch point for discrete animation is based on the'
+ ' keyframe easing');

</script>
@@ -0,0 +1,4 @@

Harness Error (TIMEOUT), message = null


0 comments on commit 74d6234

Please sign in to comment.