--- a/dom/animation/test/chrome/test_animation_performance_warning.html
+++ b/dom/animation/test/chrome/test_animation_performance_warning.html
@@ -173,20 +173,20 @@ function testBasicOperation() {
},
{
property: 'opacity',
runningOnCompositor: true
}
]
},
].forEach(subtest => {
- promise_test(function(t) {
+ promise_test(t => {
var animation = addDivAndAnimate(t, { class: 'compositable' },
subtest.frames, 100 * MS_PER_SEC);
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_animation_property_state_equals(
animation.effect.getProperties(),
subtest.expected);
});
}, subtest.desc);
});
}
@@ -248,49 +248,49 @@ function testKeyframesWithGeometricPrope
property: 'transform',
runningOnCompositor: false,
warning: 'CompositorAnimationWarningTransformWithGeometricProperties'
}
]
}
},
].forEach(subtest => {
- promise_test(function(t) {
+ promise_test(t => {
var animation = addDivAndAnimate(t, { class: 'compositable' },
subtest.frames, 100 * MS_PER_SEC);
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
// First, a transform animation is running on compositor.
assert_animation_property_state_equals(
animation.effect.getProperties(),
subtest.expected.withoutGeometric);
- }).then(function() {
+ }).then(() => {
// Add a 'width' property.
var keyframes = animation.effect.getKeyframes();
keyframes[0].width = '100px';
keyframes[1].width = '200px';
animation.effect.setKeyframes(keyframes);
return waitForFrame();
- }).then(function() {
+ }).then(() => {
// Now the transform animation is not running on compositor because of
// the 'width' property.
assert_animation_property_state_equals(
animation.effect.getProperties(),
subtest.expected.withGeometric);
- }).then(function() {
+ }).then(() => {
// Remove the 'width' property.
var keyframes = animation.effect.getKeyframes();
delete keyframes[0].width;
delete keyframes[1].width;
animation.effect.setKeyframes(keyframes);
return waitForFrame();
- }).then(function() {
+ }).then(() => {
// Finally, the transform animation is running on compositor.
assert_animation_property_state_equals(
animation.effect.getProperties(),
subtest.expected.withoutGeometric);
});
}, 'An animation has: ' + subtest.desc);
});
}
@@ -301,25 +301,25 @@ function testSetOfGeometricProperties()
const geometricProperties = [
'width', 'height',
'top', 'right', 'bottom', 'left',
'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
];
geometricProperties.forEach(property => {
- promise_test(function(t) {
+ promise_test(t => {
const keyframes = {
[propertyToIDL(property)]: [ '100px', '200px' ],
transform: [ 'translate(0px)', 'translate(100px)' ]
};
var animation = addDivAndAnimate(t, { class: 'compositable' },
keyframes, 100 * MS_PER_SEC);
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_animation_property_state_equals(
animation.effect.getProperties(),
[
{
property,
runningOnCompositor: false
},
{
@@ -398,32 +398,32 @@ function testStyleChanges() {
{
property: 'transform',
runningOnCompositor: false,
warning: 'CompositorAnimationWarningTransformBackfaceVisibilityHidden'
}
]
},
].forEach(subtest => {
- promise_test(function(t) {
+ promise_test(t => {
var animation = addDivAndAnimate(t, { class: 'compositable' },
subtest.frames, 100 * MS_PER_SEC);
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_all_properties_running_on_compositor(
animation.effect.getProperties(),
subtest.expected);
animation.effect.target.style = subtest.style;
return waitForFrame();
- }).then(function() {
+ }).then(() => {
assert_animation_property_state_equals(
animation.effect.getProperties(),
subtest.expected);
animation.effect.target.style = '';
return waitForFrame();
- }).then(function() {
+ }).then(() => {
assert_all_properties_running_on_compositor(
animation.effect.getProperties(),
subtest.expected);
});
}, subtest.desc);
});
}
@@ -441,36 +441,36 @@ function testIdChanges() {
{
property: 'transform',
runningOnCompositor: false,
warning: 'CompositorAnimationWarningHasRenderingObserver'
}
]
},
].forEach(subtest => {
- promise_test(function(t) {
+ promise_test(t => {
if (subtest.createelement) {
addDiv(t, { style: subtest.createelement });
}
var animation = addDivAndAnimate(t, { class: 'compositable' },
subtest.frames, 100 * MS_PER_SEC);
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_all_properties_running_on_compositor(
animation.effect.getProperties(),
subtest.expected);
animation.effect.target.id = subtest.id;
return waitForFrame();
- }).then(function() {
+ }).then(() => {
assert_animation_property_state_equals(
animation.effect.getProperties(),
subtest.expected);
animation.effect.target.id = '';
return waitForFrame();
- }).then(function() {
+ }).then(() => {
assert_all_properties_running_on_compositor(
animation.effect.getProperties(),
subtest.expected);
});
}, subtest.desc);
});
}
@@ -530,42 +530,42 @@ function testMultipleAnimations() {
property: 'opacity',
runningOnCompositor: true,
}
]
}
],
},
].forEach(subtest => {
- promise_test(function(t) {
+ promise_test(t => {
var div = addDiv(t, { class: 'compositable' });
- var animations = subtest.animations.map(function(anim) {
+ var animations = subtest.animations.map(anim => {
var animation = div.animate(anim.frames, 100 * MS_PER_SEC);
// Bind expected values to animation object.
animation.expected = anim.expected;
return animation;
});
- return waitForAllAnimations(animations).then(function() {
+ return waitForAllAnimations(animations).then(() => {
animations.forEach(anim => {
assert_all_properties_running_on_compositor(
anim.effect.getProperties(),
anim.expected);
});
div.style = subtest.style;
return waitForFrame();
- }).then(function() {
+ }).then(() => {
animations.forEach(anim => {
assert_animation_property_state_equals(
anim.effect.getProperties(),
anim.expected);
});
div.style = '';
return waitForFrame();
- }).then(function() {
+ }).then(() => {
animations.forEach(anim => {
assert_all_properties_running_on_compositor(
anim.effect.getProperties(),
anim.expected);
});
});
}, 'Multiple animations: ' + subtest.desc);
});
@@ -668,59 +668,59 @@ function testMultipleAnimationsWithGeome
warning: 'CompositorAnimationWarningTransformWithGeometricProperties'
}
]
}
}
]
},
].forEach(subtest => {
- promise_test(function(t) {
+ promise_test(t => {
var div = addDiv(t, { class: 'compositable' });
- var animations = subtest.animations.map(function(anim) {
+ var animations = subtest.animations.map(anim => {
var animation = div.animate(anim.frames, 100 * MS_PER_SEC);
// Bind expected values to animation object.
animation.expected = anim.expected;
return animation;
});
- return waitForAllAnimations(animations).then(function() {
+ return waitForAllAnimations(animations).then(() => {
// First, all animations are running on compositor.
animations.forEach(anim => {
assert_animation_property_state_equals(
anim.effect.getProperties(),
anim.expected.withoutGeometric);
});
- }).then(function() {
+ }).then(() => {
// Add a 'width' property to animations[1].
var keyframes = animations[1].effect.getKeyframes();
keyframes[0].width = '100px';
keyframes[1].width = '200px';
animations[1].effect.setKeyframes(keyframes);
return waitForFrame();
- }).then(function() {
+ }).then(() => {
// Now the transform animation is not running on compositor because of
// the 'width' property.
animations.forEach(anim => {
assert_animation_property_state_equals(
anim.effect.getProperties(),
anim.expected.withGeometric);
});
- }).then(function() {
+ }).then(() => {
// Remove the 'width' property from animations[1].
var keyframes = animations[1].effect.getKeyframes();
delete keyframes[0].width;
delete keyframes[1].width;
animations[1].effect.setKeyframes(keyframes);
return waitForFrame();
- }).then(function() {
+ }).then(() => {
// Finally, all animations are running on compositor.
animations.forEach(anim => {
assert_animation_property_state_equals(
anim.effect.getProperties(),
anim.expected.withoutGeometric);
});
});
}, 'Multiple animations with geometric property: ' + subtest.desc);
@@ -788,51 +788,51 @@ function testMultipleAnimationsWithGeome
property: 'opacity',
runningOnCompositor: true,
}
]
}
],
},
].forEach(subtest => {
- promise_test(function(t) {
+ promise_test(t => {
var div = addDiv(t, { class: 'compositable' });
- var animations = subtest.animations.map(function(anim) {
+ var animations = subtest.animations.map(anim => {
var animation = div.animate(anim.frames, 100 * MS_PER_SEC);
// Bind expected values to animation object.
animation.expected = anim.expected;
return animation;
});
var widthAnimation;
- return waitForAllAnimations(animations).then(function() {
+ return waitForAllAnimations(animations).then(() => {
animations.forEach(anim => {
assert_all_properties_running_on_compositor(
anim.effect.getProperties(),
anim.expected);
});
- }).then(function() {
+ }).then(() => {
// Append 'width' animation on the same element.
widthAnimation = div.animate({ width: ['100px', '200px'] },
100 * MS_PER_SEC);
return waitForFrame();
- }).then(function() {
+ }).then(() => {
// Now transform animations are not running on compositor because of
// the 'width' animation.
animations.forEach(anim => {
assert_animation_property_state_equals(
anim.effect.getProperties(),
anim.expected);
});
// Remove the 'width' animation.
widthAnimation.cancel();
return waitForFrame();
- }).then(function() {
+ }).then(() => {
// Now all animations are running on compositor.
animations.forEach(anim => {
assert_all_properties_running_on_compositor(
anim.effect.getProperties(),
anim.expected);
});
});
}, 'Multiple async animations and geometric animation: ' + subtest.desc);
@@ -870,30 +870,30 @@ function testSmallElements() {
expected: [
{
property: 'transform',
runningOnCompositor: true
}
]
},
].forEach(subtest => {
- promise_test(function(t) {
+ promise_test(t => {
var div = addDiv(t, subtest.style);
var animation = div.animate(subtest.frames, 100 * MS_PER_SEC);
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_animation_property_state_equals(
animation.effect.getProperties(),
subtest.expected);
});
}, subtest.desc);
});
}
function testSynchronizedAnimations() {
- promise_test(function(t) {
+ promise_test(t => {
const elemA = addDiv(t, { class: 'compositable' });
const elemB = addDiv(t, { class: 'compositable' });
const animA = elemA.animate({ transform: [ 'translate(0px)',
'translate(100px)' ] },
100 * MS_PER_SEC);
const animB = elemB.animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
@@ -905,17 +905,17 @@ function testSynchronizedAnimations() {
[ { property: 'transform',
runningOnCompositor: false,
warning: 'CompositorAnimationWarningTransformWithSyncGeometricAnimations'
} ]);
});
}, 'Animations created within the same tick are synchronized'
+ ' (compositor animation created first)');
- promise_test(function(t) {
+ promise_test(t => {
const elemA = addDiv(t, { class: 'compositable' });
const elemB = addDiv(t, { class: 'compositable' });
const animA = elemA.animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
const animB = elemB.animate({ transform: [ 'translate(0px)',
'translate(100px)' ] },
100 * MS_PER_SEC);
@@ -927,17 +927,17 @@ function testSynchronizedAnimations() {
[ { property: 'transform',
runningOnCompositor: false,
warning: 'CompositorAnimationWarningTransformWithSyncGeometricAnimations'
} ]);
});
}, 'Animations created within the same tick are synchronized'
+ ' (compositor animation created second)');
- promise_test(function(t) {
+ promise_test(t => {
const attrs = { class: 'compositable',
style: 'transition: all 100s' };
const elemA = addDiv(t, attrs);
const elemB = addDiv(t, attrs);
elemA.style.transform = 'translate(0px)';
elemB.style.marginLeft = '0px';
getComputedStyle(elemA).transform;
getComputedStyle(elemB).marginLeft;
@@ -975,17 +975,17 @@ function testSynchronizedAnimations() {
transitionA.effect.getProperties(),
[ { property: 'transform',
runningOnCompositor: false,
warning: 'CompositorAnimationWarningTransformWithSyncGeometricAnimations'
} ]);
});
}, 'Transitions created before and after a tick are synchronized');
- promise_test(function(t) {
+ promise_test(t => {
const elemA = addDiv(t, { class: 'compositable' });
const elemB = addDiv(t, { class: 'compositable' });
const animA = elemA.animate({ transform: [ 'translate(0px)',
'translate(100px)' ],
opacity: [ 0, 1 ] },
100 * MS_PER_SEC);
const animB = elemB.animate({ marginLeft: [ '0px', '100px' ] },
@@ -1002,17 +1002,17 @@ function testSynchronizedAnimations() {
{ property: 'opacity',
runningOnCompositor: true
} ]);
});
}, 'Opacity animations on the same element continue running on the'
+ ' compositor when transform animations are synchronized with geometric'
+ ' animations');
- promise_test(function(t) {
+ promise_test(t => {
const elemA = addDiv(t, { class: 'compositable' });
const elemB = addDiv(t, { class: 'compositable' });
const animA = elemA.animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
let animB;
return waitForFrame()
@@ -1025,17 +1025,17 @@ function testSynchronizedAnimations() {
assert_animation_property_state_equals(
animB.effect.getProperties(),
[ { property: 'transform',
runningOnCompositor: true } ]);
});
}, 'Transform animations are NOT synchronized with geometric animations'
+ ' started in the previous frame');
- promise_test(function(t) {
+ promise_test(t => {
const elemA = addDiv(t, { class: 'compositable' });
const elemB = addDiv(t, { class: 'compositable' });
const animA = elemA.animate({ transform: [ 'translate(0px)',
'translate(100px)' ] },
100 * MS_PER_SEC);
let animB;
@@ -1048,17 +1048,17 @@ function testSynchronizedAnimations() {
assert_animation_property_state_equals(
animA.effect.getProperties(),
[ { property: 'transform',
runningOnCompositor: true } ]);
});
}, 'Transform animations are NOT synchronized with geometric animations'
+ ' started in the next frame');
- promise_test(function(t) {
+ promise_test(t => {
const elemA = addDiv(t, { class: 'compositable' });
const elemB = addDiv(t, { class: 'compositable' });
const animA = elemA.animate({ transform: [ 'translate(0px)',
'translate(100px)' ] },
100 * MS_PER_SEC);
const animB = elemB.animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
@@ -1067,17 +1067,17 @@ function testSynchronizedAnimations() {
return Promise.all([animA.ready, animB.ready])
.then(() => {
assert_animation_property_state_equals(
animA.effect.getProperties(),
[ { property: 'transform', runningOnCompositor: true } ]);
});
}, 'Paused animations are not synchronized');
- promise_test(function(t) {
+ promise_test(t => {
const elemA = addDiv(t, { class: 'compositable' });
const elemB = addDiv(t, { class: 'compositable' });
const animA = elemA.animate({ transform: [ 'translate(0px)',
'translate(100px)' ] },
100 * MS_PER_SEC);
const animB = elemB.animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
@@ -1094,17 +1094,17 @@ function testSynchronizedAnimations() {
[ { property: 'transform',
runningOnCompositor: false,
warning: 'CompositorAnimationWarningTransformWithSyncGeometricAnimations'
} ]);
});
}, 'Animations are synchronized based on when they are started'
+ ' and NOT their start time');
- promise_test(function(t) {
+ promise_test(t => {
const elemA = addDiv(t, { class: 'compositable' });
const elemB = addDiv(t, { class: 'compositable' });
const animA = elemA.animate({ transform: [ 'translate(0px)',
'translate(100px)' ] },
100 * MS_PER_SEC);
const animB = elemB.animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
@@ -1122,17 +1122,17 @@ function testSynchronizedAnimations() {
}).then(() => {
assert_animation_property_state_equals(
animA.effect.getProperties(),
[ { property: 'transform',
runningOnCompositor: true } ]);
});
}, 'An initially synchronized animation may be unsynchronized if restarted');
- promise_test(function(t) {
+ promise_test(t => {
const elemA = addDiv(t, { class: 'compositable' });
const elemB = addDiv(t, { class: 'compositable' });
const animA = elemA.animate({ transform: [ 'translate(0px)',
'translate(100px)' ] },
100 * MS_PER_SEC);
const animB = elemB.animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
@@ -1162,132 +1162,132 @@ function start() {
testStyleChanges();
testIdChanges();
testMultipleAnimations();
testMultipleAnimationsWithGeometricKeyframes();
testMultipleAnimationsWithGeometricAnimations();
testSmallElements();
testSynchronizedAnimations();
- promise_test(function(t) {
+ promise_test(t => {
var animation = addDivAndAnimate(t,
{ class: 'compositable' },
{ transform: [ 'translate(0px)',
'translate(100px)'] },
100 * MS_PER_SEC);
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_animation_property_state_equals(
animation.effect.getProperties(),
[ { property: 'transform', runningOnCompositor: true } ]);
animation.effect.target.style = 'width: 5200px; height: 5200px';
return waitForFrame();
- }).then(function() {
+ }).then(() => {
// viewport depends on test environment.
var expectedWarning = new RegExp(
"Animation cannot be run on the compositor because the area of the frame " +
"\\(\\d+\\) is too large relative to the viewport " +
"\\(larger than \\d+\\)");
assert_animation_property_state_equals(
animation.effect.getProperties(),
[ {
property: 'transform',
runningOnCompositor: false,
warning: expectedWarning
} ]);
animation.effect.target.style = 'width: 100px; height: 100px';
return waitForFrame();
- }).then(function() {
+ }).then(() => {
// FIXME: Bug 1253164: the animation should get back on compositor.
assert_animation_property_state_equals(
animation.effect.getProperties(),
[ { property: 'transform', runningOnCompositor: false } ]);
});
}, 'transform on too big element - area');
- promise_test(function(t) {
+ promise_test(t => {
var animation = addDivAndAnimate(t,
{ class: 'compositable' },
{ transform: [ 'translate(0px)',
'translate(100px)'] },
100 * MS_PER_SEC);
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_animation_property_state_equals(
animation.effect.getProperties(),
[ { property: 'transform', runningOnCompositor: true } ]);
animation.effect.target.style = 'width: 5200px; height: 1px';
return waitForFrame();
- }).then(function() {
+ }).then(() => {
// viewport depends on test environment.
var expectedWarning = new RegExp(
"Animation cannot be run on the compositor because the frame size " +
"\\(5200, 1\\) is too large relative to the viewport " +
"\\(larger than \\(\\d+, \\d+\\)\\) or larger than the " +
"maximum allowed value \\(\\d+, \\d+\\)");
assert_animation_property_state_equals(
animation.effect.getProperties(),
[ {
property: 'transform',
runningOnCompositor: false,
warning: expectedWarning
} ]);
animation.effect.target.style = 'width: 100px; height: 100px';
return waitForFrame();
- }).then(function() {
+ }).then(() => {
// FIXME: Bug 1253164: the animation should get back on compositor.
assert_animation_property_state_equals(
animation.effect.getProperties(),
[ { property: 'transform', runningOnCompositor: false } ]);
});
}, 'transform on too big element - dimensions');
- promise_test(function(t) {
+ promise_test(t => {
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '100');
svg.setAttribute('height', '100');
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('width', '100');
rect.setAttribute('height', '100');
rect.setAttribute('fill', 'red');
svg.appendChild(rect);
document.body.appendChild(svg);
- t.add_cleanup(function() {
+ t.add_cleanup(() => {
svg.remove();
});
var animation = svg.animate(
{ transform: ['translate(0px)', 'translate(100px)'] }, 100 * MS_PER_SEC);
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_animation_property_state_equals(
animation.effect.getProperties(),
[ { property: 'transform', runningOnCompositor: true } ]);
svg.setAttribute('transform', 'translate(10, 20)');
return waitForFrame();
- }).then(function() {
+ }).then(() => {
assert_animation_property_state_equals(
animation.effect.getProperties(),
[ {
property: 'transform',
runningOnCompositor: false,
warning: 'CompositorAnimationWarningTransformSVG'
} ]);
svg.removeAttribute('transform');
return waitForFrame();
- }).then(function() {
+ }).then(() => {
assert_animation_property_state_equals(
animation.effect.getProperties(),
[ { property: 'transform', runningOnCompositor: true } ]);
});
}, 'transform of nsIFrame with SVG transform');
- promise_test(function(t) {
+ promise_test(t => {
var div = addDiv(t, { class: 'compositable',
style: 'animation: fade 100s' });
var cssAnimation = div.getAnimations()[0];
var scriptAnimation = div.animate({ opacity: [ 1, 0 ] }, 100 * MS_PER_SEC);
- return scriptAnimation.ready.then(function() {
+ return scriptAnimation.ready.then(() => {
assert_animation_property_state_equals(
cssAnimation.effect.getProperties(),
[ { property: 'opacity', runningOnCompositor: true } ]);
assert_animation_property_state_equals(
scriptAnimation.effect.getProperties(),
[ { property: 'opacity', runningOnCompositor: true } ]);
});
}, 'overridden animation');