Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 6 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /scroll-animations/css/animation-shorthand.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<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',
'animation-range-start': 'normal',
'animation-range-end': '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');
target.style.animationTimeline = 'auto, auto';
assert_equals(target.style.animation, '');
}, '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');
target.style.animationTimeline = 'auto, auto';
assert_equals(getComputedStyle(target).animation, '');
}, 'Animation shorthand can not represent non-initial timelines (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');
target.style.animationRangeStart = 'normal, normal';
assert_equals(target.style.animation, '');
}, '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');
target.style.animationRangeStart = 'normal, normal';
assert_equals(getComputedStyle(target).animation, '');
}, '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');
target.style.animationRangeEnd = 'normal, normal';
assert_equals(target.style.animation, '');
}, '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');
target.style.animationRangeEnd = 'normal, normal';
assert_equals(getComputedStyle(target).animation, '');
}, 'Animation shorthand can not represent non-initial animation-range-end (computed)');
test((t) => {
t.add_cleanup(() => {
target.style = '';
});
target.style.animationName = "bounce, roll";
target.style.animationDuration = "1s, 0.2s";
target.style.animationTimingFunction = "ease-in, linear";
target.style.animationDelay = "0s, 1s";
target.style.animationDirection = "normal, reverse";
target.style.animationFillMode = "forwards, backwards";
target.style.animationIterationCount = "infinite, 2";
target.style.animationPlayState = "paused, running";
// animation-timeline and animation-range-{start|end} are initial values.
assert_equals(target.style.animation, '');
}, 'Animation shorthand can not be represented with same list length (specified)');
test((t) => {
t.add_cleanup(() => {
target.style = '';
});
target.style.animationName = "bounce, roll";
target.style.animationDuration = "1s, 0.2s";
target.style.animationTimingFunction = "ease-in, linear";
target.style.animationDelay = "0s, 1s";
target.style.animationDirection = "normal, reverse";
target.style.animationFillMode = "forwards, backwards";
target.style.animationIterationCount = "infinite, 2";
target.style.animationPlayState = "paused, running";
// animation-timeline and animation-range-{start|end} are initial values.
assert_equals(getComputedStyle(target).animation,
'1s ease-in infinite forwards paused bounce, ' +
'0.2s linear 1s 2 reverse backwards roll');
}, 'Animation shorthand can be represented with same list length (computed)');
</script>