side-effects-common.js

Enable keyboard shortcuts

'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');