[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

LayoutTests/http/wpt/web-animations/OWNERS

@@ -0,0 +1 @@
+@birtles

LayoutTests/http/wpt/web-animations/README.md

@@ -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 “Set the animation
+    start time“ procedure in the “Timing model” 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!

LayoutTests/http/wpt/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt

@@ -0,0 +1,4 @@
+
+Harness Error (TIMEOUT), message = null
+
+

LayoutTests/http/wpt/web-animations/animation-model/animation-types/accumulation-per-property.html

@@ -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>

LayoutTests/http/wpt/web-animations/animation-model/animation-types/addition-per-property-expected.txt

@@ -0,0 +1,4 @@
+
+Harness Error (TIMEOUT), message = null
+
+

LayoutTests/http/wpt/web-animations/animation-model/animation-types/addition-per-property.html

@@ -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>

LayoutTests/http/wpt/web-animations/animation-model/animation-types/discrete-animation-expected.txt

@@ -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...')
+

LayoutTests/http/wpt/web-animations/animation-model/animation-types/discrete-animation.html

@@ -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>

LayoutTests/http/wpt/web-animations/animation-model/animation-types/interpolation-per-property-expected.txt

@@ -0,0 +1,4 @@
+
+Harness Error (TIMEOUT), message = null
+
+