Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-12 08:55:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision d011702f368b88b3bae86e7a8fd2ddd22e18b33c

Browse source
This commit is contained in:
Ms2ger 2016-04-12 09:07:41 +02:00
parent f9608022ca
commit 299ad0f9d0
573 changed files with 38776 additions and 14942 deletions
Download patch file Download diff file Expand all files Collapse all files

62
tests/wpt/web-platform-tests/web-animations/animation-effect-timing/delay.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>delay tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-delay">
<link rel="author" title="Daisuke Akatsuka" href="mailto:daisuke@mozilla-japan.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>
<script>
'use strict';
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
anim.effect.timing.delay = 100;
assert_equals(anim.effect.timing.delay, 100, 'set delay 100');
assert_equals(anim.effect.getComputedTiming().delay, 100,
'getComputedTiming() after set delay 100');
}, 'set delay 100');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
anim.effect.timing.delay = -100;
assert_equals(anim.effect.timing.delay, -100, 'set delay -100');
assert_equals(anim.effect.getComputedTiming().delay, -100,
'getComputedTiming() after set delay -100');
}, 'set delay -100');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
anim.effect.timing.delay = 100;
assert_equals(anim.effect.getComputedTiming().progress, null);
assert_equals(anim.effect.getComputedTiming().currentIteration, null);
}, 'Test adding a positive delay to an animation without a backwards fill ' +
'makes it no longer active');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ fill: 'both',
duration: 100 });
anim.effect.timing.delay = -50;
assert_equals(anim.effect.getComputedTiming().progress, 0.5);
}, 'Test seeking an animation by setting a negative delay');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ fill: 'both',
duration: 100 });
anim.effect.timing.delay = -100;
assert_equals(anim.effect.getComputedTiming().progress, 1);
assert_equals(anim.effect.getComputedTiming().currentIteration, 0);
}, 'Test finishing an animation using a large negative delay');
</script>
</body>

28
tests/wpt/web-platform-tests/web-animations/animation-effect-timing/direction.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>direction tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-direction">
<link rel="author" title="Ryo Kato" href="mailto:foobar094@gmail.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>
<script>
'use strict';
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
var directions = ['normal', 'reverse', 'alternate', 'alternate-reverse'];
directions.forEach(function(direction) {
anim.effect.timing.direction = direction;
assert_equals(anim.effect.timing.direction, direction,
'set direction to ' + direction);
});
}, 'set direction to a valid keyword');
</script>
</body>

13
tests/wpt/web-platform-tests/web-animations/animation-effect-timing/getAnimations.html
View file

@ -51,6 +51,19 @@ test(function(t) {
'set currentTime same as duration when endDelay is negative value');
}, 'when endDelay is changed');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
anim.finish();
assert_equals(div.getAnimations().length, 0, 'animation finished');
anim.effect.timing.iterations = 10;
assert_equals(div.getAnimations()[0], anim, 'set iterations 10');
anim.effect.timing.iterations = 0;
assert_equals(div.getAnimations().length, 0, 'set iterations 0');
anim.effect.timing.iterations = Infinity;
assert_equals(div.getAnimations().length, 1, 'set iterations Infinity');
}, 'when iterations is changed');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },

69
tests/wpt/web-platform-tests/web-animations/animation-effect-timing/getComputedStyle.html
View file

@ -24,6 +24,19 @@ test(function(t) {
assert_equals(getComputedStyle(div).opacity, '1', 'set duration \'auto\'');
}, 'changed duration immediately updates its computed styles');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 100000);
anim.finish();
assert_equals(getComputedStyle(div).opacity, '1', 'animation finished');
anim.effect.timing.iterations = 2;
assert_equals(getComputedStyle(div).opacity, '0', 'set 2 iterations');
anim.effect.timing.iterations = 0;
assert_equals(getComputedStyle(div).opacity, '1', 'set iterations 0');
anim.effect.timing.iterations = Infinity;
assert_equals(getComputedStyle(div).opacity, '0', 'set iterations Infinity');
}, 'changed iterations immediately updates its computed styles');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 1, 0 ] },
@ -103,5 +116,61 @@ test(function(t) {
'set currentTime after endTime');
}, 'change currentTime when fill forwards and endDelay is negative');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ duration: 10000,
direction: 'normal' });
anim.currentTime = 7000;
anim.effect.timing.direction = 'reverse';
assert_equals(getComputedStyle(div).opacity, '0.3',
'change direction from "normal" to "reverse"');
}, 'change direction from "normal" to "reverse"');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ iterations: 2,
duration: 10000,
direction: 'normal' });
anim.currentTime = 17000;
anim.effect.timing.direction = 'alternate';
assert_equals(getComputedStyle(div).opacity, '0.3',
'change direction from "normal" to "alternate"');
}, 'change direction from "normal" to "alternate"');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ iterations: 2,
duration: 10000,
direction: 'normal' });
anim.currentTime = 17000;
anim.effect.timing.direction = 'alternate-reverse';
assert_equals(getComputedStyle(div).opacity, '0.7',
'change direction from "normal" to "alternate-reverse"');
}, 'change direction from "normal" to "alternate-reverse"');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ fill: 'backwards',
duration: 10000,
direction: 'normal' });
// test for a flip of value at the currentTime = 0
anim.effect.timing.direction = 'reverse';
assert_equals(getComputedStyle(div).opacity, '1',
'change direction from "normal" to "reverse" ' +
'at the starting point');
}, 'change direction from "normal" to "reverse"');
</script>
</body>

57
tests/wpt/web-platform-tests/web-animations/animation-effect-timing/iterations.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>iterations tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-iterations">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>
<script>
'use strict';
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
anim.effect.timing.iterations = 2;
assert_equals(anim.effect.timing.iterations, 2, 'set duration 2');
assert_equals(anim.effect.getComputedTiming().iterations, 2,
'getComputedTiming() after set iterations 2');
}, 'set iterations 2');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
anim.effect.timing.iterations = Infinity;
assert_equals(anim.effect.timing.iterations, Infinity, 'set duration Infinity');
assert_equals(anim.effect.getComputedTiming().iterations, Infinity,
'getComputedTiming() after set iterations Infinity');
}, 'set iterations Infinity');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, function() {
anim.effect.timing.iterations = -1;
});
}, 'set negative iterations');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, function() {
anim.effect.timing.iterations = -Infinity;
});
}, 'set negative infinity iterations ');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
assert_throws({ name: 'TypeError' }, function() {
anim.effect.timing.iterations = NaN;
});
}, 'set NaN iterations');
</script>
</body>

419
tests/wpt/web-platform-tests/web-animations/animation-node/animation-node-after.html
View file

@ -1,419 +0,0 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>AnimationNode after() method tests</title>
<meta name="assert" content="Inserts nodes after this animation node">
<link rel="help" href="http://w3c.github.io/web-animations/#dom-animationnode-after">
<link rel="help" href="http://w3c.github.io/web-animations/#insert-children">
<link rel="help" href="http://w3c.github.io/web-animations/#remove-an-animation-node">
<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru">
<link rel="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
// Test step 1. If there is no parent animation group, terminate these steps.
test(function() {
var nodes = [newAnimation(createDiv(this)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
try {
node.after(null);
} catch(e) {
assert_unreached(type(node) + '.after(null) throws unexpected exception: ' + e);
}
});
}, 'AnimationNode.after() does nothing if the node has no parent animation group. ' +
'HierarchyRequestError is not thrown in call node.after(null)');
test(function() {
var nodes = [newAnimation(createDiv(this)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
try {
node.after(node);
} catch(e) {
assert_unreached(type(node) + '.after() throws unexpected exception: ' + e);
}
});
}, 'AnimationNode.after() does nothing if the node has no parent animation group. ' +
'No HierarchyRequestError is thrown if the node is inserted after itself');
test(function() {
var nodes = [newAnimation(createDiv(this)), new AnimationGroup([]), new AnimationSequence([])];
var node2 = newAnimation(createDiv(this));
nodes.forEach(function(node1) {
node1.after(node2);
assert_equals(node1.nextSibling, null, type(node1) + '.after() should do nothing ' +
'if the node has no parent animation group');
assert_equals(node2.previousSibling, null, type(node1) + '.after() should do nothing ' +
'if the node has no parent animation group');
});
}, 'AnimationNode.after() does nothing if there is no parent animation group');
// Test step 2. If any of the animation nodes in nodes is an inclusive ancestor of this animation node throw a HierarchyRequestError exception and terminate these steps.
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
var parent = new parentCtor([node]);
assert_throws('HierarchyRequestError', function() {
node.after(node);
}, type(node) + '.after() should throw HierarchyRequestError ' +
'if inserting node after itself');
assert_equals(node.parent, parent, type(node) + '.after() should not change ' +
'parent attribute before throwing HierarchyRequestError');
assert_array_equals(parent.children, [node], type(node) + '.after() ' +
'should not change parent children before throwing HierarchyRequestError');
});
});
}, 'HierarchyRequestError is thrown if node is inserted after itself');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
var parent = new parentCtor([node]);
assert_throws('HierarchyRequestError', function() {
node.after(parent);
}, type(node) + '.after() should throw HierarchyRequestError ' +
'if inserting node\'s parent');
assert_equals(node.parent, parent, type(node) + '.after() should not change ' +
'parent attribute before throwing HierarchyRequestError');
assert_array_equals(parent.children, [node], type(node) + '.after() ' +
'should not change parent children before throwing HierarchyRequestError');
});
});
}, 'HierarchyRequestError is thrown if direct parent is inserted after the node');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
var parent1 = new parentCtor([node]);
var parent2 = new parentCtor([parent1]);
var parent3 = new parentCtor([parent2]);
var parent4 = new parentCtor([parent3]);
assert_throws('HierarchyRequestError', function() {
node.after(parent3);
}, type(node) + '.after() should throw HierarchyRequestError ' +
'if inserting node\'s ancestor');
assert_equals(node.parent, parent1, type(node) + '.after() should not change ' +
'parent attribute before throwing HierarchyRequestError');
assert_array_equals(parent1.children, [node], type(node) + '.after() ' +
'should not change parent children before throwing HierarchyRequestError');
assert_equals(parent3.parent, parent4, type(node) + '.after() should not change ' +
'parent attribute of inserted node before throwing HierarchyRequestError');
assert_array_equals(parent4.children, [parent3], type(node) + '.after() ' +
'should not change inserted node parent children before throwing HierarchyRequestError');
});
});
}, 'HierarchyRequestError is thrown if an inclusive ancestor is inserted after the node');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2]);
var parent2 = new parentCtor([parent1]);
var parent3 = new parentCtor([parent2]);
var parent4 = new parentCtor([parent3]);
var parent5 = new ParentCtor([node3]);
assert_throws('HierarchyRequestError', function() {
node1.after(node3, parent3);
}, type(node1) + '.after() should throw HierarchyRequestError ' +
'if inserting node\'s parent');
assert_equals(node1.parent, parent1, type(node1) + '.after() should not change ' +
'parent attribute before throwing HierarchyRequestError');
assert_array_equals(parent1.children, [node1, node2], type(node1) + '.after() ' +
'should not change parent children before throwing HierarchyRequestError');
assert_equals(parent3.parent, parent4, type(node1) + '.after() should not change ' +
'parent attribute of inserted node before throwing HierarchyRequestError');
assert_array_equals(parent4.children, [parent3], type(node1) + '.after() ' +
'should not change inserted node parent children before throwing HierarchyRequestError');
assert_equals(node3.parent, parent5, type(node1) + '.after() should not change ' +
'parent attribute of inserted node before throwing HierarchyRequestError');
assert_array_equals(parent5.children, [node3], type(node1) + '.after() ' +
'should not change inserted node parent children before throwing HierarchyRequestError');
});
});
}, 'HierarchyRequestError is thrown if an inclusive ancestor is inserted after the node. ' +
'Test several arguments in after() call');
// Test step 3 and 4.
// 3. Let reference child be the next sibling of this animation node not in nodes.
// 4. Insert nodes before reference child.
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var parent = new parentCtor([node1]);
node1.after(node2);
assert_equals(node2.previousSibling, node1, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node2.parent, parent, 'Node should be inserted into the tree');
assert_equals(node1.nextSibling, node2, 'Node should be inserted into the tree ' +
'after this node');
assert_equals(parent.children, [node1, node2], parentCtor.name +
'.children should be updated');
});
});
}, 'AnimationNode.after() inserts nodes after this node');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node2.after(node1);
assert_equals(node2.previousSibling, null, type(node2) + '.after() should insert ' +
'nodes after this node');
assert_equals(node2.nextSibling, node1, 'Node should be inserted into the tree ' +
'after this node');
assert_equals(node1.previousSibling, node2, type(node2) + '.after() should insert ' +
'nodes after this node');
assert_equals(node1.nextSibling, null, 'Node should be inserted into the tree ' +
'after this node');
assert_equals(parent.children, [node2, node1], parentCtor.name +
'.children should be updated');
});
});
}, 'AnimationNode.after() inserts nodes after this node. Inserted node is on the same ' +
'level in the tree');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node1.after(node2);
assert_equals(node1.nextSibling, node2, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node2.previousSibling, node1, 'Node should be inserted into the tree ' +
'after this node');
assert_equals(parent.children, [node1, node2], parentCtor.name +
'.children should not be changed');
});
});
}, 'Test AnimationNode.after() inserts node after this node even if inserted ' +
'node is already after this one');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node3) {
var node1 = newAnimation(createDiv(test));
var node2 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2]);
var parent2 = new parentCtor([node3, parent1, node4]);
node3.after(node1);
assert_equals(node1.nextSibling, parent1, type(node3) + '.after() should insert ' +
'nodes after this node');
assert_equals(node1.parent, parent2, 'Parent group of the inserted node should be changed');
assert_equals(node1.previousSibling, node3, 'Node should be inserted into the tree ' +
'after this node');
assert_equals(node3.nextSibling, node1, type(node3) + '.after() should insert ' +
'nodes after this node');
assert_equals(parent1.previousSibling, node1, type(node3) + '.after() should insert ' +
'nodes after this node');
assert_equals(node2.previousSibling, null, 'Inserted node should be removed from its ' +
'previous position in the tree');
assert_array_equals(parent1.children, [node2], 'Inserted node should be removed from its ' +
'previous position in the tree');
assert_array_equals(parent2.children, [node1, node3, parent1, node4], parentCtor.name +
'.children should be updated');
});
});
}, 'Test AnimationNode.after() inserts node after this node. The previous position ' +
'of the inserted node is deeper in the tree than current node');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2]);
var parent2 = new parentCtor([node3, parent1, node4]);
node1.after(node4);
assert_equals(node4.nextSibling, node2, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node4.parent, parent1, 'Parent group of the inserted node should be changed');
assert_equals(node4.previousSibling, node1, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node1.nextSibling, node4, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node2.previousSibling, node4, 'Node should be inserted into the tree ' +
'after this node');
assert_equals(parent1.nextSibling, null, 'Inserted node should be removed from its ' +
'previous position in the tree');
assert_array_equals(parent1.children, [node1, node4, node2], parentCtor.name +
'.children should be updated');
assert_array_equals(parent2.children, [node3, parent1], 'Inserted node should be ' +
'removed from its previous position in the tree');
});
});
}, 'Test AnimationNode.after() inserts node after this node. The previous position ' +
'of the inserted node is shallower in the tree than current node, but not ancestor');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node1.after(node3, node4);
assert_equals(node1.nextSibling, node3, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node3.previousSibling, node1, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node3.nextSibling, node4, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node3.parent, parent, 'Parent group of the inserted node should be changed');
assert_equals(node4.previousSibling, node3, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node4.nextSibling, node2, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node4.parent, parent, 'Parent group of the inserted node should be changed');
assert_equals(node2.previousSibling, node4, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_array_equals(parent.children, [node1, node3, node4, node2], parentCtor.name +
'.children should be updated');
});
});
}, 'Test AnimationNode.after() inserts several nodes after this node');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node1.after(node3, node4, node3, node4);
assert_equals(node1.nextSibling, node3, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node3.previousSibling, node1, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node3.nextSibling, node4, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node3.parent, parent, 'Parent group of the inserted node should be changed');
assert_equals(node4.previousSibling, node3, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node4.nextSibling, node2, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node4.parent, parent, 'Parent group of the inserted node should be changed');
assert_equals(node2.previousSibling, node4, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_array_equals(parent.children, [node1, node3, node4, node2], parentCtor.name +
'.children should be updated');
});
});
}, 'Test AnimationNode.after() inserts several nodes after this node, duplicate nodes are ignored');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node1.after(node3, node4, node3);
assert_equals(node1.nextSibling, node4, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node4.previousSibling, node1, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node4.nextSibling, node3, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node4.parent, parent, 'Parent group of the inserted node should be changed');
assert_equals(node3.previousSibling, node4, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node3.nextSibling, node2, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_equals(node3.parent, parent, 'Parent group of the inserted node should be changed');
assert_equals(node2.previousSibling, node3, type(node1) + '.after() should insert ' +
'nodes after this node');
assert_array_equals(parent.children, [node1, node4, node3, node2], parentCtor.name +
'.children should be updated');
});
});
}, 'Test AnimationNode.after() inserts several nodes after this node, check insertion order');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var parent = new parentCtor([node1]);
var player = document.timeline.play(node2);
assert_equals(player.source, node2, 'The node should be associated with its player');
node1.after(node2);
assert_equals(player.source, null, 'The node should be disassociated from its player');
});
});
}, 'Test AnimationNode.after() disassociates the inserted node from the player, ' +
'if node is directly associated with a player');
</script>
</body>

418
tests/wpt/web-platform-tests/web-animations/animation-node/animation-node-before.html
View file

@ -1,418 +0,0 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>AnimationNode before() method tests</title>
<meta name="assert" content="Inserts nodes before this animation node.">
<link rel="help" href="http://w3c.github.io/web-animations/#dom-animationnode-before">
<link rel="help" href="http://w3c.github.io/web-animations/#insert-children">
<link rel="help" href="http://w3c.github.io/web-animations/#remove-an-animation-node">
<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru">
<link rel="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
// Test step 1. If there is no parent animation group, terminate these steps.
test(function() {
var nodes = [newAnimation(createDiv(this)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
try {
node.before(null);
} catch(e) {
assert_unreached(type(node) + '.before(null) throws unexpected exception: ' + e);
}
});
}, 'AnimationNode.before() does nothing if the node has no parent animation group. ' +
'HierarchyRequestError is not thrown in call node.before(null)');
test(function() {
var nodes = [newAnimation(createDiv(this)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
try {
node.before(node);
} catch(e) {
assert_unreached(type(node) + '.before() throws unexpected exception: ' + e);
}
});
}, 'AnimationNode.before() does nothing if the node has no parent animation group. ' +
'No HierarchyRequestError is thrown if the node is inserted before itself');
test(function() {
var nodes = [newAnimation(createDiv(this)), new AnimationGroup([]), new AnimationSequence([])];
var node2 = newAnimation(createDiv(this));
nodes.forEach(function(node1) {
node1.before(node2);
assert_equals(node1.nextSibling, null, type(node1) + '.before() should do nothing ' +
'if the node has no parent animation group');
assert_equals(node2.previousSibling, null, type(node1) + '.before() should do nothing ' +
'if the node has no parent animation group');
});
}, 'AnimationNode.before() does nothing if there is no parent animation group');
// Test step 2. If any of the animation nodes in nodes is an inclusive ancestor of this animation node throw a HierarchyRequestError exception and terminate these steps.
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
var parent = new parentCtor([node]);
assert_throws('HierarchyRequestError', function() {
node.before(node);
}, type(node) + '.before() should throw HierarchyRequestError ' +
'if inserting node before itself');
assert_equals(node.parent, parent, type(node) + '.before() should not change ' +
'parent attribute before throwing HierarchyRequestError');
assert_array_equals(parent.children, [node], type(node) + '.before() ' +
'should not change parent children before throwing HierarchyRequestError');
});
});
}, 'HierarchyRequestError is thrown if node is inserted before itself');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
var parent = new parentCtor([node]);
assert_throws('HierarchyRequestError', function() {
node.before(parent);
}, type(node) + '.before() should throw HierarchyRequestError ' +
'if inserting node\'s parent');
assert_equals(node.parent, parent, type(node) + '.before() should not change ' +
'parent attribute before throwing HierarchyRequestError');
assert_array_equals(parent.children, [node], type(node) + '.before() ' +
'should not change parent children before throwing HierarchyRequestError');
});
});
}, 'HierarchyRequestError is thrown if direct parent is inserted before the node');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
var parent1 = new parentCtor([node]);
var parent2 = new parentCtor([parent1]);
var parent3 = new parentCtor([parent2]);
var parent4 = new parentCtor([parent3]);
assert_throws('HierarchyRequestError', function() {
node.before(parent4);
}, type(node) + '.before() should throw HierarchyRequestError ' +
'if inserting node\'s ancestor');
assert_equals(node.parent, parent1, type(node) + '.before() should not change ' +
'parent attribute before throwing HierarchyRequestError');
assert_array_equals(parent1.children, [node], type(node) + '.before() ' +
'should not change parent children before throwing HierarchyRequestError');
assert_equals(parent3.parent, parent4, type(node) + '.before() should not change ' +
'parent attribute of inserted node before throwing HierarchyRequestError');
assert_array_equals(parent4.children, [parent3], type(node) + '.before() ' +
'should not change inserted node parent children before throwing HierarchyRequestError');
});
});
}, 'HierarchyRequestError is thrown if an inclusive ancestor is inserted before the node');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2]);
var parent2 = new parentCtor([parent1]);
var parent3 = new parentCtor([parent2]);
var parent4 = new parentCtor([parent3]);
var parent5 = new ParentCtor([node3]);
assert_throws('HierarchyRequestError', function() {
node1.before(node3, parent3);
}, type(node1) + '.before() should throw HierarchyRequestError ' +
'if inserting node\'s parent');
assert_equals(node1.parent, parent1, type(node1) + '.before() should not change ' +
'parent attribute before throwing HierarchyRequestError');
assert_array_equals(parent1.children, [node1, node2], type(node1) + '.before() ' +
'should not change parent children before throwing HierarchyRequestError');
assert_equals(parent3.parent, parent4, type(node1) + '.before() should not change ' +
'parent attribute of inserted node before throwing HierarchyRequestError');
assert_array_equals(parent4.children, [parent3], type(node1) + '.before() ' +
'should not change inserted node parent children before throwing HierarchyRequestError');
assert_equals(node3.parent, parent5, type(node1) + '.before() should not change ' +
'parent attribute of inserted node before throwing HierarchyRequestError');
assert_array_equals(parent5.children, [node3], type(node1) + '.before() ' +
'should not change inserted node parent children before throwing HierarchyRequestError');
});
});
}, 'HierarchyRequestError is thrown if an inclusive ancestor is inserted before the node. ' +
'Test several arguments in before() call');
// Test step 3. Insert nodes before this animation node.
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var parent = new parentCtor([node1]);
node1.before(node2);
assert_equals(node1.previousSibling, node2, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node2.parent, parent, 'Node should be inserted into the tree');
assert_equals(node2.nextSibling, node1, 'Node should be inserted into the tree ' +
'before this node');
assert_equals(parent.children, [node2, node1], parentCtor.name +
'.children should be updated');
});
});
}, 'AnimationNode.before() inserts nodes before this node');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node1.before(node2);
assert_equals(node2.previousSibling, null, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node2.nextSibling, node1, 'Node should be inserted into the tree ' +
'before this node');
assert_equals(node1.previousSibling, node2, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node1.nextSibling, null, 'Node should be inserted into the tree ' +
'before this node');
assert_equals(parent.children, [node2, node1], parentCtor.name +
'.children should be updated');
});
});
}, 'AnimationNode.before() inserts nodes before this node. Inserted node is on the same ' +
'level in the tree');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node2.before(node1);
assert_equals(node1.nextSibling, node2, type(node2) + '.before() should insert ' +
'nodes before this node');
assert_equals(node2.previousSibling, node1, 'Node should be inserted into the tree ' +
'before this node');
assert_equals(parent.children, [node1, node2], parentCtor.name +
'.children should not be changed');
});
});
}, 'Test AnimationNode.before() inserts node before this node even if inserted ' +
'node is already before this one');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node4) {
var node1 = newAnimation(createDiv(test));
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2]);
var parent2 = new parentCtor([node3, parent1, node4]);
node4.before(node1);
assert_equals(node1.nextSibling, parent1, type(node4) + '.before() should insert ' +
'nodes before this node');
assert_equals(node1.parent, parent2, 'Parent group of the inserted node should be changed');
assert_equals(node1.previousSibling, parent1, 'Node should be inserted into the tree ' +
'before this node');
assert_equals(parent1.nextSibling, node1, type(node4) + '.before() should insert ' +
'nodes before this node');
assert_equals(node4.previousSibling, node1, type(node4) + '.before() should insert ' +
'nodes before this node');
assert_equals(node2.previousSibling, null, 'Inserted node should be removed from its ' +
'previous position in the tree');
assert_array_equals(parent1.children, [node2], 'Inserted node should be removed from its ' +
'previous position in the tree');
assert_array_equals(parent2.children, [node3, parent1, node1, node4], parentCtor.name +
'.children should be updated');
});
});
}, 'Test AnimationNode.before() inserts node before this node. The previous position ' +
'of the inserted node is deeper in the tree than current node');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2]);
var parent2 = new parentCtor([node3, parent1, node4]);
node2.before(node4);
assert_equals(node4.nextSibling, node2, type(node2) + '.before() should insert ' +
'nodes before this node');
assert_equals(node4.parent, parent1, 'Parent group of the inserted node should be changed');
assert_equals(node4.previousSibling, node1, type(node2) + '.before() should insert ' +
'nodes before this node');
assert_equals(node1.nextSibling, node4, type(node2) + '.before() should insert ' +
'nodes before this node');
assert_equals(node2.previousSibling, node4, 'Node should be inserted into the tree ' +
'before this node');
assert_equals(parent1.nextSibling, null, 'Inserted node should be removed from its ' +
'previous position in the tree');
assert_array_equals(parent1.children, [node1, node4, node2], parentCtor.name +
'.children should be updated');
assert_array_equals(parent2.children, [node3, parent1], 'Inserted node should be ' +
'removed from its previous position in the tree');
});
});
}, 'Test AnimationNode.before() inserts node before this node. The previous position ' +
'of the inserted node is shallower in the tree than current node, but not ancestor');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node2.before(node3, node4);
assert_equals(node1.nextSibling, node3, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node3.previousSibling, node1, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node3.nextSibling, node4, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node3.parent, parent, 'Parent group of the inserted node should be changed');
assert_equals(node4.previousSibling, node3, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node4.nextSibling, node2, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node4.parent, parent, 'Parent group of the inserted node should be changed');
assert_equals(node2.previousSibling, node4, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_array_equals(parent.children, [node1, node3, node4, node2], parentCtor.name +
'.children should be updated');
});
});
}, 'Test AnimationNode.before() inserts several nodes before this node');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node2.before(node3, node4, node3, node4);
assert_equals(node1.nextSibling, node3, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node3.previousSibling, node1, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node3.nextSibling, node4, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node3.parent, parent, 'Parent group of the inserted node should be changed');
assert_equals(node4.previousSibling, node3, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node4.nextSibling, node2, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node4.parent, parent, 'Parent group of the inserted node should be changed');
assert_equals(node2.previousSibling, node4, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_array_equals(parent.children, [node1, node3, node4, node2], parentCtor.name +
'.children should be updated');
});
});
}, 'Test AnimationNode.before() inserts several nodes before this node, duplicate nodes are ignored');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node2.before(node3, node4, node3);
assert_equals(node1.nextSibling, node4, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node4.previousSibling, node1, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node4.nextSibling, node3, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node4.parent, parent, 'Parent group of the inserted node should be changed');
assert_equals(node3.previousSibling, node4, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node3.nextSibling, node2, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_equals(node3.parent, parent, 'Parent group of the inserted node should be changed');
assert_equals(node2.previousSibling, node3, type(node1) + '.before() should insert ' +
'nodes before this node');
assert_array_equals(parent.children, [node1, node4, node3, node2], parentCtor.name +
'.children should be updated');
});
});
}, 'Test AnimationNode.before() inserts several nodes before this node, check insertion order');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var parent = new parentCtor([node1]);
var player = document.timeline.play(node2);
assert_equals(player.source, node2, 'The node should be associated with its player');
node1.before(node2);
assert_equals(player.source, null, 'The node should be disassociated from its player');
});
});
}, 'Test AnimationNode.before() disassociates the inserted node from the player, ' +
'if node is directly associated with a player');
</script>
</body>

503
tests/wpt/web-platform-tests/web-animations/animation-node/animation-node-next-sibling.html
View file

@ -1,503 +0,0 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>AnimationNode nextSibling attribute tests</title>
<meta name="assert" content="The next sibling of this animation node">
<link rel="help" href="http://w3c.github.io/web-animations/#dom-animationnode-nextsibling">
<link rel="help" href="http://www.w3.org/TR/dom/#concept-tree-next-sibling">
<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru">
<link rel="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
test(function() {
var nodes = [newAnimation(createDiv(this)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
assert_equals(node.nextSibling, null, type(node) + '.nextSibling should be null');
});
}, 'AnimationNode.nextSibling is null if the node is standalone');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
var parent = new parentCtor([node]);
assert_equals(node.nextSibling, null, type(node) + '.nextSibling ' +
'should be null');
});
});
}, 'AnimationNode.nextSibling is null if the node is the only child of its parent');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
assert_equals(node1.nextSibling, node2, type(node1) + '.nextSibling should return ' +
'next sibling of this animation node');
assert_equals(node2.nextSibling, null, type(node2) + '.nextSibling should be null');
});
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node. Test first child');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
assert_equals(node1.nextSibling, node2, type(node1) + '.nextSibling should return ' +
'next sibling of this animation node');
assert_equals(node2.nextSibling, null, type(node2) + '.nextSibling should be null');
});
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node. Test second child');
test(function() {
var node1 = newAnimation(createDiv(this));
var node2 = newAnimation(createDiv(this));
var node3 = newAnimation(createDiv(this));
var node4 = newAnimation(createDiv(this));
var node5 = newAnimation(createDiv(this));
var node6 = newAnimation(createDiv(this));
var node7 = new AnimationGroup([node3, node4]);
var node8 = new AnimationGroup([node5, node6]);
var node9 = newAnimation(createDiv(this));
var group = new AnimationGroup([node1, node2, node7, node8, node9]);
assert_equals(group.nextSibling, null, 'AnimationNode.nextSibling should return ' +
'null (root node)');
assert_equals(node1.nextSibling, node2, 'AnimationNode.nextSibling should return ' +
'next sibling for the first node in the group');
assert_equals(node2.nextSibling, node7, 'AnimationNode.nextSibling should return ' +
'next sibling of this animation node');
assert_equals(node3.nextSibling, node4, 'AnimationNode.nextSibling should return ' +
'next sibling of this animation node (first node in the nested group)');
assert_equals(node4.nextSibling, null, 'AnimationNode.nextSibling should be null ' +
'for the last node in the nested group');
assert_equals(node5.nextSibling, node6, 'AnimationNode.nextSibling should return ' +
'next sibling of this animation node (first node in the second nested group)');
assert_equals(node6.nextSibling, null, 'AnimationNode.nextSibling should be null ' +
'for the last node in the second nested group');
assert_equals(node7.nextSibling, node8, 'AnimationNode.nextSibling should return ' +
'next sibling of this animation node (first nested group)');
assert_equals(node8.nextSibling, node9, 'AnimationNode.nextSibling should return ' +
'next sibling of this animation node (second nested group)');
assert_equals(node9.nextSibling, null, 'AnimationNode.nextSibling should return ' +
'null (the last node)');
}, 'AnimationNode.nextSibling returns next sibling of this animation node. Test ' +
'tree structure with AnimationGroup');
test(function() {
var node1 = newAnimation(createDiv(this));
var node2 = newAnimation(createDiv(this));
var node3 = newAnimation(createDiv(this));
var node4 = newAnimation(createDiv(this));
var node5 = newAnimation(createDiv(this));
var node6 = newAnimation(createDiv(this));
var node7 = new AnimationSequence([node3, node4]);
var node8 = new AnimationSequence([node5, node6]);
var node9 = newAnimation(createDiv(this));
var sequence = new AnimationSequence([node1, node2, node7, node8, node9]);
assert_equals(sequence.nextSibling, null, 'AnimationNode.nextSibling should return ' +
'null (root node)');
assert_equals(node1.nextSibling, node2, 'AnimationNode.nextSibling should return ' +
'next sibling for the first node in the sequence');
assert_equals(node2.nextSibling, node7, 'AnimationNode.nextSibling should return ' +
'next sibling of this animation node');
assert_equals(node3.nextSibling, node4, 'AnimationNode.nextSibling should return ' +
'next sibling of this animation node (first node in the nested sequence)');
assert_equals(node4.nextSibling, null, 'AnimationNode.nextSibling should be null ' +
'for the last node in the nested sequence');
assert_equals(node5.nextSibling, node6, 'AnimationNode.nextSibling should return ' +
'next sibling of this animation node (first node in the second nested sequence)');
assert_equals(node6.nextSibling, null, 'AnimationNode.nextSibling should be null ' +
'for the last node in the second nested sequence');
assert_equals(node7.nextSibling, node8, 'AnimationNode.nextSibling should return ' +
'next sibling of this animation node (first nested sequence)');
assert_equals(node8.nextSibling, node9, 'AnimationNode.nextSibling should return ' +
'next sibling of this animation node (second nested sequence)');
assert_equals(node9.nextSibling, null, 'AnimationNode.nextSibling should return ' +
'null (the last node)');
}, 'AnimationNode.nextSibling returns next sibling of this animation node. Test ' +
'tree structure with AnimationSequence');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node2.before(node3);
assert_equals(node1.nextSibling, node3, type(node2) + '.before() should update ' +
'next sibling of animation node');
assert_equals(node3.nextSibling, node2, type(node2) + '.before() should update ' +
'next sibling of animation node');
assert_equals(node2.nextSibling, null, type(node2) + '.before() should update ' +
'next sibling of animation node');
});
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node, ' +
'the next sibling is changed by method before()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node3) {
var node1 = newAnimation(createDiv(test));
var node2 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2]);
var parent2 = new parentCtor([node3]);
node3.before(node2);
assert_equals(node1.nextSibling, null, type(node3) + '.before() should update ' +
'next sibling of animation node');
assert_equals(node2.nextSibling, node3, type(node3) + '.before() should update ' +
'next sibling of animation node');
});
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node, ' +
'the next sibling is removed by method before()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = new AnimationGroup([]);
var node5 = new AnimationSequence([]);
var parent = new parentCtor([node1, node2]);
node2.before(node3, node4, node5);
assert_equals(node1.nextSibling, node3, type(node2) + '.before() should update ' +
'next sibling of animation node');
assert_equals(node3.nextSibling, node4, type(node2) + '.before() should update ' +
'next sibling of animation node');
assert_equals(node4.nextSibling, node5, type(node2) + '.before() should update ' +
'next sibling of animation node');
assert_equals(node5.nextSibling, node2, type(node2) + '.before() should update ' +
'next sibling of animation node');
assert_equals(node2.nextSibling, null, type(node2) + '.before() should update ' +
'next sibling of animation node');
});
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node, ' +
'several nodes are added by method before()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node1.after(node3);
assert_equals(node1.nextSibling, node3, type(node1) + '.after() should update ' +
'next sibling of animation node');
assert_equals(node3.nextSibling, node2, type(node1) + '.after() should update ' +
'next sibling of animation node');
assert_equals(node2.nextSibling, null, type(node1) + '.after() should update ' +
'next sibling of animation node');
});
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node, ' +
'the next sibling is changed by method after()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node3) {
var node1 = newAnimation(createDiv(test));
var node2 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2]);
var parent2 = new parentCtor([node3]);
node3.after(node2);
assert_equals(node1.nextSibling, null, type(node3) + '.after() should update ' +
'next sibling of animation node');
assert_equals(node3.nextSibling, node2, type(node3) + '.after() should update ' +
'next sibling of animation node');
});
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node, ' +
'the next sibling is removed by method after()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = new AnimationGroup([]);
var node5 = new AnimationSequence([]);
var parent = new parentCtor([node1, node2]);
node1.after(node3, node4, node5);
assert_equals(node1.nextSibling, node3, type(node1) + '.after() should update ' +
'next sibling of animation node');
assert_equals(node3.nextSibling, node4, type(node1) + '.after() should update ' +
'next sibling of animation node');
assert_equals(node4.nextSibling, node5, type(node1) + '.after() should update ' +
'next sibling of animation node');
assert_equals(node5.nextSibling, node2, type(node1) + '.after() should update ' +
'next sibling of animation node');
assert_equals(node2.nextSibling, null, type(node1) + '.after() should update ' +
'next sibling of animation node');
});
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node, ' +
'several nodes are added by method after()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2, node3]);
node2.replace(node4);
assert_equals(node1.nextSibling, node4, type(node2) + '.replace() should update ' +
'next sibling of animation node');
assert_equals(node4.nextSibling, node3, type(node2) + '.replace() should update ' +
'next sibling of animation node');
assert_equals(node2.nextSibling, null, type(node2) + '.replace() should update ' +
'next sibling of animation node');
});
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node, ' +
'the next sibling is changed by method replace()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node4) {
var node1 = newAnimation(createDiv(test));
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2, node3]);
var parent2 = new parentCtor([node4]);
node4.replace(node2);
assert_equals(node1.nextSibling, node3, type(node4) + '.replace() should update ' +
'next sibling of animation node');
assert_equals(node2.nextSibling, null, type(node4) + '.replace() should update ' +
'next sibling of animation node');
});
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node, ' +
'the next sibling is removed by method replace()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var node5 = new AnimationGroup([]);
var node6 = new AnimationSequence([]);
var parent = new parentCtor([node1, node2, node3]);
node2.replace(node4, node5, node6);
assert_equals(node1.nextSibling, node4, type(node2) + '.replace() should update ' +
'next sibling of animation node');
assert_equals(node4.nextSibling, node5, type(node2) + '.replace() should update ' +
'next sibling of animation node');
assert_equals(node5.nextSibling, node6, type(node2) + '.replace() should update ' +
'next sibling of animation node');
assert_equals(node6.nextSibling, node3, type(node2) + '.replace() should update ' +
'next sibling of animation node');
assert_equals(node2.nextSibling, null, type(node2) + '.replace() should update ' +
'next sibling of animation node');
});
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node, ' +
'several nodes are added by method replace()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2, node3]);
node2.remove();
assert_equals(node1.nextSibling, node3, type(node2) + '.replace() should update ' +
'next sibling of animation node');
assert_equals(node2.nextSibling, null, type(node2) + '.replace() should update ' +
'next sibling of animation node');
});
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node, ' +
'the next sibling is changed by method remove()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var parent = new parentCtor([node1]);
parent.prepend(node2);
assert_equals(node2.nextSibling, node1, parentCtor.name + '.prepend() should update ' +
'next sibling of animation node');
});
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node, ' +
'the next sibling is changed by method AnimationGroup.prepend()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2]);
var parent2 = new parentCtor([node3]);
parent2.prepend(node2);
assert_equals(node1.nextSibling, null, parentCtor.name + '.prepend() should update ' +
'next sibling of animation node');
assert_equals(node2.nextSibling, node3, parentCtor.name + '.prepend() should update ' +
'next sibling of animation node');
});
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node, ' +
'the next sibling is removed by method AnimationGroup.prepend()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var node1 = newAnimation(createDiv(test));
var node2 = new AnimationGroup([]);
var node3 = new AnimationSequence([]);
var node4 = newAnimation(createDiv(test));
var parent = new parentCtor([node1]);
parent.prepend(node2, node3, node4);
assert_equals(node2.nextSibling, node3, parentCtor.name + '.prepend() should update ' +
'next sibling of animation node');
assert_equals(node3.nextSibling, node4, parentCtor.name + '.prepend() should update ' +
'next sibling of animation node');
assert_equals(node4.nextSibling, node1, parentCtor.name + '.prepend() should update ' +
'next sibling of animation node');
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node, ' +
'several nodes are added by method AnimationGroup.prepend()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var parent = new parentCtor([node1]);
parent.append(node2);
assert_equals(node1.nextSibling, node2, parentCtor.name + '.append() should update ' +
'next sibling of animation node');
assert_equals(node2.nextSibling, null, parentCtor.name + '.append() should update ' +
'next sibling of animation node');
});
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node, ' +
'the next sibling is changed by method AnimationGroup.append()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2]);
var parent2 = new parentCtor([node3]);
parent2.append(node2);
assert_equals(node1.nextSibling, null, parentCtor.name + '.append() should update ' +
'next sibling of animation node');
assert_equals(node3.nextSibling, node2, parentCtor.name + '.append() should update ' +
'next sibling of animation node');
});
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node, ' +
'the next sibling is removed by method AnimationGroup.append()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var node3 = new AnimationGroup([]);
var node4 = new AnimationSequence([]);
var parent = new parentCtor([node1]);
parent.append(node2, node3, node4);
assert_equals(node1.nextSibling, node2, parentCtor.name + '.append() should update ' +
'next sibling of animation node');
assert_equals(node2.nextSibling, node3, parentCtor.name + '.append() should update ' +
'next sibling of animation node');
assert_equals(node3.nextSibling, node4, parentCtor.name + '.append() should update ' +
'next sibling of animation node');
assert_equals(node4.nextSibling, null, parentCtor.name + '.append() should update ' +
'next sibling of animation node');
});
});
}, 'AnimationNode.nextSibling returns next sibling of this animation node, ' +
'several nodes are added by method AnimationGroup.append()');
</script>
</body>

53
tests/wpt/web-platform-tests/web-animations/animation-node/animation-node-parent.html
View file

@ -1,53 +0,0 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>AnimationNode parent attribute tests</title>
<meta name="assert" content="The parent animation group of this animation node or null if this animation node does not have a parent animation group">
<link rel="help" href="http://w3c.github.io/web-animations/#dom-animationnode-parent">
<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru">
<link rel="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
test(function() {
var nodes = [newAnimation(createDiv(this)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
assert_equals(node.parent, null, type(node) + '.parent should be null');
});
}, 'AnimationNode.parent is null if animation node does not have a parent animation group');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
var parent = new parentCtor([node]);
assert_equals(node.parent, parent, type(node) + '.parent should return ' +
'parent animation group of this animation node');
});
});
}, 'AnimationNode.parent returns parent animation group of this animation node');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
var parent = new parentCtor([nodes[0], nodes[1], nodes[2]]);
nodes.forEach(function(node) {
assert_equals(node.parent, parent, type(node) + '.parent should return ' +
'parent animation group of this animation node');
});
});
}, 'AnimationNode.parent returns parent animation group of this animation node. ' +
'The group has several children nodes');
// The rest is tested in mutator methods: AnimationNode.before(), AnimationNode.after(),
// AnimationNode.replace(), AnimationNode.remove(),
// AnimationGroup.prepend(), AnimationGroup.append(), AnimationGroup.clone()
</script>
</body>

511
tests/wpt/web-platform-tests/web-animations/animation-node/animation-node-previous-sibling.html
View file

@ -1,511 +0,0 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>AnimationNode previousSibling attribute tests</title>
<meta name="assert" content="The previous sibling of this animation node">
<link rel="help" href="http://w3c.github.io/web-animations/#dom-animationnode-previoussibling">
<link rel="help" href="http://www.w3.org/TR/dom/#concept-tree-previous-sibling">
<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru">
<link rel="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
test(function() {
var nodes = [
newAnimation(createDiv(this)),
new AnimationGroup([]),
new AnimationSequence([])
];
nodes.forEach(function(node) {
assert_equals(node.previousSibling, null, type(node) + '.previousSibling should be null');
});
}, 'AnimationNode.previousSibling is null if the node is standalone');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
var parent = new parentCtor([node]);
assert_equals(node.previousSibling, null, type(node) + '.previousSibling ' +
'should be null');
});
});
}, 'AnimationNode.previousSibling is null if the node is the only child of its parent');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
assert_equals(node1.previousSibling, null, type(node1) + '.previousSibling should be null');
assert_equals(node2.previousSibling, node1, type(node2) + '.previousSibling should return ' +
'previous sibling of this animation node');
});
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node. Test first child');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
assert_equals(node1.previousSibling, null, type(node1) + '.previousSibling should be null');
assert_equals(node2.previousSibling, node1, type(node2) + '.previousSibling should return ' +
'previous sibling of this animation node');
});
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node. Test second child');
test(function() {
var node1 = newAnimation(createDiv(this));
var node2 = newAnimation(createDiv(this));
var node3 = newAnimation(createDiv(this));
var node4 = newAnimation(createDiv(this));
var node5 = newAnimation(createDiv(this));
var node6 = newAnimation(createDiv(this));
var node7 = new AnimationGroup([node3, node4]);
var node8 = new AnimationGroup([node5, node6]);
var node9 = newAnimation(createDiv(this));
var group = new AnimationGroup([node1, node2, node7, node8, node9]);
assert_equals(group.previousSibling, null, 'AnimationNode.previousSibling should return ' +
'null (root node)');
assert_equals(node1.previousSibling, null, 'AnimationNode.previousSibling should return ' +
'null for the first node in the group');
assert_equals(node2.previousSibling, node1, 'AnimationNode.previousSibling should return ' +
'previous sibling of this animation node');
assert_equals(node3.previousSibling, null, 'AnimationNode.previousSibling should be null ' +
'for the first node in the nested group');
assert_equals(node4.previousSibling, node3, 'AnimationNode.previousSibling should return ' +
'previous sibling of this animation node (first node in the nested group)');
assert_equals(node5.previousSibling, null, 'AnimationNode.previousSibling should be null ' +
'for the first node in the second nested group');
assert_equals(node6.previousSibling, node5, 'AnimationNode.previousSibling should return ' +
'previous sibling of this animation node (first node in the second nested group)');
assert_equals(node7.previousSibling, node2, 'AnimationNode.previousSibling should return ' +
'previous sibling of this animation node (first nested group)');
assert_equals(node8.previousSibling, node7, 'AnimationNode.previousSibling should return ' +
'previous sibling of this animation node (second nested group)');
assert_equals(node9.previousSibling, node8, 'AnimationNode.previousSibling should return ' +
'previous sibling of this animation node');
}, 'AnimationNode.previousSibling returns previous sibling of this animation node. Test ' +
'tree structure with AnimationGroup');
test(function() {
var node1 = newAnimation(createDiv(this));
var node2 = newAnimation(createDiv(this));
var node3 = newAnimation(createDiv(this));
var node4 = newAnimation(createDiv(this));
var node5 = newAnimation(createDiv(this));
var node6 = newAnimation(createDiv(this));
var node7 = new AnimationSequence([node3, node4]);
var node8 = new AnimationSequence([node5, node6]);
var node9 = newAnimation(createDiv(this));
var sequence = new AnimationSequence([node1, node2, node7, node8, node9]);
assert_equals(sequence.previousSibling, null, 'AnimationNode.previousSibling should return ' +
'null (root node)');
assert_equals(node1.previousSibling, null, 'AnimationNode.previousSibling should return ' +
'null for the first node in the group');
assert_equals(node2.previousSibling, node1, 'AnimationNode.previousSibling should return ' +
'previous sibling of this animation node');
assert_equals(node3.previousSibling, null, 'AnimationNode.previousSibling should be null ' +
'for the first node in the nested group');
assert_equals(node4.previousSibling, node3, 'AnimationNode.previousSibling should return ' +
'previous sibling of this animation node (first node in the nested group)');
assert_equals(node5.previousSibling, null, 'AnimationNode.previousSibling should be null ' +
'for the first node in the second nested group');
assert_equals(node6.previousSibling, node5, 'AnimationNode.previousSibling should return ' +
'previous sibling of this animation node (first node in the second nested group)');
assert_equals(node7.previousSibling, node2, 'AnimationNode.previousSibling should return ' +
'previous sibling of this animation node (first nested group)');
assert_equals(node8.previousSibling, node7, 'AnimationNode.previousSibling should return ' +
'previous sibling of this animation node (second nested group)');
assert_equals(node9.previousSibling, node8, 'AnimationNode.previousSibling should return ' +
'previous sibling of this animation node');
}, 'AnimationNode.previousSibling returns previous sibling of this animation node. Test ' +
'tree structure with AnimationSequence');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node2.before(node3);
assert_equals(node1.previousSibling, null, type(node2) + '.before() should update ' +
'previous sibling of animation node');
assert_equals(node3.previousSibling, node1, type(node2) + '.before() should update ' +
'previous sibling of animation node');
assert_equals(node2.previousSibling, node3, type(node2) + '.before() should update ' +
'previous sibling of animation node');
});
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node, ' +
'the previous sibling is changed by method before()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node3) {
var node1 = newAnimation(createDiv(test));
var node2 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2]);
var parent2 = new parentCtor([node3]);
node3.before(node1);
assert_equals(node1.previousSibling, null, type(node3) + '.before() should update ' +
'previous sibling of animation node');
assert_equals(node2.previousSibling, null, type(node3) + '.before() should update ' +
'previous sibling of animation node');
assert_equals(node3.previousSibling, node1, type(node3) + '.before() should update ' +
'previous sibling of animation node');
});
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node, ' +
'the previous sibling is removed by method before()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = new AnimationGroup([]);
var node5 = new AnimationSequence([]);
var parent = new parentCtor([node1, node2]);
node2.before(node3, node4, node5);
assert_equals(node1.previousSibling, null, type(node2) + '.before() should update ' +
'previous sibling of animation node');
assert_equals(node3.previousSibling, node1, type(node2) + '.before() should update ' +
'previous sibling of animation node');
assert_equals(node4.previousSibling, node3, type(node2) + '.before() should update ' +
'previous sibling of animation node');
assert_equals(node5.previousSibling, node4, type(node2) + '.before() should update ' +
'previous sibling of animation node');
assert_equals(node2.previousSibling, node5, type(node2) + '.before() should update ' +
'previous sibling of animation node');
});
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node, ' +
'several nodes are added by method before()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node1.after(node3);
assert_equals(node1.previousSibling, null, type(node1) + '.after() should update ' +
'previous sibling of animation node');
assert_equals(node3.previousSibling, node1, type(node1) + '.after() should update ' +
'previous sibling of animation node');
assert_equals(node2.previousSibling, node3, type(node1) + '.after() should update ' +
'previous sibling of animation node');
});
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node, ' +
'the previous sibling is changed by method after()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node3) {
var node1 = newAnimation(createDiv(test));
var node2 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2]);
var parent2 = new parentCtor([node3]);
node3.after(node1);
assert_equals(node1.previousSibling, node3, type(node3) + '.after() should update ' +
'previous sibling of animation node');
assert_equals(node2.previousSibling, null, type(node3) + '.after() should update ' +
'previous sibling of animation node');
assert_equals(node3.previousSibling, null, type(node3) + '.after() should update ' +
'previous sibling of animation node');
});
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node, ' +
'the previous sibling is removed by method after()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = new AnimationGroup([]);
var node5 = new AnimationSequence([]);
var parent = new parentCtor([node1, node2]);
node1.after(node3, node4, node5);
assert_equals(node1.previousSibling, null, type(node1) + '.after() should update ' +
'previous sibling of animation node');
assert_equals(node3.previousSibling, node1, type(node1) + '.after() should update ' +
'previous sibling of animation node');
assert_equals(node4.previousSibling, node3, type(node1) + '.after() should update ' +
'previous sibling of animation node');
assert_equals(node5.previousSibling, node4, type(node1) + '.after() should update ' +
'previous sibling of animation node');
assert_equals(node2.previousSibling, node5, type(node1) + '.after() should update ' +
'previous sibling of animation node');
});
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node, ' +
'several nodes are added by method after()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2, node3]);
node2.replace(node4);
assert_equals(node4.previousSibling, node1, type(node2) + '.replace() should update ' +
'previous sibling of animation node');
assert_equals(node2.previousSibling, null, type(node2) + '.replace() should update ' +
'previous sibling of animation node');
assert_equals(node3.previousSibling, node4, type(node2) + '.replace() should update ' +
'previous sibling of animation node');
});
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node, ' +
'the previous sibling is changed by method replace()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node4) {
var node1 = newAnimation(createDiv(test));
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2, node3]);
var parent2 = new parentCtor([node4]);
node4.replace(node2);
assert_equals(node3.previousSibling, node1, type(node4) + '.replace() should update ' +
'previous sibling of animation node');
assert_equals(node2.previousSibling, null, type(node4) + '.replace() should update ' +
'previous sibling of animation node');
});
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node, ' +
'the previous sibling is removed by method replace()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var node5 = new AnimationGroup([]);
var node6 = new AnimationSequence([]);
var parent = new parentCtor([node1, node2, node3]);
node2.replace(node4, node5, node6);
assert_equals(node4.previousSibling, node1, type(node2) + '.replace() should update ' +
'previous sibling of animation node');
assert_equals(node5.previousSibling, node4, type(node2) + '.replace() should update ' +
'previous sibling of animation node');
assert_equals(node6.previousSibling, node5, type(node2) + '.replace() should update ' +
'previous sibling of animation node');
assert_equals(node3.previousSibling, node6, type(node2) + '.replace() should update ' +
'previous sibling of animation node');
assert_equals(node2.previousSibling, null, type(node2) + '.replace() should update ' +
'previous sibling of animation node');
});
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node, ' +
'several nodes are added by method replace()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2, node3]);
node2.remove();
assert_equals(node3.previousSibling, node1, type(node2) + '.replace() should update ' +
'previous sibling of animation node');
assert_equals(node2.previousSibling, null, type(node2) + '.replace() should update ' +
'previous sibling of animation node');
});
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node, ' +
'the previous sibling is changed by method remove()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var parent = new parentCtor([node1]);
parent.prepend(node2);
assert_equals(node1.previousSibling, node2, parentCtor.name + '.prepend() should update ' +
'previous sibling of animation node');
});
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node, ' +
'the previous sibling is changed by method AnimationGroup.prepend()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2]);
var parent2 = new parentCtor([node3]);
parent2.prepend(node1);
assert_equals(node2.previousSibling, null, parentCtor.name + '.prepend() should update ' +
'previous sibling of animation node');
assert_equals(node3.previousSibling, node1, parentCtor.name + '.prepend() should update ' +
'previous sibling of animation node');
});
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node, ' +
'the previous sibling is removed by method AnimationGroup.prepend()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var node1 = newAnimation(createDiv(test));
var node2 = new AnimationGroup([]);
var node3 = new AnimationSequence([]);
var node4 = newAnimation(createDiv(test));
var parent = new parentCtor([node1]);
parent.prepend(node2, node3, node4);
assert_equals(node2.previousSibling, null, parentCtor.name + '.prepend() should update ' +
'previous sibling of animation node');
assert_equals(node3.previousSibling, node2, parentCtor.name + '.prepend() should update ' +
'previous sibling of animation node');
assert_equals(node4.previousSibling, node3, parentCtor.name + '.prepend() should update ' +
'previous sibling of animation node');
assert_equals(node1.previousSibling, node4, parentCtor.name + '.prepend() should update ' +
'previous sibling of animation node');
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node, ' +
'several nodes are added by method AnimationGroup.prepend()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var parent = new parentCtor([node1]);
parent.append(node2);
assert_equals(node1.previousSibling, null, parentCtor.name + '.append() should update ' +
'previous sibling of animation node');
assert_equals(node2.previousSibling, node1, parentCtor.name + '.append() should update ' +
'previous sibling of animation node');
});
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node, ' +
'the previous sibling is changed by method AnimationGroup.append()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2]);
var parent2 = new parentCtor([node3]);
parent2.append(node1);
assert_equals(node2.previousSibling, null, parentCtor.name + '.append() should update ' +
'previous sibling of animation node');
assert_equals(node1.previousSibling, node3, parentCtor.name + '.append() should update ' +
'previous sibling of animation node');
});
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node, ' +
'the previous sibling is removed by method AnimationGroup.append()');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var node3 = new AnimationGroup([]);
var node4 = new AnimationSequence([]);
var parent = new parentCtor([node1]);
parent.append(node2, node3, node4);
assert_equals(node2.previousSibling, node1, parentCtor.name + '.append() should update ' +
'previous sibling of animation node');
assert_equals(node3.previousSibling, node2, parentCtor.name + '.append() should update ' +
'previous sibling of animation node');
assert_equals(node4.previousSibling, node3, parentCtor.name + '.append() should update ' +
'previous sibling of animation node');
});
});
}, 'AnimationNode.previousSibling returns previous sibling of this animation node, ' +
'several nodes are added by method AnimationGroup.append()');
</script>
</body>

239
tests/wpt/web-platform-tests/web-animations/animation-node/animation-node-remove.html
View file

@ -1,239 +0,0 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>AnimationNode remove() method tests</title>
<meta name="assert" content="Removes this animation node from its parent animation group or player">
<link rel="help" href="http://w3c.github.io/web-animations/#dom-animationnode-remove">
<link rel="help" href="http://w3c.github.io/web-animations/#remove-an-animation-node">
<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru">
<link rel="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
test(function() {
var nodes = [newAnimation(createDiv(this)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
node.remove();
assert_equals(node.parent, null, type(node) + ' node parent attribute should be null');
});
}, 'AnimationNode.remove() does nothing for standalone node');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
var parent = new parentCtor([node]);
node.remove();
assert_array_equals(parent.children, [], type(node) +
' node should be removed from the parent ' + parentCtor.name);
assert_equals(node.parent, null, type(node) +
' node parent attribute should be updated');
});
});
}, 'AnimationNode.remove() removes node from the parent animation group. ' +
'Removed node is the only node in the tree');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node1.remove();
assert_array_equals(parent.children, [node2], type(node1) +
' node should be removed from the parent ' + parentCtor.name);
assert_equals(parent.firstChild, node2, 'Parent ' + parentCtor.name +
' firstChild attribute should be updated');
assert_equals(node1.parent, null, 'Removed ' + type(node1) +
' node parent attribute should be updated');
assert_equals(node1.nextSibling, null, 'Removed ' + type(node1) +
' node nextSibling attribute should be updated');
assert_equals(node2.previousSibling, null,
'Remaining node previousSibling attribute should be updated');
});
});
}, 'AnimationNode.remove() removes node from the parent animation group. ' +
'Remove the first node in the group');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node2.remove();
assert_array_equals(parent.children, [node1], type(node2) +
' node should be removed from the parent ' + parentCtor.name);
assert_equals(parent.lastChild, node1, 'Parent ' + parentCtor.name +
' lastChild attribute should be updated');
assert_equals(node2.parent, null, 'Removed ' + type(node2) +
' node parent attribute should be updated');
assert_equals(node1.nextSibling, null,
'Remaining node nextSibling attribute should be updated');
assert_equals(node2.previousSibling, null, 'Removed ' + type(node2) +
' node previousSibling attribute should be updated');
});
});
}, 'AnimationNode.remove() removes node from the parent animation group. ' +
'Remove the last node in the group');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2, node3]);
node2.remove();
assert_array_equals(parent.children, [node1, node3], type(node2) +
' node should be removed from the parent ' + parentCtor.name);
assert_equals(node2.parent, null, 'Removed ' + type(node2) +
' node parent attribute should be updated');
assert_equals(node2.nextSibling, null, 'Removed ' + type(node2) +
' node nextSibling attribute should be updated');
assert_equals(node2.previousSibling, null, 'Removed ' + type(node2) +
' node previousSibling attribute should be updated');
assert_equals(node1.nextSibling, node3,
'Remaining node nextSibling attribute should be updated');
assert_equals(node3.previousSibling, node1,
'Remaining node previousSibling attribute should be updated');
});
});
}, 'AnimationNode.remove() removes node from the parent animation group. ' +
'Remove node from the middle of the group');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
parents.forEach(function(nodeCtor) {
var node1 = newAnimation(createDiv(test));
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = new nodeCtor([node1, node2]);
var node5 = newAnimation(createDiv(test));
var parent = new parentCtor([node3, node4, node5]);
node4.remove();
assert_array_equals(node4.children, [node1, node2], 'Removed ' +
type(node4) + ' node children should not be changed');
assert_array_equals(parent.children, [node3, node5], type(node4) +
' node should be removed from the parent ' + parentCtor.name);
assert_equals(node4.parent, null, 'Removed ' + type(node2) +
' node parent attribute should be updated');
assert_equals(node4.nextSibling, null, 'Removed ' + type(node2) +
' node nextSibling attribute should be updated');
assert_equals(node4.previousSibling, null, 'Removed ' + type(node2) +
' node previousSibling attribute should be updated');
assert_equals(node3.nextSibling, node5,
'Remaining node nextSibling attribute should be updated');
assert_equals(node5.previousSibling, node3,
'Remaining node previousSibling attribute should be updated');
});
});
}, 'Test removing a node that has children');
test(function() {
var nodes = [newAnimation(createDiv(this)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
var player = document.timeline.play(node);
node.remove();
assert_equals(player.source, null, type(node) +
' node should be disassociated from the player');
});
}, 'AnimationNode.remove() disassociates the node from player, ' +
'if node is directly associated with a player');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2, node3]);
var player = document.timeline.play(parent);
node2.remove();
assert_equals(player.source, parent, type(node2) +
' parent node should remain associated with the player');
});
});
}, 'AnimationNode.remove() keeps parent direct association with the player');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
parents.forEach(function(nodeCtor) {
var node1 = newAnimation(createDiv(test));
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var node5 = new parentCtor([node4]);
var group1 = new AnimationGroup([node3, node5]);
var node6 = newAnimation(createDiv(test));
var node7 = new parentCtor([node6]);
var node8 = newAnimation(createDiv(test));
var sequence1 = new AnimationSequence([node7,node8]);
var node9 = new nodeCtor([node1, group1, node2, sequence1]);
var node10 = newAnimation(createDiv(test));
var parent = new parentCtor([node9, node10]);
node9.remove();
assert_equals(node9.parent, null, 'Removed ' + type(node9) +
' node parent attribute should be updated');
assert_array_equals(node9.children, [node1, group1, node2, sequence1],
'Removed ' + type(node9) + ' node children should not be changed');
for (var i = 0; i < node9.children.length; i++) {
assert_equals(node9.children[i].parent, node9, 'Removed ' + type(node9) +
' node children parent attribute should not be changed for child ' + i);
}
assert_array_equals(group1.children, [node3, node5],
'Removed ' + type(node9) + ' node grand children should not be changed');
for (var i = 0; i < group1.children.length; i++) {
assert_equals(group1.children[i].parent, group1, 'Removed ' + type(node9) +
' node grand children parent attribute should not be changed for child ' + i);
}
assert_array_equals(sequence1.children, [node7,node8],
'Removed ' + type(node9) + ' node grand children should not be changed');
for (var i = 0; i < sequence1.children.length; i++) {
assert_equals(sequence1.children[i].parent, sequence1, 'Removed ' + type(node9) +
' node grand children parent attribute should not be changed for child ' + i);
}
assert_array_equals(node5.children, [node4],
'Removed ' + type(node9) + ' node grand children should not be changed');
assert_equals(node4.parent, node5, 'Removed ' + type(node9) +
' node grand children parent attribute should not be changed');
assert_array_equals(node7.children, [node6],
'Removed ' + type(node9) + ' node grand children should not be changed');
assert_equals(node6.parent, node7, 'Removed ' + type(node9) +
' node grand children parent attribute should not be changed');
});
});
}, 'AnimationNode.remove() on the root of a non-trivial tree does not change child structure');
</script>
</body>

444
tests/wpt/web-platform-tests/web-animations/animation-node/animation-node-replace.html
View file

@ -1,444 +0,0 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>AnimationNode replace() method tests</title>
<meta name="assert" content="Replaces this AnimationNode with the passed in nodes parameter">
<link rel="help" href="http://w3c.github.io/web-animations/#dom-animationnode-replace">
<link rel="help" href="http://w3c.github.io/web-animations/#remove-an-animation-node">
<link rel="help" href="http://w3c.github.io/web-animations/#insert-children">
<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru">
<link rel="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
// Step 1. If there is no parent animation group, terminate these steps.
test(function() {
var nodes = [newAnimation(createDiv(this)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
try {
node.replace(null);
} catch(e) {
assert_unreached(type(node) + '.replace(null) throws unexpected exception: ' + e);
}
});
}, 'AnimationNode.replace(null) does nothing if node has no parent animation group');
test(function() {
var nodes = [newAnimation(createDiv(this)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
try {
node.replace(node);
} catch(e) {
assert_unreached(type(node) + '.replace(node) throws unexpected exception: ' + e);
}
});
}, 'AnimationNode.replace() does nothing if node has no parent animation group. ' +
'HierarchyRequestError is not thrown if the node is replacing itself');
test(function() {
var test = this;
var nodes = [newAnimation(createDiv(this)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
try {
node1.replace(node2);
} catch(e) {
assert_unreached(type(node1) + '.replace() throws unexpected exception: ' + e);
}
});
}, 'AnimationNode.replace() does nothing if node has no parent animation group');
// Step 2. If any of the animation nodes in nodes is an inclusive ancestor
// of the parent animation group throw a HierarchyRequestError exception and terminate these steps.
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
var parent = new parentCtor([node]);
assert_throws('HierarchyRequestError', function() {
node.replace(node);
}, 'HierarchyRequestError should be thrown if ' + type(node) +
' replaces itself');
assert_equals(node.parent, parent, type(node) + '.replace() should not change ' +
'parent attribute before throwing HierarchyRequestError');
assert_array_equals(parent.children, [node], type(node) + '.replace() ' +
'should not change parent children before throwing HierarchyRequestError');
});
});
}, 'HierarchyRequestError is thrown if the node replaces itself');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
var parent = new parentCtor([node]);
assert_throws('HierarchyRequestError', function() {
node.replace(parent);
}, 'HierarchyRequestError should be thrown if ' + type(node) +
' is replaced by its parent ' + parentCtor.name);
assert_equals(node.parent, parent, type(node) + '.replace() should not change ' +
'parent attribute before throwing HierarchyRequestError');
assert_array_equals(parent.children, [node], type(node) + '.replace() ' +
'should not change parent children before throwing HierarchyRequestError');
});
});
}, 'HierarchyRequestError is thrown if the node is replaced by its parent');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
var parent1 = new parentCtor([node]);
var parent2 = new parentCtor([parent1]);
var parent3 = new parentCtor([parent2]);
var parent4 = new parentCtor([parent3]);
assert_throws('HierarchyRequestError', function() {
node.replace(parent3);
}, 'HierarchyRequestError should be thrown if ' + type(node) +
' is replaced by its inclusive ancestor' + parentCtor.name);
assert_equals(node.parent, parent1, type(node) + '.replace() should not change ' +
'parent attribute before throwing HierarchyRequestError');
assert_array_equals(parent1.children, [node], type(node) + '.replace() ' +
'should not change parent children before throwing HierarchyRequestError');
assert_equals(parent3.parent, parent4, type(node) + '.replace() should not change ' +
'parent attribute of replacement node before throwing HierarchyRequestError');
assert_array_equals(parent4.children, [parent3], type(node) + '.replace() ' +
'should not change replacement node parent children before throwing HierarchyRequestError');
});
});
}, 'HierarchyRequestError is thrown if the node is replaced by its inclusive ancestor');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var parent1 = new parentCtor([node1]);
var parent2 = new parentCtor([parent1]);
var parent3 = new parentCtor([parent2]);
var parent4 = new parentCtor([parent3]);
var node2 = newAnimation(createDiv(test));
var parent5 = new parentCtor([node2]);
assert_throws('HierarchyRequestError', function() {
node1.replace(node2, parent3);
}, 'HierarchyRequestError should be thrown if ' + type(node1) +
' is replaced by its inclusive ancestor' + parentCtor.name);
assert_equals(node1.parent, parent1, type(node1) + '.replace() should not change ' +
'parent attribute before throwing HierarchyRequestError');
assert_array_equals(parent1.children, [node1], type(node1) + '.replace() ' +
'should not change parent children before throwing HierarchyRequestError');
assert_equals(parent3.parent, parent4, type(node1) + '.replace() should not change ' +
'parent attribute of replacement node before throwing HierarchyRequestError');
assert_array_equals(parent4.children, [parent3], type(node1) + '.replace() ' +
'should not change replacement node parent children before throwing HierarchyRequestError');
assert_equals(node2.parent, parent5, type(node1) + '.replace() should not change ' +
'parent attribute of replacement node before throwing HierarchyRequestError');
assert_array_equals(parent5.children, [node2], type(node1) + '.replace() ' +
'should not change replacement node parent children before throwing HierarchyRequestError');
});
});
}, 'HierarchyRequestError is thrown if node is replaced by its inclusive ancestor. ' +
'Test several arguments in replace() call');
// Step 3. Let reference child be the next sibling of this animation node not in nodes.
// Step 4. Remove this animation node from its parent animation group.
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node) {
var parent = new parentCtor([node]);
node.replace();
assert_array_equals(parent.children, [], type(node) +
' node should be removed from parent ' + parentCtor.name);
assert_equals(node.parent, null, type(node) +
' node parent attribute should be updated');
});
});
}, 'AnimationNode.replace() without arguments removes the node from the parent ' +
'animation group');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var parent = new parentCtor([node1]);
node1.replace(node2);
assert_array_equals(parent.children, [node2], type(node1) +
' node should be removed its parent group');
assert_equals(node1.parent, null, type(node1) +
' node should be removed from its parent group');
assert_equals(node1.previousSibling, null, type(node1) +
' node previousSibling attribute should be updated');
assert_equals(node1.nextSibling, null, type(node1) +
' node nextSibling attribute should be updated');
});
});
}, 'AnimationNode.replace() removes the node from its parent animation group');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2, node3]);
node2.replace(node3);
assert_array_equals(parent.children, [node1,node3], type(node2) +
' node should be removed from parent ' + parentCtor.name);
assert_equals(node2.parent, null, type(node2) +
' node parent attribute should be updated');
assert_equals(node2.nextSibling, null, type(node2) +
' node nextSibling attribute should be updated');
assert_equals(node2.previousSibling, null, type(node2) +
' node previousSibling attribute should be updated');
assert_equals(node1.nextSibling, node3,
'Sibling node nextSibling attribute should be updated');
assert_equals(node3.previousSibling, node1,
'Sibling node previousSibling attribute should be updated');
});
});
}, 'AnimationNode.replace(next sibling) removes the node from its parent ' +
'animation group');
// Step 5. Insert nodes before reference child.
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var parent = new parentCtor([node1]);
node1.replace(node2);
assert_array_equals(parent.children, [node2], type(node1) +
' node should be replaced');
assert_equals(node2.parent, parent,
'Replacement node should be assigned to a parent group');
});
});
}, 'AnimationNode.replace() replaces node in the parent animation group');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node4) {
var node1 = newAnimation(createDiv(test));
var node2 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2]);
var parent2 = new parentCtor([node3, parent1, node4]);
node4.replace(node1);
assert_array_equals(parent1.children, [node2],
'Replacement node should be removed from its previous position in the tree');
assert_array_equals(parent2.children, [node3, parent1, node1],
'Replacement node should be inserted into the new position');
assert_equals(node1.parent, parent2, 'Inserted node parent group should be assigned');
assert_equals(node1.previousSibling, parent1,
'Inserted node previousSibling attribute should be updated');
assert_equals(node1.nextSibling, null,
'Inserted node nextSibling attribute should be updated');
assert_equals(node4.parent, null, 'Node should be removed from its parent group');
assert_equals(node4.previousSibling, null,
'Replaced node previousSibling attribute should be updated');
assert_equals(node4.nextSibling, null,
'Replaced node nextSibling attribute should be updated');
});
});
}, 'Test AnimationNode.replace() replaces given node. The previous position ' +
'of the replacement node is deeper in the tree than the current node');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var parent1 = new parentCtor([node1, node2]);
var parent2 = new parentCtor([node3, parent1, node4]);
node2.replace(node4);
assert_array_equals(parent1.children, [node1, node4],
'Replacement node should be inserted to the new position');
assert_array_equals(parent2.children, [node3, parent1],
'Replacement node should be removed from its previous position in the tree');
assert_equals(node4.parent, parent1, 'Inserted node parent group should be changed');
assert_equals(node4.previousSibling, node1,
'Inserted node previousSibling attribute should be updated');
assert_equals(node1.nextSibling, node4,
'Inserted node sibling nextSibling attribute should be updated');
assert_equals(node2.parent, null, 'Replaced node parent group should be changed');
assert_equals(node2.previousSibling, null,
'Replaced node previousSibling attribute should be updated');
assert_equals(node2.nextSibling, null, 'Replaced node nextSibling attribute ' +
'should be updated');
});
});
}, 'Test AnimationNode.replace() replaces given node. The previous position ' +
'of the replacement node is shallower in the tree than current node, but is not an ancestor');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node2.replace(node3, node4);
assert_array_equals(parent.children, [node1, node3, node4], type(node2) + '.replace() ' +
'should replace the current node by ones passed in arguments');
assert_equals(node1.nextSibling, node3, 'nextSibling attribute should be updated');
assert_equals(node3.previousSibling, node1, 'Inserted node previousSibling attribute ' +
'should be updated');
assert_equals(node3.nextSibling, node4, 'Inserted node nextSibling attribute ' +
'should be updated');
assert_equals(node3.parent, parent, 'Parent group of the inserted node should be changed');
assert_equals(node4.previousSibling, node3, 'Inserted node previousSibling attribute ' +
'should be updated');
assert_equals(node4.nextSibling, null, 'Inserted node nextSibling attribute ' +
'should be updated');
assert_equals(node4.parent, parent, 'Parent group of the second inserted node ' +
'should be changed');
assert_equals(node2.parent, null, 'Replaced node parent group should be changed');
assert_equals(node2.previousSibling, null,
'Replaced node previousSibling attribute should be updated');
assert_equals(node2.nextSibling, null, 'Replaced node nextSibling attribute ' +
'should be updated');
});
});
}, 'Test AnimationNode.replace() replaces given node. Test several arguments');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node2.replace(node3, node4, node3, node4);
assert_array_equals(parent.children, [node1, node3, node4], type(node2) + '.replace() ' +
'should replace the current node by ones passed in arguments');
assert_equals(node1.nextSibling, node3, 'nextSibling attribute should be updated');
assert_equals(node3.previousSibling, node1, 'Inserted node previousSibling attribute ' +
'should be updated');
assert_equals(node3.nextSibling, node4, 'Inserted node nextSibling attribute ' +
'should be updated');
assert_equals(node3.parent, parent, 'Parent group of the inserted node should be changed');
assert_equals(node4.previousSibling, node3, 'Inserted node previousSibling attribute ' +
'should be updated');
assert_equals(node4.nextSibling, null, 'Inserted node nextSibling attribute ' +
'should be updated');
assert_equals(node4.parent, parent, 'Parent group of the second inserted node ' +
'should be changed');
assert_equals(node2.parent, null, 'Replaced node parent group should be changed');
assert_equals(node2.previousSibling, null,
'Replaced node previousSibling attribute should be updated');
assert_equals(node2.nextSibling, null, 'Replaced node nextSibling attribute ' +
'should be updated');
});
});
}, 'Test AnimationNode.replace() replaces given node by several nodes, duplicate nodes are ignored');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node2) {
var node1 = newAnimation(createDiv(test));
var node3 = newAnimation(createDiv(test));
var node4 = newAnimation(createDiv(test));
var parent = new parentCtor([node1, node2]);
node2.replace(node3, node4, node3);
assert_array_equals(parent.children, [node1, node4, node3], type(node2) + '.replace() ' +
'should replace the current node by ones passed in arguments');
assert_equals(node1.nextSibling, node4, 'nextSibling attribute should be updated');
assert_equals(node4.previousSibling, node1, 'Inserted node previousSibling attribute ' +
'should be updated');
assert_equals(node4.nextSibling, node3, 'Inserted node nextSibling attribute ' +
'should be updated');
assert_equals(node4.parent, parent, 'Parent group of the inserted node should be changed');
assert_equals(node3.previousSibling, node4, 'Inserted node previousSibling attribute ' +
'should be updated');
assert_equals(node3.nextSibling, null, 'Inserted node nextSibling attribute ' +
'should be updated');
assert_equals(node3.parent, parent, 'Parent group of the second inserted node ' +
'should be changed');
assert_equals(node2.parent, null, 'Replaced node parent group should be changed');
assert_equals(node2.previousSibling, null,
'Replaced node previousSibling attribute should be updated');
assert_equals(node2.nextSibling, null, 'Replaced node nextSibling attribute ' +
'should be updated');
});
});
}, 'Test AnimationNode.replace() replaces given node by several nodes, check replacement order');
test(function() {
var test = this;
var parents = [AnimationGroup, AnimationSequence];
parents.forEach(function(parentCtor) {
var nodes = [newAnimation(createDiv(test)), new AnimationGroup([]), new AnimationSequence([])];
nodes.forEach(function(node1) {
var node2 = newAnimation(createDiv(test));
var parent = new parentCtor([node1]);
var player = document.timeline.play(node2);
assert_equals(player.source, node2, 'The node should be associated with its player');
node1.replace(node2);
assert_equals(player.source, null, 'The node should be disassociated from its player');
});
});
}, 'Test AnimationNode.replace() disassociates the inserted node from the player, ' +
'if node is directly associated with a player');
</script>
</body>

54
tests/wpt/web-platform-tests/web-animations/animation-node/idlharness.html
View file

@ -1,54 +0,0 @@
<!doctype html>
<meta charset=utf-8>
<title>AnimationNode IDL tests</title>
<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru">
<link rel="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/WebIDLParser.js"></script>
<script src="/resources/idlharness.js"></script>
<body>
<div id="log"></div>
<div id="target"></div>
<script type="text/plain" id="untested-IDL">
interface AnimationPlayer {
};
interface AnimationTiming {
};
interface ComputedTimingProperties {
};
interface AnimationGroup {
};
</script>
<script type="text/plain" id="AnimationNode-IDL">
interface AnimationNode {
// Timing
readonly attribute AnimationTiming timing;
readonly attribute ComputedTimingProperties computedTiming;
// Timing hierarchy
readonly attribute AnimationGroup? parent;
readonly attribute AnimationNode? previousSibling;
readonly attribute AnimationNode? nextSibling;
void before (AnimationNode... nodes);
void after (AnimationNode... nodes);
void replace (AnimationNode... nodes);
void remove ();
};
</script>
<script>
'use strict';
var target = document.getElementById('target');
var node = new Animation(target, [], 5);
var idlArray = new IdlArray();
idlArray.add_untested_idls(document.getElementById('untested-IDL').textContent);
idlArray.add_idls(document.getElementById('AnimationNode-IDL').textContent);
idlArray.add_objects( { AnimationNode: ['node'] } );
idlArray.test();
</script>
</body>

61
tests/wpt/web-platform-tests/web-animations/animation/cancel.html Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.cancel()</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-cancel">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>
<script>
'use strict';
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({transform: ['none', 'translate(100px)']},
100 * MS_PER_SEC);
return animation.ready.then(function() {
assert_not_equals(getComputedStyle(div).transform, 'none',
'transform style is animated before cancelling');
animation.cancel();
assert_equals(getComputedStyle(div).transform, 'none',
'transform style is no longer animated after cancelling');
});
}, 'Animated style is cleared after calling Animation.cancel()');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({marginLeft: ['0px', '100px']},
100 * MS_PER_SEC);
animation.effect.timing.easing = 'linear';
animation.cancel();
assert_equals(getComputedStyle(div).marginLeft, '0px',
'margin-left style is not animated after cancelling');
animation.currentTime = 50 * MS_PER_SEC;
assert_equals(getComputedStyle(div).marginLeft, '50px',
'margin-left style is updated when cancelled animation is'
+ ' seeked');
}, 'After cancelling an animation, it can still be seeked');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({marginLeft:['100px', '200px']},
100 * MS_PER_SEC);
return animation.ready.then(function() {
animation.cancel();
assert_equals(getComputedStyle(div).marginLeft, '0px',
'margin-left style is not animated after cancelling');
animation.play();
assert_equals(getComputedStyle(div).marginLeft, '100px',
'margin-left style is animated after re-starting animation');
return animation.ready;
}).then(function() {
assert_equals(animation.playState, 'running',
'Animation succeeds in running after being re-started');
});
}, 'After cancelling an animation, it can still be re-used');
</script>
</body>

210
tests/wpt/web-platform-tests/web-animations/animation/finish.html Normal file
View file

@ -0,0 +1,210 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.finish()</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-finish">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>
<script>
'use strict';
var gKeyFrames = { 'marginLeft': ['100px', '200px'] };
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.playbackRate = 0;
assert_throws({name: 'InvalidStateError'}, function() {
animation.finish();
});
}, 'Test exceptions when finishing non-running animation');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames,
{duration : 100 * MS_PER_SEC,
iterations : Infinity});
assert_throws({name: 'InvalidStateError'}, function() {
animation.finish();
});
}, 'Test exceptions when finishing infinite animation');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.finish();
assert_equals(animation.currentTime, 100 * MS_PER_SEC,
'After finishing, the currentTime should be set to the end ' +
'of the active duration');
}, 'Test finishing of animation');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
// 1s past effect end
animation.currentTime =
animation.effect.getComputedTiming().endTime + 1 * MS_PER_SEC;
animation.finish();
assert_equals(animation.currentTime, 100 * MS_PER_SEC,
'After finishing, the currentTime should be set back to the ' +
'end of the active duration');
}, 'Test finishing of animation with a current time past the effect end');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.currentTime = 100 * MS_PER_SEC;
return animation.finished.then(function() {
animation.playbackRate = -1;
animation.finish();
assert_equals(animation.currentTime, 0,
'After finishing a reversed animation the currentTime ' +
'should be set to zero');
});
}, 'Test finishing of reversed animation');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.currentTime = 100 * MS_PER_SEC;
return animation.finished.then(function() {
animation.playbackRate = -1;
animation.currentTime = -1000;
animation.finish();
assert_equals(animation.currentTime, 0,
'After finishing a reversed animation the currentTime ' +
'should be set back to zero');
});
}, 'Test finishing of reversed animation with a current time less than zero');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.pause();
return animation.ready.then(function() {
animation.finish();
assert_equals(animation.playState, 'finished',
'The play state of a paused animation should become ' +
'"finished" after finish() is called');
assert_approx_equals(animation.startTime,
animation.timeline.currentTime - 100 * MS_PER_SEC,
0.0001,
'The start time of a paused animation should be set ' +
'after calling finish()');
});
}, 'Test finish() while paused');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.pause();
// Update playbackRate so we can test that the calculated startTime
// respects it
animation.playbackRate = 2;
// While animation is still pause-pending call finish()
animation.finish();
assert_equals(animation.playState, 'finished',
'The play state of a pause-pending animation should become ' +
'"finished" after finish() is called');
assert_approx_equals(animation.startTime,
animation.timeline.currentTime - 100 * MS_PER_SEC / 2,
0.0001,
'The start time of a pause-pending animation should ' +
'be set after calling finish()');
}, 'Test finish() while pause-pending with positive playbackRate');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.pause();
animation.playbackRate = -2;
animation.finish();
assert_equals(animation.playState, 'finished',
'The play state of a pause-pending animation should become ' +
'"finished" after finish() is called');
assert_equals(animation.startTime, animation.timeline.currentTime,
'The start time of a pause-pending animation should be ' +
'set after calling finish()');
}, 'Test finish() while pause-pending with negative playbackRate');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.playbackRate = 0.5;
animation.finish();
assert_equals(animation.playState, 'finished',
'The play state of a play-pending animation should become ' +
'"finished" after finish() is called');
assert_approx_equals(animation.startTime,
animation.timeline.currentTime - 100 * MS_PER_SEC / 0.5,
0.0001,
'The start time of a play-pending animation should ' +
'be set after calling finish()');
}, 'Test finish() while play-pending');
// FIXME: Add a test for when we are play-pending without an active timeline.
// - In that case even after calling finish() we should still be pending but
// the current time should be updated
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
return animation.ready.then(function() {
animation.pause();
animation.play();
// We are now in the unusual situation of being play-pending whilst having
// a resolved start time. Check that finish() still triggers a transition
// to the finished state immediately.
animation.finish();
assert_equals(animation.playState, 'finished',
'After aborting a pause then calling finish() the play ' +
'state of an animation should become "finished" immediately');
});
}, 'Test finish() during aborted pause');
promise_test(function(t) {
var div = createDiv(t);
div.style.marginLeft = '10px';
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
return animation.ready.then(function() {
animation.finish();
var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
assert_equals(marginLeft, 10,
'The computed style should be reset when finish() is ' +
'called');
});
}, 'Test resetting of computed style');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
var resolvedFinished = false;
animation.finished.then(function() {
resolvedFinished = true;
});
return animation.ready.then(function() {
animation.finish();
}).then(function() {
assert_true(resolvedFinished,
'Animation.finished should be resolved soon after ' +
'Animation.finish()');
});
}, 'Test finish() resolves finished promise synchronously');
</script>
</body>

35
tests/wpt/web-platform-tests/web-animations/animation/play.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.play()</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-play">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>
<script>
'use strict';
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({ transform: ['none', 'translate(10px)']},
{ duration : 100 * MS_PER_SEC,
iterations : Infinity});
return animation.ready.then(function() {
// Seek to a time outside the active range so that play() will have to
// snap back to the start
animation.currentTime = -5 * MS_PER_SEC;
animation.playbackRate = -1;
assert_throws('InvalidStateError',
function () { animation.play(); },
'Expected InvalidStateError exception on calling play() ' +
'with a negative playbackRate and infinite-duration ' +
'animation');
});
}, 'play() throws when seeking an infinite-duration animation played in ' +
'reverse');
</script>
</body>

54
tests/wpt/web-platform-tests/web-animations/animation/playState.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.playState</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-playstate">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>
<script>
'use strict';
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
assert_equals(animation.playState, 'pending');
return animation.ready.then(function() {
assert_equals(animation.playState, 'running');
});
}, 'Animation.playState reports \'pending\'->\'running\' when initially ' +
'played');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
animation.pause();
assert_equals(animation.playState, 'pending');
return animation.ready.then(function() {
assert_equals(animation.playState, 'paused');
});
}, 'Animation.playState reports \'pending\'->\'paused\' when pausing');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
animation.cancel();
assert_equals(animation.playState, 'idle');
}, 'Animation.playState is \'idle\' when canceled.');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
animation.cancel();
animation.currentTime = 50 * MS_PER_SEC;
assert_equals(animation.playState, 'paused',
'After seeking an idle animation, it is effectively paused');
}, 'Animation.playState is \'paused\' after cancelling an animation, ' +
'seeking it makes it paused');
</script>
</body>

89
tests/wpt/web-platform-tests/web-animations/animation/playbackRate.html Normal file
View file

@ -0,0 +1,89 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.playbackRate</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-playbackrate">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>
<script>
"use strict";
var keyFrames = { 'marginLeft': ['100px', '200px'] };
function assert_playbackrate(animation,
previousAnimationCurrentTime,
previousTimelineCurrentTime,
description) {
var accuracy = 0.001; /* accuracy of DOMHighResTimeStamp */
var animationCurrentTimeDifference =
animation.currentTime - previousAnimationCurrentTime;
var timelineCurrentTimeDifference =
animation.timeline.currentTime - previousTimelineCurrentTime;
assert_approx_equals(animationCurrentTimeDifference,
timelineCurrentTimeDifference * animation.playbackRate,
accuracy,
description);
}
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({keyFrames}, 100 * MS_PER_SEC);
return animation.ready.then(function() {
animation.currentTime = 7 * MS_PER_SEC; // ms
animation.playbackRate = 0.5;
assert_equals(animation.currentTime, 7 * MS_PER_SEC,
'Reducing Animation.playbackRate should not change the currentTime ' +
'of a playing animation');
animation.playbackRate = 2;
assert_equals(animation.currentTime, 7 * MS_PER_SEC,
'Increasing Animation.playbackRate should not change the currentTime ' +
'of a playing animation');
});
}, 'Test the initial effect of setting playbackRate on currentTime');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({keyFrames}, 100 * MS_PER_SEC);
animation.playbackRate = 2;
var previousTimelineCurrentTime;
var previousAnimationCurrentTime;
return animation.ready.then(function() {
previousAnimationCurrentTime = animation.currentTime;
previousTimelineCurrentTime = animation.timeline.currentTime;
return waitForAnimationFrames(1);
}).then(function() {
assert_playbackrate(animation,
previousAnimationCurrentTime,
previousTimelineCurrentTime,
'animation.currentTime should be 2 times faster than timeline.');
});
}, 'Test the effect of setting playbackRate on currentTime');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({keyFrames}, 100 * MS_PER_SEC);
animation.playbackRate = 2;
var previousTimelineCurrentTime;
var previousAnimationCurrentTime;
return animation.ready.then(function() {
previousAnimationCurrentTime = animation.currentTime;
previousTimelineCurrentTime = animation.timeline.currentTime;
animation.playbackRate = 1;
return waitForAnimationFrames(1);
}).then(function() {
assert_equals(animation.playbackRate, 1,
'sanity check: animation.playbackRate is still 1.');
assert_playbackrate(animation,
previousAnimationCurrentTime,
previousTimelineCurrentTime,
'animation.currentTime should be the same speed as timeline now.');
});
}, 'Test the effect of setting playbackRate while playing animation');
</script>
</body>

272
tests/wpt/web-platform-tests/web-animations/keyframe-effect/constructor.html
View file

@ -61,13 +61,8 @@ test(function(t) {
// [specified easing value, expected easing value]
var gEasingValueTests = [
["unrecognised", "linear"],
["linear", "linear"],
["ease-in-out", "ease-in-out"],
["initial", "linear"],
["inherit", "linear"],
["var(--x)", "linear"],
["ease-in-out, ease-out", "linear"],
["Ease\\2d in-out", "ease-in-out"],
["ease /**/", "ease"],
];
@ -113,56 +108,57 @@ test(function(t) {
}, "easing values are parsed correctly when passed to the " +
"KeyframeEffectReadOnly constructor in KeyframeTimingOptions");
var gGoodCompositeValueTests = [
var gGoodKeyframeCompositeValueTests = [
"replace", "add", "accumulate", undefined
];
var gGoodOptionsCompositeValueTests = [
"replace", "add", "accumulate"
];
var gBadCompositeValueTests = [
"unrecognised", "replace ", "Replace"
"unrecognised", "replace ", "Replace", null
];
test(function(t) {
gGoodCompositeValueTests.forEach(function(composite) {
var effect = new KeyframeEffectReadOnly(target, {
left: ["10px", "20px"],
composite: composite
});
var getFrame = function(composite) {
return { left: [ "10px", "20px" ], composite: composite };
};
gGoodKeyframeCompositeValueTests.forEach(function(composite) {
var effect = new KeyframeEffectReadOnly(target, getFrame(composite));
assert_equals(effect.getFrames()[0].composite, composite,
"resulting composite for '" + composite + "'");
});
gBadCompositeValueTests.forEach(function(composite) {
assert_throws(new TypeError, function() {
new KeyframeEffectReadOnly(target, {
left: ["10px", "20px"],
composite: composite
});
new KeyframeEffectReadOnly(target, getFrame(composite));
});
});
}, "composite values are parsed correctly when passed to the " +
"KeyframeEffectReadOnly constructor in PropertyIndexedKeyframes");
test(function(t) {
gGoodCompositeValueTests.forEach(function(composite) {
var effect = new KeyframeEffectReadOnly(target, [
var getFrames = function(composite) {
return [
{ offset: 0, left: "10px", composite: composite },
{ offset: 1, left: "20px" }
]);
];
};
gGoodKeyframeCompositeValueTests.forEach(function(composite) {
var effect = new KeyframeEffectReadOnly(target, getFrames(composite));
assert_equals(effect.getFrames()[0].composite, composite,
"resulting composite for '" + composite + "'");
});
gBadCompositeValueTests.forEach(function(composite) {
assert_throws(new TypeError, function() {
new KeyframeEffectReadOnly(target, [
{ offset: 0, left: "10px", composite: composite },
{ offset: 1, left: "20px" }
]);
new KeyframeEffectReadOnly(target, getFrames(composite));
});
});
}, "composite values are parsed correctly when passed to the " +
"KeyframeEffectReadOnly constructor in Keyframe");
test(function(t) {
gGoodCompositeValueTests.forEach(function(composite) {
gGoodOptionsCompositeValueTests.forEach(function(composite) {
var effect = new KeyframeEffectReadOnly(target, {
left: ["10px", "20px"]
}, { composite: composite });
@ -182,77 +178,77 @@ test(function(t) {
var gPropertyIndexedKeyframesTests = [
{ desc: "a one property two value PropertyIndexedKeyframes specification",
input: { left: ["10px", "20px"] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "20px" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", left: "20px" }] },
{ desc: "a one shorthand property two value PropertyIndexedKeyframes specification",
input: { margin: ["10px", "10px 20px 30px 40px"] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", marginTop: "10px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", marginTop: "10px", marginRight: "20px", marginBottom: "30px", marginLeft: "40px" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", marginTop: "10px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", marginTop: "10px", marginRight: "20px", marginBottom: "30px", marginLeft: "40px" }] },
{ desc: "a two property (one shorthand and one of its longhand components) two value PropertyIndexedKeyframes specification",
input: { marginTop: ["50px", "60px"],
margin: ["10px", "10px 20px 30px 40px"] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", marginTop: "50px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", marginTop: "60px", marginRight: "20px", marginBottom: "30px", marginLeft: "40px" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", marginTop: "50px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", marginTop: "60px", marginRight: "20px", marginBottom: "30px", marginLeft: "40px" }] },
{ desc: "a two property two value PropertyIndexedKeyframes specification",
input: { left: ["10px", "20px"],
top: ["30px", "40px"] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "10px", top: "30px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "20px", top: "40px" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px", top: "30px" },
{ offset: 1, computedOffset: 1, easing: "linear", left: "20px", top: "40px" }] },
{ desc: "a two property PropertyIndexedKeyframes specification with different numbers of values",
input: { left: ["10px", "20px", "30px"],
top: ["40px", "50px"] },
output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", composite: "replace", left: "10px", top: "40px" },
{ offset: 0.5, computedOffset: 0.5, easing: "linear", composite: "replace", left: "20px" },
{ offset: 1.0, computedOffset: 1.0, easing: "linear", composite: "replace", left: "30px", top: "50px" }] },
output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", left: "10px", top: "40px" },
{ offset: 0.5, computedOffset: 0.5, easing: "linear", left: "20px" },
{ offset: 1.0, computedOffset: 1.0, easing: "linear", left: "30px", top: "50px" }] },
{ desc: "a PropertyIndexedKeyframes specification with an invalid value",
input: { left: ["10px", "20px", "30px", "40px", "50px"],
top: ["15px", "25px", "invalid", "45px", "55px"] },
output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", composite: "replace", left: "10px", top: "15px" },
{ offset: 0.25, computedOffset: 0.25, easing: "linear", composite: "replace", left: "20px", top: "25px" },
{ offset: 0.50, computedOffset: 0.50, easing: "linear", composite: "replace", left: "30px" },
{ offset: 0.75, computedOffset: 0.75, easing: "linear", composite: "replace", left: "40px", top: "45px" },
{ offset: 1.00, computedOffset: 1.00, easing: "linear", composite: "replace", left: "50px", top: "55px" }] },
output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", left: "10px", top: "15px" },
{ offset: 0.25, computedOffset: 0.25, easing: "linear", left: "20px", top: "25px" },
{ offset: 0.50, computedOffset: 0.50, easing: "linear", left: "30px" },
{ offset: 0.75, computedOffset: 0.75, easing: "linear", left: "40px", top: "45px" },
{ offset: 1.00, computedOffset: 1.00, easing: "linear", left: "50px", top: "55px" }] },
{ desc: "a one property two value PropertyIndexedKeyframes specification that needs to stringify its values",
input: { opacity: [0, 1] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", opacity: "0" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", opacity: "1" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", opacity: "0" },
{ offset: 1, computedOffset: 1, easing: "linear", opacity: "1" }] },
{ desc: "a one property one value PropertyIndexedKeyframes specification",
input: { left: ["10px"] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "10px" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear" },
{ offset: 1, computedOffset: 1, easing: "linear", left: "10px" }] },
{ desc: "a one property one non-array value PropertyIndexedKeyframes specification",
input: { left: "10px" },
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "10px" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear" },
{ offset: 1, computedOffset: 1, easing: "linear", left: "10px" }] },
{ desc: "a one property two value PropertyIndexedKeyframes specification where the first value is invalid",
input: { left: ["invalid", "10px"] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "10px" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear" },
{ offset: 1, computedOffset: 1, easing: "linear", left: "10px" }] },
{ desc: "a one property two value PropertyIndexedKeyframes specification where the second value is invalid",
input: { left: ["10px", "invalid"] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear" }] },
{ desc: "a two property PropertyIndexedKeyframes specification where one property is missing from the first Keyframe",
input: [{ offset: 0, left: "10px" },
{ offset: 1, left: "20px", top: "30px" }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "20px", top: "30px" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", left: "20px", top: "30px" }] },
{ desc: "a two property PropertyIndexedKeyframes specification where one property is missing from the last Keyframe",
input: [{ offset: 0, left: "10px", top: "20px" },
{ offset: 1, left: "30px" }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "10px" , top: "20px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "30px" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" , top: "20px" },
{ offset: 1, computedOffset: 1, easing: "linear", left: "30px" }] },
{ desc: "a PropertyIndexedKeyframes specification with repeated values at offset 0 with different easings",
input: [{ offset: 0.0, left: "100px", easing: "ease" },
{ offset: 0.0, left: "200px", easing: "ease" },
{ offset: 0.5, left: "300px", easing: "linear" },
{ offset: 1.0, left: "400px", easing: "ease-out" },
{ offset: 1.0, left: "500px", easing: "step-end" }],
output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease", composite: "replace", left: "100px" },
{ offset: 0.0, computedOffset: 0.0, easing: "ease", composite: "replace", left: "200px" },
{ offset: 0.5, computedOffset: 0.5, easing: "linear", composite: "replace", left: "300px" },
{ offset: 1.0, computedOffset: 1.0, easing: "ease-out", composite: "replace", left: "400px" },
{ offset: 1.0, computedOffset: 1.0, easing: "linear", composite: "replace", left: "500px" }] },
output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease", left: "100px" },
{ offset: 0.0, computedOffset: 0.0, easing: "ease", left: "200px" },
{ offset: 0.5, computedOffset: 0.5, easing: "linear", left: "300px" },
{ offset: 1.0, computedOffset: 1.0, easing: "ease-out", left: "400px" },
{ offset: 1.0, computedOffset: 1.0, easing: "linear", left: "500px" }] },
];
gPropertyIndexedKeyframesTests.forEach(function(subtest) {
@ -278,7 +274,7 @@ test(function(t) {
{ p: "left", v: "20px" },
{ p: "offset", v: "0" },
{ p: "easing", v: "linear" },
{ p: "composite", v: null }].forEach(function(e) {
{ p: "composite", v: "replace" }].forEach(function(e) {
Object.defineProperty(kf1, e.p, {
enumerable: true,
get: function() { actualOrder.push(e.p); return e.v; }
@ -293,33 +289,33 @@ var gKeyframeSequenceTests = [
{ desc: "a one property two Keyframe sequence",
input: [{ offset: 0, left: "10px" },
{ offset: 1, left: "20px" }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "20px" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", left: "20px" }] },
{ desc: "a two property two Keyframe sequence",
input: [{ offset: 0, left: "10px", top: "30px" },
{ offset: 1, left: "20px", top: "40px" }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "10px", top: "30px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "20px", top: "40px" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px", top: "30px" },
{ offset: 1, computedOffset: 1, easing: "linear", left: "20px", top: "40px" }] },
{ desc: "a one shorthand property two Keyframe sequence",
input: [{ offset: 0, margin: "10px" },
{ offset: 1, margin: "20px 30px 40px 50px" }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", marginTop: "10px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", marginTop: "20px", marginRight: "30px", marginBottom: "40px", marginLeft: "50px" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", marginTop: "10px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", marginTop: "20px", marginRight: "30px", marginBottom: "40px", marginLeft: "50px" }] },
{ desc: "a two property (a shorthand and one of its component longhands) two Keyframe sequence",
input: [{ offset: 0, margin: "10px", marginTop: "20px" },
{ offset: 1, marginTop: "70px", margin: "30px 40px 50px 60px" }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", marginTop: "20px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", marginTop: "70px", marginRight: "40px", marginBottom: "50px", marginLeft: "60px" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", marginTop: "20px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", marginTop: "70px", marginRight: "40px", marginBottom: "50px", marginLeft: "60px" }] },
{ desc: "a Keyframe sequence with duplicate values for a given interior offset",
input: [{ offset: 0.0, left: "10px" },
{ offset: 0.5, left: "20px" },
{ offset: 0.5, left: "30px" },
{ offset: 0.5, left: "40px" },
{ offset: 1.0, left: "50px" }],
output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", composite: "replace", left: "10px" },
{ offset: 0.5, computedOffset: 0.5, easing: "linear", composite: "replace", left: "20px" },
{ offset: 0.5, computedOffset: 0.5, easing: "linear", composite: "replace", left: "40px" },
{ offset: 1.0, computedOffset: 1.0, easing: "linear", composite: "replace", left: "50px" }] },
output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", left: "10px" },
{ offset: 0.5, computedOffset: 0.5, easing: "linear", left: "20px" },
{ offset: 0.5, computedOffset: 0.5, easing: "linear", left: "40px" },
{ offset: 1.0, computedOffset: 1.0, easing: "linear", left: "50px" }] },
{ desc: "a Keyframe sequence with duplicate values for offsets 0 and 1",
input: [{ offset: 0, left: "10px" },
{ offset: 0, left: "20px" },
@ -327,50 +323,50 @@ var gKeyframeSequenceTests = [
{ offset: 1, left: "40px" },
{ offset: 1, left: "50px" },
{ offset: 1, left: "60px" }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "10px" },
{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "30px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "40px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "60px" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" },
{ offset: 0, computedOffset: 0, easing: "linear", left: "30px" },
{ offset: 1, computedOffset: 1, easing: "linear", left: "40px" },
{ offset: 1, computedOffset: 1, easing: "linear", left: "60px" }] },
{ desc: "a two property four Keyframe sequence",
input: [{ offset: 0, left: "10px" },
{ offset: 0, top: "20px" },
{ offset: 1, top: "30px" },
{ offset: 1, left: "40px" }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "10px", top: "20px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "40px", top: "30px" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px", top: "20px" },
{ offset: 1, computedOffset: 1, easing: "linear", left: "40px", top: "30px" }] },
{ desc: "a one property Keyframe sequence with some omitted offsets",
input: [{ offset: 0.00, left: "10px" },
{ offset: 0.25, left: "20px" },
{ left: "30px" },
{ left: "40px" },
{ offset: 1.00, left: "50px" }],
output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", composite: "replace", left: "10px" },
{ offset: 0.25, computedOffset: 0.25, easing: "linear", composite: "replace", left: "20px" },
{ offset: 0.50, computedOffset: 0.50, easing: "linear", composite: "replace", left: "30px" },
{ offset: 0.75, computedOffset: 0.75, easing: "linear", composite: "replace", left: "40px" },
{ offset: 1.00, computedOffset: 1.00, easing: "linear", composite: "replace", left: "50px" }] },
output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", left: "10px" },
{ offset: 0.25, computedOffset: 0.25, easing: "linear", left: "20px" },
{ offset: 0.50, computedOffset: 0.50, easing: "linear", left: "30px" },
{ offset: 0.75, computedOffset: 0.75, easing: "linear", left: "40px" },
{ offset: 1.00, computedOffset: 1.00, easing: "linear", left: "50px" }] },
{ desc: "a two property Keyframe sequence with some omitted offsets",
input: [{ offset: 0.00, left: "10px", top: "20px" },
{ offset: 0.25, left: "30px" },
{ left: "40px" },
{ left: "50px", top: "60px" },
{ offset: 1.00, left: "70px", top: "80px" }],
output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", composite: "replace", left: "10px", top: "20px" },
{ offset: 0.25, computedOffset: 0.25, easing: "linear", composite: "replace", left: "30px" },
{ offset: 0.50, computedOffset: 0.50, easing: "linear", composite: "replace", left: "40px" },
{ offset: 0.75, computedOffset: 0.75, easing: "linear", composite: "replace", left: "50px", top: "60px" },
{ offset: 1.00, computedOffset: 1.00, easing: "linear", composite: "replace", left: "70px", top: "80px" }] },
output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", left: "10px", top: "20px" },
{ offset: 0.25, computedOffset: 0.25, easing: "linear", left: "30px" },
{ offset: 0.50, computedOffset: 0.50, easing: "linear", left: "40px" },
{ offset: 0.75, computedOffset: 0.75, easing: "linear", left: "50px", top: "60px" },
{ offset: 1.00, computedOffset: 1.00, easing: "linear", left: "70px", top: "80px" }] },
{ desc: "a one property Keyframe sequence with all omitted offsets",
input: [{ left: "10px" },
{ left: "20px" },
{ left: "30px" },
{ left: "40px" },
{ left: "50px" }],
output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", composite: "replace", left: "10px" },
{ offset: 0.25, computedOffset: 0.25, easing: "linear", composite: "replace", left: "20px" },
{ offset: 0.50, computedOffset: 0.50, easing: "linear", composite: "replace", left: "30px" },
{ offset: 0.75, computedOffset: 0.75, easing: "linear", composite: "replace", left: "40px" },
{ offset: 1.00, computedOffset: 1.00, easing: "linear", composite: "replace", left: "50px" }] },
output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", left: "10px" },
{ offset: 0.25, computedOffset: 0.25, easing: "linear", left: "20px" },
{ offset: 0.50, computedOffset: 0.50, easing: "linear", left: "30px" },
{ offset: 0.75, computedOffset: 0.75, easing: "linear", left: "40px" },
{ offset: 1.00, computedOffset: 1.00, easing: "linear", left: "50px" }] },
{ desc: "a Keyframe sequence with different easing values, but the same easing value for a given offset",
input: [{ offset: 0.0, easing: "ease", left: "10px"},
{ offset: 0.0, easing: "ease", top: "20px"},
@ -378,9 +374,12 @@ var gKeyframeSequenceTests = [
{ offset: 0.5, easing: "linear", top: "40px" },
{ offset: 1.0, easing: "step-end", left: "50px" },
{ offset: 1.0, easing: "step-end", top: "60px" }],
output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease", composite: "replace", left: "10px", top: "20px" },
{ offset: 0.5, computedOffset: 0.5, easing: "linear", composite: "replace", left: "30px", top: "40px" },
{ offset: 1.0, computedOffset: 1.0, easing: "linear", composite: "replace", left: "50px", top: "60px" }] },
output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease",
left: "10px", top: "20px" },
{ offset: 0.5, computedOffset: 0.5, easing: "linear",
left: "30px", top: "40px" },
{ offset: 1.0, computedOffset: 1.0, easing: "linear",
left: "50px", top: "60px" }] },
{ desc: "a Keyframe sequence with different composite values, but the same composite value for a given offset",
input: [{ offset: 0.0, composite: "replace", left: "10px" },
{ offset: 0.0, composite: "replace", top: "20px" },
@ -394,27 +393,27 @@ var gKeyframeSequenceTests = [
{ desc: "a one property two Keyframe sequence that needs to stringify its values",
input: [{ offset: 0, opacity: 0 },
{ offset: 1, opacity: 1 }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", opacity: "0" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", opacity: "1" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", opacity: "0" },
{ offset: 1, computedOffset: 1, easing: "linear", opacity: "1" }] },
{ desc: "a Keyframe sequence where shorthand precedes longhand",
input: [{ offset: 0, margin: "10px", marginRight: "20px" },
{ offset: 1, margin: "30px" }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", marginBottom: "10px", marginLeft: "10px", marginRight: "20px", marginTop: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", marginBottom: "30px", marginLeft: "30px", marginRight: "30px", marginTop: "30px" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", marginBottom: "10px", marginLeft: "10px", marginRight: "20px", marginTop: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", marginBottom: "30px", marginLeft: "30px", marginRight: "30px", marginTop: "30px" }] },
{ desc: "a Keyframe sequence where longhand precedes shorthand",
input: [{ offset: 0, marginRight: "20px", margin: "10px" },
{ offset: 1, margin: "30px" }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", marginBottom: "10px", marginLeft: "10px", marginRight: "20px", marginTop: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", marginBottom: "30px", marginLeft: "30px", marginRight: "30px", marginTop: "30px" }] },
output: [{ offset: 0, computedOffset: 0, easing: "linear", marginBottom: "10px", marginLeft: "10px", marginRight: "20px", marginTop: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", marginBottom: "30px", marginLeft: "30px", marginRight: "30px", marginTop: "30px" }] },
{ desc: "a Keyframe sequence where lesser shorthand precedes greater shorthand",
input: [{ offset: 0, borderLeft: "1px solid rgb(1, 2, 3)", border: "2px dotted rgb(4, 5, 6)" },
{ offset: 1, border: "3px dashed rgb(7, 8, 9)" }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace",
output: [{ offset: 0, computedOffset: 0, easing: "linear",
borderBottomColor: "rgb(4, 5, 6)", borderBottomWidth: "2px",
borderLeftColor: "rgb(1, 2, 3)", borderLeftWidth: "1px",
borderRightColor: "rgb(4, 5, 6)", borderRightWidth: "2px",
borderTopColor: "rgb(4, 5, 6)", borderTopWidth: "2px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
{ offset: 1, computedOffset: 1, easing: "linear",
borderBottomColor: "rgb(7, 8, 9)", borderBottomWidth: "3px",
borderLeftColor: "rgb(7, 8, 9)", borderLeftWidth: "3px",
borderRightColor: "rgb(7, 8, 9)", borderRightWidth: "3px",
@ -422,12 +421,12 @@ var gKeyframeSequenceTests = [
{ desc: "a Keyframe sequence where greater shorthand precedes lesser shorthand",
input: [{ offset: 0, border: "2px dotted rgb(4, 5, 6)", borderLeft: "1px solid rgb(1, 2, 3)" },
{ offset: 1, border: "3px dashed rgb(7, 8, 9)" }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace",
output: [{ offset: 0, computedOffset: 0, easing: "linear",
borderBottomColor: "rgb(4, 5, 6)", borderBottomWidth: "2px",
borderLeftColor: "rgb(1, 2, 3)", borderLeftWidth: "1px",
borderRightColor: "rgb(4, 5, 6)", borderRightWidth: "2px",
borderTopColor: "rgb(4, 5, 6)", borderTopWidth: "2px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
{ offset: 1, computedOffset: 1, easing: "linear",
borderBottomColor: "rgb(7, 8, 9)", borderBottomWidth: "3px",
borderLeftColor: "rgb(7, 8, 9)", borderLeftWidth: "3px",
borderRightColor: "rgb(7, 8, 9)", borderRightWidth: "3px",
@ -448,6 +447,29 @@ gKeyframeSequenceTests.forEach(function(subtest) {
" roundtrips");
});
var gInvalidEasingInKeyframeSequenceTests = [
{ desc: "a blank easing",
input: [{ easing: "" }] },
{ desc: "an unrecognized easing",
input: [{ easing: "unrecognized" }] },
{ desc: "an 'initial' easing",
input: [{ easing: "initial" }] },
{ desc: "an 'inherit' easing",
input: [{ easing: "inherit" }] },
{ desc: "a variable easing",
input: [{ easing: "var(--x)" }] },
{ desc: "a multi-value easing",
input: [{ easing: "ease-in-out, ease-out" }] }
];
gInvalidEasingInKeyframeSequenceTests.forEach(function(subtest) {
test(function(t) {
assert_throws(new TypeError, function() {
new KeyframeEffectReadOnly(target, subtest.input);
});
}, "Invalid easing [" + subtest.desc + "] in KeyframeSequence " +
"should be thrown");
});
test(function(t) {
var effect = new KeyframeEffectReadOnly(target,
@ -501,15 +523,6 @@ var gKeyframeEffectOptionTests = [
{ desc: "an Infinity iterations",
input: { iterations: Infinity },
expected: { iterations: Infinity } },
{ desc: "a negative Infinity iterations",
input: { iterations: -Infinity },
expected: { iterations: -Infinity } },
{ desc: "a NaN iterations",
input: { iterations: NaN },
expected: { iterations: NaN } },
{ desc: "a negative iterations",
input: { iterations: -1 },
expected: { iterations: -1 } },
{ desc: "an auto fill",
input: { fill: "auto" },
expected: { fill: "auto" } },
@ -566,6 +579,33 @@ var gInvalidKeyframeEffectOptionTests = [
expected: { name: "TypeError" } },
{ desc: "a string duration",
input: { duration: "merrychristmas" },
expected: { name: "TypeError" } },
{ desc: "a negative Infinity iterations",
input: { iterations: -Infinity},
expected: { name: "TypeError" } },
{ desc: "a NaN iterations",
input: { iterations: NaN },
expected: { name: "TypeError" } },
{ desc: "a negative iterations",
input: { iterations: -1 },
expected: { name: "TypeError" } },
{ desc: "a blank easing",
input: { easing: "" },
expected: { name: "TypeError" } },
{ desc: "an unrecognized easing",
input: { easing: "unrecognised" },
expected: { name: "TypeError" } },
{ desc: "an 'initial' easing",
input: { easing: "initial" },
expected: { name: "TypeError" } },
{ desc: "an 'inherit' easing",
input: { easing: "inherit" },
expected: { name: "TypeError" } },
{ desc: "a variable easing",
input: { easing: "var(--x)" },
expected: { name: "TypeError" } },
{ desc: "a multi-value easing",
input: { easing: "ease-in-out, ease-out" },
expected: { name: "TypeError" } }
];
@ -573,7 +613,7 @@ gInvalidKeyframeEffectOptionTests.forEach(function(stest) {
test(function(t) {
assert_throws(stest.expected, function() {
new KeyframeEffectReadOnly(target,
{left: ["10px", "20px"]},
{ left: ["10px", "20px"] },
stest.input);
});
}, "Invalid KeyframeEffectReadOnly option by " + stest.desc);

282
tests/wpt/web-platform-tests/web-animations/keyframe-effect/effect-easing.html
View file

@ -434,5 +434,287 @@ test(function(t) {
'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);
});
</script>
</body>

14
tests/wpt/web-platform-tests/web-animations/keyframe-effect/getComputedTiming.html
View file

@ -62,15 +62,6 @@ var gGetComputedTimingTests = [
{ desc: "an Infinity iterations",
input: { iterations: Infinity },
expected: { iterations: Infinity } },
{ desc: "a negative Infinity iterations",
input: { iterations: -Infinity},
expected: { iterations: 1 } },
{ desc: "a NaN iterations",
input: { iterations: NaN },
expected: { iterations: 1 } },
{ desc: "a negative iterations",
input: { iterations: -1 },
expected: { iterations: 1 } },
{ desc: "an auto fill",
input: { fill: "auto" },
expected: { fill: "none" } },
@ -152,10 +143,7 @@ var gActiveDurationTests = [
expected: Infinity },
{ desc: "an infinite duration and zero iteration count",
input: { duration: Infinity, iterations: 0 },
expected: 0 },
{ desc: "a non-zero duration and invalid iteration count",
input: { duration: 1000, iterations: "cabbage" },
expected: 1000 }
expected: 0 }
];
gActiveDurationTests.forEach(function(stest) {

29
tests/wpt/web-platform-tests/web-animations/testcommon.js
View file

@ -9,29 +9,7 @@ policies and contribution forms [3].
*/
"use strict";
var ANIMATION_END_TIME = 1000;
var ANIMATION_TOP_DEFAULT = 300;
var ANIMATION_TOP_0 = 10;
var ANIMATION_TOP_0_5 = 100;
var ANIMATION_TOP_1 = 200;
var KEYFRAMES = [ {
top : ANIMATION_TOP_0 + 'px',
offset : 0
}, {
top : ANIMATION_TOP_0_5 + 'px',
offset : 1 / 2
}, {
top : ANIMATION_TOP_1 + 'px',
offset : 1
} ];
// creates new animation for given target
function newAnimation(animationTarget) {
animationTarget.style.top = ANIMATION_TOP_DEFAULT + 'px';
return new Animation(animationTarget, KEYFRAMES, ANIMATION_END_TIME);
}
var MS_PER_SEC = 1000;
// creates div element, appends it to the document body and
// removes the created element during test cleanup
@ -91,11 +69,6 @@ function createPseudo(test, type) {
return anim.effect.target;
}
// Returns the type name of given object
function type(object) {
return Object.prototype.toString.call(object).slice(8, -1);
}
// Convert px unit value to a Number
function pxToNum(str) {
return Number(String(str).match(/^(-?[\d.]+)px$/)[1]);