mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-20 16:55:40 +00:00
Bug 1256503 - Part 1: Use MS_PER_SEC instead of human-misreadable digits in animation tests. r=dholbert
MozReview-Commit-ID: CtMF84ExBLa --HG-- extra : rebase_source : 116e9a14d5fb77c6d24ccb1e3dcdf69a7d4ce2d0
This commit is contained in:
Hiroyuki Ikezoe
parent
df0d701836
commit
75228bfa24
@ -19,7 +19,7 @@ var win = document.getElementById('iframe').contentWindow;
|
||||
async_test(function(t) {
|
||||
window.addEventListener('load', t.step_func(function() {
|
||||
var target = win.document.getElementById('target');
|
||||
var anim = target.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
var anim = target.animate({ opacity: [ 0, 1 ] }, 2 * MS_PER_SEC);
|
||||
// In the x-ray case, the frames object will be given an opaque wrapper
|
||||
// so it won't be possible to fetch any frames from it.
|
||||
assert_equals(anim.effect.getFrames().length, 0);
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
<title>Test chrome-only MutationObserver animation notifications</title>
|
||||
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
|
||||
<script src="../testcommon.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
|
||||
<style>
|
||||
@keyframes anim {
|
||||
@ -328,7 +329,7 @@ function assert_records(expected, desc) {
|
||||
// Wait for the Animation to be playing, then seek well into
|
||||
// the transition.
|
||||
yield firstAnimation.ready;
|
||||
firstAnimation.currentTime = 50000;
|
||||
firstAnimation.currentTime = 50 * MS_PER_SEC;
|
||||
|
||||
// Reverse the transition by setting the background-color back to its
|
||||
// original value.
|
||||
@ -388,7 +389,7 @@ function assert_records(expected, desc) {
|
||||
"number of running Animations");
|
||||
|
||||
// Seek well into each animation.
|
||||
animations.forEach(p => p.currentTime = 50000);
|
||||
animations.forEach(p => p.currentTime = 50 * MS_PER_SEC);
|
||||
|
||||
// Prepare the set of expected change MutationRecords, one for each
|
||||
// animation that was seeked.
|
||||
@ -511,7 +512,7 @@ function assert_records(expected, desc) {
|
||||
"records after animation start");
|
||||
|
||||
// Advance the animation by a second.
|
||||
animations[0].currentTime += 1000;
|
||||
animations[0].currentTime += 1 * MS_PER_SEC;
|
||||
|
||||
// Cancel the animation by setting animation-duration to a value less
|
||||
// than a second.
|
||||
@ -617,7 +618,7 @@ function assert_records(expected, desc) {
|
||||
"records after animation start");
|
||||
|
||||
// Advance the animation until we are past the first iteration.
|
||||
animations[0].currentTime += 1000;
|
||||
animations[0].currentTime += 1 * MS_PER_SEC;
|
||||
|
||||
// The only MutationRecord at this point should be the change from
|
||||
// seeking the Animation.
|
||||
@ -724,8 +725,8 @@ function assert_records(expected, desc) {
|
||||
// notification.
|
||||
[
|
||||
{ prop: "playbackRate", val: 0.5 },
|
||||
{ prop: "startTime", val: 50000 },
|
||||
{ prop: "currentTime", val: 50000 },
|
||||
{ prop: "startTime", val: 50 * MS_PER_SEC },
|
||||
{ prop: "currentTime", val: 50 * MS_PER_SEC },
|
||||
].forEach(function(aChangeTest) {
|
||||
addAsyncAnimTest(`single_animation_api_change_${aChangeTest.prop}`,
|
||||
aOptions, function*() {
|
||||
@ -887,7 +888,7 @@ function assert_records(expected, desc) {
|
||||
"records after animation start");
|
||||
|
||||
// Seek to the middle and set playbackRate to zero.
|
||||
animations[0].currentTime = 50000;
|
||||
animations[0].currentTime = 50 * MS_PER_SEC;
|
||||
animations[0].playbackRate = 0;
|
||||
|
||||
// Wait for the MutationRecords, one for each change, to be delivered.
|
||||
@ -1524,27 +1525,27 @@ addAsyncAnimTest("tree_ordering", { observe: div, subtree: true }, function*() {
|
||||
[ div, pseudoTarget ].forEach(function(target) {
|
||||
addAsyncAnimTest("change_duration_and_currenttime",
|
||||
{ observe: div, subtree: true }, function*() {
|
||||
var anim = target.animate({ opacity: [ 0, 1 ] }, 100000);
|
||||
var anim = target.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
|
||||
|
||||
yield await_frame();
|
||||
assert_records([{ added: [anim], changed: [], removed: [] }],
|
||||
"records after animation is added");
|
||||
|
||||
anim.effect.timing.duration = 10000;
|
||||
anim.effect.timing.duration = 10 * MS_PER_SEC;
|
||||
yield await_frame();
|
||||
assert_records([{ added: [], changed: [anim], removed: [] }],
|
||||
"records after duration is changed");
|
||||
|
||||
anim.effect.timing.duration = 10000;
|
||||
anim.effect.timing.duration = 10 * MS_PER_SEC;
|
||||
yield await_frame();
|
||||
assert_records([], "records after assigning same value");
|
||||
|
||||
anim.currentTime = 50000;
|
||||
anim.currentTime = 50 * MS_PER_SEC;
|
||||
yield await_frame();
|
||||
assert_records([{ added: [], changed: [], removed: [anim] }],
|
||||
"records after animation end");
|
||||
|
||||
anim.effect.timing.duration = 100000;
|
||||
anim.effect.timing.duration = 100 * MS_PER_SEC;
|
||||
yield await_frame();
|
||||
assert_records([{ added: [anim], changed: [], removed: [] }],
|
||||
"records after animation restarted");
|
||||
@ -1565,27 +1566,27 @@ addAsyncAnimTest("tree_ordering", { observe: div, subtree: true }, function*() {
|
||||
|
||||
addAsyncAnimTest("change_enddelay_and_currenttime",
|
||||
{ observe: div, subtree: true }, function*() {
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, { duration: 100000 });
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, { duration: 100 * MS_PER_SEC });
|
||||
|
||||
yield await_frame();
|
||||
assert_records([{ added: [anim], changed: [], removed: [] }],
|
||||
"records after animation is added");
|
||||
|
||||
anim.effect.timing.endDelay = 10000;
|
||||
anim.effect.timing.endDelay = 10 * MS_PER_SEC;
|
||||
yield await_frame();
|
||||
assert_records([{ added: [], changed: [anim], removed: [] }],
|
||||
"records after endDelay is changed");
|
||||
|
||||
anim.effect.timing.endDelay = 10000;
|
||||
anim.effect.timing.endDelay = 10 * MS_PER_SEC;
|
||||
yield await_frame();
|
||||
assert_records([], "records after assigning same value");
|
||||
|
||||
anim.currentTime = 109000;
|
||||
anim.currentTime = 109 * MS_PER_SEC;
|
||||
yield await_frame();
|
||||
assert_records([{ added: [], changed: [], removed: [anim] }],
|
||||
"records after currentTime during endDelay");
|
||||
|
||||
anim.effect.timing.endDelay = -110000;
|
||||
anim.effect.timing.endDelay = -110 * MS_PER_SEC;
|
||||
yield await_frame();
|
||||
assert_records([], "records after assigning negative value");
|
||||
|
||||
@ -1603,7 +1604,7 @@ addAsyncAnimTest("change_enddelay_and_currenttime",
|
||||
|
||||
addAsyncAnimTest("change_iterations",
|
||||
{ observe: div, subtree: true }, function*() {
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 100000);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
|
||||
|
||||
yield await_frame();
|
||||
assert_records([{ added: [anim], changed: [], removed: [] }],
|
||||
@ -1636,8 +1637,10 @@ addAsyncAnimTest("change_iterations",
|
||||
|
||||
addAsyncAnimTest("exclude_animations_targeting_pseudo_elements",
|
||||
{ observe: div, subtree: false }, function*() {
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, { duration: 100000 });
|
||||
var pAnim = pseudoTarget.animate({ opacity: [ 0, 1 ] }, { duration: 100000 });
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] },
|
||||
{ duration: 100 * MS_PER_SEC });
|
||||
var pAnim = pseudoTarget.animate({ opacity: [ 0, 1 ] },
|
||||
{ duration: 100 * MS_PER_SEC });
|
||||
|
||||
yield await_frame();
|
||||
assert_records([{ added: [anim], changed: [], removed: [] }],
|
||||
|
||||
@ -216,7 +216,7 @@ var gAnimationsTests = [
|
||||
gAnimationsTests.forEach(function(subtest) {
|
||||
promise_test(function(t) {
|
||||
var div = addDiv(t, { class: 'compositable' });
|
||||
var animation = div.animate(subtest.frames, 100000);
|
||||
var animation = div.animate(subtest.frames, 100 * MS_PER_SEC);
|
||||
return animation.ready.then(function() {
|
||||
assert_animation_property_state_equals(
|
||||
animation.effect.getProperties(),
|
||||
@ -502,7 +502,7 @@ function start() {
|
||||
gAnimationsTests.forEach(function(subtest) {
|
||||
promise_test(function(t) {
|
||||
var div = addDiv(t, { class: 'compositable' });
|
||||
var animation = div.animate(subtest.frames, 100000);
|
||||
var animation = div.animate(subtest.frames, 100 * MS_PER_SEC);
|
||||
return animation.ready.then(function() {
|
||||
assert_animation_property_state_equals(
|
||||
animation.effect.getProperties(),
|
||||
@ -514,7 +514,7 @@ function start() {
|
||||
gPerformanceWarningTests.forEach(function(subtest) {
|
||||
promise_test(function(t) {
|
||||
var div = addDiv(t, { class: 'compositable' });
|
||||
var animation = div.animate(subtest.frames, 100000);
|
||||
var animation = div.animate(subtest.frames, 100 * MS_PER_SEC);
|
||||
return animation.ready.then(function() {
|
||||
assert_property_state_on_compositor(
|
||||
animation.effect.getProperties(),
|
||||
@ -539,7 +539,7 @@ function start() {
|
||||
promise_test(function(t) {
|
||||
var div = addDiv(t, { class: 'compositable' });
|
||||
var animations = subtest.animations.map(function(anim) {
|
||||
var animation = div.animate(anim.frames, 100000);
|
||||
var animation = div.animate(anim.frames, 100 * MS_PER_SEC);
|
||||
|
||||
// Bind expected values to animation object.
|
||||
animation.expected = anim.expected;
|
||||
@ -575,7 +575,7 @@ function start() {
|
||||
promise_test(function(t) {
|
||||
var div = addDiv(t, { class: 'compositable' });
|
||||
var animations = subtest.animations.map(function(anim) {
|
||||
var animation = div.animate(anim.frames, 100000);
|
||||
var animation = div.animate(anim.frames, 100 * MS_PER_SEC);
|
||||
|
||||
// Bind expected values to animation object.
|
||||
animation.expected = anim.expected;
|
||||
@ -595,7 +595,7 @@ function start() {
|
||||
promise_test(function(t) {
|
||||
var div = addDiv(t, { class: 'compositable' });
|
||||
var animations = subtest.animations.map(function(anim) {
|
||||
var animation = div.animate(anim.frames, 100000);
|
||||
var animation = div.animate(anim.frames, 100 * MS_PER_SEC);
|
||||
|
||||
// Bind expected values to animation object.
|
||||
animation.expected = anim.expected;
|
||||
@ -612,7 +612,8 @@ function start() {
|
||||
});
|
||||
}).then(function() {
|
||||
// Append 'width' animation on the same element.
|
||||
widthAnimation = div.animate({ width: ['100px', '200px'] }, 100000);
|
||||
widthAnimation = div.animate({ width: ['100px', '200px'] },
|
||||
100 * MS_PER_SEC);
|
||||
return waitForFrame();
|
||||
}).then(function() {
|
||||
// Now transform animations are not running on compositor because of
|
||||
@ -639,7 +640,7 @@ function start() {
|
||||
promise_test(function(t) {
|
||||
var div = addDiv(t, { class: 'compositable' });
|
||||
var animation = div.animate(
|
||||
{ transform: ['translate(0px)', 'translate(100px)'] }, 100000);
|
||||
{ transform: ['translate(0px)', 'translate(100px)'] }, 100 * MS_PER_SEC);
|
||||
return animation.ready.then(function() {
|
||||
assert_animation_property_state_equals(
|
||||
animation.effect.getProperties(),
|
||||
@ -684,7 +685,7 @@ function start() {
|
||||
});
|
||||
|
||||
var animation = svg.animate(
|
||||
{ transform: ['translate(0px)', 'translate(100px)'] }, 100000);
|
||||
{ transform: ['translate(0px)', 'translate(100px)'] }, 100 * MS_PER_SEC);
|
||||
return animation.ready.then(function() {
|
||||
assert_animation_property_state_equals(
|
||||
animation.effect.getProperties(),
|
||||
@ -712,7 +713,7 @@ function start() {
|
||||
var div = addDiv(t, { class: 'compositable',
|
||||
style: 'animation: fade 100s' });
|
||||
var cssAnimation = div.getAnimations()[0];
|
||||
var scriptAnimation = div.animate({ opacity: [ 1, 0 ] }, 100000);
|
||||
var scriptAnimation = div.animate({ opacity: [ 1, 0 ] }, 100 * MS_PER_SEC);
|
||||
return scriptAnimation.ready.then(function() {
|
||||
assert_animation_property_state_equals(
|
||||
cssAnimation.effect.getProperties(),
|
||||
|
||||
@ -493,7 +493,7 @@ var gTests = [
|
||||
gTests.forEach(function(subtest) {
|
||||
test(function(t) {
|
||||
var div = addDiv(t);
|
||||
var animation = div.animate(subtest.frames, 1000);
|
||||
var animation = div.animate(subtest.frames, 1 * MS_PER_SEC);
|
||||
assert_properties_equal(animation.effect.getProperties(),
|
||||
subtest.expected);
|
||||
}, subtest.desc);
|
||||
|
||||
@ -337,7 +337,7 @@ waitForAllPaints(function() {
|
||||
|
||||
yield animation.ready;
|
||||
|
||||
animation.currentTime = 50000; // 50s
|
||||
animation.currentTime = 50 * MS_PER_SEC;
|
||||
|
||||
var markers = yield observeStyling(5);
|
||||
is(markers.length, 1,
|
||||
@ -348,19 +348,19 @@ waitForAllPaints(function() {
|
||||
|
||||
add_task_if_omta_enabled(function* change_duration_and_currenttime() {
|
||||
var div = addDiv(null);
|
||||
var animation = div.animate({ opacity: [ 0, 1 ] }, 100000); //100s
|
||||
var animation = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
|
||||
|
||||
yield animation.ready;
|
||||
ok(animation.isRunningOnCompositor);
|
||||
|
||||
// Set currentTime to a time longer than duration.
|
||||
animation.currentTime = 500000; // 500s
|
||||
animation.currentTime = 500 * MS_PER_SEC;
|
||||
|
||||
// Now the animation immediately get back from compositor.
|
||||
ok(!animation.isRunningOnCompositor);
|
||||
|
||||
// Extend the duration.
|
||||
animation.effect.timing.duration = 800000; // 800s
|
||||
animation.effect.timing.duration = 800 * MS_PER_SEC;
|
||||
var markers = yield observeStyling(5);
|
||||
is(markers.length, 1,
|
||||
'Animations running on the compositor should update style ' +
|
||||
|
||||
@ -128,7 +128,7 @@ promise_test(function(t) {
|
||||
var animation = div.getAnimations()[0];
|
||||
|
||||
return animation.ready.then(t.step_func(function() {
|
||||
animation.currentTime = 100000; // 100s
|
||||
animation.currentTime = 100 * MS_PER_SEC;
|
||||
assert_equals(animation.isRunningOnCompositor, false,
|
||||
'Animation reports that it is NOT running on the compositor'
|
||||
+ ' immediately after manually seeking the animation to the end');
|
||||
@ -287,14 +287,14 @@ promise_test(function(t) {
|
||||
|
||||
promise_test(function(t) {
|
||||
var div = addDiv(t);
|
||||
var animation = div.animate({ opacity: [ 0, 1 ] }, 100000); // 100s
|
||||
var animation = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
|
||||
|
||||
return animation.ready.then(t.step_func(function() {
|
||||
assert_equals(animation.isRunningOnCompositor, omtaEnabled,
|
||||
'Animation reports that it is running on the compositor');
|
||||
|
||||
animation.currentTime = 50000; // 50s
|
||||
animation.effect.timing.duration = 10000; // 10s
|
||||
animation.currentTime = 50 * MS_PER_SEC;
|
||||
animation.effect.timing.duration = 10 * MS_PER_SEC;
|
||||
|
||||
assert_equals(animation.isRunningOnCompositor, false,
|
||||
'Animation reports that it is NOT running on the compositor'
|
||||
@ -305,19 +305,19 @@ promise_test(function(t) {
|
||||
|
||||
promise_test(function(t) {
|
||||
var div = addDiv(t);
|
||||
var animation = div.animate({ opacity: [ 0, 1 ] }, 100000); // 100s
|
||||
var animation = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
|
||||
|
||||
return animation.ready.then(t.step_func(function() {
|
||||
assert_equals(animation.isRunningOnCompositor, omtaEnabled,
|
||||
'Animation reports that it is running on the compositor');
|
||||
|
||||
animation.currentTime = 500000; // 500s
|
||||
animation.currentTime = 500 * MS_PER_SEC;
|
||||
|
||||
assert_equals(animation.isRunningOnCompositor, false,
|
||||
'Animation reports that it is NOT running on the compositor'
|
||||
+ ' when finished');
|
||||
|
||||
animation.effect.timing.duration = 1000000; // 1000s
|
||||
animation.effect.timing.duration = 1000 * MS_PER_SEC;
|
||||
return waitForFrame();
|
||||
})).then(t.step_func(function() {
|
||||
assert_equals(animation.isRunningOnCompositor, omtaEnabled,
|
||||
@ -329,19 +329,19 @@ promise_test(function(t) {
|
||||
|
||||
promise_test(function(t) {
|
||||
var div = addDiv(t);
|
||||
var animation = div.animate({ opacity: [ 0, 1 ] }, 100000); // 100s
|
||||
var animation = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
|
||||
|
||||
return animation.ready.then(t.step_func(function() {
|
||||
assert_equals(animation.isRunningOnCompositor, omtaEnabled,
|
||||
'Animation reports that it is running on the compositor');
|
||||
|
||||
animation.effect.timing.endDelay = 100000; // 100s
|
||||
animation.effect.timing.endDelay = 100 * MS_PER_SEC;
|
||||
|
||||
assert_equals(animation.isRunningOnCompositor, omtaEnabled,
|
||||
'Animation reports that it is running on the compositor'
|
||||
+ ' when endDelay is changed');
|
||||
|
||||
animation.currentTime = 110000; // 110s
|
||||
animation.currentTime = 110 * MS_PER_SEC;
|
||||
return waitForFrame();
|
||||
})).then(t.step_func(function() {
|
||||
assert_equals(animation.isRunningOnCompositor, false,
|
||||
@ -353,13 +353,13 @@ promise_test(function(t) {
|
||||
|
||||
promise_test(function(t) {
|
||||
var div = addDiv(t);
|
||||
var animation = div.animate({ opacity: [ 0, 1 ] }, 100000); // 100s
|
||||
var animation = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
|
||||
|
||||
return animation.ready.then(t.step_func(function() {
|
||||
assert_equals(animation.isRunningOnCompositor, omtaEnabled,
|
||||
'Animation reports that it is running on the compositor');
|
||||
|
||||
animation.effect.timing.endDelay = -200000; // -200s
|
||||
animation.effect.timing.endDelay = -200 * MS_PER_SEC;
|
||||
return waitForFrame();
|
||||
})).then(t.step_func(function() {
|
||||
assert_equals(animation.isRunningOnCompositor, false,
|
||||
@ -371,19 +371,19 @@ promise_test(function(t) {
|
||||
|
||||
promise_test(function(t) {
|
||||
var div = addDiv(t);
|
||||
var animation = div.animate({ opacity: [ 0, 1 ] }, 100000); // 100s
|
||||
var animation = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
|
||||
|
||||
return animation.ready.then(t.step_func(function() {
|
||||
assert_equals(animation.isRunningOnCompositor, omtaEnabled,
|
||||
'Animation reports that it is running on the compositor');
|
||||
|
||||
animation.effect.timing.endDelay = -50000; // 50s
|
||||
animation.effect.timing.endDelay = -50 * MS_PER_SEC;
|
||||
return waitForFrame();
|
||||
})).then(t.step_func(function() {
|
||||
assert_equals(animation.isRunningOnCompositor, omtaEnabled,
|
||||
'Animation reports that it is running on the compositor'
|
||||
+ ' when endTime is positive and endDelay is negative');
|
||||
animation.currentTime = 60000; // 60s
|
||||
animation.currentTime = 60 * MS_PER_SEC;
|
||||
return waitForFrame();
|
||||
})).then(t.step_func(function() {
|
||||
assert_equals(animation.isRunningOnCompositor, false,
|
||||
|
||||
@ -1,6 +1,20 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
* http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Use this variable if you specify duration or some other properties
|
||||
* for script animation.
|
||||
* E.g., div.animate({ opacity: [0, 1] }, 100 * MS_PER_SEC);
|
||||
*
|
||||
* NOTE: Creating animations with short duration may cause intermittent
|
||||
* failures in asynchronous test. For example, the short duration animation
|
||||
* might be finished when animation.ready has been fulfilled because of slow
|
||||
* platforms or busyness of the main thread.
|
||||
* Setting short duration to cancel its animation does not matter but
|
||||
* if you don't want to cancel the animation, consider using longer duration.
|
||||
*/
|
||||
const MS_PER_SEC = 1000;
|
||||
|
||||
/**
|
||||
* Appends a div to the document body.
|
||||
*
|
||||
|
||||
Loading…
Reference in New Issue
Block a user