effect-tests.js (3049B)
1 'use strict'; 2 3 // Common utility methods for testing animation effects 4 5 // Tests the |property| member of |animation's| target effect's computed timing 6 // at the various points indicated by |values|. 7 // 8 // |values| has the format: 9 // 10 // { 11 // before, // value to test during before phase 12 // activeBoundary, // value to test at the very beginning of the active 13 // // phase when playing forwards, or the very end of 14 // // the active phase when playing backwards. 15 // // This should be undefined if the active duration of 16 // // the effect is zero. 17 // after, // value to test during the after phase or undefined if the 18 // // active duration is infinite 19 // } 20 // 21 function assert_computed_timing_for_each_phase(animation, property, values) { 22 // Some computed timing properties (e.g. 'progress') require floating-point 23 // comparison, whilst exact equality suffices for others. 24 const assert_property_equals = 25 (property === 'progress') ? assert_times_equal : assert_equals; 26 27 const effect = animation.effect; 28 const timing = effect.getComputedTiming(); 29 30 // The following calculations are based on the definitions here: 31 // https://drafts.csswg.org/web-animations/#animation-effect-phases-and-states 32 const beforeActive = Math.max(Math.min(timing.delay, timing.endTime), 0); 33 const activeAfter = 34 Math.max(Math.min(timing.delay + timing.activeDuration, timing.endTime), 0); 35 const direction = animation.playbackRate < 0 ? 'backwards' : 'forwards'; 36 37 // Before phase 38 if (direction === 'forwards') { 39 animation.currentTime = beforeActive - 1; 40 } else { 41 animation.currentTime = beforeActive; 42 } 43 assert_property_equals(effect.getComputedTiming()[property], values.before, 44 `Value of ${property} in the before phase`); 45 46 // Active phase 47 if (effect.getComputedTiming().activeDuration > 0) { 48 if (direction === 'forwards') { 49 animation.currentTime = beforeActive; 50 } else { 51 animation.currentTime = activeAfter; 52 } 53 assert_property_equals(effect.getComputedTiming()[property], values.activeBoundary, 54 `Value of ${property} at the boundary of the active phase`); 55 } else { 56 assert_equals(values.activeBoundary, undefined, 57 'Test specifies a value to check during the active phase but' 58 + ' the animation has a zero duration'); 59 } 60 61 // After phase 62 if (effect.getComputedTiming().activeDuration !== Infinity) { 63 if (direction === 'forwards') { 64 animation.currentTime = activeAfter; 65 } else { 66 animation.currentTime = activeAfter + 1; 67 } 68 assert_property_equals(effect.getComputedTiming()[property], values.after, 69 `Value of ${property} in the after phase`); 70 } else { 71 assert_equals(values.after, undefined, 72 'Test specifies a value to check during the after phase but' 73 + ' the animation has an infinite duration'); 74 } 75 }