tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

side-effects-common.js (2497B)

      1 'use strict';
      2 
      3 const PROPERTY_OPACITY = 0;
      4 const PROPERTY_TRANSFORM = 1;
      5 const PROPERTY_BGCOLOR = 2;
      6 
      7 const PHASE_BEFORE = 10;
      8 const PHASE_ACTIVE = 11;
      9 const PHASE_AFTER = 12;
     10 
     11 const STATE_CURRENT = 100;
     12 const STATE_IN_EFFECT = 101;
     13 const STATE_NONE = 102;
     14 
     15 // Creates an animation in the given state/page used to test side-effects. See:
     16 // https://drafts.csswg.org/web-animations-1/#animation-effect-phases-and-states
     17 //
     18 // testcase - A query string for the test case root. Must have a descendant
     19 //            with the 'target' class that will be animated.
     20 // state - One of the STATE_ constants above. Configures the animation to be
     21 //         either "current", "in effect" or neither.
     22 // property - One of the PROPERTY_ constants above, the property the animation
     23 //            will target.
     24 // phase - One of the PHASE_ constants above. Configures the animation to be in
     25 //         the before/active/after phase.
     26 function setupAnimation(testcase, state, property, phase) {
     27  const root = document.querySelector(testcase);
     28  const effect_target = root.querySelector('.target');
     29 
     30  let keyframe;
     31  if (property == PROPERTY_OPACITY)
     32    keyframe = { opacity: 1};
     33  else if (property == PROPERTY_TRANSFORM)
     34    keyframe = { transform: 'translateX(0px)' };
     35  else if (property == PROPERTY_BGCOLOR)
     36    keyframe = { backgroundColor: 'red' };
     37  else
     38    throw new Error('Unexpected property');
     39 
     40  const kPhaseDuration = 1000000;
     41  const kBeforePhaseTime = kPhaseDuration / 2;
     42  const kActivePhaseTime = kPhaseDuration + kPhaseDuration / 2;
     43  const kAfterPhaseTime = 2 * kPhaseDuration + kPhaseDuration / 2;
     44 
     45  const options = {
     46    duration: kPhaseDuration,
     47    delay: kPhaseDuration,
     48    endDelay: kPhaseDuration,
     49 
     50    easing: 'steps(1, jump-both)',
     51 
     52    fill: (state == STATE_IN_EFFECT ? 'both' : 'none'),
     53  };
     54 
     55  const animation = effect_target.animate(
     56    [ keyframe, keyframe ], options);
     57 
     58  switch(phase) {
     59    case PHASE_BEFORE:
     60      animation.currentTime = kBeforePhaseTime;
     61      if (state == STATE_IN_EFFECT || state == STATE_NONE)
     62        animation.playbackRate = -1;
     63      break;
     64 
     65    case PHASE_ACTIVE:
     66      if (state == STATE_NONE)
     67        throw new Error("Cannot have state[NONE] in the active phase");
     68 
     69      animation.currentTime = kActivePhaseTime;
     70      break;
     71 
     72    case PHASE_AFTER:
     73      animation.currentTime = kAfterPhaseTime;
     74      if (state == STATE_CURRENT)
     75        animation.playbackRate = -1;
     76      break;
     77 
     78    default:
     79      throw new Error('Unexpected phase');
     80  }
     81 }