mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1145246, part 2 - Update Web Animations code and tests for the rename of Animatable.getAnimationPlayers() to Animatable.getAnimations(). r=birtles

This commit is contained in:
Jonathan Watt 2015-03-20 18:20:37 +00:00
Родитель 2e0ff82e9d
Коммит 708ecfa2bf
21 изменённых файлов: 800 добавлений и 792 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

4
dom/animation/AnimationPlayer.h
Просмотреть файл

@ -321,8 +321,8 @@ protected:
// Indicates whether we were in the finished state during our // Indicates whether we were in the finished state during our
// most recent unthrottled sample (our last ComposeStyle call). // most recent unthrottled sample (our last ComposeStyle call).
bool mIsPreviousStateFinished; // Spec calls this "previous finished state" bool mIsPreviousStateFinished; // Spec calls this "previous finished state"
// Indicates that the player should be exposed in an element's // Indicates that the animation should be exposed in an element's
// getAnimationPlayers() list. // getAnimations() list.
bool mIsRelevant; bool mIsRelevant;
}; };

264
dom/animation/test/chrome/test_animation_observers.html
Просмотреть файл

@ -141,7 +141,7 @@ function assert_record_list(actual, expected, desc, index, listName) {
} }
for (var i = 0; i < actual.length; i++) { for (var i = 0; i < actual.length; i++) {
ok(actual.indexOf(expected[i]) != -1, ok(actual.indexOf(expected[i]) != -1,
`${desc} - record[${index}].${listName} contains expected AnimationPlayer`); `${desc} - record[${index}].${listName} contains expected Animation`);
} }
} }
@ -181,27 +181,27 @@ function assert_records(expected, desc) {
// Register for the end of the transition. // Register for the end of the transition.
var transitionEnd = await_event(e, "transitionend"); var transitionEnd = await_event(e, "transitionend");
// The transition should cause the creation of a single AnimationPlayer. // The transition should cause the creation of a single Animation.
var players = e.getAnimationPlayers(); var animations = e.getAnimations();
is(players.length, 1, "getAnimationPlayers().length after transition start"); is(animations.length, 1, "getAnimations().length after transition start");
// Wait for the single MutationRecord for the AnimationPlayer addition to // Wait for the single MutationRecord for the Animation addition to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: players, changed: [], removed: [] }], assert_records([{ added: animations, changed: [], removed: [] }],
"records after transition start"); "records after transition start");
// Advance until near the end of the transition, then wait for it to finish. // Advance until near the end of the transition, then wait for it to finish.
players[0].currentTime = 99900; animations[0].currentTime = 99900;
yield transitionEnd; yield transitionEnd;
// After the transition has finished, the AnimationPlayer should disappear. // After the transition has finished, the Animation should disappear.
is(e.getAnimationPlayers().length, 0, "getAnimationPlayers().length after transition end"); is(e.getAnimations().length, 0, "getAnimations().length after transition end");
// Wait for the single MutationRecord for the AnimationPlayer removal to // Wait for the single MutationRecord for the Animation removal to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: [], changed: [], removed: players }], assert_records([{ added: [], changed: [], removed: animations }],
"records after transition end"); "records after transition end");
e.style = ""; e.style = "";
@ -214,23 +214,23 @@ function assert_records(expected, desc) {
// Start a long transition. // Start a long transition.
e.style = "transition: background-color 100s; background-color: lime;"; e.style = "transition: background-color 100s; background-color: lime;";
// The transition should cause the creation of a single AnimationPlayer. // The transition should cause the creation of a single Animation.
var players = e.getAnimationPlayers(); var animations = e.getAnimations();
is(players.length, 1, "getAnimationPlayers().length after transition start"); is(animations.length, 1, "getAnimations().length after transition start");
// Wait for the single MutationRecord for the AnimationPlayer addition to // Wait for the single MutationRecord for the Animation addition to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: players, changed: [], removed: [] }], assert_records([{ added: animations, changed: [], removed: [] }],
"records after transition start"); "records after transition start");
// Cancel the transition by setting transition-property. // Cancel the transition by setting transition-property.
e.style.transitionProperty = "none"; e.style.transitionProperty = "none";
// Wait for the single MutationRecord for the AnimationPlayer removal to // Wait for the single MutationRecord for the Animation removal to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: [], changed: [], removed: players }], assert_records([{ added: [], changed: [], removed: animations }],
"records after transition end"); "records after transition end");
e.style = ""; e.style = "";
@ -243,14 +243,14 @@ function assert_records(expected, desc) {
// Start a long transition with a predictable value. // Start a long transition with a predictable value.
e.style = "transition: background-color 100s steps(2, end) -51s; background-color: lime;"; e.style = "transition: background-color 100s steps(2, end) -51s; background-color: lime;";
// The transition should cause the creation of a single AnimationPlayer. // The transition should cause the creation of a single Animation.
var players = e.getAnimationPlayers(); var animations = e.getAnimations();
is(players.length, 1, "getAnimationPlayers().length after transition start"); is(animations.length, 1, "getAnimations().length after transition start");
// Wait for the single MutationRecord for the AnimationPlayer addition to // Wait for the single MutationRecord for the Animation addition to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: players, changed: [], removed: [] }], assert_records([{ added: animations, changed: [], removed: [] }],
"records after transition start"); "records after transition start");
// Cancel the transition by setting the current animation value. // Cancel the transition by setting the current animation value.
@ -258,10 +258,10 @@ function assert_records(expected, desc) {
is(getComputedStyle(e).backgroundColor, value, "half-way transition value"); is(getComputedStyle(e).backgroundColor, value, "half-way transition value");
e.style.backgroundColor = value; e.style.backgroundColor = value;
// Wait for the single MutationRecord for the AnimationPlayer removal to // Wait for the single MutationRecord for the Animation removal to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: [], changed: [], removed: players }], assert_records([{ added: [], changed: [], removed: animations }],
"records after transition end"); "records after transition end");
e.style = ""; e.style = "";
@ -274,23 +274,23 @@ function assert_records(expected, desc) {
// Start a long transition. // Start a long transition.
e.style = "transition: line-height 100s; line-height: 100px;"; e.style = "transition: line-height 100s; line-height: 100px;";
// The transition should cause the creation of a single AnimationPlayer. // The transition should cause the creation of a single Animation.
var players = e.getAnimationPlayers(); var animations = e.getAnimations();
is(players.length, 1, "getAnimationPlayers().length after transition start"); is(animations.length, 1, "getAnimations().length after transition start");
// Wait for the single MutationRecord for the AnimationPlayer addition to // Wait for the single MutationRecord for the Animation addition to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: players, changed: [], removed: [] }], assert_records([{ added: animations, changed: [], removed: [] }],
"records after transition start"); "records after transition start");
// Cancel the transition by setting line-height to a non-interpolable value. // Cancel the transition by setting line-height to a non-interpolable value.
e.style.lineHeight = "normal"; e.style.lineHeight = "normal";
// Wait for the single MutationRecord for the AnimationPlayer removal to // Wait for the single MutationRecord for the Animation removal to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: [], changed: [], removed: players }], assert_records([{ added: [], changed: [], removed: animations }],
"records after transition end"); "records after transition end");
e.style = ""; e.style = "";
@ -303,50 +303,50 @@ function assert_records(expected, desc) {
// Start a long transition. // Start a long transition.
e.style = "transition: background-color 100s step-start; background-color: lime;"; e.style = "transition: background-color 100s step-start; background-color: lime;";
// The transition should cause the creation of a single AnimationPlayer. // The transition should cause the creation of a single Animation.
var players = e.getAnimationPlayers(); var animations = e.getAnimations();
is(players.length, 1, "getAnimationPlayers().length after transition start"); is(animations.length, 1, "getAnimations().length after transition start");
var firstPlayer = players[0]; var firstAnimation = animations[0];
// Wait for the single MutationRecord for the AnimationPlayer addition to // Wait for the single MutationRecord for the Animation addition to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: [firstPlayer], changed: [], removed: [] }], assert_records([{ added: [firstAnimation], changed: [], removed: [] }],
"records after transition start"); "records after transition start");
// Wait for the AnimationPlayer to get going, then seek well into // Wait for the Animation to get going, then seek well into
// the transition. // the transition.
yield await_frame(); yield await_frame();
firstPlayer.currentTime = 50000; firstAnimation.currentTime = 50000;
// Reverse the transition by setting the background-color back to its // Reverse the transition by setting the background-color back to its
// original value. // original value.
e.style.backgroundColor = "yellow"; e.style.backgroundColor = "yellow";
// The reversal should cause the creation of a new AnimationPlayer. // The reversal should cause the creation of a new Animation.
players = e.getAnimationPlayers(); animations = e.getAnimations();
is(players.length, 1, "getAnimationPlayers().length after transition reversal"); is(animations.length, 1, "getAnimations().length after transition reversal");
var secondPlayer = players[0]; var secondAnimation = animations[0];
ok(firstPlayer != secondPlayer, ok(firstAnimation != secondAnimation,
"second AnimationPlayer should be different from the first"); "second Animation should be different from the first");
// Wait for the single MutationRecord for the removal of the original // Wait for the single MutationRecord for the removal of the original
// AnimationPlayer and the addition of the new AnimationPlayer to // Animation and the addition of the new Animation to be delivered.
// be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: [secondPlayer], changed: [], removed: [firstPlayer] }], assert_records([{ added: [secondAnimation], changed: [],
removed: [firstAnimation] }],
"records after transition reversal"); "records after transition reversal");
// Cancel the transition. // Cancel the transition.
e.style.transitionProperty = "none"; e.style.transitionProperty = "none";
// Wait for the single MutationRecord for the AnimationPlayer removal to // Wait for the single MutationRecord for the Animation removal to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: [], changed: [], removed: [secondPlayer] }], assert_records([{ added: [], changed: [], removed: [secondAnimation] }],
"records after transition end"); "records after transition end");
e.style = ""; e.style = "";
@ -360,45 +360,45 @@ function assert_records(expected, desc) {
"transition-property: color, background-color, line-height; " + "transition-property: color, background-color, line-height; " +
"color: blue; background-color: lime; line-height: 24px;"; "color: blue; background-color: lime; line-height: 24px;";
// The transitions should cause the creation of three AnimationPlayers. // The transitions should cause the creation of three Animations.
var players = e.getAnimationPlayers(); var animations = e.getAnimations();
is(players.length, 3, "getAnimationPlayers().length after transition starts"); is(animations.length, 3, "getAnimations().length after transition starts");
// Wait for the single MutationRecord for the AnimationPlayer additions to // Wait for the single MutationRecord for the Animation additions to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: players, changed: [], removed: [] }], assert_records([{ added: animations, changed: [], removed: [] }],
"records after transition starts"); "records after transition starts");
// Wait for the AnimationPlayers to get going, then seek well into // Wait for the Animations to get going, then seek well into
// the transitions. // the transitions.
yield await_frame(); yield await_frame();
players.forEach(p => p.currentTime = 50000); animations.forEach(p => p.currentTime = 50000);
is(players.filter(p => p.playState == "running").length, 3, "number of running AnimationPlayers"); is(animations.filter(p => p.playState == "running").length, 3, "number of running Animations");
// Cancel one of the transitions by setting transition-property. // Cancel one of the transitions by setting transition-property.
e.style.transitionProperty = "background-color, line-height"; e.style.transitionProperty = "background-color, line-height";
var colorPlayer = players.filter(p => p.playState != "running"); var colorAnimation = animations.filter(p => p.playState != "running");
var otherPlayers = players.filter(p => p.playState == "running"); var otherAnimations = animations.filter(p => p.playState == "running");
is(colorPlayer.length, 1, "number of non-running AnimationPlayers after cancelling one"); is(colorAnimation.length, 1, "number of non-running Animations after cancelling one");
is(otherPlayers.length, 2, "number of running AnimationPlayers after cancelling one"); is(otherAnimations.length, 2, "number of running Animations after cancelling one");
// Wait for a MutationRecord for one of the AnimationPlayer // Wait for a MutationRecord for one of the Animation
// removals to be delivered. // removals to be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: [], changed: [], removed: colorPlayer }], assert_records([{ added: [], changed: [], removed: colorAnimation }],
"records after color transition end"); "records after color transition end");
// Cancel the remaining transitions. // Cancel the remaining transitions.
e.style.transitionProperty = "none"; e.style.transitionProperty = "none";
// Wait for the MutationRecord for the other two AnimationPlayer // Wait for the MutationRecord for the other two Animation
// removals to be delivered. // removals to be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: [], changed: [], removed: otherPlayers }], assert_records([{ added: [], changed: [], removed: otherAnimations }],
"records after other transition ends"); "records after other transition ends");
e.style = ""; e.style = "";
@ -413,27 +413,27 @@ function assert_records(expected, desc) {
// Register for the end of the animation. // Register for the end of the animation.
var animationEnd = await_event(e, "animationend"); var animationEnd = await_event(e, "animationend");
// The animation should cause the creation of a single AnimationPlayer. // The animation should cause the creation of a single Animation.
var players = e.getAnimationPlayers(); var animations = e.getAnimations();
is(players.length, 1, "getAnimationPlayers().length after animation start"); is(animations.length, 1, "getAnimations().length after animation start");
// Wait for the single MutationRecord for the AnimationPlayer addition to // Wait for the single MutationRecord for the Animation addition to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: players, changed: [], removed: [] }], assert_records([{ added: animations, changed: [], removed: [] }],
"records after animation start"); "records after animation start");
// Advance until near the end of the animation, then wait for it to finish. // Advance until near the end of the animation, then wait for it to finish.
players[0].currentTime = 99900; animations[0].currentTime = 99900;
yield animationEnd; yield animationEnd;
// After the animation has finished, the AnimationPlayer should disappear. // After the animation has finished, the Animation should disappear.
is(e.getAnimationPlayers().length, 0, "getAnimationPlayers().length after animation end"); is(e.getAnimations().length, 0, "getAnimations().length after animation end");
// Wait for the single MutationRecord for the AnimationPlayer removal to // Wait for the single MutationRecord for the Animation removal to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: [], changed: [], removed: players }], assert_records([{ added: [], changed: [], removed: animations }],
"records after animation end"); "records after animation end");
e.style = ""; e.style = "";
@ -446,23 +446,23 @@ function assert_records(expected, desc) {
// Start a long animation. // Start a long animation.
e.style = "animation: anim 100s;"; e.style = "animation: anim 100s;";
// The animation should cause the creation of a single AnimationPlayer. // The animation should cause the creation of a single Animation.
var players = e.getAnimationPlayers(); var animations = e.getAnimations();
is(players.length, 1, "getAnimationPlayers().length after animation start"); is(animations.length, 1, "getAnimations().length after animation start");
// Wait for the single MutationRecord for the AnimationPlayer addition to // Wait for the single MutationRecord for the Animation addition to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: players, changed: [], removed: [] }], assert_records([{ added: animations, changed: [], removed: [] }],
"records after animation start"); "records after animation start");
// Cancel the animation by setting animation-name. // Cancel the animation by setting animation-name.
e.style.animationName = "none"; e.style.animationName = "none";
// Wait for the single MutationRecord for the AnimationPlayer removal to // Wait for the single MutationRecord for the Animation removal to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: [], changed: [], removed: players }], assert_records([{ added: [], changed: [], removed: animations }],
"records after animation end"); "records after animation end");
e.style = ""; e.style = "";
@ -475,27 +475,27 @@ function assert_records(expected, desc) {
// Start a long animation. // Start a long animation.
e.style = "animation: anim 100s;"; e.style = "animation: anim 100s;";
// The animation should cause the creation of a single AnimationPlayer. // The animation should cause the creation of a single Animation.
var players = e.getAnimationPlayers(); var animations = e.getAnimations();
is(players.length, 1, "getAnimationPlayers().length after animation start"); is(animations.length, 1, "getAnimations().length after animation start");
// Wait for the single MutationRecord for the AnimationPlayer addition to // Wait for the single MutationRecord for the Animation addition to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: players, changed: [], removed: [] }], assert_records([{ added: animations, changed: [], removed: [] }],
"records after animation start"); "records after animation start");
// Advance the animation by a second. // Advance the animation by a second.
players[0].currentTime += 1000; animations[0].currentTime += 1000;
// Cancel the animation by setting animation-duration to a value less // Cancel the animation by setting animation-duration to a value less
// than a second. // than a second.
e.style.animationDuration = "0.1s"; e.style.animationDuration = "0.1s";
// Wait for the single MutationRecord for the AnimationPlayer removal to // Wait for the single MutationRecord for the Animation removal to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: [], changed: [], removed: players }], assert_records([{ added: [], changed: [], removed: animations }],
"records after animation end"); "records after animation end");
e.style = ""; e.style = "";
@ -508,23 +508,23 @@ function assert_records(expected, desc) {
// Start a long animation. // Start a long animation.
e.style = "animation: anim 100s;"; e.style = "animation: anim 100s;";
// The animation should cause the creation of a single AnimationPlayer. // The animation should cause the creation of a single Animation.
var players = e.getAnimationPlayers(); var animations = e.getAnimations();
is(players.length, 1, "getAnimationPlayers().length after animation start"); is(animations.length, 1, "getAnimations().length after animation start");
// Wait for the single MutationRecord for the AnimationPlayer addition to // Wait for the single MutationRecord for the Animation addition to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: players, changed: [], removed: [] }], assert_records([{ added: animations, changed: [], removed: [] }],
"records after animation start"); "records after animation start");
// Cancel the animation by setting animation-delay. // Cancel the animation by setting animation-delay.
e.style.animationDelay = "-200s"; e.style.animationDelay = "-200s";
// Wait for the single MutationRecord for the AnimationPlayer removal to // Wait for the single MutationRecord for the Animation removal to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: [], changed: [], removed: players }], assert_records([{ added: [], changed: [], removed: animations }],
"records after animation end"); "records after animation end");
e.style = ""; e.style = "";
@ -540,18 +540,18 @@ function assert_records(expected, desc) {
// Register for the end of the animation. // Register for the end of the animation.
var animationEnd = await_event(e, "animationend"); var animationEnd = await_event(e, "animationend");
// The animation should cause the creation of a single AnimationPlayer. // The animation should cause the creation of a single Animation.
var players = e.getAnimationPlayers(); var animations = e.getAnimations();
is(players.length, 1, "getAnimationPlayers().length after animation start"); is(animations.length, 1, "getAnimations().length after animation start");
// Wait for the single MutationRecord for the AnimationPlayer addition to // Wait for the single MutationRecord for the Animation addition to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: players, changed: [], removed: [] }], assert_records([{ added: animations, changed: [], removed: [] }],
"records after animation start"); "records after animation start");
// Advance until near the end of the animation, then wait for it to finish. // Advance until near the end of the animation, then wait for it to finish.
players[0].currentTime = 99900; animations[0].currentTime = 99900;
yield animationEnd; yield animationEnd;
// No changes to the list of animations at this point. // No changes to the list of animations at this point.
@ -560,10 +560,10 @@ function assert_records(expected, desc) {
// Cancel the animation by setting animation-fill-mode. // Cancel the animation by setting animation-fill-mode.
e.style.animationFillMode = "none"; e.style.animationFillMode = "none";
// Wait for the single MutationRecord for the AnimationPlayer removal to // Wait for the single MutationRecord for the Animation removal to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: [], changed: [], removed: players }], assert_records([{ added: [], changed: [], removed: animations }],
"records after animation end"); "records after animation end");
e.style = ""; e.style = "";
@ -576,18 +576,18 @@ function assert_records(expected, desc) {
// Start a short, repeated animation. // Start a short, repeated animation.
e.style = "animation: anim 0.5s infinite;"; e.style = "animation: anim 0.5s infinite;";
// The animation should cause the creation of a single AnimationPlayer. // The animation should cause the creation of a single Animation.
var players = e.getAnimationPlayers(); var animations = e.getAnimations();
is(players.length, 1, "getAnimationPlayers().length after animation start"); is(animations.length, 1, "getAnimations().length after animation start");
// Wait for the single MutationRecord for the AnimationPlayer addition to // Wait for the single MutationRecord for the Animation addition to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: players, changed: [], removed: [] }], assert_records([{ added: animations, changed: [], removed: [] }],
"records after animation start"); "records after animation start");
// Advance the animation until we are past the first iteration. // Advance the animation until we are past the first iteration.
players[0].currentTime += 1000; animations[0].currentTime += 1000;
// No changes to the list of animations at this point. // No changes to the list of animations at this point.
assert_records([], "records after animation starts repeating"); assert_records([], "records after animation starts repeating");
@ -595,10 +595,10 @@ function assert_records(expected, desc) {
// Cancel the animation by setting animation-iteration-count. // Cancel the animation by setting animation-iteration-count.
e.style.animationIterationCount = "1"; e.style.animationIterationCount = "1";
// Wait for the single MutationRecord for the AnimationPlayer removal to // Wait for the single MutationRecord for the Animation removal to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: [], changed: [], removed: players }], assert_records([{ added: [], changed: [], removed: animations }],
"records after animation end"); "records after animation end");
e.style = ""; e.style = "";
@ -618,23 +618,23 @@ function assert_records(expected, desc) {
// Start a long animation. // Start a long animation.
e.style = "animation: anim 100s;"; e.style = "animation: anim 100s;";
// The animation should cause the creation of a single AnimationPlayer. // The animation should cause the creation of a single Animation.
var players = e.getAnimationPlayers(); var animations = e.getAnimations();
is(players.length, 1, "getAnimationPlayers().length after animation start"); is(animations.length, 1, "getAnimations().length after animation start");
// Wait for the single MutationRecord for the AnimationPlayer addition to // Wait for the single MutationRecord for the Animation addition to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: players, changed: [], removed: [] }], assert_records([{ added: animations, changed: [], removed: [] }],
"records after animation start"); "records after animation start");
// Change a property of the animation such that it keeps running. // Change a property of the animation such that it keeps running.
e.style[aChangeTest.prop] = aChangeTest.val; e.style[aChangeTest.prop] = aChangeTest.val;
// Wait for the single MutationRecord for the AnimationPlayer change to // Wait for the single MutationRecord for the Animation change to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: [], changed: players, removed: [] }], assert_records([{ added: [], changed: animations, removed: [] }],
"records after animation change"); "records after animation change");
// Cancel the animation. // Cancel the animation.
@ -642,7 +642,7 @@ function assert_records(expected, desc) {
// Wait for the addition, change and removal MutationRecords to be delivered. // Wait for the addition, change and removal MutationRecords to be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: [], changed: [], removed: players }], assert_records([{ added: [], changed: [], removed: animations }],
"records after animation end"); "records after animation end");
e.style = ""; e.style = "";
@ -655,14 +655,14 @@ function assert_records(expected, desc) {
// Start a long animation. // Start a long animation.
e.style = "animation: anim 100s;"; e.style = "animation: anim 100s;";
// The animation should cause the creation of a single AnimationPlayer. // The animation should cause the creation of a single Animation.
var players = e.getAnimationPlayers(); var animations = e.getAnimations();
is(players.length, 1, "getAnimationPlayers().length after animation start"); is(animations.length, 1, "getAnimations().length after animation start");
// Wait for the single MutationRecord for the AnimationPlayer addition to // Wait for the single MutationRecord for the Animation addition to
// be delivered. // be delivered.
yield await_frame(); yield await_frame();
assert_records([{ added: players, changed: [], removed: [] }], assert_records([{ added: animations, changed: [], removed: [] }],
"records after animation start"); "records after animation start");
// Update the animation's delay such that it is still running. // Update the animation's delay such that it is still running.
@ -673,7 +673,7 @@ function assert_records(expected, desc) {
// We should get a single removal notification. // We should get a single removal notification.
yield await_frame(); yield await_frame();
assert_records([{ added: [], changed: [], removed: players }], assert_records([{ added: [], changed: [], removed: animations }],
"records after animation end"); "records after animation end");
e.style = ""; e.style = "";
@ -685,9 +685,9 @@ function assert_records(expected, desc) {
// Start an animation that should already be finished. // Start an animation that should already be finished.
e.style = "animation: anim 1s -2s;"; e.style = "animation: anim 1s -2s;";
// The animation should cause no AnimationPlayers to be created. // The animation should cause no Animations to be created.
var players = e.getAnimationPlayers(); var animations = e.getAnimations();
is(players.length, 0, "getAnimationPlayers().length after animation start"); is(animations.length, 0, "getAnimations().length after animation start");
// And we should get no notifications. // And we should get no notifications.
yield await_frame(); yield await_frame();

14
dom/animation/test/chrome/test_running_on_compositor.html
Просмотреть файл

@ -42,21 +42,21 @@ var omtaEnabled = SpecialPowers.DOMWindowUtils.layerManagerRemote &&
// FIXME: When we implement Element.animate, use that here instead of CSS // FIXME: When we implement Element.animate, use that here instead of CSS
// so that we remove any dependency on the CSS mapping. // so that we remove any dependency on the CSS mapping.
div.style.animation = 'anim 100s'; div.style.animation = 'anim 100s';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.ready.then(function() { animation.ready.then(function() {
is(player.isRunningOnCompositor, omtaEnabled, is(animation.isRunningOnCompositor, omtaEnabled,
'AnimationPlayer reports that it is running on the compositor' 'Animation reports that it is running on the compositor'
+ ' during playback'); + ' during playback');
div.style.animationPlayState = 'paused'; div.style.animationPlayState = 'paused';
window.getComputedStyle(div).animationPlayState; window.getComputedStyle(div).animationPlayState;
// FIXME: When we implement deferred pausing (bug 1109390), we should wait // FIXME: When we implement deferred pausing (bug 1109390), we should wait
// on player.ready here. // on animation.ready here.
window.requestAnimationFrame(function() { window.requestAnimationFrame(function() {
is(player.isRunningOnCompositor, false, is(animation.isRunningOnCompositor, false,
'AnimationPlayer reports that it is NOT running on the compositor' 'Animation reports that it is NOT running on the compositor'
+ ' when paused'); + ' when paused');
SimpleTest.finish(); SimpleTest.finish();
}); });

6
dom/animation/test/css-animations/test_animation-effect-name.html
Просмотреть файл

@ -15,21 +15,21 @@
test(function(t) { test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'xyz 100s'; div.style.animation = 'xyz 100s';
assert_equals(div.getAnimationPlayers()[0].source.effect.name, 'xyz', assert_equals(div.getAnimations()[0].source.effect.name, 'xyz',
'Animation effect name matches keyframes rule name'); 'Animation effect name matches keyframes rule name');
}, 'Effect name makes keyframe rule'); }, 'Effect name makes keyframe rule');
test(function(t) { test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'x\\yz 100s'; div.style.animation = 'x\\yz 100s';
assert_equals(div.getAnimationPlayers()[0].source.effect.name, 'xyz', assert_equals(div.getAnimations()[0].source.effect.name, 'xyz',
'Escaped animation effect name matches keyframes rule name'); 'Escaped animation effect name matches keyframes rule name');
}, 'Escaped animation name'); }, 'Escaped animation name');
test(function(t) { test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'x\\79 z 100s'; div.style.animation = 'x\\79 z 100s';
assert_equals(div.getAnimationPlayers()[0].source.effect.name, 'xyz', assert_equals(div.getAnimations()[0].source.effect.name, 'xyz',
'Hex-escaped animation effect name matches keyframes rule' 'Hex-escaped animation effect name matches keyframes rule'
+ ' name'); + ' name');
}, 'Animation name with hex-escape'); }, 'Animation name with hex-escape');

40
dom/animation/test/css-animations/test_animation-pausing.html
Просмотреть файл

@ -22,17 +22,17 @@ async_test(function(t) {
var cs = window.getComputedStyle(div); var cs = window.getComputedStyle(div);
div.style.animation = 'anim 1000s'; div.style.animation = 'anim 1000s';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0, assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero'); 'Initial value of margin-left is zero');
var previousAnimVal = getMarginLeft(cs); var previousAnimVal = getMarginLeft(cs);
player.ready.then(waitForFrame).then(t.step_func(function() { animation.ready.then(waitForFrame).then(t.step_func(function() {
assert_true(getMarginLeft(cs) > previousAnimVal, assert_true(getMarginLeft(cs) > previousAnimVal,
'margin-left is initially increasing'); 'margin-left is initially increasing');
player.pause(); animation.pause();
return player.ready; return animation.ready;
})).then(t.step_func(function() { })).then(t.step_func(function() {
previousAnimVal = getMarginLeft(cs); previousAnimVal = getMarginLeft(cs);
return waitForFrame(); return waitForFrame();
@ -48,14 +48,14 @@ async_test(function(t) {
var cs = window.getComputedStyle(div); var cs = window.getComputedStyle(div);
div.style.animation = 'anim 1000s paused'; div.style.animation = 'anim 1000s paused';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0, assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero'); 'Initial value of margin-left is zero');
player.pause(); animation.pause();
div.style.animationPlayState = 'running'; div.style.animationPlayState = 'running';
player.ready.then(waitForFrame).then(t.step_func(function() { animation.ready.then(waitForFrame).then(t.step_func(function() {
assert_equals(cs.animationPlayState, 'running', assert_equals(cs.animationPlayState, 'running',
'animation-play-state is running'); 'animation-play-state is running');
assert_equals(getMarginLeft(cs), 0, assert_equals(getMarginLeft(cs), 0,
@ -69,14 +69,14 @@ async_test(function(t) {
var cs = window.getComputedStyle(div); var cs = window.getComputedStyle(div);
div.style.animation = 'anim 1000s paused'; div.style.animation = 'anim 1000s paused';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0, assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero'); 'Initial value of margin-left is zero');
player.play(); animation.play();
player.ready.then(waitForFrame).then(t.step_func(function() { animation.ready.then(waitForFrame).then(t.step_func(function() {
assert_true(getMarginLeft(cs) > 0, assert_true(getMarginLeft(cs) > 0,
'Playing value of margin-left is greater than zero'); 'Playing value of margin-left is greater than zero');
t.done(); t.done();
@ -88,15 +88,15 @@ async_test(function(t) {
var cs = window.getComputedStyle(div); var cs = window.getComputedStyle(div);
div.style.animation = 'anim 1000s paused'; div.style.animation = 'anim 1000s paused';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0, assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero'); 'Initial value of margin-left is zero');
player.play(); animation.play();
var previousAnimVal; var previousAnimVal;
player.ready.then(function() { animation.ready.then(function() {
div.style.animationPlayState = 'running'; div.style.animationPlayState = 'running';
cs.animationPlayState; // Trigger style resolution cs.animationPlayState; // Trigger style resolution
return waitForFrame(); return waitForFrame();
@ -104,7 +104,7 @@ async_test(function(t) {
assert_equals(cs.animationPlayState, 'running', assert_equals(cs.animationPlayState, 'running',
'animation-play-state is running'); 'animation-play-state is running');
div.style.animationPlayState = 'paused'; div.style.animationPlayState = 'paused';
return player.ready; return animation.ready;
})).then(t.step_func(function() { })).then(t.step_func(function() {
assert_equals(cs.animationPlayState, 'paused', assert_equals(cs.animationPlayState, 'paused',
'animation-play-state is paused'); 'animation-play-state is paused');
@ -123,7 +123,7 @@ async_test(function(t) {
var cs = window.getComputedStyle(div); var cs = window.getComputedStyle(div);
div.style.animation = 'anim 1000s'; div.style.animation = 'anim 1000s';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0, assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero'); 'Initial value of margin-left is zero');
@ -131,10 +131,10 @@ async_test(function(t) {
// apply the style changes first, they will ignore the redundant // apply the style changes first, they will ignore the redundant
// call to play() and fail to correctly override the pause style. // call to play() and fail to correctly override the pause style.
div.style.animationPlayState = 'paused'; div.style.animationPlayState = 'paused';
player.play(); animation.play();
var previousAnimVal = getMarginLeft(cs); var previousAnimVal = getMarginLeft(cs);
player.ready.then(waitForFrame).then(t.step_func(function() { animation.ready.then(waitForFrame).then(t.step_func(function() {
assert_equals(cs.animationPlayState, 'paused', assert_equals(cs.animationPlayState, 'paused',
'animation-play-state is paused'); 'animation-play-state is paused');
assert_true(getMarginLeft(cs) > previousAnimVal, assert_true(getMarginLeft(cs) > previousAnimVal,
@ -148,7 +148,7 @@ async_test(function(t) {
var cs = window.getComputedStyle(div); var cs = window.getComputedStyle(div);
div.style.animation = 'anim 1000s paused'; div.style.animation = 'anim 1000s paused';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0, assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero'); 'Initial value of margin-left is zero');
@ -163,10 +163,10 @@ async_test(function(t) {
// For now this just serves as a sanity check that we do the same thing // For now this just serves as a sanity check that we do the same thing
// even if we set style before calling the API. // even if we set style before calling the API.
div.style.animationPlayState = 'running'; div.style.animationPlayState = 'running';
player.pause(); animation.pause();
var previousAnimVal = getMarginLeft(cs); var previousAnimVal = getMarginLeft(cs);
player.ready.then(waitForFrame).then(t.step_func(function() { animation.ready.then(waitForFrame).then(t.step_func(function() {
assert_equals(cs.animationPlayState, 'running', assert_equals(cs.animationPlayState, 'running',
'animation-play-state is running'); 'animation-play-state is running');
assert_equals(getMarginLeft(cs), previousAnimVal, assert_equals(getMarginLeft(cs), previousAnimVal,

215
dom/animation/test/css-animations/test_animation-player-currenttime.html
Просмотреть файл

@ -3,7 +3,7 @@
<head> <head>
<meta charset=utf-8> <meta charset=utf-8>
<title>Tests for the effect of setting a CSS animation's <title>Tests for the effect of setting a CSS animation's
AnimationPlayer.currentTime</title> Animation.currentTime</title>
<style> <style>
.animated-div { .animated-div {
@ -200,19 +200,19 @@ function EventWatcher(watchedNode, eventTypes)
// active interval. (If there is no delay, they are the same.) // active interval. (If there is no delay, they are the same.)
// Called when currentTime is set to zero (the beginning of the start delay). // Called when currentTime is set to zero (the beginning of the start delay).
function checkStateOnSettingCurrentTimeToZero(player) function checkStateOnSettingCurrentTimeToZero(animation)
{ {
// We don't test player.currentTime since our caller just set it. // We don't test animation.currentTime since our caller just set it.
assert_equals(player.playState, 'running', assert_equals(animation.playState, 'running',
'AnimationPlayer.playState should be "running" at the start of ' + 'Animation.playState should be "running" at the start of ' +
'the start delay'); 'the start delay');
assert_equals(player.source.target.style.animationPlayState, 'running', assert_equals(animation.source.target.style.animationPlayState, 'running',
'AnimationPlayer.source.target.style.animationPlayState should be ' + 'Animation.source.target.style.animationPlayState should be ' +
'"running" at the start of the start delay'); '"running" at the start of the start delay');
var div = player.source.target; var div = animation.source.target;
var marginLeft = parseFloat(getComputedStyle(div).marginLeft); var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
assert_equals(marginLeft, UNANIMATED_POSITION, assert_equals(marginLeft, UNANIMATED_POSITION,
'the computed value of margin-left should be unaffected ' + 'the computed value of margin-left should be unaffected ' +
@ -220,24 +220,24 @@ function checkStateOnSettingCurrentTimeToZero(player)
} }
// Called when the ready Promise's callbacks should happen // Called when the ready Promise's callbacks should happen
function checkStateOnReadyPromiseResolved(player) function checkStateOnReadyPromiseResolved(animation)
{ {
// the 0.0001 here is for rounding error // the 0.0001 here is for rounding error
assert_less_than_equal(player.currentTime, assert_less_than_equal(animation.currentTime,
player.timeline.currentTime - player.startTime + 0.0001, animation.timeline.currentTime - animation.startTime + 0.0001,
'AnimationPlayer.currentTime should be less than the local time ' + 'Animation.currentTime should be less than the local time ' +
'equivalent of the timeline\'s currentTime on the first paint tick ' + 'equivalent of the timeline\'s currentTime on the first paint tick ' +
'after animation creation'); 'after animation creation');
assert_equals(player.playState, 'running', assert_equals(animation.playState, 'running',
'AnimationPlayer.playState should be "running" on the first paint ' + 'Animation.playState should be "running" on the first paint ' +
'tick after animation creation'); 'tick after animation creation');
assert_equals(player.source.target.style.animationPlayState, 'running', assert_equals(animation.source.target.style.animationPlayState, 'running',
'AnimationPlayer.source.target.style.animationPlayState should be ' + 'Animation.source.target.style.animationPlayState should be ' +
'"running" on the first paint tick after animation creation'); '"running" on the first paint tick after animation creation');
var div = player.source.target; var div = animation.source.target;
var marginLeft = parseFloat(getComputedStyle(div).marginLeft); var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
assert_equals(marginLeft, UNANIMATED_POSITION, assert_equals(marginLeft, UNANIMATED_POSITION,
'the computed value of margin-left should be unaffected ' + 'the computed value of margin-left should be unaffected ' +
@ -245,30 +245,30 @@ function checkStateOnReadyPromiseResolved(player)
} }
// Called when currentTime is set to the time the active interval starts. // Called when currentTime is set to the time the active interval starts.
function checkStateAtActiveIntervalStartTime(player) function checkStateAtActiveIntervalStartTime(animation)
{ {
// We don't test player.currentTime since our caller just set it. // We don't test animation.currentTime since our caller just set it.
assert_equals(player.playState, 'running', assert_equals(animation.playState, 'running',
'AnimationPlayer.playState should be "running" at the start of ' + 'Animation.playState should be "running" at the start of ' +
'the active interval'); 'the active interval');
assert_equals(player.source.target.style.animationPlayState, 'running', assert_equals(animation.source.target.style.animationPlayState, 'running',
'AnimationPlayer.source.target.style.animationPlayState should be ' + 'Animation.source.target.style.animationPlayState should be ' +
'"running" at the start of the active interval'); '"running" at the start of the active interval');
var div = player.source.target; var div = animation.source.target;
var marginLeft = parseFloat(getComputedStyle(div).marginLeft); var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
assert_between_inclusive(marginLeft, INITIAL_POSITION, TEN_PCT_POSITION, assert_between_inclusive(marginLeft, INITIAL_POSITION, TEN_PCT_POSITION,
'the computed value of margin-left should be close to the value at the ' + 'the computed value of margin-left should be close to the value at the ' +
'beginning of the animation'); 'beginning of the animation');
} }
function checkStateAtFiftyPctOfActiveInterval(player) function checkStateAtFiftyPctOfActiveInterval(animation)
{ {
// We don't test player.currentTime since our caller just set it. // We don't test animation.currentTime since our caller just set it.
var div = player.source.target; var div = animation.source.target;
var marginLeft = parseFloat(getComputedStyle(div).marginLeft); var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
assert_equals(marginLeft, FIFTY_PCT_POSITION, assert_equals(marginLeft, FIFTY_PCT_POSITION,
'the computed value of margin-left should be half way through the ' + 'the computed value of margin-left should be half way through the ' +
@ -276,19 +276,19 @@ function checkStateAtFiftyPctOfActiveInterval(player)
} }
// Called when currentTime is set to the time the active interval ends. // Called when currentTime is set to the time the active interval ends.
function checkStateAtActiveIntervalEndTime(player) function checkStateAtActiveIntervalEndTime(animation)
{ {
// We don't test player.currentTime since our caller just set it. // We don't test animation.currentTime since our caller just set it.
assert_equals(player.playState, 'finished', assert_equals(animation.playState, 'finished',
'AnimationPlayer.playState should be "finished" at the end of ' + 'Animation.playState should be "finished" at the end of ' +
'the active interval'); 'the active interval');
assert_equals(player.source.target.style.animationPlayState, "running", assert_equals(animation.source.target.style.animationPlayState, "running",
'AnimationPlayer.source.target.style.animationPlayState should be ' + 'Animation.source.target.style.animationPlayState should be ' +
'"finished" at the end of the active interval'); '"finished" at the end of the active interval');
var div = player.source.target; var div = animation.source.target;
var marginLeft = parseFloat(getComputedStyle(div).marginLeft); var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
assert_equals(marginLeft, UNANIMATED_POSITION, assert_equals(marginLeft, UNANIMATED_POSITION,
'the computed value of margin-left should be unaffected ' + 'the computed value of margin-left should be unaffected ' +
@ -303,19 +303,19 @@ test(function(t)
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
// Animations shouldn't start until the next paint tick, so: // Animations shouldn't start until the next paint tick, so:
assert_equals(player.currentTime, 0, assert_equals(animation.currentTime, 0,
'AnimationPlayer.currentTime should be zero when an animation ' + 'Animation.currentTime should be zero when an animation ' +
'is initially created'); 'is initially created');
assert_equals(player.playState, "pending", assert_equals(animation.playState, "pending",
'AnimationPlayer.playState should be "pending" when an animation ' + 'Animation.playState should be "pending" when an animation ' +
'is initially created'); 'is initially created');
assert_equals(player.source.target.style.animationPlayState, 'running', assert_equals(animation.source.target.style.animationPlayState, 'running',
'AnimationPlayer.source.target.style.animationPlayState should be ' + 'Animation.source.target.style.animationPlayState should be ' +
'"running" when an animation is initially created'); '"running" when an animation is initially created');
// XXX Ideally we would have a test to check the ready Promise is initially // XXX Ideally we would have a test to check the ready Promise is initially
@ -324,13 +324,13 @@ test(function(t)
// will be called (async) regardless of whether the Promise was resolved in // will be called (async) regardless of whether the Promise was resolved in
// the past or is resolved in the future. // the past or is resolved in the future.
// Just so that player is running instead of paused when we set currentTime: // So that animation is running instead of paused when we set currentTime:
player.startTime = player.timeline.currentTime; animation.startTime = animation.timeline.currentTime;
assert_approx_equals(player.currentTime, 0, 0.0001, // rounding error assert_approx_equals(animation.currentTime, 0, 0.0001, // rounding error
'Check setting of currentTime actually works'); 'Check setting of currentTime actually works');
checkStateOnSettingCurrentTimeToZero(player); checkStateOnSettingCurrentTimeToZero(animation);
}, 'Sanity test to check round-tripping assigning to new animation\'s ' + }, 'Sanity test to check round-tripping assigning to new animation\'s ' +
'currentTime'); 'currentTime');
@ -341,24 +341,26 @@ async_test(function(t) {
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
checkStateOnReadyPromiseResolved(player); checkStateOnReadyPromiseResolved(animation);
player.currentTime = currentTimeForStartOfActiveInterval(player.timeline); animation.currentTime =
currentTimeForStartOfActiveInterval(animation.timeline);
return eventWatcher.waitForEvent('animationstart'); return eventWatcher.waitForEvent('animationstart');
})).then(t.step_func(function() { })).then(t.step_func(function() {
checkStateAtActiveIntervalStartTime(player); checkStateAtActiveIntervalStartTime(animation);
player.currentTime = animation.currentTime =
currentTimeForFiftyPercentThroughActiveInterval(player.timeline); currentTimeForFiftyPercentThroughActiveInterval(animation.timeline);
checkStateAtFiftyPctOfActiveInterval(player); checkStateAtFiftyPctOfActiveInterval(animation);
player.currentTime = currentTimeForEndOfActiveInterval(player.timeline); animation.currentTime =
currentTimeForEndOfActiveInterval(animation.timeline);
return eventWatcher.waitForEvent('animationend'); return eventWatcher.waitForEvent('animationend');
})).then(t.step_func(function() { })).then(t.step_func(function() {
checkStateAtActiveIntervalEndTime(player); checkStateAtActiveIntervalEndTime(animation);
eventWatcher.stopWatching(); eventWatcher.stopWatching();
})).catch(t.step_func(function(reason) { })).catch(t.step_func(function(reason) {
@ -375,14 +377,14 @@ async_test(function(t) {
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
// Just so that player is running instead of paused when we set currentTime: // So that animation is running instead of paused when we set currentTime:
player.startTime = player.timeline.currentTime; animation.startTime = animation.timeline.currentTime;
player.currentTime = currentTimeForEndOfActiveInterval(player.timeline); animation.currentTime = currentTimeForEndOfActiveInterval(animation.timeline);
var previousTimelineTime = player.timeline.currentTime; var previousTimelineTime = animation.timeline.currentTime;
// Skipping over the active interval will dispatch an 'animationstart' then // Skipping over the active interval will dispatch an 'animationstart' then
// an 'animationend' event. We need to wait for these events before we start // an 'animationend' event. We need to wait for these events before we start
@ -398,10 +400,10 @@ async_test(function(t) {
// Now we can start the tests for skipping backwards, but first we check // Now we can start the tests for skipping backwards, but first we check
// that after the events we're still in the same end time state: // that after the events we're still in the same end time state:
checkStateAtActiveIntervalEndTime(player); checkStateAtActiveIntervalEndTime(animation);
player.currentTime = animation.currentTime =
currentTimeForFiftyPercentThroughActiveInterval(player.timeline); currentTimeForFiftyPercentThroughActiveInterval(animation.timeline);
// Despite going backwards from after the end of the animation (to being // Despite going backwards from after the end of the animation (to being
// in the active interval), we now expect an 'animationstart' event // in the active interval), we now expect an 'animationstart' event
@ -412,19 +414,20 @@ async_test(function(t) {
// be dispatched synchronously. We need to call waitForEvent first // be dispatched synchronously. We need to call waitForEvent first
// otherwise eventWatcher will assert that the event was unexpected. // otherwise eventWatcher will assert that the event was unexpected.
var promise = eventWatcher.waitForEvent('animationstart'); var promise = eventWatcher.waitForEvent('animationstart');
checkStateAtFiftyPctOfActiveInterval(player); checkStateAtFiftyPctOfActiveInterval(animation);
return promise; return promise;
})).then(t.step_func(function() { })).then(t.step_func(function() {
player.currentTime = currentTimeForStartOfActiveInterval(player.timeline); animation.currentTime =
checkStateAtActiveIntervalStartTime(player); currentTimeForStartOfActiveInterval(animation.timeline);
checkStateAtActiveIntervalStartTime(animation);
player.currentTime = 0; animation.currentTime = 0;
// Despite going backwards from just after the active interval starts to // Despite going backwards from just after the active interval starts to
// the animation start time, we now expect an animationend event // the animation start time, we now expect an animationend event
// because we went from inside to outside the active interval. // because we went from inside to outside the active interval.
return eventWatcher.waitForEvent('animationend'); return eventWatcher.waitForEvent('animationend');
})).then(t.step_func(function() { })).then(t.step_func(function() {
checkStateOnReadyPromiseResolved(player); checkStateOnReadyPromiseResolved(animation);
eventWatcher.stopWatching(); eventWatcher.stopWatching();
})).catch(t.step_func(function(reason) { })).catch(t.step_func(function(reason) {
@ -435,9 +438,9 @@ async_test(function(t) {
// This must come after we've set up the Promise chain, since requesting // This must come after we've set up the Promise chain, since requesting
// computed style will force events to be dispatched. // computed style will force events to be dispatched.
// XXX For some reason this fails occasionally (either the player.playState // XXX For some reason this fails occasionally (either the animation.playState
// check or the marginLeft check). // check or the marginLeft check).
//checkStateAtActiveIntervalEndTime(player); //checkStateAtActiveIntervalEndTime(animation);
}, 'Skipping backwards through animation'); }, 'Skipping backwards through animation');
@ -454,10 +457,10 @@ async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'}); var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS); var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS);
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.currentTime = currentTimeForActivePhase(player.timeline); animation.currentTime = currentTimeForActivePhase(animation.timeline);
player.currentTime = currentTimeForBeforePhase(player.timeline); animation.currentTime = currentTimeForBeforePhase(animation.timeline);
waitForTwoAnimationFrames().then(function() { waitForTwoAnimationFrames().then(function() {
eventWatcher.stopWatching(); eventWatcher.stopWatching();
@ -469,10 +472,10 @@ async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'}); var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS); var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS);
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.currentTime = currentTimeForAfterPhase(player.timeline); animation.currentTime = currentTimeForAfterPhase(animation.timeline);
player.currentTime = currentTimeForBeforePhase(player.timeline); animation.currentTime = currentTimeForBeforePhase(animation.timeline);
waitForTwoAnimationFrames().then(function() { waitForTwoAnimationFrames().then(function() {
eventWatcher.stopWatching(); eventWatcher.stopWatching();
@ -484,11 +487,11 @@ async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'}); var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS); var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS);
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
eventWatcher.waitForEvent('animationstart').then(function() { eventWatcher.waitForEvent('animationstart').then(function() {
player.currentTime = currentTimeForBeforePhase(player.timeline); animation.currentTime = currentTimeForBeforePhase(animation.timeline);
player.currentTime = currentTimeForActivePhase(player.timeline); animation.currentTime = currentTimeForActivePhase(animation.timeline);
waitForTwoAnimationFrames().then(function() { waitForTwoAnimationFrames().then(function() {
eventWatcher.stopWatching(); eventWatcher.stopWatching();
@ -496,18 +499,18 @@ async_test(function(t) {
}); });
}); });
// get us into the initial state: // get us into the initial state:
player.currentTime = currentTimeForActivePhase(player.timeline); animation.currentTime = currentTimeForActivePhase(animation.timeline);
}, 'Redundant change, active -> before, then back'); }, 'Redundant change, active -> before, then back');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'}); var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS); var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS);
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
eventWatcher.waitForEvent('animationstart').then(function() { eventWatcher.waitForEvent('animationstart').then(function() {
player.currentTime = currentTimeForAfterPhase(player.timeline); animation.currentTime = currentTimeForAfterPhase(animation.timeline);
player.currentTime = currentTimeForActivePhase(player.timeline); animation.currentTime = currentTimeForActivePhase(animation.timeline);
waitForTwoAnimationFrames().then(function() { waitForTwoAnimationFrames().then(function() {
eventWatcher.stopWatching(); eventWatcher.stopWatching();
@ -515,19 +518,19 @@ async_test(function(t) {
}); });
}); });
// get us into the initial state: // get us into the initial state:
player.currentTime = currentTimeForActivePhase(player.timeline); animation.currentTime = currentTimeForActivePhase(animation.timeline);
}, 'Redundant change, active -> after, then back'); }, 'Redundant change, active -> after, then back');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'}); var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS); var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS);
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
eventWatcher.waitForEvents(['animationstart', eventWatcher.waitForEvents(['animationstart',
'animationend']).then(function() { 'animationend']).then(function() {
player.currentTime = currentTimeForBeforePhase(player.timeline); animation.currentTime = currentTimeForBeforePhase(animation.timeline);
player.currentTime = currentTimeForAfterPhase(player.timeline); animation.currentTime = currentTimeForAfterPhase(animation.timeline);
waitForTwoAnimationFrames().then(function() { waitForTwoAnimationFrames().then(function() {
eventWatcher.stopWatching(); eventWatcher.stopWatching();
@ -535,19 +538,19 @@ async_test(function(t) {
}); });
}); });
// get us into the initial state: // get us into the initial state:
player.currentTime = currentTimeForAfterPhase(player.timeline); animation.currentTime = currentTimeForAfterPhase(animation.timeline);
}, 'Redundant change, after -> before, then back'); }, 'Redundant change, after -> before, then back');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'}); var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS); var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS);
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
eventWatcher.waitForEvents(['animationstart', eventWatcher.waitForEvents(['animationstart',
'animationend']).then(function() { 'animationend']).then(function() {
player.currentTime = currentTimeForActivePhase(player.timeline); animation.currentTime = currentTimeForActivePhase(animation.timeline);
player.currentTime = currentTimeForAfterPhase(player.timeline); animation.currentTime = currentTimeForAfterPhase(animation.timeline);
waitForTwoAnimationFrames().then(function() { waitForTwoAnimationFrames().then(function() {
eventWatcher.stopWatching(); eventWatcher.stopWatching();
@ -555,7 +558,7 @@ async_test(function(t) {
}); });
}); });
// get us into the initial state: // get us into the initial state:
player.currentTime = currentTimeForAfterPhase(player.timeline); animation.currentTime = currentTimeForAfterPhase(animation.timeline);
}, 'Redundant change, after -> active, then back'); }, 'Redundant change, after -> active, then back');
@ -563,18 +566,18 @@ async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'}); var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
var exception; var exception;
try { try {
player.currentTime = null; animation.currentTime = null;
} catch (e) { } catch (e) {
exception = e; exception = e;
} }
assert_equals(exception.name, 'TypeError', assert_equals(exception.name, 'TypeError',
'Expect TypeError exception on trying to set ' + 'Expect TypeError exception on trying to set ' +
'AnimationPlayer.currentTime to null'); 'Animation.currentTime to null');
})).catch(t.step_func(function(reason) { })).catch(t.step_func(function(reason) {
assert_unreached(reason); assert_unreached(reason);
})).then(function() { })).then(function() {
@ -587,26 +590,26 @@ async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'}); var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s'; div.style.animation = 'anim 100s';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
var pauseTime; var pauseTime;
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
assert_not_equals(player.currentTime, null, assert_not_equals(animation.currentTime, null,
'AnimationPlayer.currentTime not null on ready Promise resolve'); 'Animation.currentTime not null on ready Promise resolve');
player.pause(); animation.pause();
return player.ready; return animation.ready;
})).then(t.step_func(function() { })).then(t.step_func(function() {
pauseTime = player.currentTime; pauseTime = animation.currentTime;
return waitForFrame(); return waitForFrame();
})).then(t.step_func(function() { })).then(t.step_func(function() {
assert_equals(player.currentTime, pauseTime, assert_equals(animation.currentTime, pauseTime,
'AnimationPlayer.currentTime is unchanged after pausing'); 'Animation.currentTime is unchanged after pausing');
})).catch(t.step_func(function(reason) { })).catch(t.step_func(function(reason) {
assert_unreached(reason); assert_unreached(reason);
})).then(function() { })).then(function() {
t.done(); t.done();
}); });
}, 'AnimationPlayer.currentTime after pausing'); }, 'Animation.currentTime after pausing');
</script> </script>
</body> </body>

158
dom/animation/test/css-animations/test_animation-player-finished.html
Просмотреть файл

@ -19,25 +19,25 @@ const ANIM_DURATION = 100000; // ms
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL; div.style.animation = ANIM_PROP_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
var previousFinishedPromise = player.finished; var previousFinishedPromise = animation.finished;
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
assert_equals(player.finished, previousFinishedPromise, assert_equals(animation.finished, previousFinishedPromise,
'Finished promise is the same object when playing starts'); 'Finished promise is the same object when playing starts');
player.pause(); animation.pause();
assert_equals(player.finished, previousFinishedPromise, assert_equals(animation.finished, previousFinishedPromise,
'Finished promise does not change when pausing'); 'Finished promise does not change when pausing');
player.play(); animation.play();
assert_equals(player.finished, previousFinishedPromise, assert_equals(animation.finished, previousFinishedPromise,
'Finished promise does not change when play() unpauses'); 'Finished promise does not change when play() unpauses');
player.currentTime = ANIM_DURATION; animation.currentTime = ANIM_DURATION;
return player.finished; return animation.finished;
})).then(t.step_func(function() { })).then(t.step_func(function() {
assert_equals(player.finished, previousFinishedPromise, assert_equals(animation.finished, previousFinishedPromise,
'Finished promise is the same object when playing completes'); 'Finished promise is the same object when playing completes');
t.done(); t.done();
})); }));
@ -46,22 +46,22 @@ async_test(function(t) {
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL; div.style.animation = ANIM_PROP_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
var previousFinishedPromise = player.finished; var previousFinishedPromise = animation.finished;
player.currentTime = ANIM_DURATION; animation.currentTime = ANIM_DURATION;
player.finished.then(t.step_func(function() { animation.finished.then(t.step_func(function() {
assert_equals(player.finished, previousFinishedPromise, assert_equals(animation.finished, previousFinishedPromise,
'Finished promise is the same object when playing completes'); 'Finished promise is the same object when playing completes');
player.play(); animation.play();
assert_not_equals(player.finished, previousFinishedPromise, assert_not_equals(animation.finished, previousFinishedPromise,
'Finished promise changes when replaying animation'); 'Finished promise changes when replaying animation');
previousFinishedPromise = player.finished; previousFinishedPromise = animation.finished;
player.play(); animation.play();
assert_equals(player.finished, previousFinishedPromise, assert_equals(animation.finished, previousFinishedPromise,
'Finished promise is the same after redundant play() call'); 'Finished promise is the same after redundant play() call');
t.done(); t.done();
@ -71,24 +71,24 @@ async_test(function(t) {
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL; div.style.animation = ANIM_PROP_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
var previousFinishedPromise; var previousFinishedPromise;
player.currentTime = ANIM_DURATION; animation.currentTime = ANIM_DURATION;
player.finished.then(function() { animation.finished.then(function() {
previousFinishedPromise = player.finished; previousFinishedPromise = animation.finished;
player.playbackRate = -1; animation.playbackRate = -1;
assert_not_equals(player.finished, previousFinishedPromise, assert_not_equals(animation.finished, previousFinishedPromise,
'Finished promise should be replaced when reversing a ' + 'Finished promise should be replaced when reversing a ' +
'finished promise'); 'finished promise');
player.currentTime = 0; animation.currentTime = 0;
return player.finished; return animation.finished;
}).then(t.step_func(function() { }).then(t.step_func(function() {
previousFinishedPromise = player.finished; previousFinishedPromise = animation.finished;
player.play(); animation.play();
assert_not_equals(player.finished, previousFinishedPromise, assert_not_equals(animation.finished, previousFinishedPromise,
'Finished promise is replaced after play() call on ' + 'Finished promise is replaced after play() call on ' +
'finished, reversed animation'); 'finished, reversed animation');
t.done(); t.done();
@ -98,15 +98,15 @@ async_test(function(t) {
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL; div.style.animation = ANIM_PROP_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
var previousFinishedPromise = player.finished; var previousFinishedPromise = animation.finished;
player.currentTime = ANIM_DURATION; animation.currentTime = ANIM_DURATION;
player.finished.then(t.step_func(function() { animation.finished.then(t.step_func(function() {
player.currentTime = ANIM_DURATION + 1000; animation.currentTime = ANIM_DURATION + 1000;
assert_equals(player.finished, previousFinishedPromise, assert_equals(animation.finished, previousFinishedPromise,
'Finished promise is unchanged jumping past end of ' + 'Finished promise is unchanged jumping past end of ' +
'finished animation'); 'finished animation');
@ -117,36 +117,36 @@ async_test(function(t) {
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL; div.style.animation = ANIM_PROP_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.currentTime = ANIM_DURATION; animation.currentTime = ANIM_DURATION;
player.finished.then(t.step_func(function(resolvedPlayer) { animation.finished.then(t.step_func(function(resolvedAnimation) {
assert_equals(resolvedPlayer, player, assert_equals(resolvedAnimation, animation,
'Object identity of player passed to Promise callback' 'Object identity of animation passed to Promise callback'
+ ' matches the player object owning the Promise'); + ' matches the animation object owning the Promise');
t.done(); t.done();
})); }));
}, 'The finished promise is fulfilled with its AnimationPlayer'); }, 'The finished promise is fulfilled with its Animation');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
// Set up pending animation // Set up pending animation
div.style.animation = ANIM_PROP_VAL; div.style.animation = ANIM_PROP_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
var previousFinishedPromise = player.finished; var previousFinishedPromise = animation.finished;
// Set up listeners on finished promise // Set up listeners on finished promise
player.finished.then(t.step_func(function() { animation.finished.then(t.step_func(function() {
assert_unreached('finished promise is fulfilled'); assert_unreached('finished promise is fulfilled');
})).catch(t.step_func(function(err) { })).catch(t.step_func(function(err) {
assert_not_equals(player.finished, previousFinishedPromise, assert_not_equals(animation.finished, previousFinishedPromise,
'Finished promise should change after the original is ' + 'Finished promise should change after the original is ' +
'rejected'); 'rejected');
assert_equals(err.name, 'AbortError', assert_equals(err.name, 'AbortError',
'finished promise is rejected with AbortError'); 'finished promise is rejected with AbortError');
assert_equals(player.playState, 'idle', assert_equals(animation.playState, 'idle',
'Player is idle after animation was cancelled'); 'Animation is idle after animation was cancelled');
})).then(t.step_func(function() { })).then(t.step_func(function() {
t.done(); t.done();
})); }));
@ -167,20 +167,20 @@ async_test(function(t) {
// Set up pending animation // Set up pending animation
div.style.animation = ANIM_PROP_VAL; div.style.animation = ANIM_PROP_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
var previousFinishedPromise = player.finished; var previousFinishedPromise = animation.finished;
// Set up listeners on finished promise // Set up listeners on finished promise
player.finished.then(t.step_func(function() { animation.finished.then(t.step_func(function() {
assert_unreached('finished promise was fulfilled'); assert_unreached('finished promise was fulfilled');
})).catch(t.step_func(function(err) { })).catch(t.step_func(function(err) {
assert_not_equals(player.finished, previousFinishedPromise, assert_not_equals(animation.finished, previousFinishedPromise,
'Finished promise should change after the original is ' + 'Finished promise should change after the original is ' +
'rejected'); 'rejected');
assert_equals(err.name, 'AbortError', assert_equals(err.name, 'AbortError',
'finished promise is rejected with AbortError'); 'finished promise is rejected with AbortError');
assert_equals(player.playState, 'idle', assert_equals(animation.playState, 'idle',
'Player is idle after animation was cancelled'); 'Animation is idle after animation was cancelled');
})).then(t.step_func(function() { })).then(t.step_func(function() {
t.done(); t.done();
})); }));
@ -195,14 +195,14 @@ async_test(function(t) {
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL; div.style.animation = ANIM_PROP_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
const HALF_DUR = ANIM_DURATION / 2; const HALF_DUR = ANIM_DURATION / 2;
const QUARTER_DUR = ANIM_DURATION / 4; const QUARTER_DUR = ANIM_DURATION / 4;
player.currentTime = HALF_DUR; animation.currentTime = HALF_DUR;
div.style.animationDuration = QUARTER_DUR + 'ms'; div.style.animationDuration = QUARTER_DUR + 'ms';
// Player should now be finished // Animation should now be finished
// Below we use gotNextFrame to check that shortening of the animation // Below we use gotNextFrame to check that shortening of the animation
// duration causes the finished promise to resolve, rather than it just // duration causes the finished promise to resolve, rather than it just
@ -216,15 +216,15 @@ async_test(function(t) {
gotNextFrame = true; gotNextFrame = true;
}); });
player.finished.then(t.step_func(function() { animation.finished.then(t.step_func(function() {
assert_false(gotNextFrame, 'shortening of the animation duration should ' + assert_false(gotNextFrame, 'shortening of the animation duration should ' +
'resolve the finished promise'); 'resolve the finished promise');
assert_equals(player.currentTime, HALF_DUR, assert_equals(animation.currentTime, HALF_DUR,
'currentTime should be unchanged when duration shortened'); 'currentTime should be unchanged when duration shortened');
var previousFinishedPromise = player.finished; var previousFinishedPromise = animation.finished;
div.style.animationDuration = ANIM_DURATION + 'ms'; // now active again div.style.animationDuration = ANIM_DURATION + 'ms'; // now active again
window.getComputedStyle(div).animationDuration; // flush style window.getComputedStyle(div).animationDuration; // flush style
assert_not_equals(player.finished, previousFinishedPromise, assert_not_equals(animation.finished, previousFinishedPromise,
'Finished promise should change after lengthening the ' + 'Finished promise should change after lengthening the ' +
'duration causes the animation to become active'); 'duration causes the animation to become active');
t.done(); t.done();
@ -234,17 +234,17 @@ async_test(function(t) {
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL; div.style.animation = ANIM_PROP_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.ready.then(function() { animation.ready.then(function() {
player.playbackRate = 0; animation.playbackRate = 0;
player.currentTime = ANIM_DURATION + 1000; animation.currentTime = ANIM_DURATION + 1000;
return waitForTwoAnimationFrames(); return waitForTwoAnimationFrames();
}).then(t.step_func(function() { }).then(t.step_func(function() {
t.done(); t.done();
})); }));
player.finished.then(t.step_func(function() { animation.finished.then(t.step_func(function() {
assert_unreached('finished promise should not resolve when playbackRate ' + assert_unreached('finished promise should not resolve when playbackRate ' +
'is zero'); 'is zero');
})); }));
@ -253,11 +253,11 @@ async_test(function(t) {
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL; div.style.animation = ANIM_PROP_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.ready.then(function() { animation.ready.then(function() {
player.playbackRate = -1; animation.playbackRate = -1;
return player.finished; return animation.finished;
}).then(t.step_func(function() { }).then(t.step_func(function() {
t.done(); t.done();
})); }));
@ -266,20 +266,20 @@ async_test(function(t) {
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL; div.style.animation = ANIM_PROP_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
var previousFinishedPromise = player.finished; var previousFinishedPromise = animation.finished;
player.currentTime = ANIM_DURATION; animation.currentTime = ANIM_DURATION;
player.finished.then(function() { animation.finished.then(function() {
div.style.animationPlayState = 'running'; div.style.animationPlayState = 'running';
return waitForTwoAnimationFrames(); return waitForTwoAnimationFrames();
}).then(t.step_func(function() { }).then(t.step_func(function() {
assert_equals(player.finished, previousFinishedPromise, assert_equals(animation.finished, previousFinishedPromise,
'Should not replay when animation-play-state changes to ' + 'Should not replay when animation-play-state changes to ' +
'"running" on finished animation'); '"running" on finished animation');
assert_equals(player.currentTime, ANIM_DURATION, assert_equals(animation.currentTime, ANIM_DURATION,
'currentTime should not change when animation-play-state ' + 'currentTime should not change when animation-play-state ' +
'changes to "running" on finished animation'); 'changes to "running" on finished animation');
t.done(); t.done();

42
dom/animation/test/css-animations/test_animation-player-playstate.html
Просмотреть файл

@ -15,59 +15,59 @@ async_test(function(t) {
var cs = window.getComputedStyle(div); var cs = window.getComputedStyle(div);
div.style.animation = 'anim 1000s'; div.style.animation = 'anim 1000s';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
assert_equals(player.playState, 'pending'); assert_equals(animation.playState, 'pending');
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
assert_equals(player.playState, 'running'); assert_equals(animation.playState, 'running');
t.done(); t.done();
})); }));
}, 'Player returns correct playState when running'); }, 'Animation returns correct playState when running');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
var cs = window.getComputedStyle(div); var cs = window.getComputedStyle(div);
div.style.animation = 'anim 1000s paused'; div.style.animation = 'anim 1000s paused';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
// FIXME: When we turn on async pausing later in this patch series, enable // FIXME: When we turn on async pausing later in this patch series, enable
// this // this
// assert_equals(player.playState, 'pending'); // assert_equals(animation.playState, 'pending');
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
assert_equals(player.playState, 'paused'); assert_equals(animation.playState, 'paused');
t.done(); t.done();
})); }));
}, 'Player returns correct playState when paused'); }, 'Animation returns correct playState when paused');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
var cs = window.getComputedStyle(div); var cs = window.getComputedStyle(div);
div.style.animation = 'anim 1000s'; div.style.animation = 'anim 1000s';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.pause(); animation.pause();
// FIXME: When we turn on async pausing later in this patch series, enable // FIXME: When we turn on async pausing later in this patch series, enable
// this // this
// assert_equals(player.playState, 'pending'); // assert_equals(animation.playState, 'pending');
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
assert_equals(player.playState, 'paused'); assert_equals(animation.playState, 'paused');
t.done(); t.done();
})); }));
}, 'Player.playState updates when paused by script'); }, 'Animation.playState updates when paused by script');
test(function(t) { test(function(t) {
var div = addDiv(t); var div = addDiv(t);
var cs = window.getComputedStyle(div); var cs = window.getComputedStyle(div);
div.style.animation = 'anim 1000s paused'; div.style.animation = 'anim 1000s paused';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
div.style.animationPlayState = 'running'; div.style.animationPlayState = 'running';
// This test also checks that calling playState flushes style // This test also checks that calling playState flushes style
assert_equals(player.playState, 'pending', assert_equals(animation.playState, 'pending',
'Player.playState reports pending after updating' 'Animation.playState reports pending after updating'
+ ' animation-play-state (got: ' + player.playState + ')'); + ' animation-play-state (got: ' + animation.playState + ')');
}, 'Player.playState updates when resumed by setting style'); }, 'Animation.playState updates when resumed by setting style');
</script> </script>

66
dom/animation/test/css-animations/test_animation-player-ready.html
Просмотреть файл

@ -15,19 +15,19 @@
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'abc 100s'; div.style.animation = 'abc 100s';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
var originalReadyPromise = player.ready; var originalReadyPromise = animation.ready;
player.ready.then(function() { animation.ready.then(function() {
assert_equals(player.ready, originalReadyPromise, assert_equals(animation.ready, originalReadyPromise,
'Ready promise is the same object when playing completes'); 'Ready promise is the same object when playing completes');
player.pause(); animation.pause();
// TODO: When we implement deferred pausing (bug 1109390), change this to // TODO: When we implement deferred pausing (bug 1109390), change this to
// assert_not_equals and wait on the new promise before continuing. // assert_not_equals and wait on the new promise before continuing.
assert_equals(player.ready, originalReadyPromise, assert_equals(animation.ready, originalReadyPromise,
'Ready promise does not change when pausing (for now)'); 'Ready promise does not change when pausing (for now)');
player.play(); animation.play();
assert_not_equals(player.ready, originalReadyPromise, assert_not_equals(animation.ready, originalReadyPromise,
'Ready promise object identity differs after calling' 'Ready promise object identity differs after calling'
+ ' play()'); + ' play()');
t.done(); t.done();
@ -38,11 +38,11 @@ async_test(function(t) {
test(function(t) { test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'abc 100s paused'; div.style.animation = 'abc 100s paused';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
var originalReadyPromise = player.ready; var originalReadyPromise = animation.ready;
div.style.animationPlayState = 'running'; div.style.animationPlayState = 'running';
assert_not_equals(player.ready, originalReadyPromise, assert_not_equals(animation.ready, originalReadyPromise,
'After updating animation-play-state a new ready promise' 'After updating animation-play-state a new ready promise'
+ ' object is created'); + ' object is created');
}, 'A new ready promise is created when setting animation-play-state: running'); }, 'A new ready promise is created when setting animation-play-state: running');
@ -50,12 +50,12 @@ test(function(t) {
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'abc 100s'; div.style.animation = 'abc 100s';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.ready.then(function() { animation.ready.then(function() {
var promiseBeforeCallingPlay = player.ready; var promiseBeforeCallingPlay = animation.ready;
player.play(); animation.play();
assert_equals(player.ready, promiseBeforeCallingPlay, assert_equals(animation.ready, promiseBeforeCallingPlay,
'Ready promise has same object identity after redundant call' 'Ready promise has same object identity after redundant call'
+ ' to play()'); + ' to play()');
t.done(); t.done();
@ -65,32 +65,33 @@ async_test(function(t) {
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'abc 100s'; div.style.animation = 'abc 100s';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.ready.then(function(resolvedPlayer) { animation.ready.then(function(resolvedAnimation) {
assert_equals(resolvedPlayer, player, assert_equals(resolvedAnimation, animation,
'Object identity of player passed to Promise callback' 'Object identity of Animation passed to Promise callback'
+ ' matches the player object owning the Promise'); + ' matches the Animation object owning the Promise');
t.done(); t.done();
}); });
}, 'The ready promise is fulfilled with its AnimationPlayer'); }, 'The ready promise is fulfilled with its Animation');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
// Set up pending animation // Set up pending animation
div.style.animation = 'abc 100s'; div.style.animation = 'abc 100s';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
assert_equals(player.playState, 'pending', 'Player is initially pending'); assert_equals(animation.playState, 'pending',
'Animation is initially pending');
// Set up listeners on ready promise // Set up listeners on ready promise
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
assert_unreached('ready promise is fulfilled'); assert_unreached('ready promise is fulfilled');
})).catch(t.step_func(function(err) { })).catch(t.step_func(function(err) {
assert_equals(err.name, 'AbortError', assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError'); 'ready promise is rejected with AbortError');
assert_equals(player.playState, 'idle', assert_equals(animation.playState, 'idle',
'Player is idle after animation was cancelled'); 'Animation is idle after animation was cancelled');
})).then(t.step_func(function() { })).then(t.step_func(function() {
t.done(); t.done();
})); }));
@ -111,17 +112,18 @@ async_test(function(t) {
// Set up pending animation // Set up pending animation
div.style.animation = 'abc 100s'; div.style.animation = 'abc 100s';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
assert_equals(player.playState, 'pending', 'Player is initially pending'); assert_equals(animation.playState, 'pending',
'Animation is initially pending');
// Set up listeners on ready promise // Set up listeners on ready promise
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
assert_unreached('ready promise was fulfilled'); assert_unreached('ready promise was fulfilled');
})).catch(t.step_func(function(err) { })).catch(t.step_func(function(err) {
assert_equals(err.name, 'AbortError', assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError'); 'ready promise is rejected with AbortError');
assert_equals(player.playState, 'idle', assert_equals(animation.playState, 'idle',
'Player is idle after animation was cancelled'); 'Animation is idle after animation was cancelled');
})).then(t.step_func(function() { })).then(t.step_func(function() {
t.done(); t.done();
})); }));

224
dom/animation/test/css-animations/test_animation-player-starttime.html
Просмотреть файл

@ -3,7 +3,7 @@
<head> <head>
<meta charset=utf-8> <meta charset=utf-8>
<title>Tests for the effect of setting a CSS animation's <title>Tests for the effect of setting a CSS animation's
AnimationPlayer.startTime</title> Animation.startTime</title>
<style> <style>
.animated-div { .animated-div {
@ -200,21 +200,21 @@ function EventWatcher(watchedNode, eventTypes)
// active interval. (If there is no delay, they are the same.) // active interval. (If there is no delay, they are the same.)
// Called when the ready Promise's callbacks should happen // Called when the ready Promise's callbacks should happen
function checkStateOnReadyPromiseResolved(player) function checkStateOnReadyPromiseResolved(animation)
{ {
assert_less_than_equal(player.startTime, player.timeline.currentTime, assert_less_than_equal(animation.startTime, animation.timeline.currentTime,
'AnimationPlayer.startTime should be less than the timeline\'s ' + 'Animation.startTime should be less than the timeline\'s ' +
'currentTime on the first paint tick after animation creation'); 'currentTime on the first paint tick after animation creation');
assert_equals(player.playState, 'running', assert_equals(animation.playState, 'running',
'AnimationPlayer.playState should be "running" on the first paint ' + 'Animation.playState should be "running" on the first paint ' +
'tick after animation creation'); 'tick after animation creation');
assert_equals(player.source.target.style.animationPlayState, 'running', assert_equals(animation.source.target.style.animationPlayState, 'running',
'AnimationPlayer.source.target.style.animationPlayState should be ' + 'Animation.source.target.style.animationPlayState should be ' +
'"running" on the first paint tick after animation creation'); '"running" on the first paint tick after animation creation');
var div = player.source.target; var div = animation.source.target;
var marginLeft = parseFloat(getComputedStyle(div).marginLeft); var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
assert_equals(marginLeft, UNANIMATED_POSITION, assert_equals(marginLeft, UNANIMATED_POSITION,
'the computed value of margin-left should be unaffected ' + 'the computed value of margin-left should be unaffected ' +
@ -222,30 +222,30 @@ function checkStateOnReadyPromiseResolved(player)
} }
// Called when startTime is set to the time the active interval starts. // Called when startTime is set to the time the active interval starts.
function checkStateAtActiveIntervalStartTime(player) function checkStateAtActiveIntervalStartTime(animation)
{ {
// We don't test player.startTime since our caller just set it. // We don't test animation.startTime since our caller just set it.
assert_equals(player.playState, 'running', assert_equals(animation.playState, 'running',
'AnimationPlayer.playState should be "running" at the start of ' + 'Animation.playState should be "running" at the start of ' +
'the active interval'); 'the active interval');
assert_equals(player.source.target.style.animationPlayState, 'running', assert_equals(animation.source.target.style.animationPlayState, 'running',
'AnimationPlayer.source.target.style.animationPlayState should be ' + 'Animation.source.target.style.animationPlayState should be ' +
'"running" at the start of the active interval'); '"running" at the start of the active interval');
var div = player.source.target; var div = animation.source.target;
var marginLeft = parseFloat(getComputedStyle(div).marginLeft); var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
assert_between_inclusive(marginLeft, INITIAL_POSITION, TEN_PCT_POSITION, assert_between_inclusive(marginLeft, INITIAL_POSITION, TEN_PCT_POSITION,
'the computed value of margin-left should be close to the value at the ' + 'the computed value of margin-left should be close to the value at the ' +
'beginning of the animation'); 'beginning of the animation');
} }
function checkStateAtFiftyPctOfActiveInterval(player) function checkStateAtFiftyPctOfActiveInterval(animation)
{ {
// We don't test player.startTime since our caller just set it. // We don't test animation.startTime since our caller just set it.
var div = player.source.target; var div = animation.source.target;
var marginLeft = parseFloat(getComputedStyle(div).marginLeft); var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
assert_equals(marginLeft, FIFTY_PCT_POSITION, assert_equals(marginLeft, FIFTY_PCT_POSITION,
'the computed value of margin-left should be half way through the ' + 'the computed value of margin-left should be half way through the ' +
@ -253,19 +253,19 @@ function checkStateAtFiftyPctOfActiveInterval(player)
} }
// Called when startTime is set to the time the active interval ends. // Called when startTime is set to the time the active interval ends.
function checkStateAtActiveIntervalEndTime(player) function checkStateAtActiveIntervalEndTime(animation)
{ {
// We don't test player.startTime since our caller just set it. // We don't test animation.startTime since our caller just set it.
assert_equals(player.playState, 'finished', assert_equals(animation.playState, 'finished',
'AnimationPlayer.playState should be "finished" at the end of ' + 'Animation.playState should be "finished" at the end of ' +
'the active interval'); 'the active interval');
assert_equals(player.source.target.style.animationPlayState, "running", assert_equals(animation.source.target.style.animationPlayState, "running",
'AnimationPlayer.source.target.style.animationPlayState should be ' + 'Animation.source.target.style.animationPlayState should be ' +
'"finished" at the end of the active interval'); '"finished" at the end of the active interval');
var div = player.source.target; var div = animation.source.target;
var marginLeft = parseFloat(getComputedStyle(div).marginLeft); var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
assert_equals(marginLeft, UNANIMATED_POSITION, assert_equals(marginLeft, UNANIMATED_POSITION,
'the computed value of margin-left should be unaffected ' + 'the computed value of margin-left should be unaffected ' +
@ -276,23 +276,23 @@ function checkStateAtActiveIntervalEndTime(player)
test(function(t) test(function(t)
{ {
var div = addDiv(t, { 'style': 'animation: anim 100s' }); var div = addDiv(t, { 'style': 'animation: anim 100s' });
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
assert_equals(player.startTime, null, 'startTime is unresolved'); assert_equals(animation.startTime, null, 'startTime is unresolved');
}, 'startTime of a newly created (play-pending) animation is unresolved'); }, 'startTime of a newly created (play-pending) animation is unresolved');
test(function(t) test(function(t)
{ {
var div = addDiv(t, { 'style': 'animation: anim 100s paused' }); var div = addDiv(t, { 'style': 'animation: anim 100s paused' });
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
assert_equals(player.startTime, null, 'startTime is unresolved'); assert_equals(animation.startTime, null, 'startTime is unresolved');
}, 'startTime of a newly created (pause-pending) animation is unresolved'); }, 'startTime of a newly created (pause-pending) animation is unresolved');
async_test(function(t) async_test(function(t)
{ {
var div = addDiv(t, { 'style': 'animation: anim 100s' }); var div = addDiv(t, { 'style': 'animation: anim 100s' });
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
assert_true(player.startTime > 0, assert_true(animation.startTime > 0,
'startTime is resolved when running'); 'startTime is resolved when running');
t.done(); t.done();
})); }));
@ -301,9 +301,9 @@ async_test(function(t)
async_test(function(t) async_test(function(t)
{ {
var div = addDiv(t, { 'style': 'animation: anim 100s paused' }); var div = addDiv(t, { 'style': 'animation: anim 100s paused' });
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
assert_equals(player.startTime, null, assert_equals(animation.startTime, null,
'startTime is unresolved when paused'); 'startTime is unresolved when paused');
t.done(); t.done();
})); }));
@ -312,18 +312,18 @@ async_test(function(t)
async_test(function(t) async_test(function(t)
{ {
var div = addDiv(t, { 'style': 'animation: anim 100s' }); var div = addDiv(t, { 'style': 'animation: anim 100s' });
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
div.style.animationPlayState = 'paused'; div.style.animationPlayState = 'paused';
getComputedStyle(div).animationPlayState; getComputedStyle(div).animationPlayState;
/* FIXME: Switch this on once deferred pausing is enabled /* FIXME: Switch this on once deferred pausing is enabled
assert_not_equals(player.startTime, null, assert_not_equals(animation.startTime, null,
'startTime is resolved when pause-pending'); 'startTime is resolved when pause-pending');
*/ */
div.style.animationPlayState = 'running'; div.style.animationPlayState = 'running';
getComputedStyle(div).animationPlayState; getComputedStyle(div).animationPlayState;
assert_equals(player.startTime, null, assert_equals(animation.startTime, null,
'startTime is unresolved when play-pending'); 'startTime is unresolved when play-pending');
t.done(); t.done();
})); }));
@ -332,16 +332,16 @@ async_test(function(t)
async_test(function(t) async_test(function(t)
{ {
var div = addDiv(t, { 'style': 'animation: anim 100s' }); var div = addDiv(t, { 'style': 'animation: anim 100s' });
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
// Seek to end to put us in the finished state // Seek to end to put us in the finished state
// FIXME: Once we implement finish(), use that here. // FIXME: Once we implement finish(), use that here.
player.currentTime = 100 * 1000; animation.currentTime = 100 * 1000;
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
// Call play() which puts us back in the running state // Call play() which puts us back in the running state
player.play(); animation.play();
// FIXME: Enable this once we implement finishing behavior (bug 1074630) // FIXME: Enable this once we implement finishing behavior (bug 1074630)
/* /*
assert_equals(player.startTime, null, 'startTime is unresolved'); assert_equals(animation.startTime, null, 'startTime is unresolved');
*/ */
t.done(); t.done();
})); }));
@ -353,10 +353,10 @@ test(function(t)
var div = addDiv(t, {'class': 'animated-div'}); var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
var currentTime = player.timeline.currentTime; var currentTime = animation.timeline.currentTime;
player.startTime = currentTime; animation.startTime = currentTime;
assert_approx_equals(player.startTime, currentTime, 0.0001, // rounding error assert_approx_equals(animation.startTime, currentTime, 0.0001, // rounding error
'Check setting of startTime actually works'); 'Check setting of startTime actually works');
}, 'Sanity test to check round-tripping assigning to a new animation\'s ' + }, 'Sanity test to check round-tripping assigning to a new animation\'s ' +
'startTime'); 'startTime');
@ -368,24 +368,24 @@ async_test(function(t) {
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
checkStateOnReadyPromiseResolved(player); checkStateOnReadyPromiseResolved(animation);
player.startTime = startTimeForStartOfActiveInterval(player.timeline); animation.startTime = startTimeForStartOfActiveInterval(animation.timeline);
return eventWatcher.waitForEvent('animationstart'); return eventWatcher.waitForEvent('animationstart');
})).then(t.step_func(function() { })).then(t.step_func(function() {
checkStateAtActiveIntervalStartTime(player); checkStateAtActiveIntervalStartTime(animation);
player.startTime = animation.startTime =
startTimeForFiftyPercentThroughActiveInterval(player.timeline); startTimeForFiftyPercentThroughActiveInterval(animation.timeline);
checkStateAtFiftyPctOfActiveInterval(player); checkStateAtFiftyPctOfActiveInterval(animation);
player.startTime = startTimeForEndOfActiveInterval(player.timeline); animation.startTime = startTimeForEndOfActiveInterval(animation.timeline);
return eventWatcher.waitForEvent('animationend'); return eventWatcher.waitForEvent('animationend');
})).then(t.step_func(function() { })).then(t.step_func(function() {
checkStateAtActiveIntervalEndTime(player); checkStateAtActiveIntervalEndTime(animation);
eventWatcher.stopWatching(); eventWatcher.stopWatching();
})).catch(t.step_func(function(reason) { })).catch(t.step_func(function(reason) {
@ -402,11 +402,11 @@ async_test(function(t) {
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.startTime = startTimeForEndOfActiveInterval(player.timeline); animation.startTime = startTimeForEndOfActiveInterval(animation.timeline);
var previousTimelineTime = player.timeline.currentTime; var previousTimelineTime = animation.timeline.currentTime;
// Skipping over the active interval will dispatch an 'animationstart' then // Skipping over the active interval will dispatch an 'animationstart' then
// an 'animationend' event. We need to wait for these events before we start // an 'animationend' event. We need to wait for these events before we start
@ -422,10 +422,10 @@ async_test(function(t) {
// Now we can start the tests for skipping backwards, but first we check // Now we can start the tests for skipping backwards, but first we check
// that after the events we're still in the same end time state: // that after the events we're still in the same end time state:
checkStateAtActiveIntervalEndTime(player); checkStateAtActiveIntervalEndTime(animation);
player.startTime = animation.startTime =
startTimeForFiftyPercentThroughActiveInterval(player.timeline); startTimeForFiftyPercentThroughActiveInterval(animation.timeline);
// Despite going backwards from after the end of the animation (to being // Despite going backwards from after the end of the animation (to being
// in the active interval), we now expect an 'animationstart' event // in the active interval), we now expect an 'animationstart' event
@ -436,19 +436,19 @@ async_test(function(t) {
// be dispatched synchronously. We need to call waitForEvent first // be dispatched synchronously. We need to call waitForEvent first
// otherwise eventWatcher will assert that the event was unexpected. // otherwise eventWatcher will assert that the event was unexpected.
var promise = eventWatcher.waitForEvent('animationstart'); var promise = eventWatcher.waitForEvent('animationstart');
checkStateAtFiftyPctOfActiveInterval(player); checkStateAtFiftyPctOfActiveInterval(animation);
return promise; return promise;
})).then(t.step_func(function() { })).then(t.step_func(function() {
player.startTime = startTimeForStartOfActiveInterval(player.timeline); animation.startTime = startTimeForStartOfActiveInterval(animation.timeline);
checkStateAtActiveIntervalStartTime(player); checkStateAtActiveIntervalStartTime(animation);
player.startTime = player.timeline.currentTime; animation.startTime = animation.timeline.currentTime;
// Despite going backwards from just after the active interval starts to // Despite going backwards from just after the active interval starts to
// the animation start time, we now expect an animationend event // the animation start time, we now expect an animationend event
// because we went from inside to outside the active interval. // because we went from inside to outside the active interval.
return eventWatcher.waitForEvent('animationend'); return eventWatcher.waitForEvent('animationend');
})).then(t.step_func(function() { })).then(t.step_func(function() {
checkStateOnReadyPromiseResolved(player); checkStateOnReadyPromiseResolved(animation);
eventWatcher.stopWatching(); eventWatcher.stopWatching();
})).catch(t.step_func(function(reason) { })).catch(t.step_func(function(reason) {
@ -459,9 +459,9 @@ async_test(function(t) {
// This must come after we've set up the Promise chain, since requesting // This must come after we've set up the Promise chain, since requesting
// computed style will force events to be dispatched. // computed style will force events to be dispatched.
// XXX For some reason this fails occasionally (either the player.playState // XXX For some reason this fails occasionally (either the animation.playState
// check or the marginLeft check). // check or the marginLeft check).
//checkStateAtActiveIntervalEndTime(player); //checkStateAtActiveIntervalEndTime(animation);
}, 'Skipping backwards through animation'); }, 'Skipping backwards through animation');
@ -478,10 +478,10 @@ async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'}); var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS); var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS);
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.startTime = startTimeForActivePhase(player.timeline); animation.startTime = startTimeForActivePhase(animation.timeline);
player.startTime = startTimeForBeforePhase(player.timeline); animation.startTime = startTimeForBeforePhase(animation.timeline);
waitForTwoAnimationFrames().then(function() { waitForTwoAnimationFrames().then(function() {
eventWatcher.stopWatching(); eventWatcher.stopWatching();
@ -493,10 +493,10 @@ async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'}); var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS); var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS);
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.startTime = startTimeForAfterPhase(player.timeline); animation.startTime = startTimeForAfterPhase(animation.timeline);
player.startTime = startTimeForBeforePhase(player.timeline); animation.startTime = startTimeForBeforePhase(animation.timeline);
waitForTwoAnimationFrames().then(function() { waitForTwoAnimationFrames().then(function() {
eventWatcher.stopWatching(); eventWatcher.stopWatching();
@ -508,11 +508,11 @@ async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'}); var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS); var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS);
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
eventWatcher.waitForEvent('animationstart').then(function() { eventWatcher.waitForEvent('animationstart').then(function() {
player.startTime = startTimeForBeforePhase(player.timeline); animation.startTime = startTimeForBeforePhase(animation.timeline);
player.startTime = startTimeForActivePhase(player.timeline); animation.startTime = startTimeForActivePhase(animation.timeline);
waitForTwoAnimationFrames().then(function() { waitForTwoAnimationFrames().then(function() {
eventWatcher.stopWatching(); eventWatcher.stopWatching();
@ -520,18 +520,18 @@ async_test(function(t) {
}); });
}); });
// get us into the initial state: // get us into the initial state:
player.startTime = startTimeForActivePhase(player.timeline); animation.startTime = startTimeForActivePhase(animation.timeline);
}, 'Redundant change, active -> before, then back'); }, 'Redundant change, active -> before, then back');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'}); var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS); var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS);
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
eventWatcher.waitForEvent('animationstart').then(function() { eventWatcher.waitForEvent('animationstart').then(function() {
player.startTime = startTimeForAfterPhase(player.timeline); animation.startTime = startTimeForAfterPhase(animation.timeline);
player.startTime = startTimeForActivePhase(player.timeline); animation.startTime = startTimeForActivePhase(animation.timeline);
waitForTwoAnimationFrames().then(function() { waitForTwoAnimationFrames().then(function() {
eventWatcher.stopWatching(); eventWatcher.stopWatching();
@ -539,19 +539,19 @@ async_test(function(t) {
}); });
}); });
// get us into the initial state: // get us into the initial state:
player.startTime = startTimeForActivePhase(player.timeline); animation.startTime = startTimeForActivePhase(animation.timeline);
}, 'Redundant change, active -> after, then back'); }, 'Redundant change, active -> after, then back');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'}); var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS); var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS);
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
eventWatcher.waitForEvents(['animationstart', eventWatcher.waitForEvents(['animationstart',
'animationend']).then(function() { 'animationend']).then(function() {
player.startTime = startTimeForBeforePhase(player.timeline); animation.startTime = startTimeForBeforePhase(animation.timeline);
player.startTime = startTimeForAfterPhase(player.timeline); animation.startTime = startTimeForAfterPhase(animation.timeline);
waitForTwoAnimationFrames().then(function() { waitForTwoAnimationFrames().then(function() {
eventWatcher.stopWatching(); eventWatcher.stopWatching();
@ -559,19 +559,19 @@ async_test(function(t) {
}); });
}); });
// get us into the initial state: // get us into the initial state:
player.startTime = startTimeForAfterPhase(player.timeline); animation.startTime = startTimeForAfterPhase(animation.timeline);
}, 'Redundant change, after -> before, then back'); }, 'Redundant change, after -> before, then back');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'}); var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS); var eventWatcher = new EventWatcher(div, CSS_ANIM_EVENTS);
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
eventWatcher.waitForEvents(['animationstart', eventWatcher.waitForEvents(['animationstart',
'animationend']).then(function() { 'animationend']).then(function() {
player.startTime = startTimeForActivePhase(player.timeline); animation.startTime = startTimeForActivePhase(animation.timeline);
player.startTime = startTimeForAfterPhase(player.timeline); animation.startTime = startTimeForAfterPhase(animation.timeline);
waitForTwoAnimationFrames().then(function() { waitForTwoAnimationFrames().then(function() {
eventWatcher.stopWatching(); eventWatcher.stopWatching();
@ -579,7 +579,7 @@ async_test(function(t) {
}); });
}); });
// get us into the initial state: // get us into the initial state:
player.startTime = startTimeForAfterPhase(player.timeline); animation.startTime = startTimeForAfterPhase(animation.timeline);
}, 'Redundant change, after -> active, then back'); }, 'Redundant change, after -> active, then back');
@ -587,18 +587,18 @@ async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'}); var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = ANIM_PROPERTY_VAL; div.style.animation = ANIM_PROPERTY_VAL;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
var storedCurrentTime; var storedCurrentTime;
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
storedCurrentTime = player.currentTime; storedCurrentTime = animation.currentTime;
player.startTime = null; animation.startTime = null;
return player.ready; return animation.ready;
})).catch(t.step_func(function(reason) { })).catch(t.step_func(function(reason) {
assert_unreached(reason); assert_unreached(reason);
})).then(function() { })).then(function() {
assert_equals(player.currentTime, storedCurrentTime, assert_equals(animation.currentTime, storedCurrentTime,
'Test that hold time is correct'); 'Test that hold time is correct');
t.done(); t.done();
}); });
@ -609,27 +609,27 @@ async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'}); var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s'; div.style.animation = 'anim 100s';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
var savedStartTime = player.startTime; var savedStartTime = animation.startTime;
assert_not_equals(player.startTime, null, assert_not_equals(animation.startTime, null,
'AnimationPlayer.startTime not null on ready Promise resolve'); 'Animation.startTime not null on ready Promise resolve');
player.pause(); animation.pause();
return player.ready; return animation.ready;
})).then(t.step_func(function() { })).then(t.step_func(function() {
assert_equals(player.startTime, null, assert_equals(animation.startTime, null,
'AnimationPlayer.startTime is null after paused'); 'Animation.startTime is null after paused');
assert_equals(player.playState, 'paused', assert_equals(animation.playState, 'paused',
'AnimationPlayer.playState is "paused" after pause() call'); 'Animation.playState is "paused" after pause() call');
})).catch(t.step_func(function(reason) { })).catch(t.step_func(function(reason) {
assert_unreached(reason); assert_unreached(reason);
})).then(function() { })).then(function() {
t.done(); t.done();
}); });
}, 'AnimationPlayer.startTime after paused'); }, 'Animation.startTime after paused');
</script> </script>
</body> </body>

4
dom/animation/test/css-animations/test_animation-target.html
Просмотреть файл

@ -13,8 +13,8 @@
test(function(t) { test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'anim 100s'; div.style.animation = 'anim 100s';
var players = div.getAnimationPlayers(); var animation = div.getAnimations()[0];
assert_equals(players[0].source.target, div, assert_equals(animation.source.target, div,
'Animation.target is the animatable div'); 'Animation.target is the animatable div');
}, 'Returned CSS animations have the correct Animation.target'); }, 'Returned CSS animations have the correct Animation.target');

142
dom/animation/test/css-animations/test_animations-dynamic-changes.html
Просмотреть файл

@ -17,84 +17,84 @@ async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'anim1 100s'; div.style.animation = 'anim1 100s';
var originalPlayer = div.getAnimationPlayers()[0]; var originalAnimation = div.getAnimations()[0];
var originalStartTime; var originalStartTime;
var originalCurrentTime; var originalCurrentTime;
// Wait a moment so we can confirm the startTime doesn't change (and doesn't // Wait a moment so we can confirm the startTime doesn't change (and doesn't
// simply reflect the current time). // simply reflect the current time).
originalPlayer.ready.then(function() { originalAnimation.ready.then(function() {
originalStartTime = originalPlayer.startTime; originalStartTime = originalAnimation.startTime;
originalCurrentTime = originalPlayer.currentTime; originalCurrentTime = originalAnimation.currentTime;
// Wait a moment so we can confirm the startTime doesn't change (and // Wait a moment so we can confirm the startTime doesn't change (and
// doesn't simply reflect the current time). // doesn't simply reflect the current time).
return waitForFrame(); return waitForFrame();
}).then(t.step_func(function() { }).then(t.step_func(function() {
div.style.animationDuration = '200s'; div.style.animationDuration = '200s';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
assert_equals(player, originalPlayer, assert_equals(animation, originalAnimation,
'The same AnimationPlayer is returned after updating' 'The same Animation is returned after updating'
+ ' animation duration'); + ' animation duration');
assert_equals(player.startTime, originalStartTime, assert_equals(animation.startTime, originalStartTime,
'AnimationPlayers returned by getAnimationPlayers preserve' 'Animations returned by getAnimations preserve'
+ ' their startTime even when they are updated'); + ' their startTime even when they are updated');
// Sanity check // Sanity check
assert_not_equals(player.currentTime, originalCurrentTime, assert_not_equals(animation.currentTime, originalCurrentTime,
'AnimationPlayer.currentTime has updated in next' 'Animation.currentTime has updated in next'
+ ' requestAnimationFrame callback'); + ' requestAnimationFrame callback');
t.done(); t.done();
})); }));
}, 'AnimationPlayers preserve their startTime when changed'); }, 'Animations preserve their startTime when changed');
test(function(t) { test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'anim1 100s, anim1 100s'; div.style.animation = 'anim1 100s, anim1 100s';
// Store original state // Store original state
var players = div.getAnimationPlayers(); var animations = div.getAnimations();
var player1 = players[0]; var animation1 = animations[0];
var player2 = players[1]; var animation2 = animations[1];
// Update first in list // Update first in list
div.style.animationDuration = '200s, 100s'; div.style.animationDuration = '200s, 100s';
players = div.getAnimationPlayers(); animations = div.getAnimations();
assert_equals(players[0], player1, assert_equals(animations[0], animation1,
'First player is in same position after update'); 'First Animation is in same position after update');
assert_equals(players[1], player2, assert_equals(animations[1], animation2,
'Second player is in same position after update'); 'Second Animation is in same position after update');
}, 'Updated AnimationPlayers maintain their order in the list'); }, 'Updated Animations maintain their order in the list');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'anim1 200s, anim1 100s'; div.style.animation = 'anim1 200s, anim1 100s';
// Store original state // Store original state
var players = div.getAnimationPlayers(); var animations = div.getAnimations();
var player1 = players[0]; var animation1 = animations[0];
var player2 = players[1]; var animation2 = animations[1];
// Wait before continuing so we can compare start times (otherwise the // Wait before continuing so we can compare start times (otherwise the
// new player objects and existing player objects will all have the same // new Animation objects and existing Animation objects will all have the same
// start time). // start time).
waitForAllPlayers(players).then(waitForFrame).then(t.step_func(function() { waitForAllAnimations(animations).then(waitForFrame).then(t.step_func(function() {
// Swap duration of first and second in list and prepend animation at the // Swap duration of first and second in list and prepend animation at the
// same time // same time
div.style.animation = 'anim1 100s, anim1 100s, anim1 200s'; div.style.animation = 'anim1 100s, anim1 100s, anim1 200s';
players = div.getAnimationPlayers(); animations = div.getAnimations();
assert_true(players[0] !== player1 && players[0] !== player2, assert_true(animations[0] !== animation1 && animations[0] !== animation2,
'New player is prepended to start of list'); 'New Animation is prepended to start of list');
assert_equals(players[1], player1, assert_equals(animations[1], animation1,
'First player is in second position after update'); 'First Animation is in second position after update');
assert_equals(players[2], player2, assert_equals(animations[2], animation2,
'Second player is in third position after update'); 'Second Animation is in third position after update');
assert_equals(players[1].startTime, players[2].startTime, assert_equals(animations[1].startTime, animations[2].startTime,
'Old players have the same start time'); 'Old Animations have the same start time');
// TODO: Check that players[0].startTime === null // TODO: Check that animations[0].startTime === null
return players[0].ready; return animations[0].ready;
})).then(t.step_func(function() { })).then(t.step_func(function() {
assert_true(players[0].startTime > players[1].startTime, assert_true(animations[0].startTime > animations[1].startTime,
'New player has later start time'); 'New Animation has later start time');
t.done(); t.done();
})); }));
}, 'Only the startTimes of existing animations are preserved'); }, 'Only the startTimes of existing animations are preserved');
@ -102,58 +102,58 @@ async_test(function(t) {
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'anim1 100s, anim1 100s'; div.style.animation = 'anim1 100s, anim1 100s';
var secondPlayer = div.getAnimationPlayers()[1]; var secondAnimation = div.getAnimations()[1];
// Wait before continuing so we can compare start times // Wait before continuing so we can compare start times
secondPlayer.ready.then(waitForFrame).then(t.step_func(function() { secondAnimation.ready.then(waitForFrame).then(t.step_func(function() {
// Trim list of animations // Trim list of animations
div.style.animationName = 'anim1'; div.style.animationName = 'anim1';
var players = div.getAnimationPlayers(); var animations = div.getAnimations();
assert_equals(players.length, 1, 'List of players was trimmed'); assert_equals(animations.length, 1, 'List of Animations was trimmed');
assert_equals(players[0], secondPlayer, assert_equals(animations[0], secondAnimation,
'Remaining player is the second one in the list'); 'Remaining Animation is the second one in the list');
assert_equals(typeof(players[0].startTime), 'number', assert_equals(typeof(animations[0].startTime), 'number',
'Remaining player has resolved startTime'); 'Remaining Animation has resolved startTime');
assert_true(players[0].startTime < players[0].timeline.currentTime, assert_true(animations[0].startTime < animations[0].timeline.currentTime,
'Remaining player preserves startTime'); 'Remaining Animation preserves startTime');
t.done(); t.done();
})); }));
}, 'Animations are removed from the start of the list while preserving' }, 'Animations are removed from the start of the list while preserving'
+ ' the state of existing players'); + ' the state of existing Animations');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'anim1 100s'; div.style.animation = 'anim1 100s';
var firstAddedPlayer = div.getAnimationPlayers()[0], var firstAddedAnimation = div.getAnimations()[0],
secondAddedPlayer, secondAddedAnimation,
players; animations;
// Wait and add second player // Wait and add second Animation
firstAddedPlayer.ready.then(waitForFrame).then(t.step_func(function() { firstAddedAnimation.ready.then(waitForFrame).then(t.step_func(function() {
div.style.animation = 'anim1 100s, anim1 100s'; div.style.animation = 'anim1 100s, anim1 100s';
secondAddedPlayer = div.getAnimationPlayers()[0]; secondAddedAnimation = div.getAnimations()[0];
// Wait again and add another player // Wait again and add another Animation
return secondAddedPlayer.ready.then(waitForFrame); return secondAddedAnimation.ready.then(waitForFrame);
})).then(t.step_func(function() { })).then(t.step_func(function() {
div.style.animation = 'anim1 100s, anim2 100s, anim1 100s'; div.style.animation = 'anim1 100s, anim2 100s, anim1 100s';
players = div.getAnimationPlayers(); animations = div.getAnimations();
assert_not_equals(firstAddedPlayer, secondAddedPlayer, assert_not_equals(firstAddedAnimation, secondAddedAnimation,
'New players are added to start of the list'); 'New Animations are added to start of the list');
assert_equals(players[0], secondAddedPlayer, assert_equals(animations[0], secondAddedAnimation,
'Second player remains in same position after' 'Second Animation remains in same position after'
+ ' interleaving'); + ' interleaving');
assert_equals(players[2], firstAddedPlayer, assert_equals(animations[2], firstAddedAnimation,
'First player remains in same position after' 'First Animation remains in same position after'
+ ' interleaving'); + ' interleaving');
return players[1].ready; return animations[1].ready;
})).then(t.step_func(function() { })).then(t.step_func(function() {
assert_true(players[1].startTime > players[0].startTime, assert_true(animations[1].startTime > animations[0].startTime,
'Interleaved player starts later than existing players'); 'Interleaved animation starts later than existing animations');
assert_true(players[0].startTime > players[2].startTime, assert_true(animations[0].startTime > animations[2].startTime,
'Original players retain their start time'); 'Original animations retain their start time');
t.done(); t.done();
})); }));
}, 'Player state is preserved when interleaving animations in list'); }, 'Animation state is preserved when interleaving animations in list');
</script> </script>

176
dom/animation/test/css-animations/test_element-get-animation-players.html
Просмотреть файл

@ -21,21 +21,21 @@
test(function(t) { test(function(t) {
var div = addDiv(t); var div = addDiv(t);
assert_equals(div.getAnimationPlayers().length, 0, assert_equals(div.getAnimations().length, 0,
'getAnimationPlayers returns an empty sequence for an element' 'getAnimations returns an empty sequence for an element'
+ ' with no animations'); + ' with no animations');
}, 'getAnimationPlayers for non-animated content'); }, 'getAnimations for non-animated content');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
// Add an animation // Add an animation
div.style.animation = 'anim1 100s'; div.style.animation = 'anim1 100s';
var players = div.getAnimationPlayers(); var animations = div.getAnimations();
assert_equals(players.length, 1, assert_equals(animations.length, 1,
'getAnimationPlayers returns a player running CSS Animations'); 'getAnimations returns an Animation running CSS Animations');
players[0].ready.then(t.step_func(function() { animations[0].ready.then(t.step_func(function() {
var startTime = players[0].startTime; var startTime = animations[0].startTime;
assert_true(startTime > 0 && startTime <= document.timeline.currentTime, assert_true(startTime > 0 && startTime <= document.timeline.currentTime,
'CSS animation has a sensible start time'); 'CSS animation has a sensible start time');
@ -46,31 +46,31 @@ async_test(function(t) {
return waitForFrame(); return waitForFrame();
})).then(t.step_func(function() { })).then(t.step_func(function() {
div.style.animation = 'anim1 100s, anim2 100s'; div.style.animation = 'anim1 100s, anim2 100s';
players = div.getAnimationPlayers(); animations = div.getAnimations();
assert_equals(players.length, 2, assert_equals(animations.length, 2,
'getAnimationPlayers returns one player for each value of' 'getAnimations returns one Animation for each value of'
+ ' animation-name'); + ' animation-name');
// Wait until both players are ready // Wait until both Animations are ready
// (We don't make any assumptions about the order of the players since // (We don't make any assumptions about the order of the Animations since
// that is the purpose of the following test.) // that is the purpose of the following test.)
return waitForAllPlayers(players); return waitForAllAnimations(animations);
})).then(t.step_func(function() { })).then(t.step_func(function() {
assert_true(players[0].startTime < players[1].startTime, assert_true(animations[0].startTime < animations[1].startTime,
'Additional players for CSS animations start after the original' 'Additional Animations for CSS animations start after the original'
+ ' animation and appear later in the list'); + ' animation and appear later in the list');
t.done(); t.done();
})); }));
}, 'getAnimationPlayers for CSS Animations'); }, 'getAnimations for CSS Animations');
test(function(t) { test(function(t) {
var div = addDiv(t); var div = addDiv(t);
// Add an animation that targets multiple properties // Add an animation that targets multiple properties
div.style.animation = 'multiPropAnim 100s'; div.style.animation = 'multiPropAnim 100s';
assert_equals(div.getAnimationPlayers().length, 1, assert_equals(div.getAnimations().length, 1,
'getAnimationPlayers returns only one player for a CSS Animation' 'getAnimations returns only one Animation for a CSS Animation'
+ ' that targets multiple properties'); + ' that targets multiple properties');
}, 'getAnimationPlayers for multi-property animations'); }, 'getAnimations for multi-property animations');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
@ -81,173 +81,173 @@ async_test(function(t) {
window.getComputedStyle(div).backgroundColor; window.getComputedStyle(div).backgroundColor;
// Wait until a frame after the animation starts, then add a transition // Wait until a frame after the animation starts, then add a transition
var players = div.getAnimationPlayers(); var animations = div.getAnimations();
players[0].ready.then(waitForFrame).then(t.step_func(function() { animations[0].ready.then(waitForFrame).then(t.step_func(function() {
div.style.transition = 'all 100s'; div.style.transition = 'all 100s';
div.style.backgroundColor = 'green'; div.style.backgroundColor = 'green';
players = div.getAnimationPlayers(); animations = div.getAnimations();
assert_equals(players.length, 2, assert_equals(animations.length, 2,
'getAnimationPlayers returns players for both animations and' 'getAnimations returns Animations for both animations and'
+ ' transitions that run simultaneously'); + ' transitions that run simultaneously');
return waitForAllPlayers(players); return waitForAllAnimations(animations);
})).then(t.step_func(function() { })).then(t.step_func(function() {
assert_true(players[0].startTime > players[1].startTime, assert_true(animations[0].startTime > animations[1].startTime,
'players for transitions appear before animations even if they' 'Animations for transitions appear before animations even if they'
+ ' start later'); + ' start later');
t.done(); t.done();
})); }));
}, 'getAnimationPlayers for both CSS Animations and Transitions at once'); }, 'getAnimations for both CSS Animations and Transitions at once');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
// Set up event listener // Set up event listener
div.addEventListener('animationend', t.step_func(function() { div.addEventListener('animationend', t.step_func(function() {
assert_equals(div.getAnimationPlayers().length, 0, assert_equals(div.getAnimations().length, 0,
'getAnimationPlayers does not return players for finished ' 'getAnimations does not return Animations for finished '
+ ' (and non-forwards-filling) CSS Animations'); + ' (and non-forwards-filling) CSS Animations');
t.done(); t.done();
})); }));
// Add a very short animation // Add a very short animation
div.style.animation = 'anim1 0.01s'; div.style.animation = 'anim1 0.01s';
}, 'getAnimationPlayers for CSS Animations that have finished'); }, 'getAnimations for CSS Animations that have finished');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
// Set up event listener // Set up event listener
div.addEventListener('animationend', t.step_func(function() { div.addEventListener('animationend', t.step_func(function() {
assert_equals(div.getAnimationPlayers().length, 1, assert_equals(div.getAnimations().length, 1,
'getAnimationPlayers returns players for CSS Animations that have' 'getAnimations returns Animations for CSS Animations that have'
+ ' finished but are filling forwards'); + ' finished but are filling forwards');
t.done(); t.done();
})); }));
// Add a very short animation // Add a very short animation
div.style.animation = 'anim1 0.01s forwards'; div.style.animation = 'anim1 0.01s forwards';
}, 'getAnimationPlayers for CSS Animations that have finished but are' }, 'getAnimations for CSS Animations that have finished but are'
+ ' forwards filling'); + ' forwards filling');
test(function(t) { test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'none 100s'; div.style.animation = 'none 100s';
var players = div.getAnimationPlayers(); var animations = div.getAnimations();
assert_equals(players.length, 0, assert_equals(animations.length, 0,
'getAnimationPlayers returns an empty sequence for an element' 'getAnimations returns an empty sequence for an element'
+ ' with animation-name: none'); + ' with animation-name: none');
div.style.animation = 'none 100s, anim1 100s'; div.style.animation = 'none 100s, anim1 100s';
players = div.getAnimationPlayers(); animations = div.getAnimations();
assert_equals(players.length, 1, assert_equals(animations.length, 1,
'getAnimationPlayers returns players only for those CSS Animations whose' 'getAnimations returns Animations only for those CSS Animations whose'
+ ' animation-name is not none'); + ' animation-name is not none');
}, 'getAnimationPlayers for CSS Animations with animation-name: none'); }, 'getAnimations for CSS Animations with animation-name: none');
test(function(t) { test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'missing 100s'; div.style.animation = 'missing 100s';
var players = div.getAnimationPlayers(); var animations = div.getAnimations();
assert_equals(players.length, 0, assert_equals(animations.length, 0,
'getAnimationPlayers returns an empty sequence for an element' 'getAnimations returns an empty sequence for an element'
+ ' with animation-name: missing'); + ' with animation-name: missing');
div.style.animation = 'anim1 100s, missing 100s'; div.style.animation = 'anim1 100s, missing 100s';
players = div.getAnimationPlayers(); animations = div.getAnimations();
assert_equals(players.length, 1, assert_equals(animations.length, 1,
'getAnimationPlayers returns players only for those CSS Animations whose' 'getAnimations returns Animations only for those CSS Animations whose'
+ ' animation-name is found'); + ' animation-name is found');
}, 'getAnimationPlayers for CSS Animations with animation-name: missing'); }, 'getAnimations for CSS Animations with animation-name: missing');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'anim1 100s, notyet 100s'; div.style.animation = 'anim1 100s, notyet 100s';
var players = div.getAnimationPlayers(); var animations = div.getAnimations();
assert_equals(players.length, 1, assert_equals(animations.length, 1,
'getAnimationPlayers initally only returns players for CSS Animations whose' 'getAnimations initally only returns Animations for CSS Animations whose'
+ ' animation-name is found'); + ' animation-name is found');
players[0].ready.then(waitForFrame).then(t.step_func(function() { animations[0].ready.then(waitForFrame).then(t.step_func(function() {
var keyframes = '@keyframes notyet { to { left: 100px; } }'; var keyframes = '@keyframes notyet { to { left: 100px; } }';
document.styleSheets[0].insertRule(keyframes, 0); document.styleSheets[0].insertRule(keyframes, 0);
players = div.getAnimationPlayers(); animations = div.getAnimations();
assert_equals(players.length, 2, assert_equals(animations.length, 2,
'getAnimationPlayers includes player when @keyframes rule is added' 'getAnimations includes Animation when @keyframes rule is added'
+ ' later'); + ' later');
return waitForAllPlayers(players); return waitForAllAnimations(animations);
})).then(t.step_func(function() { })).then(t.step_func(function() {
assert_true(players[0].startTime < players[1].startTime, assert_true(animations[0].startTime < animations[1].startTime,
'Newly added player has a later start time'); 'Newly added animation has a later start time');
document.styleSheets[0].deleteRule(0); document.styleSheets[0].deleteRule(0);
t.done(); t.done();
})); }));
}, 'getAnimationPlayers for CSS Animations where the @keyframes rule is added' }, 'getAnimations for CSS Animations where the @keyframes rule is added'
+ ' later'); + ' later');
test(function(t) { test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'anim1 100s, anim1 100s'; div.style.animation = 'anim1 100s, anim1 100s';
assert_equals(div.getAnimationPlayers().length, 2, assert_equals(div.getAnimations().length, 2,
'getAnimationPlayers returns one player for each CSS animation-name' 'getAnimations returns one Animation for each CSS animation-name'
+ ' even if the names are duplicated'); + ' even if the names are duplicated');
}, 'getAnimationPlayers for CSS Animations with duplicated animation-name'); }, 'getAnimations for CSS Animations with duplicated animation-name');
test(function(t) { test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'empty 100s'; div.style.animation = 'empty 100s';
assert_equals(div.getAnimationPlayers().length, 1, assert_equals(div.getAnimations().length, 1,
'getAnimationPlayers returns players for CSS animations with an' 'getAnimations returns Animations for CSS animations with an'
+ ' empty keyframes rule'); + ' empty keyframes rule');
}, 'getAnimationPlayers for CSS Animations with empty keyframes rule'); }, 'getAnimations for CSS Animations with empty keyframes rule');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'anim1 100s 100s'; div.style.animation = 'anim1 100s 100s';
var players = div.getAnimationPlayers(); var animations = div.getAnimations();
assert_equals(players.length, 1, assert_equals(animations.length, 1,
'getAnimationPlayers returns animations for CSS animations whose' 'getAnimations returns animations for CSS animations whose'
+ ' delay makes them start later'); + ' delay makes them start later');
players[0].ready.then(waitForFrame).then(t.step_func(function() { animations[0].ready.then(waitForFrame).then(t.step_func(function() {
assert_true(players[0].startTime <= document.timeline.currentTime, assert_true(animations[0].startTime <= document.timeline.currentTime,
'For CSS Animations in delay phase, the start time of the player is' 'For CSS Animations in delay phase, the start time of the Animation is'
+ ' not in the future'); + ' not in the future');
t.done(); t.done();
})); }));
}, 'getAnimationPlayers for CSS animations in delay phase'); }, 'getAnimations for CSS animations in delay phase');
test(function(t) { test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'anim1 0s 100s'; div.style.animation = 'anim1 0s 100s';
assert_equals(div.getAnimationPlayers().length, 1, assert_equals(div.getAnimations().length, 1,
'getAnimationPlayers returns animations for CSS animations whose' 'getAnimations returns animations for CSS animations whose'
+ ' duration is zero'); + ' duration is zero');
div.remove(); div.remove();
}, 'getAnimationPlayers for zero-duration CSS Animations'); }, 'getAnimations for zero-duration CSS Animations');
test(function(t) { test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.style.animation = 'anim1 100s'; div.style.animation = 'anim1 100s';
var originalPlayer = div.getAnimationPlayers()[0]; var originalAnimation = div.getAnimations()[0];
// Update pause state (an AnimationPlayer change) // Update pause state (an Animation change)
div.style.animationPlayState = 'paused'; div.style.animationPlayState = 'paused';
var pausedPlayer = div.getAnimationPlayers()[0]; var pausedAnimation = div.getAnimations()[0];
assert_equals(pausedPlayer.playState, 'paused', assert_equals(pausedAnimation.playState, 'paused',
'player\'s paused state is updated'); 'animation\'s paused state is updated');
assert_equals(originalPlayer, pausedPlayer, assert_equals(originalAnimation, pausedAnimation,
'getAnimationPlayers returns the same objects even when their' 'getAnimations returns the same objects even when their'
+ ' play state changes'); + ' play state changes');
// Update duration (an Animation change) // Update duration (an Animation change)
div.style.animationDuration = '200s'; div.style.animationDuration = '200s';
var extendedPlayer = div.getAnimationPlayers()[0]; var extendedAnimation = div.getAnimations()[0];
// FIXME: Check extendedPlayer.source.timing.duration has changed once the // FIXME: Check extendedAnimation.source.timing.duration has changed once the
// API is available // API is available
assert_equals(originalPlayer, extendedPlayer, assert_equals(originalAnimation, extendedAnimation,
'getAnimationPlayers returns the same objects even when their' 'getAnimations returns the same objects even when their'
+ ' duration changes'); + ' duration changes');
}, 'getAnimationPlayers returns objects with the same identity'); }, 'getAnimations returns objects with the same identity');
</script> </script>

2
dom/animation/test/css-transitions/test_animation-effect-name.html
Просмотреть файл

@ -16,7 +16,7 @@ test(function(t) {
div.style.transition = 'all 100s'; div.style.transition = 'all 100s';
div.style.left = '100px'; div.style.left = '100px';
assert_equals(div.getAnimationPlayers()[0].source.effect.name, '', assert_equals(div.getAnimations()[0].source.effect.name, '',
'Animation effects for transitions have an empty name'); 'Animation effects for transitions have an empty name');
}, 'Effect name for transitions'); }, 'Effect name for transitions');

10
dom/animation/test/css-transitions/test_animation-pausing.html
Просмотреть файл

@ -21,23 +21,23 @@ async_test(function(t) {
div.style.marginLeft = '10000px'; div.style.marginLeft = '10000px';
cs.marginLeft; cs.marginLeft;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0, assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero'); 'Initial value of margin-left is zero');
var previousAnimVal = getMarginLeft(cs); var previousAnimVal = getMarginLeft(cs);
player.ready.then(waitForFrame).then(t.step_func(function() { animation.ready.then(waitForFrame).then(t.step_func(function() {
assert_true(getMarginLeft(cs) > previousAnimVal, assert_true(getMarginLeft(cs) > previousAnimVal,
'margin-left is initially increasing'); 'margin-left is initially increasing');
previousAnimVal = getMarginLeft(cs); previousAnimVal = getMarginLeft(cs);
player.pause(); animation.pause();
return waitForFrame(); return waitForFrame();
})).then(t.step_func(function() { })).then(t.step_func(function() {
assert_equals(getMarginLeft(cs), previousAnimVal, assert_equals(getMarginLeft(cs), previousAnimVal,
'margin-left does not increase after calling pause()'); 'margin-left does not increase after calling pause()');
previousAnimVal = getMarginLeft(cs); previousAnimVal = getMarginLeft(cs);
player.play(); animation.play();
return player.ready.then(waitForFrame); return animation.ready.then(waitForFrame);
})).then(t.step_func(function() { })).then(t.step_func(function() {
assert_true(getMarginLeft(cs) > previousAnimVal, assert_true(getMarginLeft(cs) > previousAnimVal,
'margin-left increases after calling play()'); 'margin-left increases after calling play()');

36
dom/animation/test/css-transitions/test_animation-player-ready.html
Просмотреть файл

@ -15,19 +15,19 @@ async_test(function(t) {
div.style.transform = 'translate(10px)'; div.style.transform = 'translate(10px)';
window.getComputedStyle(div).transform; window.getComputedStyle(div).transform;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
var originalReadyPromise = player.ready; var originalReadyPromise = animation.ready;
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
assert_equals(player.ready, originalReadyPromise, assert_equals(animation.ready, originalReadyPromise,
'Ready promise is the same object when playing completes'); 'Ready promise is the same object when playing completes');
player.pause(); animation.pause();
// TODO: When we implement deferred pausing, change this to // TODO: When we implement deferred pausing, change this to
// assert_not_equals and wait on the new promise before continuing. // assert_not_equals and wait on the new promise before continuing.
assert_equals(player.ready, originalReadyPromise, assert_equals(animation.ready, originalReadyPromise,
'Ready promise does not change when pausing (for now)'); 'Ready promise does not change when pausing (for now)');
player.play(); animation.play();
assert_not_equals(player.ready, originalReadyPromise, assert_not_equals(animation.ready, originalReadyPromise,
'Ready promise object identity differs after calling' 'Ready promise object identity differs after calling'
+ ' play()'); + ' play()');
t.done(); t.done();
@ -45,17 +45,17 @@ async_test(function(t) {
div.style.transform = 'translate(10px)'; div.style.transform = 'translate(10px)';
window.getComputedStyle(div).transform; window.getComputedStyle(div).transform;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
assert_equals(player.playState, 'pending', 'Player is initially pending'); assert_equals(animation.playState, 'pending', 'Animation is initially pending');
// Set up listeners on ready promise // Set up listeners on ready promise
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
assert_unreached('ready promise was fulfilled'); assert_unreached('ready promise was fulfilled');
})).catch(t.step_func(function(err) { })).catch(t.step_func(function(err) {
assert_equals(err.name, 'AbortError', assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError'); 'ready promise is rejected with AbortError');
assert_equals(player.playState, 'idle', assert_equals(animation.playState, 'idle',
'Player is idle after transition was cancelled'); 'Animation is idle after transition was cancelled');
})).then(t.step_func(function() { })).then(t.step_func(function() {
t.done(); t.done();
})); }));
@ -77,17 +77,17 @@ async_test(function(t) {
div.style.marginLeft = '100px'; div.style.marginLeft = '100px';
window.getComputedStyle(div).marginLeft; window.getComputedStyle(div).marginLeft;
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
assert_equals(player.playState, 'pending', 'Player is initially pending'); assert_equals(animation.playState, 'pending', 'Animation is initially pending');
// Set up listeners on ready promise // Set up listeners on ready promise
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
assert_unreached('ready promise was fulfilled'); assert_unreached('ready promise was fulfilled');
})).catch(t.step_func(function(err) { })).catch(t.step_func(function(err) {
assert_equals(err.name, 'AbortError', assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError'); 'ready promise is rejected with AbortError');
assert_equals(player.playState, 'idle', assert_equals(animation.playState, 'idle',
'Player is idle after transition was cancelled'); 'Animation is idle after transition was cancelled');
})).then(t.step_func(function() { })).then(t.step_func(function() {
t.done(); t.done();
})); }));

121
dom/animation/test/css-transitions/test_animation-player-starttime.html
Просмотреть файл

@ -3,7 +3,7 @@
<head> <head>
<meta charset=utf-8> <meta charset=utf-8>
<title>Tests for the effect of setting a CSS transition's <title>Tests for the effect of setting a CSS transition's
AnimationPlayer.startTime</title> Animation.startTime</title>
<style> <style>
.animated-div { .animated-div {
@ -191,17 +191,17 @@ function EventWatcher(watchedNode, eventTypes)
// active interval. (If there is no delay, they are the same.) // active interval. (If there is no delay, they are the same.)
// Called when the ready Promise's callbacks should happen // Called when the ready Promise's callbacks should happen
function checkStateOnReadyPromiseResolved(player) function checkStateOnReadyPromiseResolved(animation)
{ {
assert_less_than_equal(player.startTime, player.timeline.currentTime, assert_less_than_equal(animation.startTime, animation.timeline.currentTime,
'AnimationPlayer.startTime should be less than the timeline\'s ' + 'Animation.startTime should be less than the timeline\'s ' +
'currentTime on the first paint tick after animation creation'); 'currentTime on the first paint tick after animation creation');
assert_equals(player.playState, 'running', assert_equals(animation.playState, 'running',
'AnimationPlayer.playState should be "running" on the first paint ' + 'Animation.playState should be "running" on the first paint ' +
'tick after animation creation'); 'tick after animation creation');
var div = player.source.target; var div = animation.source.target;
var marginLeft = parseFloat(getComputedStyle(div).marginLeft); var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
assert_equals(marginLeft, INITIAL_POSITION, assert_equals(marginLeft, INITIAL_POSITION,
'the computed value of margin-left should be unaffected ' + 'the computed value of margin-left should be unaffected ' +
@ -209,26 +209,26 @@ function checkStateOnReadyPromiseResolved(player)
} }
// Called when startTime is set to the time the active interval starts. // Called when startTime is set to the time the active interval starts.
function checkStateAtActiveIntervalStartTime(player) function checkStateAtActiveIntervalStartTime(animation)
{ {
// We don't test player.startTime since our caller just set it. // We don't test animation.startTime since our caller just set it.
assert_equals(player.playState, 'running', assert_equals(animation.playState, 'running',
'AnimationPlayer.playState should be "running" at the start of ' + 'Animation.playState should be "running" at the start of ' +
'the active interval'); 'the active interval');
var div = player.source.target; var div = animation.source.target;
var marginLeft = parseFloat(getComputedStyle(div).marginLeft); var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
assert_between_inclusive(marginLeft, INITIAL_POSITION, TEN_PCT_POSITION, assert_between_inclusive(marginLeft, INITIAL_POSITION, TEN_PCT_POSITION,
'the computed value of margin-left should be close to the value at the ' + 'the computed value of margin-left should be close to the value at the ' +
'beginning of the animation'); 'beginning of the animation');
} }
function checkStateAtFiftyPctOfActiveInterval(player) function checkStateAtFiftyPctOfActiveInterval(animation)
{ {
// We don't test player.startTime since our caller just set it. // We don't test animation.startTime since our caller just set it.
var div = player.source.target; var div = animation.source.target;
var marginLeft = parseFloat(getComputedStyle(div).marginLeft); var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
assert_equals(marginLeft, FIFTY_PCT_POSITION, assert_equals(marginLeft, FIFTY_PCT_POSITION,
'the computed value of margin-left should be half way through the ' + 'the computed value of margin-left should be half way through the ' +
@ -236,15 +236,15 @@ function checkStateAtFiftyPctOfActiveInterval(player)
} }
// Called when startTime is set to the time the active interval ends. // Called when startTime is set to the time the active interval ends.
function checkStateAtActiveIntervalEndTime(player) function checkStateAtActiveIntervalEndTime(animation)
{ {
// We don't test player.startTime since our caller just set it. // We don't test animation.startTime since our caller just set it.
assert_equals(player.playState, 'finished', assert_equals(animation.playState, 'finished',
'AnimationPlayer.playState should be "finished" at the end of ' + 'Animation.playState should be "finished" at the end of ' +
'the active interval'); 'the active interval');
var div = player.source.target; var div = animation.source.target;
var marginLeft = parseFloat(getComputedStyle(div).marginLeft); var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
assert_equals(marginLeft, END_POSITION, assert_equals(marginLeft, END_POSITION,
'the computed value of margin-left should be the final transitioned-to ' + 'the computed value of margin-left should be the final transitioned-to ' +
@ -257,8 +257,8 @@ test(function(t)
flushComputedStyle(div); flushComputedStyle(div);
div.style.marginLeft = '200px'; // initiate transition div.style.marginLeft = '200px'; // initiate transition
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
assert_equals(player.startTime, null, 'startTime is unresolved'); assert_equals(animation.startTime, null, 'startTime is unresolved');
}, 'startTime of a newly created transition is unresolved'); }, 'startTime of a newly created transition is unresolved');
@ -268,10 +268,10 @@ test(function(t)
flushComputedStyle(div); flushComputedStyle(div);
div.style.marginLeft = '200px'; // initiate transition div.style.marginLeft = '200px'; // initiate transition
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
var currentTime = player.timeline.currentTime; var currentTime = animation.timeline.currentTime;
player.startTime = currentTime; animation.startTime = currentTime;
assert_approx_equals(player.startTime, currentTime, 0.0001, // rounding error assert_approx_equals(animation.startTime, currentTime, 0.0001, // rounding error
'Check setting of startTime actually works'); 'Check setting of startTime actually works');
}, 'Sanity test to check round-tripping assigning to new animation\'s ' + }, 'Sanity test to check round-tripping assigning to new animation\'s ' +
'startTime'); 'startTime');
@ -284,22 +284,22 @@ async_test(function(t) {
flushComputedStyle(div); flushComputedStyle(div);
div.style.marginLeft = '200px'; // initiate transition div.style.marginLeft = '200px'; // initiate transition
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
checkStateOnReadyPromiseResolved(player); checkStateOnReadyPromiseResolved(animation);
player.startTime = startTimeForStartOfActiveInterval(player.timeline); animation.startTime = startTimeForStartOfActiveInterval(animation.timeline);
checkStateAtActiveIntervalStartTime(player); checkStateAtActiveIntervalStartTime(animation);
player.startTime = animation.startTime =
startTimeForFiftyPercentThroughActiveInterval(player.timeline); startTimeForFiftyPercentThroughActiveInterval(animation.timeline);
checkStateAtFiftyPctOfActiveInterval(player); checkStateAtFiftyPctOfActiveInterval(animation);
player.startTime = startTimeForEndOfActiveInterval(player.timeline); animation.startTime = startTimeForEndOfActiveInterval(animation.timeline);
return eventWatcher.waitForEvent('transitionend'); return eventWatcher.waitForEvent('transitionend');
})).then(t.step_func(function() { })).then(t.step_func(function() {
checkStateAtActiveIntervalEndTime(player); checkStateAtActiveIntervalEndTime(animation);
eventWatcher.stopWatching(); eventWatcher.stopWatching();
})).catch(t.step_func(function(reason) { })).catch(t.step_func(function(reason) {
@ -317,17 +317,18 @@ test(function(t) {
flushComputedStyle(div); flushComputedStyle(div);
div.style.marginLeft = '200px'; // initiate transition div.style.marginLeft = '200px'; // initiate transition
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
// Unlike in the case of CSS animations, we cannot skip to the end and skip // Unlike in the case of CSS animations, we cannot skip to the end and skip
// backwards since when we reach the end the transition effect is removed and // backwards since when we reach the end the transition effect is removed and
// changes to the AnimationPlayer object no longer affect the element. For // changes to the Animation object no longer affect the element. For
// this reason we only skip forwards as far as the 90% through point. // this reason we only skip forwards as far as the 90% through point.
player.startTime = startTimeForFiftyPercentThroughActiveInterval(player.timeline); animation.startTime =
checkStateAtFiftyPctOfActiveInterval(player); startTimeForFiftyPercentThroughActiveInterval(animation.timeline);
checkStateAtFiftyPctOfActiveInterval(animation);
player.startTime = startTimeForStartOfActiveInterval(player.timeline); animation.startTime = startTimeForStartOfActiveInterval(animation.timeline);
// Despite going backwards from being in the active interval to being before // Despite going backwards from being in the active interval to being before
// it, we now expect an 'animationend' event because the animation should go // it, we now expect an 'animationend' event because the animation should go
@ -341,7 +342,7 @@ test(function(t) {
eventWatcher.stopWatching(); eventWatcher.stopWatching();
t.done(); t.done();
}); });
checkStateAtActiveIntervalStartTime(player); checkStateAtActiveIntervalStartTime(animation);
}, 'Skipping backwards through transition'); }, 'Skipping backwards through transition');
@ -351,18 +352,18 @@ async_test(function(t) {
flushComputedStyle(div); flushComputedStyle(div);
div.style.marginLeft = '200px'; // initiate transition div.style.marginLeft = '200px'; // initiate transition
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
var storedCurrentTime; var storedCurrentTime;
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
storedCurrentTime = player.currentTime; storedCurrentTime = animation.currentTime;
player.startTime = null; animation.startTime = null;
return player.ready; return animation.ready;
})).catch(t.step_func(function(reason) { })).catch(t.step_func(function(reason) {
assert_unreached(reason); assert_unreached(reason);
})).then(function() { })).then(function() {
assert_equals(player.currentTime, storedCurrentTime, assert_equals(animation.currentTime, storedCurrentTime,
'Test that hold time is correct'); 'Test that hold time is correct');
t.done(); t.done();
}); });
@ -375,27 +376,27 @@ async_test(function(t) {
flushComputedStyle(div); flushComputedStyle(div);
div.style.marginLeft = '200px'; // initiate transition div.style.marginLeft = '200px'; // initiate transition
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
var savedStartTime = player.startTime; var savedStartTime = animation.startTime;
assert_not_equals(player.startTime, null, assert_not_equals(animation.startTime, null,
'AnimationPlayer.startTime not null on ready Promise resolve'); 'Animation.startTime not null on ready Promise resolve');
player.pause(); animation.pause();
return player.ready; return animation.ready;
})).then(t.step_func(function() { })).then(t.step_func(function() {
assert_equals(player.startTime, null, assert_equals(animation.startTime, null,
'AnimationPlayer.startTime is null after paused'); 'Animation.startTime is null after paused');
assert_equals(player.playState, 'paused', assert_equals(animation.playState, 'paused',
'AnimationPlayer.playState is "paused" after pause() call'); 'Animation.playState is "paused" after pause() call');
})).catch(t.step_func(function(reason) { })).catch(t.step_func(function(reason) {
assert_unreached(reason); assert_unreached(reason);
})).then(function() { })).then(function() {
t.done(); t.done();
}); });
}, 'AnimationPlayer.startTime after paused'); }, 'Animation.startTime after paused');
</script> </script>
</body> </body>

4
dom/animation/test/css-transitions/test_animation-target.html
Просмотреть файл

@ -15,8 +15,8 @@ test(function(t) {
div.style.transition = 'left 100s'; div.style.transition = 'left 100s';
div.style.left = '100px'; div.style.left = '100px';
var players = div.getAnimationPlayers(); var animation = div.getAnimations()[0];
assert_equals(players[0].source.target, div, assert_equals(animation.source.target, div,
'Animation.target is the animatable div'); 'Animation.target is the animatable div');
}, 'Returned CSS transitions have the correct Animation.target'); }, 'Returned CSS transitions have the correct Animation.target');

44
dom/animation/test/css-transitions/test_element-get-animation-players.html
Просмотреть файл

@ -19,38 +19,38 @@ async_test(function(t) {
div.style.left = '100px'; div.style.left = '100px';
div.style.top = '100px'; div.style.top = '100px';
var players = div.getAnimationPlayers(); var animations = div.getAnimations();
assert_equals(players.length, 2, assert_equals(animations.length, 2,
'getAnimationPlayers() returns one player per transitioning property'); 'getAnimations() returns one Animation per transitioning property');
waitForAllPlayers(players).then(t.step_func(function() { waitForAllAnimations(animations).then(t.step_func(function() {
var startTime = players[0].startTime; var startTime = animations[0].startTime;
assert_true(startTime > 0 && startTime <= document.timeline.currentTime, assert_true(startTime > 0 && startTime <= document.timeline.currentTime,
'CSS transitions have sensible start times'); 'CSS transitions have sensible start times');
assert_equals(players[0].startTime, players[1].startTime, assert_equals(animations[0].startTime, animations[1].startTime,
'CSS transitions started together have the same start time'); 'CSS transitions started together have the same start time');
// Wait a moment then add a third transition // Wait a moment then add a third transition
return waitForFrame(); return waitForFrame();
})).then(t.step_func(function() { })).then(t.step_func(function() {
div.style.backgroundColor = 'green'; div.style.backgroundColor = 'green';
players = div.getAnimationPlayers(); animations = div.getAnimations();
assert_equals(players.length, 3, assert_equals(animations.length, 3,
'getAnimationPlayers returns players for all running CSS Transitions'); 'getAnimations returns Animations for all running CSS Transitions');
return waitForAllPlayers(players); return waitForAllAnimations(animations);
})).then(t.step_func(function() { })).then(t.step_func(function() {
assert_true(players[1].startTime < players[2].startTime, assert_true(animations[1].startTime < animations[2].startTime,
'Player for additional CSS transition starts after the original' 'Animation for additional CSS transition starts after the original'
+ ' transitions and appears later in the list'); + ' transitions and appears later in the list');
t.done(); t.done();
})); }));
}, 'getAnimationPlayers for CSS Transitions'); }, 'getAnimations for CSS Transitions');
async_test(function(t) { async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
// Set up event listener // Set up event listener
div.addEventListener('transitionend', t.step_func(function() { div.addEventListener('transitionend', t.step_func(function() {
assert_equals(div.getAnimationPlayers().length, 0, assert_equals(div.getAnimations().length, 0,
'getAnimationPlayers does not return finished CSS Transitions'); 'getAnimations does not return finished CSS Transitions');
t.done(); t.done();
})); }));
@ -61,7 +61,7 @@ async_test(function(t) {
div.style.transition = 'all 0.01s'; div.style.transition = 'all 0.01s';
div.style.left = '100px'; div.style.left = '100px';
window.getComputedStyle(div).left; window.getComputedStyle(div).left;
}, 'getAnimationPlayers for CSS Transitions that have finished'); }, 'getAnimations for CSS Transitions that have finished');
test(function(t) { test(function(t) {
var div = addDiv(t); var div = addDiv(t);
@ -73,10 +73,10 @@ test(function(t) {
div.style.transition = 'all 100s'; div.style.transition = 'all 100s';
div.style.animationDuration = '100s'; div.style.animationDuration = '100s';
assert_equals(div.getAnimationPlayers().length, 0, assert_equals(div.getAnimations().length, 0,
'getAnimationPlayers returns an empty sequence for a transition' 'getAnimations returns an empty sequence for a transition'
+ ' of a non-animatable property'); + ' of a non-animatable property');
}, 'getAnimationPlayers for transition on non-animatable property'); }, 'getAnimations for transition on non-animatable property');
test(function(t) { test(function(t) {
var div = addDiv(t); var div = addDiv(t);
@ -86,9 +86,9 @@ test(function(t) {
div.style.transition = 'all 100s'; div.style.transition = 'all 100s';
div.style.setProperty('-vendor-unsupported', '100px', ''); div.style.setProperty('-vendor-unsupported', '100px', '');
assert_equals(div.getAnimationPlayers().length, 0, assert_equals(div.getAnimations().length, 0,
'getAnimationPlayers returns an empty sequence for a transition' 'getAnimations returns an empty sequence for a transition'
+ ' of an unsupported property'); + ' of an unsupported property');
}, 'getAnimationPlayers for transition on unsupported property'); }, 'getAnimations for transition on unsupported property');
</script> </script>

10
dom/animation/test/mozilla/test_deferred_start.html
Просмотреть файл

@ -52,9 +52,9 @@ async_test(function(t) {
var promiseCallbackDone = false; var promiseCallbackDone = false;
waitForDocLoad().then(function() { waitForDocLoad().then(function() {
div.style.animation = 'empty 1000s'; div.style.animation = 'empty 1000s';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.ready.then(function() { animation.ready.then(function() {
promiseCallbackDone = true; promiseCallbackDone = true;
}).catch(function() { }).catch(function() {
assert_unreached('ready promise was rejected'); assert_unreached('ready promise was rejected');
@ -74,7 +74,7 @@ async_test(function(t) {
+ ' within three animation frames'); + ' within three animation frames');
t.done(); t.done();
})); }));
}, 'AnimationPlayer.ready is resolved for an empty animation'); }, 'Animation.ready is resolved for an empty animation');
// Test that compositor animations with delays get synced correctly // Test that compositor animations with delays get synced correctly
// //
@ -95,9 +95,9 @@ async_test(function(t) {
var div = addDiv(t); var div = addDiv(t);
div.classList.add('target'); div.classList.add('target');
div.style.animation = 'animTransform 100s -50s forwards'; div.style.animation = 'animTransform 100s -50s forwards';
var player = div.getAnimationPlayers()[0]; var animation = div.getAnimations()[0];
player.ready.then(t.step_func(function() { animation.ready.then(t.step_func(function() {
var transformStr = var transformStr =
SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform'); SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');

10
dom/animation/test/testcommon.js
Просмотреть файл

@ -39,12 +39,14 @@ function waitForFrame() {
} }
/** /**
* Wrapper that takes a sequence of N players and returns: * Wrapper that takes a sequence of N animations and returns:
* *
* Promise.all([players[0].ready, players[1].ready, ... players[N-1].ready]); * Promise.all([animations[0].ready, animations[1].ready, ... animations[N-1].ready]);
*/ */
function waitForAllPlayers(players) { function waitForAllAnimations(animations) {
return Promise.all(players.map(function(player) { return player.ready; })); return Promise.all(animations.map(function(animation) {
return animation.ready;
}));
} }
/** /**