| author | Brian Birtles <birtles@gmail.com> |
| Wed, 08 Feb 2017 09:25:29 +0900 | |
| changeset 341316 | 1a24ff557466118daced01a8ac83ef85c9989084 |
| parent 341315 | 5f16ee5b6238d92e9033176fe0b7b94600f114c2 |
| child 341317 | 41114ebea8efe2b174cd38c3c16a0a6d161e67d6 |
| push id | 86684 |
| push user | cbook@mozilla.com |
| push date | Wed, 08 Feb 2017 10:31:03 +0000 |
| treeherder | mozilla-inbound@c5b88e4e70f4 [default view] [failures only] |
| perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
| reviewers | hiro |
| bugs | 1332206 |
| milestone | 54.0a1 |
| first release with | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
| last release without | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
--- a/testing/web-platform/meta/MANIFEST.json +++ b/testing/web-platform/meta/MANIFEST.json @@ -203887,17 +203887,17 @@ "577241478fdeca6257711e9f90fec64372bd5637", "testharness" ], "web-animations/interfaces/KeyframeEffect/copy-contructor.html": [ "e1dfb5c05807a37974ecce98bb8c683cc291bfe4", "testharness" ], "web-animations/interfaces/KeyframeEffect/effect-easing.html": [ - "5e053831e2b3070ea39b0bbd90c2e7198e98955d", + "f4d26058580e01e18953debbf4e53be08db9c29a", "testharness" ], "web-animations/interfaces/KeyframeEffect/getComputedTiming.html": [ "c9dcf7c17010e5495007e000b33aeb4dc89f92b7", "testharness" ], "web-animations/interfaces/KeyframeEffect/iterationComposite.html": [ "5b7dbc28de885751ea952f4fecc2bd07cb3cea11", @@ -203971,17 +203971,17 @@ "6e8e029f813046c3da69b4ff0c9d03d2a56b38a4", "testharness" ], "web-animations/timing-model/animations/updating-the-finished-state.html": [ "266f1b793aa74a59486081f3ba8f6cbb482e714b", "testharness" ], "web-animations/timing-model/time-transformations/transformed-progress.html": [ - "5d32b7e7ea13f0093d645a29ba57977b1ca289c8", + "5b6a9681c5edfe4b80a8c0807420aa7f4b4411eb", "testharness" ], "webaudio/.gitignore": [ "11bc81247643b0a9fc665f1e4b1f592cc1f4c670", "support" ], "webaudio/OWNERS": [ "d98264a830bdab63db07061e8b25080188e1aeab",
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/effect-easing.html +++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/effect-easing.html @@ -309,298 +309,16 @@ test(function(t) { }); assert_style_left_at(anim, 1000, function(x) { return easing(easing(x)) }); }, 'effect easing which produces negative values and the tangent on ' + 'the lower boundary is infinity with keyframe easing producing ' + 'negative values'); -var gStepTimingFunctionTests = [ - { - description: 'Test bounds point of step-start easing', - keyframe: [ { width: '0px' }, - { width: '100px' } ], - effect: { - delay: 1000, - duration: 1000, - fill: 'both', - easing: 'steps(2, start)' - }, - conditions: [ - { currentTime: 0, progress: 0 }, - { currentTime: 999, progress: 0 }, - { currentTime: 1000, progress: 0.5 }, - { currentTime: 1499, progress: 0.5 }, - { currentTime: 1500, progress: 1 }, - { currentTime: 2000, progress: 1 } - ] - }, - { - description: 'Test bounds point of step-start easing with compositor', - keyframe: [ { opacity: 0 }, - { opacity: 1 } ], - effect: { - delay: 1000, - duration: 1000, - fill: 'both', - easing: 'steps(2, start)' - }, - conditions: [ - { currentTime: 0, progress: 0 }, - { currentTime: 999, progress: 0 }, - { currentTime: 1000, progress: 0.5 }, - { currentTime: 1499, progress: 0.5 }, - { currentTime: 1500, progress: 1 }, - { currentTime: 2000, progress: 1 } - ] - }, - { - description: 'Test bounds point of step-start easing with reverse direction', - keyframe: [ { width: '0px' }, - { width: '100px' } ], - effect: { - delay: 1000, - duration: 1000, - fill: 'both', - direction: 'reverse', - easing: 'steps(2, start)' - }, - conditions: [ - { currentTime: 0, progress: 1 }, - { currentTime: 1001, progress: 1 }, - { currentTime: 1500, progress: 1 }, - { currentTime: 1501, progress: 0.5 }, - { currentTime: 2000, progress: 0 }, - { currentTime: 2500, progress: 0 } - ] - }, - { - description: 'Test bounds point of step-start easing ' + - 'with iterationStart not at a transition point', - keyframe: [ { width: '0px' }, - { width: '100px' } ], - effect: { - delay: 1000, - duration: 1000, - fill: 'both', - iterationStart: 0.25, - easing: 'steps(2, start)' - }, - conditions: [ - { currentTime: 0, progress: 0.5 }, - { currentTime: 999, progress: 0.5 }, - { currentTime: 1000, progress: 0.5 }, - { currentTime: 1249, progress: 0.5 }, - { currentTime: 1250, progress: 1 }, - { currentTime: 1749, progress: 1 }, - { currentTime: 1750, progress: 0.5 }, - { currentTime: 2000, progress: 0.5 }, - { currentTime: 2500, progress: 0.5 }, - ] - }, - { - description: 'Test bounds point of step-start easing ' + - 'with iterationStart and delay', - keyframe: [ { width: '0px' }, - { width: '100px' } ], - effect: { - delay: 1000, - duration: 1000, - fill: 'both', - iterationStart: 0.5, - easing: 'steps(2, start)' - }, - conditions: [ - { currentTime: 0, progress: 0.5 }, - { currentTime: 999, progress: 0.5 }, - { currentTime: 1000, progress: 1 }, - { currentTime: 1499, progress: 1 }, - { currentTime: 1500, progress: 0.5 }, - { currentTime: 2000, progress: 1 } - ] - }, - { - description: 'Test bounds point of step-start easing ' + - 'with iterationStart and reverse direction', - keyframe: [ { width: '0px' }, - { width: '100px' } ], - effect: { - delay: 1000, - duration: 1000, - fill: 'both', - iterationStart: 0.5, - direction: 'reverse', - easing: 'steps(2, start)' - }, - conditions: [ - { currentTime: 0, progress: 1 }, - { currentTime: 1000, progress: 1 }, - { currentTime: 1001, progress: 0.5 }, - { currentTime: 1499, progress: 0.5 }, - { currentTime: 1500, progress: 1 }, - { currentTime: 1999, progress: 1 }, - { currentTime: 2000, progress: 0.5 }, - { currentTime: 2500, progress: 0.5 } - ] - }, - { - description: 'Test bounds point of step(4, start) easing ' + - 'with iterationStart 0.75 and delay', - keyframe: [ { width: '0px' }, - { width: '100px' } ], - effect: { - duration: 1000, - fill: 'both', - delay: 1000, - iterationStart: 0.75, - easing: 'steps(4, start)' - }, - conditions: [ - { currentTime: 0, progress: 0.75 }, - { currentTime: 999, progress: 0.75 }, - { currentTime: 1000, progress: 1 }, - { currentTime: 2000, progress: 1 }, - { currentTime: 2500, progress: 1 } - ] - }, - { - description: 'Test bounds point of step-start easing ' + - 'with alternate direction', - keyframe: [ { width: '0px' }, - { width: '100px' } ], - effect: { - duration: 1000, - fill: 'both', - delay: 1000, - iterations: 2, - iterationStart: 1.5, - direction: 'alternate', - easing: 'steps(2, start)' - }, - conditions: [ - { currentTime: 0, progress: 1 }, - { currentTime: 1000, progress: 1 }, - { currentTime: 1001, progress: 0.5 }, - { currentTime: 2999, progress: 1 }, - { currentTime: 3000, progress: 0.5 }, - { currentTime: 3500, progress: 0.5 } - ] - }, - { - description: 'Test bounds point of step-start easing ' + - 'with alternate-reverse direction', - keyframe: [ { width: '0px' }, - { width: '100px' } ], - effect: { - duration: 1000, - fill: 'both', - delay: 1000, - iterations: 2, - iterationStart: 0.5, - direction: 'alternate-reverse', - easing: 'steps(2, start)' - }, - conditions: [ - { currentTime: 0, progress: 1 }, - { currentTime: 1000, progress: 1 }, - { currentTime: 1001, progress: 0.5 }, - { currentTime: 2999, progress: 1 }, - { currentTime: 3000, progress: 0.5 }, - { currentTime: 3500, progress: 0.5 } - ] - }, - { - description: 'Test bounds point of step-start easing in keyframe', - keyframe: [ { width: '0px', easing: 'steps(2, start)' }, - { width: '100px' } ], - effect: { - delay: 1000, - duration: 1000, - fill: 'both', - }, - conditions: [ - { currentTime: 0, progress: 0, width: '0px' }, - { currentTime: 999, progress: 0, width: '0px' }, - { currentTime: 1000, progress: 0, width: '50px' }, - { currentTime: 1499, progress: 0.499, width: '50px' }, - { currentTime: 1500, progress: 0.5, width: '100px' }, - { currentTime: 2000, progress: 1, width: '100px' }, - { currentTime: 2500, progress: 1, width: '100px' } - ] - }, - { - description: 'Test bounds point of step-end easing ' + - 'with iterationStart and delay', - keyframe: [ { width: '0px' }, - { width: '100px' } ], - effect: { - duration: 1000, - fill: 'both', - delay: 1000, - iterationStart: 0.5, - easing: 'steps(2, end)' - }, - conditions: [ - { currentTime: 0, progress: 0 }, - { currentTime: 999, progress: 0 }, - { currentTime: 1000, progress: 0.5 }, - { currentTime: 1499, progress: 0.5 }, - { currentTime: 1500, progress: 0 }, - { currentTime: 1999, progress: 0 }, - { currentTime: 2000, progress: 0.5 }, - { currentTime: 2500, progress: 0.5 } - ] - }, - { - description: 'Test bounds point of step-end easing ' + - 'with iterationStart not at a transition point', - keyframe: [ { width: '0px' }, - { width: '100px' } ], - effect: { - delay: 1000, - duration: 1000, - fill: 'both', - iterationStart: 0.75, - easing: 'steps(2, end)' - }, - conditions: [ - { currentTime: 0, progress: 0.5 }, - { currentTime: 999, progress: 0.5 }, - { currentTime: 1000, progress: 0.5 }, - { currentTime: 1249, progress: 0.5 }, - { currentTime: 1250, progress: 0 }, - { currentTime: 1749, progress: 0 }, - { currentTime: 1750, progress: 0.5 }, - { currentTime: 2000, progress: 0.5 }, - { currentTime: 2500, progress: 0.5 }, - ] - } -]; - -gStepTimingFunctionTests.forEach(function(options) { - test(function(t) { - var target = createDiv(t); - var animation = target.animate(options.keyframe, options.effect); - options.conditions.forEach(function(condition) { - animation.currentTime = condition.currentTime; - if (typeof condition.progress !== 'undefined') { - assert_equals(animation.effect.getComputedTiming().progress, - condition.progress, - 'Progress at ' + animation.currentTime + 'ms'); - } - if (typeof condition.width !== 'undefined') { - assert_equals(getComputedStyle(target).width, - condition.width, - 'Progress at ' + animation.currentTime + 'ms'); - } - }); - }, options.description); -}); - gInvalidEasings.forEach(function(invalidEasing) { test(function(t) { var div = createDiv(t); assert_throws({ name: 'TypeError' }, function() { div.animate({ easing: invalidEasing }, 100 * MS_PER_SEC); }); }, 'Invalid keyframe easing value: \'' + invalidEasing + '\'');
--- a/testing/web-platform/tests/web-animations/timing-model/time-transformations/transformed-progress.html +++ b/testing/web-platform/tests/web-animations/timing-model/time-transformations/transformed-progress.html @@ -27,10 +27,294 @@ gEasingTests.forEach(params => { expectedProgress, 0.01, 'The progress should be approximately ' + expectedProgress + ` at ${sampleTime}ms`); }); }, 'Transformed progress for ' + params.desc); }); +// Additional tests for various boundary conditions of step timing functions + +var gStepTimingFunctionTests = [ + { + description: 'Test bounds point of step-start easing', + keyframe: [ { width: '0px' }, + { width: '100px' } ], + effect: { + delay: 1000, + duration: 1000, + fill: 'both', + easing: 'steps(2, start)' + }, + conditions: [ + { currentTime: 0, progress: 0 }, + { currentTime: 999, progress: 0 }, + { currentTime: 1000, progress: 0.5 }, + { currentTime: 1499, progress: 0.5 }, + { currentTime: 1500, progress: 1 }, + { currentTime: 2000, progress: 1 } + ] + }, + { + description: 'Test bounds point of step-start easing with compositor', + keyframe: [ { opacity: 0 }, + { opacity: 1 } ], + effect: { + delay: 1000, + duration: 1000, + fill: 'both', + easing: 'steps(2, start)' + }, + conditions: [ + { currentTime: 0, progress: 0 }, + { currentTime: 999, progress: 0 }, + { currentTime: 1000, progress: 0.5 }, + { currentTime: 1499, progress: 0.5 }, + { currentTime: 1500, progress: 1 }, + { currentTime: 2000, progress: 1 } + ] + }, + { + description: 'Test bounds point of step-start easing with reverse direction', + keyframe: [ { width: '0px' }, + { width: '100px' } ], + effect: { + delay: 1000, + duration: 1000, + fill: 'both', + direction: 'reverse', + easing: 'steps(2, start)' + }, + conditions: [ + { currentTime: 0, progress: 1 }, + { currentTime: 1001, progress: 1 }, + { currentTime: 1500, progress: 1 }, + { currentTime: 1501, progress: 0.5 }, + { currentTime: 2000, progress: 0 }, + { currentTime: 2500, progress: 0 } + ] + }, + { + description: 'Test bounds point of step-start easing ' + + 'with iterationStart not at a transition point', + keyframe: [ { width: '0px' }, + { width: '100px' } ], + effect: { + delay: 1000, + duration: 1000, + fill: 'both', + iterationStart: 0.25, + easing: 'steps(2, start)' + }, + conditions: [ + { currentTime: 0, progress: 0.5 }, + { currentTime: 999, progress: 0.5 }, + { currentTime: 1000, progress: 0.5 }, + { currentTime: 1249, progress: 0.5 }, + { currentTime: 1250, progress: 1 }, + { currentTime: 1749, progress: 1 }, + { currentTime: 1750, progress: 0.5 }, + { currentTime: 2000, progress: 0.5 }, + { currentTime: 2500, progress: 0.5 }, + ] + }, + { + description: 'Test bounds point of step-start easing ' + + 'with iterationStart and delay', + keyframe: [ { width: '0px' }, + { width: '100px' } ], + effect: { + delay: 1000, + duration: 1000, + fill: 'both', + iterationStart: 0.5, + easing: 'steps(2, start)' + }, + conditions: [ + { currentTime: 0, progress: 0.5 }, + { currentTime: 999, progress: 0.5 }, + { currentTime: 1000, progress: 1 }, + { currentTime: 1499, progress: 1 }, + { currentTime: 1500, progress: 0.5 }, + { currentTime: 2000, progress: 1 } + ] + }, + { + description: 'Test bounds point of step-start easing ' + + 'with iterationStart and reverse direction', + keyframe: [ { width: '0px' }, + { width: '100px' } ], + effect: { + delay: 1000, + duration: 1000, + fill: 'both', + iterationStart: 0.5, + direction: 'reverse', + easing: 'steps(2, start)' + }, + conditions: [ + { currentTime: 0, progress: 1 }, + { currentTime: 1000, progress: 1 }, + { currentTime: 1001, progress: 0.5 }, + { currentTime: 1499, progress: 0.5 }, + { currentTime: 1500, progress: 1 }, + { currentTime: 1999, progress: 1 }, + { currentTime: 2000, progress: 0.5 }, + { currentTime: 2500, progress: 0.5 } + ] + }, + { + description: 'Test bounds point of step(4, start) easing ' + + 'with iterationStart 0.75 and delay', + keyframe: [ { width: '0px' }, + { width: '100px' } ], + effect: { + duration: 1000, + fill: 'both', + delay: 1000, + iterationStart: 0.75, + easing: 'steps(4, start)' + }, + conditions: [ + { currentTime: 0, progress: 0.75 }, + { currentTime: 999, progress: 0.75 }, + { currentTime: 1000, progress: 1 }, + { currentTime: 2000, progress: 1 }, + { currentTime: 2500, progress: 1 } + ] + }, + { + description: 'Test bounds point of step-start easing ' + + 'with alternate direction', + keyframe: [ { width: '0px' }, + { width: '100px' } ], + effect: { + duration: 1000, + fill: 'both', + delay: 1000, + iterations: 2, + iterationStart: 1.5, + direction: 'alternate', + easing: 'steps(2, start)' + }, + conditions: [ + { currentTime: 0, progress: 1 }, + { currentTime: 1000, progress: 1 }, + { currentTime: 1001, progress: 0.5 }, + { currentTime: 2999, progress: 1 }, + { currentTime: 3000, progress: 0.5 }, + { currentTime: 3500, progress: 0.5 } + ] + }, + { + description: 'Test bounds point of step-start easing ' + + 'with alternate-reverse direction', + keyframe: [ { width: '0px' }, + { width: '100px' } ], + effect: { + duration: 1000, + fill: 'both', + delay: 1000, + iterations: 2, + iterationStart: 0.5, + direction: 'alternate-reverse', + easing: 'steps(2, start)' + }, + conditions: [ + { currentTime: 0, progress: 1 }, + { currentTime: 1000, progress: 1 }, + { currentTime: 1001, progress: 0.5 }, + { currentTime: 2999, progress: 1 }, + { currentTime: 3000, progress: 0.5 }, + { currentTime: 3500, progress: 0.5 } + ] + }, + { + description: 'Test bounds point of step-start easing in keyframe', + keyframe: [ { width: '0px', easing: 'steps(2, start)' }, + { width: '100px' } ], + effect: { + delay: 1000, + duration: 1000, + fill: 'both', + }, + conditions: [ + { currentTime: 0, progress: 0, width: '0px' }, + { currentTime: 999, progress: 0, width: '0px' }, + { currentTime: 1000, progress: 0, width: '50px' }, + { currentTime: 1499, progress: 0.499, width: '50px' }, + { currentTime: 1500, progress: 0.5, width: '100px' }, + { currentTime: 2000, progress: 1, width: '100px' }, + { currentTime: 2500, progress: 1, width: '100px' } + ] + }, + { + description: 'Test bounds point of step-end easing ' + + 'with iterationStart and delay', + keyframe: [ { width: '0px' }, + { width: '100px' } ], + effect: { + duration: 1000, + fill: 'both', + delay: 1000, + iterationStart: 0.5, + easing: 'steps(2, end)' + }, + conditions: [ + { currentTime: 0, progress: 0 }, + { currentTime: 999, progress: 0 }, + { currentTime: 1000, progress: 0.5 }, + { currentTime: 1499, progress: 0.5 }, + { currentTime: 1500, progress: 0 }, + { currentTime: 1999, progress: 0 }, + { currentTime: 2000, progress: 0.5 }, + { currentTime: 2500, progress: 0.5 } + ] + }, + { + description: 'Test bounds point of step-end easing ' + + 'with iterationStart not at a transition point', + keyframe: [ { width: '0px' }, + { width: '100px' } ], + effect: { + delay: 1000, + duration: 1000, + fill: 'both', + iterationStart: 0.75, + easing: 'steps(2, end)' + }, + conditions: [ + { currentTime: 0, progress: 0.5 }, + { currentTime: 999, progress: 0.5 }, + { currentTime: 1000, progress: 0.5 }, + { currentTime: 1249, progress: 0.5 }, + { currentTime: 1250, progress: 0 }, + { currentTime: 1749, progress: 0 }, + { currentTime: 1750, progress: 0.5 }, + { currentTime: 2000, progress: 0.5 }, + { currentTime: 2500, progress: 0.5 }, + ] + } +]; + +gStepTimingFunctionTests.forEach(function(options) { + test(function(t) { + var target = createDiv(t); + var animation = target.animate(options.keyframe, options.effect); + options.conditions.forEach(function(condition) { + animation.currentTime = condition.currentTime; + if (typeof condition.progress !== 'undefined') { + assert_equals(animation.effect.getComputedTiming().progress, + condition.progress, + 'Progress at ' + animation.currentTime + 'ms'); + } + if (typeof condition.width !== 'undefined') { + assert_equals(getComputedStyle(target).width, + condition.width, + 'Progress at ' + animation.currentTime + 'ms'); + } + }); + }, options.description); +}); + </script> </body>