infinite-active-duration.html (2361B)
1 <!DOCTYPE html> 2 <title>Various test cases producing infinite active duration</title> 3 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" /> 4 <script> 5 let effect = new KeyframeEffect(null, 6 { opacity: [0, 1] }, 7 { duration: 1, delay: -17592186044416, iterations: Infinity }); 8 effect.getComputedTiming(); 9 10 // Infinity delay + Infinity active duration 11 effect = new KeyframeEffect(null, 12 { opacity: [0, 1] }, 13 { duration: 1, delay: Number.MAX_VALUE, iterations: Infinity }); 14 effect.getComputedTiming(); 15 16 // Infinity end delay + Infinity active duration 17 effect = new KeyframeEffect(null, 18 { opacity: [0, 1] }, 19 { duration: 1, endDelay: Number.MAX_VALUE, iterations: Infinity }); 20 effect.getComputedTiming(); 21 22 // Infinity delay + Infinity active duration + Infinity end delay 23 effect = new KeyframeEffect(null, 24 { opacity: [0, 1] }, 25 { duration: 1, 26 delay: Number.MAX_VALUE, endDelay: Number.MAX_VALUE, 27 iterations: Infinity }); 28 effect.getComputedTiming(); 29 30 // -Infinity delay + Infinity active duration 31 effect = new KeyframeEffect(null, 32 { opacity: [0, 1] }, 33 { duration: 1, delay: -Number.MAX_VALUE, iterations: Infinity }); 34 effect.getComputedTiming(); 35 36 // -Infinity end delay + Infinity active duration 37 effect = new KeyframeEffect(null, 38 { opacity: [0, 1] }, 39 { duration: 1, endDelay: -Number.MAX_VALUE, iterations: Infinity }); 40 effect.getComputedTiming(); 41 42 // -Infinity delay + Infinity active duration + -Infinity end delay 43 effect = new KeyframeEffect(null, 44 { opacity: [0, 1] }, 45 { duration: 1, 46 delay: -Number.MAX_VALUE, endDelay: -Number.MAX_VALUE, 47 iterations: Infinity }); 48 effect.getComputedTiming(); 49 50 // -Infinity delay + finite active duration 51 effect = new KeyframeEffect(null, 52 { opacity: [0, 1] }, 53 { duration: 1, delay: -Number.MAX_VALUE, iterations: 1 }); 54 effect.getComputedTiming(); 55 56 // -Infinity end delay + finite active duration 57 effect = new KeyframeEffect(null, 58 { opacity: [0, 1] }, 59 { duration: 1, endDelay: -Number.MAX_VALUE, iterations: 1 }); 60 effect.getComputedTiming(); 61 62 // very large iterations 63 effect = new KeyframeEffect(null, 64 { opacity: [0, 1] }, 65 { duration: 1, delay: 281474976710655, iterations: 18014398509481984 }); 66 effect.getComputedTiming(); 67 68 </script>