--- a/dom/animation/test/mozilla/file_restyles.html
+++ b/dom/animation/test/mozilla/file_restyles.html
@@ -127,18 +127,16 @@ function tweakExpectedRestyleCount(aAnim
}
return aExpectedRestyleCount;
}
var omtaEnabled = isOMTAEnabled();
var isAndroid = !!navigator.userAgent.includes("Android");
var isServo = isStyledByServo();
-var offscreenThrottlingEnabled =
- SpecialPowers.getBoolPref('dom.animations.offscreen-throttling');
var hasConformantPromiseHandling;
function add_task_if_omta_enabled(test) {
if (!omtaEnabled) {
info(test.name + " is skipped because OMTA is disabled");
return;
}
add_task(test);
@@ -316,58 +314,46 @@ waitForAllPaints(() => {
is(markers.length, 0,
'Finished animations should never cause restyles when mouse is moved ' +
'on the animations');
await ensureElementRemoval(div);
});
add_task_if_omta_enabled(async function no_restyling_compositor_animations_out_of_view_element() {
- if (!offscreenThrottlingEnabled) {
- return;
- }
-
var div = addDiv(null,
{ style: 'animation: opacity 100s; transform: translateY(-400px);' });
var animation = div.getAnimations()[0];
await animation.ready;
ok(!SpecialPowers.wrap(animation).isRunningOnCompositor);
var markers = await observeStyling(5);
is(markers.length, 0,
'Animations running on the compositor in an out-of-view element ' +
'should never cause restyles');
await ensureElementRemoval(div);
});
add_task(async function no_restyling_main_thread_animations_out_of_view_element() {
- if (!offscreenThrottlingEnabled) {
- return;
- }
-
var div = addDiv(null,
{ style: 'animation: background-color 100s; transform: translateY(-400px);' });
var animation = div.getAnimations()[0];
await animation.ready;
var markers = await observeStyling(5);
is(markers.length, 0,
'Animations running on the main-thread in an out-of-view element ' +
'should never cause restyles');
await ensureElementRemoval(div);
});
add_task_if_omta_enabled(async function no_restyling_compositor_animations_in_scrolled_out_element() {
- if (!offscreenThrottlingEnabled) {
- return;
- }
-
var parentElement = addDiv(null,
{ style: 'overflow-y: scroll; height: 20px;' });
var div = addDiv(null,
{ style: 'animation: opacity 100s; position: relative; top: 100px;' });
parentElement.appendChild(div);
var animation = div.getAnimations()[0];
await animation.ready;
@@ -382,20 +368,16 @@ waitForAllPaints(() => {
});
add_task(
async function restyling_transform_animations_in_scrolled_out_element() {
if (hasConformantPromiseHandling) {
return;
}
- if (!offscreenThrottlingEnabled) {
- return;
- }
-
// Skip this test on Android since this test have been failing
// intermittently.
// Bug 1413817: We should audit this test still fails once we have the
// conformant Promise micro task.
if (isAndroid) {
return;
}
@@ -437,20 +419,16 @@ waitForAllPaints(() => {
);
add_task(
async function restyling_transform_animations_in_scrolled_out_element() {
if (!hasConformantPromiseHandling) {
return;
}
- if (!offscreenThrottlingEnabled) {
- return;
- }
-
await SpecialPowers.pushPrefEnv({ set: [["ui.showHideScrollbars", 1]] });
// Make sure we start from the state right after requestAnimationFrame.
await waitForFrame();
var parentElement = addDiv(null,
{ style: 'overflow-y: scroll; height: 20px;' });
var div = addDiv(null,
@@ -486,20 +464,16 @@ waitForAllPaints(() => {
'should be unthrottled after around 200ms have elapsed. now: ' +
now + ' start time: ' + timeAtStart);
await ensureElementRemoval(parentElement);
}
);
add_task(async function restyling_main_thread_animations_in_scrolled_out_element() {
- if (!offscreenThrottlingEnabled) {
- return;
- }
-
var parentElement = addDiv(null,
{ style: 'overflow-y: scroll; height: 20px;' });
var div = addDiv(null,
{ style: 'animation: background-color 100s; position: relative; top: 20px;' });
parentElement.appendChild(div);
var animation = div.getAnimations()[0];
await animation.ready;
@@ -519,20 +493,16 @@ waitForAllPaints(() => {
'Animations running on the main-thread which were in scrolled out ' +
'elements should update restyling soon after the element moved in ' +
'view by scrolling');
await ensureElementRemoval(parentElement);
});
add_task(async function restyling_main_thread_animations_in_nested_scrolled_out_element() {
- if (!offscreenThrottlingEnabled) {
- return;
- }
-
var grandParent = addDiv(null,
{ style: 'overflow-y: scroll; height: 20px;' });
var parentElement = addDiv(null,
{ style: 'overflow-y: scroll; height: 100px;' });
var div = addDiv(null,
{ style: 'animation: background-color 100s; ' +
'position: relative; ' +
'top: 20px;' }); // This element is in-view in the parent, but
@@ -573,20 +543,16 @@ waitForAllPaints(() => {
todo_is(markers.length, 0,
'Bug 1237454: Animations running on the compositor in ' +
'visibility hidden element should never cause restyles');
await ensureElementRemoval(div);
});
add_task(async function restyling_main_thread_animations_move_out_of_view_by_scrolling() {
- if (!offscreenThrottlingEnabled) {
- return;
- }
-
var parentElement = addDiv(null,
{ style: 'overflow-y: scroll; height: 200px;' });
var div = addDiv(null,
{ style: 'animation: background-color 100s;' });
var pad = addDiv(null,
{ style: 'height: 400px;' });
parentElement.appendChild(div);
parentElement.appendChild(pad);
@@ -604,20 +570,16 @@ waitForAllPaints(() => {
ok(markers.length >= 0,
'Animations running on the main-thread which are in scrolled out ' +
'elements should throttle restyling');
await ensureElementRemoval(parentElement);
});
add_task(async function restyling_main_thread_animations_moved_in_view_by_resizing() {
- if (!offscreenThrottlingEnabled) {
- return;
- }
-
var parentElement = addDiv(null,
{ style: 'overflow-y: scroll; height: 20px;' });
var div = addDiv(null,
{ style: 'animation: background-color 100s; position: relative; top: 100px;' });
parentElement.appendChild(div);
var animation = div.getAnimations()[0];
await animation.ready;
@@ -990,20 +952,16 @@ waitForAllPaints(() => {
'removed');
await ensureElementRemoval(div);
}
);
// Tests that additive animations don't throttle at all.
add_task(async function no_throttling_animations_out_of_view_element() {
- if (!offscreenThrottlingEnabled) {
- return;
- }
-
var div = addDiv(null, { style: 'transform: translateY(-400px);' });
var animation =
div.animate([{ visibility: 'visible' }], 100 * MS_PER_SEC);
await animation.ready;
const expectedRestyleCount = tweakExpectedRestyleCount(animation, 5);
var markers = await observeStyling(5);
@@ -1011,20 +969,16 @@ waitForAllPaints(() => {
is(markers.length, expectedRestyleCount,
'Discrete animation has has no keyframe whose offset is 0 or 1 in an ' +
'out-of-view element should not be throttled');
await ensureElementRemoval(div);
});
// Counter part of the above test.
add_task(async function no_restyling_discrete_animations_out_of_view_element() {
- if (!offscreenThrottlingEnabled) {
- return;
- }
-
var div = addDiv(null, { style: 'transform: translateY(-400px);' });
var animation =
div.animate({ visibility: ['visible', 'hidden'] }, 100 * MS_PER_SEC);
await animation.ready;
var markers = await observeStyling(5);
@@ -1069,20 +1023,16 @@ waitForAllPaints(() => {
is(markers.length, expectedRestyleCount,
'CSS animations on an in-view svg element with post-transform should ' +
'not be throttled.');
await ensureElementRemoval(div);
});
add_task(async function throttling_animations_out_of_view_svg() {
- if (!offscreenThrottlingEnabled) {
- return;
- }
-
var div = addDiv(null, { style: 'overflow: scroll;' +
'height: 100px; width: 100px;' });
var svg = addSVGElement(div, 'svg', { viewBox: '-10 -10 0.1 0.1',
width: '50px',
height: '50px' });
var rect = addSVGElement(svg, 'rect', { width: '10',
height: '10',
fill: 'red' });
@@ -1114,20 +1064,16 @@ waitForAllPaints(() => {
is(markers.length, expectedRestyleCount,
'CSS animation on an in-view element with pre-transform should not ' +
'be throttled.');
await ensureElementRemoval(scrollDiv);
});
add_task(async function throttling_animations_out_of_view_css_transform() {
- if (!offscreenThrottlingEnabled) {
- return;
- }
-
var scrollDiv = addDiv(null, { style: 'overflow: scroll;' +
'height: 100px; width: 100px;' });
var targetDiv = addDiv(null,
{ style: 'animation: background-color 100s;' +
'transform: translate(100px, 100px);' });
scrollDiv.appendChild(targetDiv);
var animation = targetDiv.getAnimations()[0];
@@ -1138,20 +1084,16 @@ waitForAllPaints(() => {
'CSS animation on an out-of-view element with pre-transform should be ' +
'throttled.');
await ensureElementRemoval(scrollDiv);
});
add_task(
async function throttling_animations_in_out_of_view_position_absolute_element() {
- if (!offscreenThrottlingEnabled) {
- return;
- }
-
var parentDiv = addDiv(null,
{ style: 'position: absolute; top: -1000px;' });
var targetDiv = addDiv(null,
{ style: 'animation: background-color 100s;' });
parentDiv.appendChild(targetDiv);
var animation = targetDiv.getAnimations()[0];
await animation.ready;
@@ -1162,20 +1104,16 @@ waitForAllPaints(() => {
'be throttled');
await ensureElementRemoval(parentDiv);
}
);
add_task(
async function throttling_animations_on_out_of_view_position_absolute_element() {
- if (!offscreenThrottlingEnabled) {
- return;
- }
-
var div = addDiv(null,
{ style: 'animation: background-color 100s; ' +
'position: absolute; top: -1000px;' });
var animation = div.getAnimations()[0];
await animation.ready;
var markers = await observeStyling(5);
@@ -1184,20 +1122,16 @@ waitForAllPaints(() => {
'be throttled');
await ensureElementRemoval(div);
}
);
add_task(
async function throttling_animations_in_out_of_view_position_fixed_element() {
- if (!offscreenThrottlingEnabled) {
- return;
- }
-
var parentDiv = addDiv(null,
{ style: 'position: fixed; top: -1000px;' });
var targetDiv = addDiv(null,
{ style: 'animation: background-color 100s;' });
parentDiv.appendChild(targetDiv);
var animation = targetDiv.getAnimations()[0];
await animation.ready;
@@ -1208,20 +1142,16 @@ waitForAllPaints(() => {
'throttled');
await ensureElementRemoval(parentDiv);
}
);
add_task(
async function throttling_animations_on_out_of_view_position_fixed_element() {
- if (!offscreenThrottlingEnabled) {
- return;
- }
-
var div = addDiv(null,
{ style: 'animation: background-color 100s; ' +
'position: fixed; top: -1000px;' });
var animation = div.getAnimations()[0];
await animation.ready;
var markers = await observeStyling(5);