179 lines
6 KiB
HTML
179 lines
6 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<script src="../testcommon.js"></script>
|
|
<script src="/tests/SimpleTest/paint_listener.js"></script>
|
|
<style>
|
|
@keyframes empty { }
|
|
.target {
|
|
/* Element needs geometry to be eligible for layerization */
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
<body>
|
|
<script>
|
|
'use strict';
|
|
|
|
function waitForDocLoad() {
|
|
return new Promise((resolve, reject) => {
|
|
if (document.readyState === 'complete') {
|
|
resolve();
|
|
} else {
|
|
window.addEventListener('load', resolve);
|
|
}
|
|
});
|
|
}
|
|
|
|
function waitForPaints() {
|
|
return new Promise((resolve, reject) => {
|
|
waitForAllPaintsFlushed(resolve);
|
|
});
|
|
}
|
|
|
|
promise_test(async t => {
|
|
// Test that empty animations actually start.
|
|
//
|
|
// Normally we tie the start of animations to when their first frame of
|
|
// the animation is rendered. However, for animations that don't actually
|
|
// trigger a paint (e.g. because they are empty, or are animating something
|
|
// that doesn't render or is offscreen) we want to make sure they still
|
|
// start.
|
|
//
|
|
// Before we start, wait for the document to finish loading, then create
|
|
// div element, and wait for painting. This is because during loading we will
|
|
// have other paint events taking place which might, by luck, happen to
|
|
// trigger animations that otherwise would not have been triggered, leading to
|
|
// false positives.
|
|
//
|
|
// As a result, it's better to wait until we have a more stable state before
|
|
// continuing.
|
|
await waitForDocLoad();
|
|
|
|
const div = addDiv(t);
|
|
|
|
await waitForPaints();
|
|
|
|
div.style.animation = 'empty 1000s';
|
|
const animation = div.getAnimations()[0];
|
|
|
|
let promiseCallbackDone = false;
|
|
animation.ready.then(() => {
|
|
promiseCallbackDone = true;
|
|
}).catch(() => {
|
|
assert_unreached('ready promise was rejected');
|
|
});
|
|
|
|
// We need to wait for up to three frames. This is because in some
|
|
// cases it can take up to two frames for the initial layout
|
|
// to take place. Even after that happens we don't actually resolve the
|
|
// ready promise until the following tick.
|
|
await waitForAnimationFrames(3);
|
|
|
|
assert_true(promiseCallbackDone,
|
|
'ready promise for an empty animation was resolved'
|
|
+ ' within three animation frames');
|
|
}, 'Animation.ready is resolved for an empty animation');
|
|
|
|
// Test that compositor animations with delays get synced correctly
|
|
//
|
|
// NOTE: It is important that we DON'T use
|
|
// SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh here since that takes
|
|
// us through a different code path.
|
|
promise_test(async t => {
|
|
assert_false(SpecialPowers.DOMWindowUtils.isTestControllingRefreshes,
|
|
'Test should run without the refresh driver being under'
|
|
+ ' test control');
|
|
|
|
// This test only applies to compositor animations
|
|
if (!isOMTAEnabled()) {
|
|
return;
|
|
}
|
|
|
|
const div = addDiv(t, { class: 'target' });
|
|
|
|
// As with the above test, any stray paints can cause this test to produce
|
|
// a false negative (that is, pass when it should fail). To avoid this we
|
|
// wait for paints and only then do we commence the test.
|
|
await waitForPaints();
|
|
|
|
const animation =
|
|
div.animate({ transform: [ 'translate(0px)', 'translate(100px)' ] },
|
|
{ duration: 400 * MS_PER_SEC,
|
|
delay: -200 * MS_PER_SEC });
|
|
|
|
await waitForAnimationReadyToRestyle(animation);
|
|
|
|
await waitForPaints();
|
|
|
|
const transformStr =
|
|
SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
|
|
const translateX = getTranslateXFromTransform(transformStr);
|
|
|
|
// If the delay has been applied we should be about half-way through
|
|
// the animation. However, if we applied it twice we will be at the
|
|
// end of the animation already so check that we are roughly half way
|
|
// through.
|
|
assert_between_inclusive(translateX, 40, 75,
|
|
'Animation is about half-way through on the compositor');
|
|
}, 'Starting an animation with a delay starts from the correct point');
|
|
|
|
// Test that compositor animations with a playback rate start at the
|
|
// appropriate point.
|
|
//
|
|
// NOTE: As with the previous test, it is important that we DON'T use
|
|
// SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh here since that takes
|
|
// us through a different code path.
|
|
promise_test(async t => {
|
|
assert_false(SpecialPowers.DOMWindowUtils.isTestControllingRefreshes,
|
|
'Test should run without the refresh driver being under'
|
|
+ ' test control');
|
|
|
|
// This test only applies to compositor animations
|
|
if (!isOMTAEnabled()) {
|
|
return;
|
|
}
|
|
|
|
const div = addDiv(t, { class: 'target' });
|
|
|
|
// Wait for the document to load and painting (see notes in previous test).
|
|
await waitForPaints();
|
|
|
|
const animation =
|
|
div.animate({ transform: [ 'translate(0px)', 'translate(100px)' ] },
|
|
200 * MS_PER_SEC);
|
|
animation.currentTime = 100 * MS_PER_SEC;
|
|
animation.playbackRate = 0.1;
|
|
|
|
await waitForPaints();
|
|
|
|
const transformStr =
|
|
SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
|
|
const translateX = getTranslateXFromTransform(transformStr);
|
|
|
|
// We pass the playback rate to the compositor independently and we have
|
|
// tests to ensure that it is correctly applied there. However, if, when
|
|
// we resolve the start time of the pending animation, we fail to
|
|
// incorporate the playback rate, we will end up starting from the wrong
|
|
// point and the current time calculated on the compositor will be wrong.
|
|
assert_between_inclusive(translateX, 25, 75,
|
|
'Animation is about half-way through on the compositor');
|
|
}, 'Starting an animation with a playbackRate starts from the correct point');
|
|
|
|
function getTranslateXFromTransform(transformStr) {
|
|
const matrixComponents =
|
|
transformStr.startsWith('matrix(')
|
|
? transformStr.substring('matrix('.length, transformStr.length-1)
|
|
.split(',')
|
|
.map(component => Number(component))
|
|
: [];
|
|
assert_equals(matrixComponents.length, 6,
|
|
'Got a valid transform matrix on the compositor'
|
|
+ ' (got: "' + transformStr + '")');
|
|
|
|
return matrixComponents[4];
|
|
}
|
|
|
|
done();
|
|
</script>
|
|
</body>
|