| <!DOCTYPE html> |
| <link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-shorthand"> |
| <link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/support/computed-testcommon.js"></script> |
| <script src="/css/support/parsing-testcommon.js"></script> |
| <script src="/css/support/shorthand-testcommon.js"></script> |
| <div id="target"></div> |
| <script> |
| test_valid_value('animation', |
| '1s linear 1s 2 reverse forwards paused anim'); |
| |
| test_invalid_value('animation', |
| '1s linear 1s 2 reverse forwards paused anim initial'); |
| test_invalid_value('animation', |
| '1s linear 1s 2 reverse forwards paused anim 2000'); |
| test_invalid_value('animation', |
| '1s linear 1s 2 reverse forwards paused anim scroll()'); |
| test_invalid_value('animation', |
| '1s linear 1s 2 reverse forwards paused anim view()'); |
| test_invalid_value('animation', |
| '1s linear 1s 2 reverse forwards paused anim timeline'); |
| |
| test_computed_value('animation', |
| '1s linear 1s 2 reverse forwards paused anim'); |
| |
| test_shorthand_value('animation', |
| `1s linear 1s 2 reverse forwards paused anim1, |
| 1s linear 1s 2 reverse forwards paused anim2, |
| 1s linear 1s 2 reverse forwards paused anim3`, |
| { |
| 'animation-duration': '1s, 1s, 1s', |
| 'animation-timing-function': 'linear, linear, linear', |
| 'animation-delay': '1s, 1s, 1s', |
| 'animation-iteration-count': '2, 2, 2', |
| 'animation-direction': 'reverse, reverse, reverse', |
| 'animation-fill-mode': 'forwards, forwards, forwards', |
| 'animation-play-state': 'paused, paused, paused', |
| 'animation-name': 'anim1, anim2, anim3', |
| 'animation-timeline': 'auto, auto, auto', |
| 'animation-range-start': 'normal, normal, normal', |
| 'animation-range-end': 'normal, normal, normal', |
| }); |
| |
| test((t) => { |
| t.add_cleanup(() => { |
| target.style = ''; |
| }); |
| |
| target.style.animation = 'anim 1s'; |
| target.style.animationTimeline = '--timeline'; |
| assert_equals(target.style.animation, ''); |
| assert_equals(target.style.animationName, 'anim'); |
| assert_equals(target.style.animationDuration, '1s'); |
| }, 'Animation shorthand can not represent non-initial timelines (specified)'); |
| |
| test((t) => { |
| t.add_cleanup(() => { |
| target.style = ''; |
| }); |
| |
| target.style.animation = 'anim 1s'; |
| target.style.animationTimeline = '--timeline'; |
| assert_equals(getComputedStyle(target).animation, ''); |
| assert_equals(getComputedStyle(target).animationName, 'anim'); |
| assert_equals(getComputedStyle(target).animationDuration, '1s'); |
| }, 'Animation shorthand can not represent non-initial timelines (computed)'); |
| |
| test((t) => { |
| t.add_cleanup(() => { |
| target.style = ''; |
| }); |
| |
| target.style.animation = 'anim 1s'; |
| target.style.animationDelayEnd = '42s'; |
| assert_equals(target.style.animation, ''); |
| assert_equals(target.style.animationName, 'anim'); |
| assert_equals(target.style.animationDuration, '1s'); |
| }, 'Animation shorthand can not represent non-initial animation-delay-end (specified)'); |
| |
| test((t) => { |
| t.add_cleanup(() => { |
| target.style = ''; |
| }); |
| |
| target.style.animation = 'anim 1s'; |
| target.style.animationDelayEnd = '42s'; |
| assert_equals(getComputedStyle(target).animation, ''); |
| assert_equals(getComputedStyle(target).animationName, 'anim'); |
| assert_equals(getComputedStyle(target).animationDuration, '1s'); |
| }, 'Animation shorthand can not represent non-initial animation-delay-end (computed)'); |
| |
| test((t) => { |
| t.add_cleanup(() => { |
| target.style = ''; |
| }); |
| |
| target.style.animation = 'anim 1s'; |
| target.style.animationRangeStart = 'entry'; |
| assert_equals(target.style.animation, ''); |
| assert_equals(target.style.animationName, 'anim'); |
| assert_equals(target.style.animationDuration, '1s'); |
| }, 'Animation shorthand can not represent non-initial animation-range-start (specified)'); |
| |
| test((t) => { |
| t.add_cleanup(() => { |
| target.style = ''; |
| }); |
| |
| target.style.animation = 'anim 1s'; |
| target.style.animationRangeStart = 'entry'; |
| assert_equals(getComputedStyle(target).animation, ''); |
| assert_equals(getComputedStyle(target).animationName, 'anim'); |
| assert_equals(getComputedStyle(target).animationDuration, '1s'); |
| }, 'Animation shorthand can not represent non-initial animation-range-start (computed)'); |
| |
| test((t) => { |
| t.add_cleanup(() => { |
| target.style = ''; |
| }); |
| |
| target.style.animation = 'anim 1s'; |
| target.style.animationRangeEnd = 'entry'; |
| assert_equals(target.style.animation, ''); |
| assert_equals(target.style.animationName, 'anim'); |
| assert_equals(target.style.animationDuration, '1s'); |
| }, 'Animation shorthand can not represent non-initial animation-range-end (specified)'); |
| |
| test((t) => { |
| t.add_cleanup(() => { |
| target.style = ''; |
| }); |
| |
| target.style.animation = 'anim 1s'; |
| target.style.animationRangeEnd = 'entry'; |
| assert_equals(getComputedStyle(target).animation, ''); |
| assert_equals(getComputedStyle(target).animationName, 'anim'); |
| assert_equals(getComputedStyle(target).animationDuration, '1s'); |
| }, 'Animation shorthand can not represent non-initial animation-range-end (computed)'); |
| |
| </script> |