--- a/dom/animation/test/mozilla/file_restyles.html
+++ b/dom/animation/test/mozilla/file_restyles.html
@@ -175,64 +175,64 @@ waitForAllPaints(() => {
'on the main thread');
await ensureElementRemoval(div);
});
add_task_if_omta_enabled(async function no_restyling_for_compositor_animations() {
var div = addDiv(null, { style: 'animation: opacity 100s' });
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
ok(SpecialPowers.wrap(animation).isRunningOnCompositor);
var markers = await observeStyling(5);
is(markers.length, 0,
'CSS animations running on the compositor should not update style ' +
'on the main thread');
await ensureElementRemoval(div);
});
add_task_if_omta_enabled(async function no_restyling_for_compositor_transitions() {
var div = addDiv(null, { style: 'transition: opacity 100s; opacity: 0' });
getComputedStyle(div).opacity;
div.style.opacity = 1;
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
ok(SpecialPowers.wrap(animation).isRunningOnCompositor);
var markers = await observeStyling(5);
is(markers.length, 0,
'CSS transitions running on the compositor should not update style ' +
'on the main thread');
await ensureElementRemoval(div);
});
add_task_if_omta_enabled(async function no_restyling_when_animation_duration_is_changed() {
var div = addDiv(null, { style: 'animation: opacity 100s' });
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
ok(SpecialPowers.wrap(animation).isRunningOnCompositor);
div.animationDuration = '200s';
var markers = await observeStyling(5);
is(markers.length, 0,
'Animations running on the compositor should not update style ' +
'on the main thread');
await ensureElementRemoval(div);
});
add_task_if_omta_enabled(async function only_one_restyling_after_finish_is_called() {
var div = addDiv(null, { style: 'animation: opacity 100s' });
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
ok(SpecialPowers.wrap(animation).isRunningOnCompositor);
animation.finish();
var markers = await observeStyling(1);
is(markers.length, 1,
'Animations running on the compositor should only update style once ' +
'after finish() is called');
@@ -306,50 +306,50 @@ waitForAllPaints(() => {
await ensureElementRemoval(div);
});
add_task_if_omta_enabled(async function no_restyling_compositor_animations_out_of_view_element() {
var div = addDiv(null,
{ style: 'animation: opacity 100s; transform: translateY(-400px);' });
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
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() {
var div = addDiv(null,
{ style: 'animation: background-color 100s; transform: translateY(-400px);' });
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
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() {
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;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'Animations running on the compositor for elements ' +
'which are scrolled out should never cause restyles');
await ensureElementRemoval(parentElement);
@@ -359,17 +359,17 @@ waitForAllPaints(() => {
async function no_restyling_missing_keyframe_opacity_animations_on_scrolled_out_element() {
var parentElement = addDiv(null,
{ style: 'overflow-y: scroll; height: 20px;' });
var div = addDiv(null,
{ style: 'animation: opacity-without-end-value 100s; ' +
'position: relative; top: 100px;' });
parentElement.appendChild(div);
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'Opacity animations on scrolled out elements should never cause ' +
'restyles even if the animation has missing keyframes');
await ensureElementRemoval(parentElement);
@@ -491,17 +491,17 @@ waitForAllPaints(() => {
add_task(async function restyling_main_thread_animations_in_scrolled_out_element() {
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;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'Animations running on the main-thread for elements ' +
'which are scrolled out should never cause restyles');
await waitForWheelEvent(parentElement);
@@ -526,17 +526,17 @@ waitForAllPaints(() => {
{ style: 'animation: background-color 100s; ' +
'position: relative; ' +
'top: 20px;' }); // This element is in-view in the parent, but
// out of view in the grandparent.
grandParent.appendChild(parentElement);
parentElement.appendChild(div);
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'Animations running on the main-thread which are in nested elements ' +
'which are scrolled out should never cause restyles');
await waitForWheelEvent(grandParent);
@@ -551,17 +551,17 @@ waitForAllPaints(() => {
await ensureElementRemoval(grandParent);
});
add_task_if_omta_enabled(async function no_restyling_compositor_animations_in_visibility_hidden_element() {
var div = addDiv(null,
{ style: 'animation: opacity 100s; visibility: hidden' });
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
if (!isWebRender) {
ok(!SpecialPowers.wrap(animation).isRunningOnCompositor);
} else {
// FIXME: Bug 1456389: The animation should be throttled on the
// main-thread (i.e. not to be sent to the compositor)
todo(!SpecialPowers.wrap(animation).isRunningOnCompositor,
'Animation in visibility:hidden element should NOT be running ' +
'on the compositor');
@@ -581,17 +581,17 @@ waitForAllPaints(() => {
var div = addDiv(null,
{ style: 'animation: background-color 100s;' });
var pad = addDiv(null,
{ style: 'height: 400px;' });
parentElement.appendChild(div);
parentElement.appendChild(pad);
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
await waitForWheelEvent(parentElement);
await waitForFrame();
var markers = await observeStyling(5);
// FIXME: We should reduce a redundant restyle here.
@@ -605,17 +605,17 @@ waitForAllPaints(() => {
add_task(async function restyling_main_thread_animations_moved_in_view_by_resizing() {
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;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'Animations running on the main-thread which is in scrolled out ' +
'elements should not update restyling');
parentElement.style.height = '100px';
markers = await observeStyling(1);
@@ -632,17 +632,17 @@ waitForAllPaints(() => {
async function restyling_animations_on_visibility_changed_element_having_child() {
var div = addDiv(null,
{ style: 'animation: background-color 100s;' });
var childElement = addDiv(null);
div.appendChild(childElement);
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
// We don't check the animation causes restyles here since we already
// check it in the first test case.
div.style.visibility = 'hidden';
await waitForNextFrame();
var markers = await observeStyling(5);
@@ -657,17 +657,17 @@ waitForAllPaints(() => {
add_task(
async function restyling_animations_on_visibility_hidden_element_which_gets_visible() {
var div = addDiv(null,
{ style: 'animation: background-color 100s; visibility: hidden' });
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'Animations running on visibility hidden element should never ' +
'cause restyles');
div.style.visibility = 'visible';
await waitForNextFrame();
@@ -683,17 +683,17 @@ waitForAllPaints(() => {
add_task(async function restyling_animations_in_visibility_changed_parent() {
var parentDiv = addDiv(null, { style: 'visibility: hidden' });
var div = addDiv(null, { style: 'animation: background-color 100s;' });
parentDiv.appendChild(div);
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'Animations running in visibility hidden parent should never cause ' +
'restyles');
parentDiv.style.visibility = 'visible';
await waitForNextFrame();
@@ -715,17 +715,17 @@ waitForAllPaints(() => {
});
add_task(
async function restyling_animations_on_visibility_hidden_element_with_visibility_changed_children() {
var div = addDiv(null,
{ style: 'animation: background-color 100s; visibility: hidden' });
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'Animations on visibility hidden element having no visible children ' +
'should never cause restyles');
var childElement = addDiv(null, { style: 'visibility: visible' });
div.appendChild(childElement);
@@ -769,17 +769,17 @@ waitForAllPaints(() => {
var div = addDiv(null,
{ style: 'animation: background-color 100s; position: absolute' });
var childElement = addDiv(null,
{ style: 'float: left; visibility: hidden' });
div.appendChild(childElement);
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
// We don't check the animation causes restyles here since we already
// check it in the first test case.
div.style.visibility = 'hidden';
await waitForNextFrame();
var markers = await observeStyling(5);
@@ -816,17 +816,17 @@ waitForAllPaints(() => {
var grandchildBA = addDiv(null);
childB.appendChild(grandchildBA);
var grandchildBB = addDiv(null);
childB.appendChild(grandchildBB);
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'Animations on visibility hidden element having no visible ' +
'descendants should never cause restyles');
childA.style.visibility = 'visible';
grandchildAA.style.visibility = 'visible';
grandchildAB.style.visibility = 'visible';
@@ -917,17 +917,17 @@ waitForAllPaints(() => {
await ensureElementRemoval(div);
}
);
add_task_if_omta_enabled(async function no_restyling_compositor_animations_after_pause_is_called() {
var div = addDiv(null, { style: 'animation: opacity 100s' });
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
ok(SpecialPowers.wrap(animation).isRunningOnCompositor);
animation.pause();
await animation.ready;
var markers = await observeStyling(1);
is(markers.length, 1,
@@ -940,17 +940,17 @@ waitForAllPaints(() => {
'restyles');
await ensureElementRemoval(div);
});
add_task(async function no_restyling_main_thread_animations_after_pause_is_called() {
var div = addDiv(null, { style: 'animation: background-color 100s' });
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
animation.pause();
await animation.ready;
var markers = await observeStyling(1);
is(markers.length, 1,
'Animations running on the main-thread should restyle once after ' +
@@ -962,32 +962,32 @@ waitForAllPaints(() => {
'restyles');
await ensureElementRemoval(div);
});
add_task_if_omta_enabled(async function only_one_restyling_when_current_time_is_set_to_middle_of_duration() {
var div = addDiv(null, { style: 'animation: opacity 100s' });
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
animation.currentTime = 50 * MS_PER_SEC;
var markers = await observeStyling(5);
is(markers.length, 1,
'Bug 1235478: Animations running on the compositor should only once ' +
'update style when currentTime is set to middle of duration time');
await ensureElementRemoval(div);
});
add_task_if_omta_enabled(async function change_duration_and_currenttime() {
var div = addDiv(null);
var animation = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
ok(SpecialPowers.wrap(animation).isRunningOnCompositor);
// Set currentTime to a time longer than duration.
animation.currentTime = 500 * MS_PER_SEC;
// Now the animation immediately get back from compositor.
ok(!SpecialPowers.wrap(animation).isRunningOnCompositor);
@@ -1001,17 +1001,17 @@ waitForAllPaints(() => {
await ensureElementRemoval(div);
});
add_task(async function script_animation_on_display_none_element() {
var div = addDiv(null);
var animation = div.animate({ backgroundColor: [ 'red', 'blue' ] },
100 * MS_PER_SEC);
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
div.style.display = 'none';
// We need to wait a frame to apply display:none style.
await waitForNextFrame();
is(animation.playState, 'running',
'Script animations keep running even when the target element has ' +
@@ -1034,17 +1034,17 @@ waitForAllPaints(() => {
await ensureElementRemoval(div);
});
add_task_if_omta_enabled(async function compositable_script_animation_on_display_none_element() {
var div = addDiv(null);
var animation = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
div.style.display = 'none';
// We need to wait a frame to apply display:none style.
await waitForNextFrame();
is(animation.playState, 'running',
'Opacity script animations keep running even when the target element ' +
@@ -1072,17 +1072,17 @@ waitForAllPaints(() => {
await ensureElementRemoval(div);
});
add_task(async function restyling_for_empty_keyframes() {
var div = addDiv(null);
var animation = div.animate({ }, 100 * MS_PER_SEC);
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'Animations with no keyframes should not cause restyles');
animation.effect.setKeyframes({ backgroundColor: ['red', 'blue'] });
markers = await observeStyling(5);
@@ -1098,31 +1098,31 @@ waitForAllPaints(() => {
'to remove the previous animated style');
await ensureElementRemoval(div);
});
add_task_if_omta_enabled(async function no_restyling_when_animation_style_when_re_setting_same_animation_property() {
var div = addDiv(null, { style: 'animation: opacity 100s' });
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
ok(SpecialPowers.wrap(animation).isRunningOnCompositor);
// Apply the same animation style
div.style.animation = 'opacity 100s';
var markers = await observeStyling(5);
is(markers.length, 0,
'Applying same animation style ' +
'should never cause restyles');
await ensureElementRemoval(div);
});
add_task(async function necessary_update_should_be_invoked() {
var div = addDiv(null, { style: 'animation: background-color 100s' });
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
await waitForAnimationFrames(5);
// Apply another animation style
div.style.animation = 'background-color 110s';
var markers = await observeStyling(1);
// There should be two restyles.
// 1) Animation-only restyle for before applying the new animation style
// 2) Animation-only restyle for after applying the new animation style
is(markers.length, 2,
@@ -1132,17 +1132,17 @@ waitForAllPaints(() => {
});
add_task_if_omta_enabled(
async function changing_cascading_result_for_main_thread_animation() {
var div = addDiv(null, { style: 'background-color: blue' });
var animation = div.animate({ opacity: [0, 1],
backgroundColor: ['green', 'red'] },
100 * MS_PER_SEC);
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
ok(SpecialPowers.wrap(animation).isRunningOnCompositor,
'The opacity animation is running on the compositor');
// Make the background-color style as !important to cause an update
// to the cascade.
// Bug 1300982: The background-color animation should be no longer
// running on the main thread.
div.style.setProperty('background-color', '1', 'important');
var markers = await observeStyling(5);
@@ -1154,17 +1154,17 @@ waitForAllPaints(() => {
}
);
add_task(async function restyling_for_animation_on_orphaned_element() {
var div = addDiv(null);
var animation = div.animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
div.remove();
var markers = await observeStyling(5);
is(markers.length, 0,
'Animation on orphaned element should not cause restyles');
document.body.appendChild(div);
@@ -1179,17 +1179,17 @@ waitForAllPaints(() => {
add_task_if_omta_enabled(
// Tests that if we remove an element from the document whose animation
// cascade needs recalculating, that it is correctly updated when it is
// re-attached to the document.
async function restyling_for_opacity_animation_on_re_attached_element() {
var div = addDiv(null, { style: 'opacity: 1 ! important' });
var animation = div.animate({ opacity: [0, 1] }, 100 * MS_PER_SEC);
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
ok(!SpecialPowers.wrap(animation).isRunningOnCompositor,
'The opacity animation overridden by an !important rule is NOT ' +
'running on the compositor');
// Drop the !important rule to update the cascade.
div.style.setProperty('opacity', '1', '');
div.remove();
@@ -1269,33 +1269,33 @@ waitForAllPaints(() => {
);
// Counter part of the above test.
add_task(async function no_restyling_discrete_animations_out_of_view_element() {
var div = addDiv(null, { style: 'transform: translateY(-400px);' });
var animation =
div.animate({ visibility: ['visible', 'hidden'] }, 100 * MS_PER_SEC);
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'Discrete animation running on the main-thread in an out-of-view ' +
'element should never cause restyles');
await ensureElementRemoval(div);
});
add_task(async function no_restyling_while_computed_timing_is_not_changed() {
var div = addDiv(null);
var animation = div.animate({ backgroundColor: [ 'red', 'blue' ] },
{ duration: 100 * MS_PER_SEC,
easing: 'step-end' });
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'Animation running on the main-thread while computed timing is not ' +
'changed should never cause restyles');
await ensureElementRemoval(div);
});
@@ -1350,17 +1350,17 @@ waitForAllPaints(() => {
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' });
var animation = rect.animate({ fill: ['blue', 'lime'] }, 100 * MS_PER_SEC);
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'CSS animations on an out-of-view svg element with post-transform ' +
'should be throttled.');
await ensureElementRemoval(div);
});
@@ -1388,17 +1388,17 @@ waitForAllPaints(() => {
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];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'CSS animation on an out-of-view element with pre-transform should be ' +
'throttled.');
await ensureElementRemoval(scrollDiv);
});
@@ -1407,17 +1407,17 @@ waitForAllPaints(() => {
async function throttling_animations_in_out_of_view_position_absolute_element() {
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;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'CSS animation in an out-of-view position absolute element should ' +
'be throttled');
await ensureElementRemoval(parentDiv);
}
@@ -1425,17 +1425,17 @@ waitForAllPaints(() => {
add_task(
async function throttling_animations_on_out_of_view_position_absolute_element() {
var div = addDiv(null,
{ style: 'animation: background-color 100s; ' +
'position: absolute; top: -1000px;' });
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'CSS animation on an out-of-view position absolute element should ' +
'be throttled');
await ensureElementRemoval(div);
}
@@ -1445,17 +1445,17 @@ waitForAllPaints(() => {
async function throttling_animations_in_out_of_view_position_fixed_element() {
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;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'CSS animation on an out-of-view position:fixed element should be ' +
'throttled');
await ensureElementRemoval(parentDiv);
}
@@ -1463,17 +1463,17 @@ waitForAllPaints(() => {
add_task(
async function throttling_animations_on_out_of_view_position_fixed_element() {
var div = addDiv(null,
{ style: 'animation: background-color 100s; ' +
'position: fixed; top: -1000px;' });
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 0,
'CSS animation on an out-of-view position:fixed element should be ' +
'throttled');
await ensureElementRemoval(div);
}
@@ -1493,17 +1493,17 @@ waitForAllPaints(() => {
});
const target = iframe.contentDocument.getElementById("target");
target.style= 'position: absolute; top: 50%; width: 100px; height: 100px';
var animation = target.animate({ opacity: [0, 1] },
{ duration: 100 * MS_PER_SEC,
iterations: Infinity });
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStylingInTargetWindow(iframe.contentWindow, 5);
is(markers.length, 0,
'Animation on position:absolute element in collapsed iframe should ' +
'be throttled');
await ensureElementRemoval(iframe);
}
@@ -1534,33 +1534,33 @@ waitForAllPaints(() => {
async function throttling_position_absolute_animations_in_collapsed_element() {
var parent = addDiv(null, { style: 'overflow: scroll; height: 0px;' });
var target = addDiv(null,
{ style: 'animation: background-color 100s infinite;' +
'position: absolute; top: 50%;' });
parent.appendChild(target);
var animation = target.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
todo_is(markers.length, 0,
'Animation on collapsed position:absolute element in collapsed ' +
'element should be throttled');
await ensureElementRemoval(parent);
}
);
add_task_if_omta_enabled(
async function no_restyling_for_compositor_animation_on_unrelated_style_change() {
var div = addDiv(null);
var animation = div.animate({ opacity: [0, 1] }, 100 * MS_PER_SEC);
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
ok(SpecialPowers.wrap(animation).isRunningOnCompositor,
'The opacity animation is running on the compositor');
div.style.setProperty('color', 'blue', '');
var markers = await observeStyling(5);
is(markers.length, 0,
'The opacity animation keeps running on the compositor when ' +
'color style is changed');
@@ -1575,50 +1575,50 @@ waitForAllPaints(() => {
var parentElement = addDiv(null,
{ style: 'overflow-y: scroll; height: 100px;' });
var div = addDiv(null);
var animation =
div.animate({ transform: [ 'translateY(10px)', 'translateY(10px)' ] },
100 * MS_PER_SEC);
parentElement.appendChild(div);
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
ok(SpecialPowers.wrap(animation).isRunningOnCompositor);
var markers = await observeStyling(20);
is(markers.length, 0,
'No-overflow transform animations running on the compositor should ' +
'never update style on the main thread');
await ensureElementRemoval(parentElement);
}
);
add_task(async function no_flush_on_getAnimations() {
var div = addDiv(null);
var animation =
div.animate({ opacity: [ '0', '1' ] }, 100 * MS_PER_SEC);
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
ok(SpecialPowers.wrap(animation).isRunningOnCompositor);
var markers = observeAnimSyncStyling(() => {
is(div.getAnimations().length, 1, 'There should be one animation');
});
is(markers.length, 0,
'Element.getAnimations() should not flush throttled animation style');
await ensureElementRemoval(div);
});
add_task(async function restyling_for_throttled_animation_on_getAnimations() {
var div = addDiv(null, { style: 'animation: opacity 100s' });
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
ok(SpecialPowers.wrap(animation).isRunningOnCompositor);
var markers = observeAnimSyncStyling(() => {
div.style.animationDuration = '0s';
is(div.getAnimations().length, 0, 'There should be no animation');
});
is(markers.length, 1, // For discarding the throttled animation.
@@ -1629,17 +1629,17 @@ waitForAllPaints(() => {
});
add_task(
async function no_restyling_for_throttled_animation_on_querying_play_state() {
var div = addDiv(null, { style: 'animation: opacity 100s' });
var animation = div.getAnimations()[0];
var sibling = addDiv(null);
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
ok(SpecialPowers.wrap(animation).isRunningOnCompositor);
var markers = observeAnimSyncStyling(() => {
sibling.style.opacity = '0.5';
is(animation.playState, 'running',
'Animation.playState should be running');
});
is(markers.length, 0,
@@ -1652,17 +1652,17 @@ waitForAllPaints(() => {
}
);
add_task(
async function restyling_for_throttled_animation_on_querying_play_state() {
var div = addDiv(null, { style: 'animation: opacity 100s' });
var animation = div.getAnimations()[0];
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
ok(SpecialPowers.wrap(animation).isRunningOnCompositor);
var markers = observeAnimSyncStyling(() => {
div.style.animationPlayState = 'paused';
is(animation.playState, 'paused',
'Animation.playState should be reflected by pending style');
});
@@ -1679,17 +1679,17 @@ waitForAllPaints(() => {
var div = addDiv(null, { style: 'transition: opacity 100s; opacity: 0' });
var sibling = addDiv(null);
getComputedStyle(div).opacity;
div.style.opacity = 1;
var transition = div.getAnimations()[0];
- await transition.ready;
+ await waitForAnimationReadyToRestyle(transition);
ok(SpecialPowers.wrap(transition).isRunningOnCompositor);
var markers = observeAnimSyncStyling(() => {
sibling.style.opacity = '0.5';
is(transition.playState, 'running',
'Animation.playState should be running');
});
@@ -1706,17 +1706,17 @@ waitForAllPaints(() => {
add_task(
async function restyling_for_throttled_transition_on_querying_play_state() {
var div = addDiv(null, { style: 'transition: opacity 100s; opacity: 0' });
getComputedStyle(div).opacity;
div.style.opacity = '1';
var transition = div.getAnimations()[0];
- await transition.ready;
+ await waitForAnimationReadyToRestyle(transition);
ok(SpecialPowers.wrap(transition).isRunningOnCompositor);
var markers = observeAnimSyncStyling(() => {
div.style.transitionProperty = 'none';
is(transition.playState, 'idle',
'Animation.playState should be reflected by pending style change ' +
'which cancel the transition');
});
@@ -1729,17 +1729,17 @@ waitForAllPaints(() => {
}
);
add_task(async function restyling_visibility_animations_on_in_view_element() {
var div = addDiv(null);
var animation =
div.animate({ visibility: ['hidden', 'visible'] }, 100 * MS_PER_SEC);
- await animation.ready;
+ await waitForAnimationReadyToRestyle(animation);
var markers = await observeStyling(5);
is(markers.length, 5,
'Visibility animation running on the main-thread on in-view element ' +
'should not be throttled');
await ensureElementRemoval(div);
});