animation-shorthand.html (6389B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-shorthand"> 3 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/css/support/computed-testcommon.js"></script> 7 <script src="/css/support/parsing-testcommon.js"></script> 8 <script src="/css/support/shorthand-testcommon.js"></script> 9 <div id="target"></div> 10 <script> 11 test_valid_value('animation', 12 '1s linear 1s 2 reverse forwards paused anim'); 13 14 test_invalid_value('animation', 15 '1s linear 1s 2 reverse forwards paused anim initial'); 16 test_invalid_value('animation', 17 '1s linear 1s 2 reverse forwards paused anim 2000'); 18 test_invalid_value('animation', 19 '1s linear 1s 2 reverse forwards paused anim scroll()'); 20 test_invalid_value('animation', 21 '1s linear 1s 2 reverse forwards paused anim view()'); 22 test_invalid_value('animation', 23 '1s linear 1s 2 reverse forwards paused anim --timeline'); 24 25 test_computed_value('animation', 26 '1s linear 1s 2 reverse forwards paused anim'); 27 28 test_shorthand_value('animation', 29 `1s linear 1s 2 reverse forwards paused anim1, 30 1s linear 1s 2 reverse forwards paused anim2, 31 1s linear 1s 2 reverse forwards paused anim3`, 32 { 33 'animation-duration': '1s, 1s, 1s', 34 'animation-timing-function': 'linear, linear, linear', 35 'animation-delay': '1s, 1s, 1s', 36 'animation-iteration-count': '2, 2, 2', 37 'animation-direction': 'reverse, reverse, reverse', 38 'animation-fill-mode': 'forwards, forwards, forwards', 39 'animation-play-state': 'paused, paused, paused', 40 'animation-name': 'anim1, anim2, anim3', 41 'animation-timeline': 'auto', 42 'animation-range-start': 'normal', 43 'animation-range-end': 'normal', 44 }); 45 46 test((t) => { 47 t.add_cleanup(() => { 48 target.style = ''; 49 }); 50 51 target.style.animation = 'anim 1s'; 52 target.style.animationTimeline = '--timeline'; 53 assert_equals(target.style.animation, ''); 54 assert_equals(target.style.animationName, 'anim'); 55 assert_equals(target.style.animationDuration, '1s'); 56 57 target.style.animationTimeline = 'auto, auto'; 58 assert_equals(target.style.animation, ''); 59 }, 'Animation shorthand can not represent non-initial timelines (specified)'); 60 61 test((t) => { 62 t.add_cleanup(() => { 63 target.style = ''; 64 }); 65 66 target.style.animation = 'anim 1s'; 67 target.style.animationTimeline = '--timeline'; 68 assert_equals(getComputedStyle(target).animation, ''); 69 assert_equals(getComputedStyle(target).animationName, 'anim'); 70 assert_equals(getComputedStyle(target).animationDuration, '1s'); 71 72 target.style.animationTimeline = 'auto, auto'; 73 assert_equals(getComputedStyle(target).animation, ''); 74 }, 'Animation shorthand can not represent non-initial timelines (computed)'); 75 76 test((t) => { 77 t.add_cleanup(() => { 78 target.style = ''; 79 }); 80 81 target.style.animation = 'anim 1s'; 82 target.style.animationRangeStart = 'entry'; 83 assert_equals(target.style.animation, ''); 84 assert_equals(target.style.animationName, 'anim'); 85 assert_equals(target.style.animationDuration, '1s'); 86 87 target.style.animationRangeStart = 'normal, normal'; 88 assert_equals(target.style.animation, ''); 89 }, 'Animation shorthand can not represent non-initial animation-range-start (specified)'); 90 91 test((t) => { 92 t.add_cleanup(() => { 93 target.style = ''; 94 }); 95 96 target.style.animation = 'anim 1s'; 97 target.style.animationRangeStart = 'entry'; 98 assert_equals(getComputedStyle(target).animation, ''); 99 assert_equals(getComputedStyle(target).animationName, 'anim'); 100 assert_equals(getComputedStyle(target).animationDuration, '1s'); 101 102 target.style.animationRangeStart = 'normal, normal'; 103 assert_equals(getComputedStyle(target).animation, ''); 104 }, 'Animation shorthand can not represent non-initial animation-range-start (computed)'); 105 106 test((t) => { 107 t.add_cleanup(() => { 108 target.style = ''; 109 }); 110 111 target.style.animation = 'anim 1s'; 112 target.style.animationRangeEnd = 'entry'; 113 assert_equals(target.style.animation, ''); 114 assert_equals(target.style.animationName, 'anim'); 115 assert_equals(target.style.animationDuration, '1s'); 116 117 target.style.animationRangeEnd = 'normal, normal'; 118 assert_equals(target.style.animation, ''); 119 }, 'Animation shorthand can not represent non-initial animation-range-end (specified)'); 120 121 test((t) => { 122 t.add_cleanup(() => { 123 target.style = ''; 124 }); 125 126 target.style.animation = 'anim 1s'; 127 target.style.animationRangeEnd = 'entry'; 128 assert_equals(getComputedStyle(target).animation, ''); 129 assert_equals(getComputedStyle(target).animationName, 'anim'); 130 assert_equals(getComputedStyle(target).animationDuration, '1s'); 131 132 target.style.animationRangeEnd = 'normal, normal'; 133 assert_equals(getComputedStyle(target).animation, ''); 134 }, 'Animation shorthand can not represent non-initial animation-range-end (computed)'); 135 136 test((t) => { 137 t.add_cleanup(() => { 138 target.style = ''; 139 }); 140 141 target.style.animationName = "bounce, roll"; 142 target.style.animationDuration = "1s, 0.2s"; 143 target.style.animationTimingFunction = "ease-in, linear"; 144 target.style.animationDelay = "0s, 1s"; 145 target.style.animationDirection = "normal, reverse"; 146 target.style.animationFillMode = "forwards, backwards"; 147 target.style.animationIterationCount = "infinite, 2"; 148 target.style.animationPlayState = "paused, running"; 149 // animation-timeline and animation-range-{start|end} are initial values. 150 assert_equals(target.style.animation, ''); 151 }, 'Animation shorthand can not be represented with same list length (specified)'); 152 153 test((t) => { 154 t.add_cleanup(() => { 155 target.style = ''; 156 }); 157 158 target.style.animationName = "bounce, roll"; 159 target.style.animationDuration = "1s, 0.2s"; 160 target.style.animationTimingFunction = "ease-in, linear"; 161 target.style.animationDelay = "0s, 1s"; 162 target.style.animationDirection = "normal, reverse"; 163 target.style.animationFillMode = "forwards, backwards"; 164 target.style.animationIterationCount = "infinite, 2"; 165 target.style.animationPlayState = "paused, running"; 166 // animation-timeline and animation-range-{start|end} are initial values. 167 assert_equals(getComputedStyle(target).animation, 168 '1s ease-in infinite forwards paused bounce, ' + 169 '0.2s linear 1s 2 reverse backwards roll'); 170 }, 'Animation shorthand can be represented with same list length (computed)'); 171 172 </script>