scroll-animations/css/animation-shorthand.html - external/github.com/web-platform-tests/wpt - Git at Google

 <!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',
   '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>
	<!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',
	'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>