mirror of
https://github.com/servo/servo.git
synced 2025-07-12 09:53:40 +01:00
307 lines
8.7 KiB
HTML
307 lines
8.7 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<title>Animation interface: style change events</title>
|
|
<link rel="help"
|
|
href="https://drafts.csswg.org/web-animations-1/#model-liveness">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="../../testcommon.js"></script>
|
|
<body>
|
|
<div id="log"></div>
|
|
<script>
|
|
'use strict';
|
|
|
|
// Test that each property defined in the Animation interface does not produce
|
|
// style change events.
|
|
//
|
|
// There are two types of tests:
|
|
//
|
|
// PlayAnimationTest
|
|
//
|
|
// For properties that are able to cause the Animation to start affecting
|
|
// the target CSS property.
|
|
//
|
|
// This function takes either:
|
|
//
|
|
// (a) A function that simply "plays" that passed-in Animation (i.e. makes
|
|
// it start affecting the target CSS property.
|
|
//
|
|
// (b) An object with the following format:
|
|
//
|
|
// {
|
|
// setup: elem => { /* return Animation */ }
|
|
// test: animation => { /* play |animation| */ }
|
|
// }
|
|
//
|
|
// If the latter form is used, the setup function should return an Animation
|
|
// that does NOT (yet) have an in-effect AnimationEffect that affects the
|
|
// 'opacity' property. Otherwise, the transition we use to detect if a style
|
|
// change event has occurred will never have a chance to be triggered (since
|
|
// the animated style will clobber both before-change and after-change
|
|
// style).
|
|
//
|
|
// Examples of valid animations:
|
|
//
|
|
// - An animation that is idle, or finished but without a fill mode.
|
|
// - An animation with an effect that that does not affect opacity.
|
|
//
|
|
// UsePropertyTest
|
|
//
|
|
// For properties that cannot cause the Animation to start affecting the
|
|
// target CSS property.
|
|
//
|
|
// The shape of the parameter to the UsePropertyTest is identical to the
|
|
// PlayAnimationTest. The only difference is that the function (or 'test'
|
|
// function of the object format is used) does not need to play the
|
|
// animation, but simply needs to get/set the property under test.
|
|
|
|
const PlayAnimationTest = testFuncOrObj => {
|
|
let test, setup;
|
|
|
|
if (typeof testFuncOrObj === 'function') {
|
|
test = testFuncOrObj;
|
|
} else {
|
|
test = testFuncOrObj.test;
|
|
if (typeof testFuncOrObj.setup === 'function') {
|
|
setup = testFuncOrObj.setup;
|
|
}
|
|
}
|
|
|
|
if (!setup) {
|
|
setup = elem =>
|
|
new Animation(
|
|
new KeyframeEffect(elem, { opacity: [0, 1] }, 100 * MS_PER_SEC)
|
|
);
|
|
}
|
|
|
|
return { test, setup };
|
|
};
|
|
|
|
const UsePropertyTest = testFuncOrObj => {
|
|
const { setup, test } = PlayAnimationTest(testFuncOrObj);
|
|
|
|
let coveringAnimation;
|
|
return {
|
|
setup: elem => {
|
|
coveringAnimation = new Animation(
|
|
new KeyframeEffect(elem, { opacity: [0, 1] }, 100 * MS_PER_SEC)
|
|
);
|
|
|
|
return setup(elem);
|
|
},
|
|
test: animation => {
|
|
test(animation);
|
|
coveringAnimation.play();
|
|
},
|
|
};
|
|
};
|
|
|
|
const tests = {
|
|
id: UsePropertyTest(animation => (animation.id = 'yer')),
|
|
get effect() {
|
|
let effect;
|
|
return PlayAnimationTest({
|
|
setup: elem => {
|
|
// Create a new effect and animation but don't associate them yet
|
|
effect = new KeyframeEffect(
|
|
elem,
|
|
{ opacity: [0.5, 1] },
|
|
100 * MS_PER_SEC
|
|
);
|
|
return elem.animate(null, 100 * MS_PER_SEC);
|
|
},
|
|
test: animation => {
|
|
// Read the effect
|
|
animation.effect;
|
|
|
|
// Assign the effect
|
|
animation.effect = effect;
|
|
},
|
|
});
|
|
},
|
|
timeline: PlayAnimationTest({
|
|
setup: elem => {
|
|
// Create a new animation with no timeline
|
|
const animation = new Animation(
|
|
new KeyframeEffect(elem, { opacity: [0.5, 1] }, 100 * MS_PER_SEC),
|
|
null
|
|
);
|
|
// Set the hold time so that once we assign a timeline it will begin to
|
|
// play.
|
|
animation.currentTime = 0;
|
|
|
|
return animation;
|
|
},
|
|
test: animation => {
|
|
// Get the timeline
|
|
animation.timeline;
|
|
|
|
// Play the animation by setting the timeline
|
|
animation.timeline = document.timeline;
|
|
},
|
|
}),
|
|
startTime: PlayAnimationTest(animation => {
|
|
// Get the startTime
|
|
animation.startTime;
|
|
|
|
// Play the animation by setting the startTime
|
|
animation.startTime = document.timeline.currentTime;
|
|
}),
|
|
currentTime: PlayAnimationTest(animation => {
|
|
// Get the currentTime
|
|
animation.currentTime;
|
|
|
|
// Play the animation by setting the currentTime
|
|
animation.currentTime = 0;
|
|
}),
|
|
playbackRate: UsePropertyTest(animation => {
|
|
// Get and set the playbackRate
|
|
animation.playbackRate = animation.playbackRate * 1.1;
|
|
}),
|
|
playState: UsePropertyTest(animation => animation.playState),
|
|
pending: UsePropertyTest(animation => animation.pending),
|
|
ready: UsePropertyTest(animation => animation.ready),
|
|
finished: UsePropertyTest(animation => {
|
|
// Get the finished Promise
|
|
animation.finished;
|
|
}),
|
|
onfinish: UsePropertyTest(animation => {
|
|
// Get the onfinish member
|
|
animation.onfinish;
|
|
|
|
// Set the onfinish menber
|
|
animation.onfinish = () => {};
|
|
}),
|
|
oncancel: UsePropertyTest(animation => {
|
|
// Get the oncancel member
|
|
animation.oncancel;
|
|
|
|
// Set the oncancel menber
|
|
animation.oncancel = () => {};
|
|
}),
|
|
cancel: UsePropertyTest({
|
|
// Animate _something_ just to make the test more interesting
|
|
setup: elem => elem.animate({ color: ['green', 'blue'] }, 100 * MS_PER_SEC),
|
|
test: animation => {
|
|
animation.cancel();
|
|
},
|
|
}),
|
|
finish: PlayAnimationTest({
|
|
setup: elem =>
|
|
new Animation(
|
|
new KeyframeEffect(
|
|
elem,
|
|
{ opacity: [0.5, 1] },
|
|
{
|
|
duration: 100 * MS_PER_SEC,
|
|
fill: 'both',
|
|
}
|
|
)
|
|
),
|
|
test: animation => {
|
|
animation.finish();
|
|
},
|
|
}),
|
|
play: PlayAnimationTest(animation => animation.play()),
|
|
pause: PlayAnimationTest(animation => {
|
|
// Pause animation -- this will cause the animation to transition from the
|
|
// 'idle' state to the 'paused' (but pending) state with hold time zero.
|
|
animation.pause();
|
|
}),
|
|
updatePlaybackRate: UsePropertyTest(animation => {
|
|
animation.updatePlaybackRate(1.1);
|
|
}),
|
|
// We would like to use a PlayAnimationTest here but reverse() is async and
|
|
// doesn't start applying its result until the animation is ready.
|
|
reverse: UsePropertyTest({
|
|
setup: elem => {
|
|
// Create a new animation and seek it to the end so that it no longer
|
|
// affects style (since it has no fill mode).
|
|
const animation = elem.animate({ opacity: [0.5, 1] }, 100 * MS_PER_SEC);
|
|
animation.finish();
|
|
return animation;
|
|
},
|
|
test: animation => {
|
|
animation.reverse();
|
|
},
|
|
}),
|
|
get ['Animation constructor']() {
|
|
let originalElem;
|
|
return UsePropertyTest({
|
|
setup: elem => {
|
|
originalElem = elem;
|
|
// Return a dummy animation so the caller has something to wait on
|
|
return elem.animate(null);
|
|
},
|
|
test: () =>
|
|
new Animation(
|
|
new KeyframeEffect(
|
|
originalElem,
|
|
{ opacity: [0.5, 1] },
|
|
100 * MS_PER_SEC
|
|
)
|
|
),
|
|
});
|
|
},
|
|
};
|
|
|
|
// Check that each enumerable property and the constructor follow the
|
|
// expected behavior with regards to triggering style change events.
|
|
const properties = [
|
|
...Object.keys(Animation.prototype),
|
|
'Animation constructor',
|
|
];
|
|
|
|
test(() => {
|
|
for (const property of Object.keys(tests)) {
|
|
assert_in_array(
|
|
property,
|
|
properties,
|
|
`Test property '${property}' should be one of the properties on ` +
|
|
' Animation'
|
|
);
|
|
}
|
|
}, 'All property keys are recognized');
|
|
|
|
for (const key of properties) {
|
|
promise_test(async t => {
|
|
assert_own_property(tests, key, `Should have a test for '${key}' property`);
|
|
const { setup, test } = tests[key];
|
|
|
|
// Setup target element
|
|
const div = createDiv(t);
|
|
let gotTransition = false;
|
|
div.addEventListener('transitionrun', () => {
|
|
gotTransition = true;
|
|
});
|
|
|
|
// Setup animation
|
|
const animation = setup(div);
|
|
|
|
// Setup transition start point
|
|
div.style.transition = 'opacity 100s';
|
|
getComputedStyle(div).opacity;
|
|
|
|
// Update specified style but don't flush
|
|
div.style.opacity = '0.5';
|
|
|
|
// Trigger the property
|
|
test(animation);
|
|
|
|
// If the test function produced a style change event it will have triggered
|
|
// a transition.
|
|
|
|
// Wait for the animation to start and then for at least one animation
|
|
// frame to give the transitionrun event a chance to be dispatched.
|
|
assert_true(
|
|
typeof animation.ready !== 'undefined',
|
|
'Should have a valid animation to wait on'
|
|
);
|
|
await animation.ready;
|
|
await waitForAnimationFrames(1);
|
|
|
|
assert_false(gotTransition, 'A transition should NOT have been triggered');
|
|
}, `Animation.${key} does NOT trigger a style change event`);
|
|
}
|
|
</script>
|
|
</body>
|