Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(173)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/web-animations-api/element-animate-list-of-keyframes.html

Issue 1720403002: Alternative syntax for element.animate list of keyframes (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@animations-keyframeeffect-api
Patch Set: Fill in error message strings Created 4 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/animation/EffectInput.h » ('j') | third_party/WebKit/Source/core/animation/EffectInput.h » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/web-animations-api/element-animate-list-of-keyframes.html
diff --git a/third_party/WebKit/LayoutTests/web-animations-api/element-animate-list-of-keyframes.html b/third_party/WebKit/LayoutTests/web-animations-api/element-animate-list-of-keyframes.html
index 6dc6b685984102ed14eeb89ec0b070e58c583272..9bba150051fbc3f28f0490919f848084a82cd03c 100644
--- a/third_party/WebKit/LayoutTests/web-animations-api/element-animate-list-of-keyframes.html
+++ b/third_party/WebKit/LayoutTests/web-animations-api/element-animate-list-of-keyframes.html
@@ -13,63 +13,165 @@
</style>
<body>
- <div id='e1' class='anim'></div>
- <div id='e2' class='anim'></div>
- <div id='e3' class='anim'></div>
</body>
<script>
-var e1 = document.getElementById('e1');
-var e2 = document.getElementById('e2');
-var e3 = document.getElementById('e3');
+var durationValue = 1;
alancutter (OOO until 2018) 2016/02/24 08:50:02 Why not inline this if it never changes? It's comm
suzyh_UTC10 (ex-contributor) 2016/02/25 02:42:35 This was in the original code. I'd prefer to err o
alancutter (OOO until 2018) 2016/02/25 06:52:27 Looking back at when it was added it was because t
suzyh_UTC10 (ex-contributor) 2016/02/26 04:35:30 Oh, I see. Removed.
-var e1Style = getComputedStyle(e1);
-var e2Style = getComputedStyle(e2);
-var e3Style = getComputedStyle(e3);
+var addAnimDiv = function() {
+ var target = document.createElement('div');
+ target.className = 'anim';
+ document.body.appendChild(target);
+ return target;
alancutter (OOO until 2018) 2016/02/24 08:50:02 It's strange to see the name target used here and
suzyh_UTC10 (ex-contributor) 2016/02/25 02:42:35 Done.
+};
-var durationValue = 1;
+var assertEquivalentFramesSyntax = function(listOfKeyframes, keyframeWithListOfValues, durationArg, expectationList) {
alancutter (OOO until 2018) 2016/02/24 08:50:02 Javascript style nit: Consider using destructuring
suzyh_UTC10 (ex-contributor) 2016/02/25 02:42:35 Done. I get a syntax error when trying to use var
alancutter (OOO until 2018) 2016/02/25 06:52:27 Strange, I don't get a syntax error when I change
+ var e1 = addAnimDiv();
+ var e2 = addAnimDiv();
+ var e1Style = getComputedStyle(e1);
+ var e2Style = getComputedStyle(e2);
+ var options = { duration: durationArg, fill: "forwards" };
alancutter (OOO until 2018) 2016/02/24 08:50:02 No need for fill forwards if you never seek past 1
suzyh_UTC10 (ex-contributor) 2016/02/25 02:42:35 The tests fail if I seek to 1, not just past 1. Do
alancutter (OOO until 2018) 2016/02/25 06:52:27 Ah my bad, fill forwards is needed for t=1 you're
+ var player1 = e1.animate(listOfKeyframes, options);
+ var player2 = e2.animate(keyframeWithListOfValues, options);
+ player1.pause();
+ player2.pause();
+ for (var i = 0; i < expectationList.length; i++) {
+ var expected = expectationList[i];
+ player1.currentTime = expected.at;
+ player2.currentTime = expected.at;
+ for (var property in expected.is) {
+ assert_equals(e1Style.getPropertyValue(property), expected.is[property]);
+ assert_equals(e2Style.getPropertyValue(property), expected.is[property]);
+ }
+ }
+};
test(function() {
- var player = e1.animate([
+ var element = addAnimDiv();
+ var elementStyle = getComputedStyle(element);
+ var player = element.animate([
{left: '10px', opacity: '1', offset: 0},
{left: '100px', opacity: '0', offset: 1}
], durationValue);
player.pause();
player.currentTime = durationValue / 2;
- assert_equals(e1Style.left, '55px');
- assert_equals(e1Style.opacity, '0.5');
+ assert_equals(elementStyle.left, '55px');
+ assert_equals(elementStyle.opacity, '0.5');
}, 'Calling animate() should start an animation.');
test(function() {
- var player = e2.animate([
+ var listOfKeyframes = [
+ { left: '10px', opacity: '1' },
+ { left: '100px', opacity: '0' }
+ ];
+ var keyframeWithListOfValues = {
+ left: ['10px', '100px'],
+ opacity: ['1', '0']
+ };
+ assertEquivalentFramesSyntax(
+ listOfKeyframes,
+ keyframeWithListOfValues,
+ durationValue,
+ [ { at: 0, is: { left: '10px', opacity: '1' } },
+ { at: durationValue / 2, is: { left: '55px', opacity: '0.5' } },
+ { at: durationValue, is: { left: '100px', opacity: '0' } } ]
+ );
+}, 'Calling animate() with alternative list syntax should give same result.');
+
+test(function() {
+ var element = addAnimDiv();
+ var elementStyle = getComputedStyle(element);
+ var player = element.animate([
{backgroundColor: 'green', offset: 0},
{backgroundColor: 'purple', offset: 1}
], durationValue);
player.pause();
player.currentTime = durationValue / 2;
- assert_equals(e2Style.backgroundColor, 'rgb(64, 64, 64)');
+ assert_equals(elementStyle.backgroundColor, 'rgb(64, 64, 64)');
}, 'Calling animate() should start an animation. CamelCase property names should be parsed.');
test(function() {
- var player = e1.animate([
+ var element = addAnimDiv();
+ var elementStyle = getComputedStyle(element);
+ var player = element.animate([
{left: '10px', offset: '0'},
{left: '100px', offset: '1'}
], durationValue);
player.pause();
player.currentTime = durationValue / 2;
- assert_equals(e1Style.left, '55px');
+ assert_equals(elementStyle.left, '55px');
}, 'Offsets may be specified as strings.');
test(function() {
+ var listOfKeyframes = [
+ { left: '0px', easing: 'steps(2, start)' },
+ { left: '100px', easing: 'steps(2, start)' },
+ { left: '300px' }
+ ];
+ var keyframeWithListOfValues = {
+ left: [ '0px', '100px', '300px' ],
+ easing: 'steps(2, start)'
+ };
+ assertEquivalentFramesSyntax(
+ listOfKeyframes,
+ keyframeWithListOfValues,
+ durationValue,
+ [ { at: 0, is: { left: '50px' } },
+ { at: durationValue / 4, is: { left: '100px' } },
+ { at: durationValue / 2, is: { left: '200px' } },
+ { at: 3 * durationValue / 4, is: { left: '300px' } } ]
+ );
+}, 'When using the alternative list syntax, all keyframes have the same timing function.');
+
+test(function() {
+ var listOfKeyframes = [
+ { left: '100px' }
+ ];
+ var keyframeWithListOfValues = {
+ left: ['100px']
+ };
+ var keyframeWithOneValue = {
+ left: '100px'
+ };
+ assertEquivalentFramesSyntax(
+ listOfKeyframes,
+ keyframeWithListOfValues,
+ durationValue,
+ [ { at: 0, is: { left: '10px' } },
+ { at: durationValue / 2, is: { left: '55px' } },
+ { at: durationValue, is: { left: '100px' } } ]
+ );
+ assertEquivalentFramesSyntax(
+ listOfKeyframes,
+ keyframeWithOneValue,
+ durationValue,
+ [ { at: 0, is: { left: '10px' } },
+ { at: durationValue / 2, is: { left: '55px' } },
+ { at: durationValue, is: { left: '100px' } } ]
+ );
+}, 'The list of keyframes can have one element.');
+
+test(function() {
+ var element = addAnimDiv();
+ var keyframes = [
+ { left: ['10px', '100px'] },
+ { left: ['5px', '50px'] }
+ ];
+ assert_throws('InvalidModificationError', function() {element.animate(keyframes, durationValue); });
+}, 'Should throw when mixing two different list syntaxes.');
+
+test(function() {
+ var element = addAnimDiv();
var keyframes = [
{opacity: '0.5', offset: 0.5},
{opacity: '0.9', offset: 1},
{opacity: '0', offset: 0}
];
- assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); });
+ assert_throws('InvalidModificationError', function() { element.animate(keyframes, durationValue); });
}, 'Should throw when keyframes have unsorted offsets.');
test(function() {
+ var element = addAnimDiv();
var keyframes = [
{opacity: '1', offset: -1},
{opacity: '1', offset: NaN},
@@ -77,25 +179,27 @@ test(function() {
{opacity: '0.5', offset: 1},
{opacity: '0', offset: 0}
];
- assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); });
+ assert_throws('InvalidModificationError', function() { element.animate(keyframes, durationValue); });
}, 'Should throw when keyframes has offsets outside the range [0.0, 1.0].');
test(function() {
+ var element = addAnimDiv();
var keyframes = [
{opacity: '0.5'},
{opacity: '1', offset: 1},
{opacity: '0', offset: 0}
];
- assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); });
+ assert_throws('InvalidModificationError', function() { element.animate(keyframes, durationValue); });
}, 'Should throw when keyframes are not loosely sorted and any have no offset.');
test(function() {
+ var element = addAnimDiv();
var keyframes = [
{opacity: '0.5', offset: null},
{opacity: '1', offset: 1},
{opacity: '0', offset: 0}
];
- assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); });
+ assert_throws('InvalidModificationError', function() { element.animate(keyframes, durationValue); });
}, 'Should throw when keyframes are not loosely sorted and any have null offset.');
var keyframesWithInvalid = [
@@ -103,11 +207,13 @@ var keyframesWithInvalid = [
{width: '1000px', foo: 'bar', offset: 1}];
test(function() {
- var player = e3.animate(keyframesWithInvalid, {duration: durationValue, fill: 'forwards'});
+ var element = addAnimDiv();
+ var elementStyle = getComputedStyle(element);
+ var player = element.animate(keyframesWithInvalid, {duration: durationValue, fill: 'forwards'});
player.pause();
player.currentTime = durationValue;
- assert_equals(e3Style.width, '1000px');
- assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)');
- assert_equals(e3Style.foo, undefined);
+ assert_equals(elementStyle.width, '1000px');
+ assert_equals(elementStyle.backgroundColor, 'rgb(0, 0, 0)');
+ assert_equals(elementStyle.foo, undefined);
}, 'Calling animate() with a pre-constructed keyframes list should start an animation. Invalid style declarations should be ignored.');
</script>
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/animation/EffectInput.h » ('j') | third_party/WebKit/Source/core/animation/EffectInput.h » ('J')

Powered by Google App Engine
This is Rietveld 408576698