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

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: Change to error types and how offset/composite are handled, plus minor fixes 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 | « third_party/WebKit/LayoutTests/animations/keyword-composition-crash.html ('k') | third_party/WebKit/LayoutTests/web-animations-api/keyframe-exceptions.html » ('j') | third_party/WebKit/Source/core/animation/EffectInput.cpp » ('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..06fc3df2227f5c59f5d777308ed02fba405dab3b 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,169 @@
</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 addAnimDiv = function() {
+ var element = document.createElement('div');
+ element.className = 'anim';
+ document.body.appendChild(element);
+ return element;
+};
-var e1Style = getComputedStyle(e1);
-var e2Style = getComputedStyle(e2);
-var e3Style = getComputedStyle(e3);
-
-var durationValue = 1;
+var assertEquivalentFramesSyntax = function(testParams) {
+ var e1 = addAnimDiv();
+ var e2 = addAnimDiv();
+ var e1Style = getComputedStyle(e1);
+ var e2Style = getComputedStyle(e2);
+ var options = { duration: testParams.duration, fill: "forwards" };
+ var player1 = e1.animate(testParams.listOfKeyframes, options);
+ var player2 = e2.animate(testParams.keyframeWithListOfValues, options);
+ player1.pause();
+ player2.pause();
+ for (var i = 0; i < testParams.expectationList.length; i++) {
+ var expected = testParams.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);
+ ], 1);
player.pause();
- player.currentTime = durationValue / 2;
- assert_equals(e1Style.left, '55px');
- assert_equals(e1Style.opacity, '0.5');
+ player.currentTime = 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([
+ assertEquivalentFramesSyntax({
+ listOfKeyframes: [
+ { left: '10px', opacity: '1' },
+ { left: '100px', opacity: '0' },
+ { left: '150px', opacity: '1' }
+ ],
+ keyframeWithListOfValues: {
+ left: ['10px', '100px', '150px'],
+ opacity: ['1', '0', '1']
+ },
+ duration: 1,
+ expectationList: [
+ { at: 0, is: { left: '10px', opacity: '1' } },
+ { at: 0.25, is: { left: '55px', opacity: '0.5' } },
+ { at: 0.5, is: { left: '100px', opacity: '0' } },
+ { at: 0.75, is: { left: '125px', opacity: '0.5' } },
+ { at: 1, is: { left: '150px', opacity: '1' } }
alancutter (OOO until 2018) 2016/02/28 22:47:35 We should maintain a consistent style within the s
suzyh_UTC10 (ex-contributor) 2016/02/29 00:59:46 Done.
+ ]
+ });
+}, '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);
+ ], 1);
player.pause();
- player.currentTime = durationValue / 2;
- assert_equals(e2Style.backgroundColor, 'rgb(64, 64, 64)');
+ player.currentTime = 0.5;
+ 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);
+ ], 1);
player.pause();
- player.currentTime = durationValue / 2;
- assert_equals(e1Style.left, '55px');
+ player.currentTime = 0.5;
+ assert_equals(elementStyle.left, '55px');
}, 'Offsets may be specified as strings.');
test(function() {
+ assertEquivalentFramesSyntax({
+ listOfKeyframes: [
+ { left: '0px', easing: 'steps(2, start)' },
+ { left: '100px', easing: 'steps(2, start)' },
+ { left: '300px' }
+ ],
+ keyframeWithListOfValues: {
+ left: [ '0px', '100px', '300px' ],
+ easing: 'steps(2, start)'
+ },
+ duration: 1,
+ expectationList: [
+ { at: 0, is: { left: '50px' } },
+ { at: 0.25, is: { left: '100px' } },
+ { at: 0.5, is: { left: '200px' } },
+ { at: 0.75, is: { left: '300px' } }
+ ]
+ });
+}, 'When using the alternative list syntax, all keyframes have the same timing function.');
+
+test(function() {
+ assertEquivalentFramesSyntax({
+ listOfKeyframes: [
+ { left: '100px' }
+ ],
+ keyframeWithListOfValues: {
+ left: ['100px']
+ },
+ duration: 1,
+ expectationList: [
+ { at: 0, is: { left: '10px' } },
+ { at: 0.5, is: { left: '55px' } },
+ { at: 1, is: { left: '100px' } }
+ ]
+ });
+ assertEquivalentFramesSyntax({
+ listOfKeyframes: [
+ { left: '100px' }
+ ],
+ keyframeWithListOfValues: {
+ left: '100px'
+ },
+ duration: 1,
+ expectationList: [
+ { at: 0, is: { left: '10px' } },
+ { at: 0.5, is: { left: '55px' } },
+ { at: 1, 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({name: 'TypeError'}, function() { element.animate(keyframes, 1); });
+}, '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({name: 'TypeError'}, function() { element.animate(keyframes, 1); });
}, 'Should throw when keyframes have unsorted offsets.');
test(function() {
+ var element = addAnimDiv();
var keyframes = [
{opacity: '1', offset: -1},
{opacity: '1', offset: NaN},
@@ -77,25 +183,27 @@ test(function() {
{opacity: '0.5', offset: 1},
{opacity: '0', offset: 0}
];
- assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); });
+ assert_throws({name: 'TypeError'}, function() { element.animate(keyframes, 1); });
}, '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({name: 'TypeError'}, function() { element.animate(keyframes, 1); });
}, '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({name: 'TypeError'}, function() { element.animate(keyframes, 1); });
}, 'Should throw when keyframes are not loosely sorted and any have null offset.');
var keyframesWithInvalid = [
@@ -103,11 +211,14 @@ 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: 1, 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);
+ player.currentTime = 1;
+ 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 | « third_party/WebKit/LayoutTests/animations/keyword-composition-crash.html ('k') | third_party/WebKit/LayoutTests/web-animations-api/keyframe-exceptions.html » ('j') | third_party/WebKit/Source/core/animation/EffectInput.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698