81 lines
2.4 KiB
JavaScript
81 lines
2.4 KiB
JavaScript
'use strict';
|
|
|
|
const PROPERTY_OPACITY = 0;
|
|
const PROPERTY_TRANSFORM = 1;
|
|
const PROPERTY_BGCOLOR = 2;
|
|
|
|
const PHASE_BEFORE = 10;
|
|
const PHASE_ACTIVE = 11;
|
|
const PHASE_AFTER = 12;
|
|
|
|
const STATE_CURRENT = 100;
|
|
const STATE_IN_EFFECT = 101;
|
|
const STATE_NONE = 102;
|
|
|
|
// Creates an animation in the given state/page used to test side-effects. See:
|
|
// https://drafts.csswg.org/web-animations-1/#animation-effect-phases-and-states
|
|
//
|
|
// testcase - A query string for the test case root. Must have a descendant
|
|
// with the 'target' class that will be animated.
|
|
// state - One of the STATE_ constants above. Configures the animation to be
|
|
// either "current", "in effect" or neither.
|
|
// property - One of the PROPERTY_ constants above, the property the animation
|
|
// will target.
|
|
// phase - One of the PHASE_ constants above. Configures the animation to be in
|
|
// the before/active/after phase.
|
|
function setupAnimation(testcase, state, property, phase) {
|
|
const root = document.querySelector(testcase);
|
|
const effect_target = root.querySelector('.target');
|
|
|
|
let keyframe;
|
|
if (property == PROPERTY_OPACITY)
|
|
keyframe = { opacity: 1};
|
|
else if (property == PROPERTY_TRANSFORM)
|
|
keyframe = { transform: 'translateX(0px)' };
|
|
else if (property == PROPERTY_BGCOLOR)
|
|
keyframe = { backgroundColor: 'red' };
|
|
else
|
|
throw new Error('Unexpected property');
|
|
|
|
const kPhaseDuration = 1000000;
|
|
const kBeforePhaseTime = kPhaseDuration / 2;
|
|
const kActivePhaseTime = kPhaseDuration + kPhaseDuration / 2;
|
|
const kAfterPhaseTime = 2 * kPhaseDuration + kPhaseDuration / 2;
|
|
|
|
const options = {
|
|
duration: kPhaseDuration,
|
|
delay: kPhaseDuration,
|
|
endDelay: kPhaseDuration,
|
|
|
|
easing: 'steps(1, jump-both)',
|
|
|
|
fill: (state == STATE_IN_EFFECT ? 'both' : 'none'),
|
|
};
|
|
|
|
const animation = effect_target.animate(
|
|
[ keyframe, keyframe ], options);
|
|
|
|
switch(phase) {
|
|
case PHASE_BEFORE:
|
|
animation.currentTime = kBeforePhaseTime;
|
|
if (state == STATE_IN_EFFECT || state == STATE_NONE)
|
|
animation.playbackRate = -1;
|
|
break;
|
|
|
|
case PHASE_ACTIVE:
|
|
if (state == STATE_NONE)
|
|
throw new Error("Cannot have state[NONE] in the active phase");
|
|
|
|
animation.currentTime = kActivePhaseTime;
|
|
break;
|
|
|
|
case PHASE_AFTER:
|
|
animation.currentTime = kAfterPhaseTime;
|
|
if (state == STATE_CURRENT)
|
|
animation.playbackRate = -1;
|
|
break;
|
|
|
|
default:
|
|
throw new Error('Unexpected phase');
|
|
}
|
|
}
|