rename from dom/animation/test/chrome/test_restyles.html
rename to dom/animation/test/mozilla/file_restyles.html
--- a/dom/animation/test/chrome/test_restyles.html
+++ b/dom/animation/test/mozilla/file_restyles.html
@@ -1,18 +1,30 @@
<!doctype html>
<head>
<meta charset=utf-8>
<title>Tests restyles caused by animations</title>
-<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
-<script src="chrome://mochikit/content/tests/SimpleTest/SpawnTask.js"></script>
-<script src="chrome://mochikit/content/tests/SimpleTest/paint_listener.js"></script>
+<script>
+var ok = opener.ok.bind(opener);
+var is = opener.is.bind(opener);
+var todo = opener.todo.bind(opener);
+var todo_is = opener.todo_is.bind(opener);
+var info = opener.info.bind(opener);
+var original_finish = opener.SimpleTest.finish;
+var SimpleTest = opener.SimpleTest;
+SimpleTest.finish = function finish() {
+ self.close();
+ original_finish();
+}
+</script>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<script src="/tests/SimpleTest/SpawnTask.js"></script>
+<script src="/tests/SimpleTest/paint_listener.js"></script>
<script src="../testcommon.js"></script>
-<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
<style>
@keyframes opacity {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes background-color {
from { background-color: red; }
to { background-color: blue; }
@@ -29,19 +41,21 @@ div {
}
</style>
</head>
<body>
<script>
'use strict';
function observeStyling(frameCount, onFrame) {
- var docShell = window.QueryInterface(SpecialPowers.Ci.nsIInterfaceRequestor)
- .getInterface(SpecialPowers.Ci.nsIWebNavigation)
- .QueryInterface(SpecialPowers.Ci.nsIDocShell);
+ var docShell =
+ SpecialPowers.wrap(window)
+ .QueryInterface(SpecialPowers.Ci.nsIInterfaceRequestor)
+ .getInterface(SpecialPowers.Ci.nsIWebNavigation)
+ .QueryInterface(SpecialPowers.Ci.nsIDocShell);
docShell.recordProfileTimelineMarkers = true;
docShell.popProfileTimelineMarkers();
return new Promise(function(resolve) {
return waitForAnimationFrames(frameCount, onFrame).then(function() {
var markers = docShell.popProfileTimelineMarkers();
docShell.recordProfileTimelineMarkers = false;
@@ -70,19 +84,16 @@ function waitForWheelEvent(aTarget) {
sendWheelAndPaintNoFlush(aTarget, centerX, centerY,
{ deltaMode: WheelEvent.DOM_DELTA_PIXEL,
deltaY: targetRect.height },
resolve);
});
}
-SimpleTest.expectAssertions(0, 1); // bug 1332970
-SimpleTest.waitForExplicitFinish();
-
var omtaEnabled = isOMTAEnabled();
var isAndroid = !!navigator.userAgent.includes("Android");
var isServo = isStyledByServo();
var offscreenThrottlingEnabled =
SpecialPowers.getBoolPref('dom.animations.offscreen-throttling');
function add_task_if_omta_enabled(test) {
@@ -96,78 +107,78 @@ function add_task_if_omta_enabled(test)
// We need to wait for all paints before running tests to avoid contaminations
// from styling of this document itself.
waitForAllPaints(function() {
add_task(async function restyling_for_main_thread_animations() {
var div = addDiv(null, { style: 'animation: background-color 100s' });
var animation = div.getAnimations()[0];
await animation.ready;
- ok(!animation.isRunningOnCompositor);
+ ok(!SpecialPowers.wrap(animation).isRunningOnCompositor);
var markers = await observeStyling(5);
is(markers.length, 5,
'CSS animations running on the main-thread should update style ' +
'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;
- ok(animation.isRunningOnCompositor);
+ 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;
- ok(animation.isRunningOnCompositor);
+ 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;
- ok(animation.isRunningOnCompositor);
+ 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;
- ok(animation.isRunningOnCompositor);
+ ok(SpecialPowers.wrap(animation).isRunningOnCompositor);
animation.finish();
var markers = await observeStyling(5);
is(markers.length, 1,
'Animations running on the compositor should only update style ' +
'once after finish() is called');
await ensureElementRemoval(div);
@@ -226,17 +237,17 @@ waitForAllPaints(function() {
return;
}
var div = addDiv(null,
{ style: 'animation: opacity 100s; transform: translateY(-400px);' });
var animation = div.getAnimations()[0];
await animation.ready;
- ok(!animation.isRunningOnCompositor);
+ 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);
});
@@ -372,17 +383,17 @@ waitForAllPaints(function() {
});
add_task_if_omta_enabled(async function no_restyling_compositor_animations_in_visiblily_hidden_element() {
var div = addDiv(null,
{ style: 'animation: opacity 100s; visibility: hidden' });
var animation = div.getAnimations()[0];
await animation.ready;
- ok(!animation.isRunningOnCompositor);
+ ok(!SpecialPowers.wrap(animation).isRunningOnCompositor);
var markers = await observeStyling(5);
todo_is(markers.length, 0,
'Bug 1237454: Animations running on the compositor in ' +
'visibility hidden element should never cause restyles');
await ensureElementRemoval(div);
});
@@ -464,17 +475,17 @@ waitForAllPaints(function() {
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;
- ok(animation.isRunningOnCompositor);
+ ok(SpecialPowers.wrap(animation).isRunningOnCompositor);
animation.pause();
await animation.ready;
var markers = await observeStyling(5);
is(markers.length, 0,
'Bug 1232563: Paused animations running on the compositor should ' +
@@ -514,23 +525,23 @@ waitForAllPaints(function() {
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;
- ok(animation.isRunningOnCompositor);
+ 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(!animation.isRunningOnCompositor);
+ ok(!SpecialPowers.wrap(animation).isRunningOnCompositor);
// Extend the duration.
animation.effect.timing.duration = 800 * MS_PER_SEC;
var markers = await observeStyling(5);
is(markers.length, 1,
'Animations running on the compositor should update style ' +
'when timing.duration is made longer than the current time');
@@ -548,17 +559,17 @@ waitForAllPaints(function() {
// We need to wait a frame to apply display:none style.
await waitForFrame();
is(animation.playState, 'running',
'Script animations keep running even when the target element has ' +
'"display: none" style');
- ok(!animation.isRunningOnCompositor,
+ ok(!SpecialPowers.wrap(animation).isRunningOnCompositor,
'Script animations on "display:none" element should not run on the ' +
'compositor');
var markers = await observeStyling(5);
is(markers.length, 0,
'Script animations on "display: none" element should not update styles');
div.style.display = '';
@@ -584,31 +595,31 @@ waitForAllPaints(function() {
// We need to wait a frame to apply display:none style.
await waitForFrame();
is(animation.playState, 'running',
'Opacity script animations keep running even when the target element ' +
'has "display: none" style');
- ok(!animation.isRunningOnCompositor,
+ ok(!SpecialPowers.wrap(animation).isRunningOnCompositor,
'Opacity script animations on "display:none" element should not ' +
'run on the compositor');
var markers = await observeStyling(5);
is(markers.length, 0,
'Opacity script animations on "display: none" element should not ' +
'update styles');
div.style.display = '';
// We need to wait a frame to unapply display:none style.
await waitForFrame();
- ok(animation.isRunningOnCompositor,
+ ok(SpecialPowers.wrap(animation).isRunningOnCompositor,
'Opacity script animations restored from "display: none" should be ' +
'run on the compositor');
await ensureElementRemoval(div);
});
add_task(async function restyling_for_empty_keyframes() {
var div = addDiv(null);
@@ -636,17 +647,17 @@ waitForAllPaints(function() {
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;
- ok(animation.isRunningOnCompositor);
+ 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);
});
@@ -668,17 +679,17 @@ waitForAllPaints(function() {
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;
- ok(animation.isRunningOnCompositor,
+ 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);
todo_is(markers.length, 0,
@@ -738,17 +749,17 @@ waitForAllPaints(function() {
// 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;
- ok(!animation.isRunningOnCompositor,
+ 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();
@@ -757,17 +768,17 @@ waitForAllPaints(function() {
'Opacity animation on orphaned element should not cause restyles');
document.body.appendChild(div);
// Need a frame to give the animation a chance to be sent to the
// compositor.
await waitForFrame();
- ok(animation.isRunningOnCompositor,
+ ok(SpecialPowers.wrap(animation).isRunningOnCompositor,
'The opacity animation which is no longer overridden by the ' +
'!important rule begins running on the compositor even if the ' +
'!important rule had been dropped before the target element was ' +
'removed');
await ensureElementRemoval(div);
}
);
@@ -952,17 +963,17 @@ waitForAllPaints(function() {
});
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;
- ok(animation.isRunningOnCompositor,
+ ok(SpecialPowers.wrap(animation).isRunningOnCompositor,
'The opacity animation is running on the compositor');
div.style.setProperty('color', 'blue', '');
var markers = await observeStyling(5);
if (isServo) {
is(markers.length, 0,
'The opacity animation keeps running on the compositor when ' +
'color style is changed');