CSS Animations Module Level 1 CR Test Suite

Keyframes (36 tests)

Test Refs Flags Info
+ 4 Keyframes
animation-keyframes Animated CSS Animations : keyframes specified using percentages or from/to keywords on animation time line.
  • To verify that keyframes set using percentages or from/to keywords on animation time line are in effect.
+ 4.1 Timing functions for keyframes
animationstart-and-animationend-events Animated CSS3 Animations: To verify animationstart and animationend events are handled.
  • To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.
+ 4.2 The ‘animation-name’ Property
animation-duration-001 Animated CSS Animations : animation-duration value is set blank.
  • When animation-duration value is set blank; animation is not visible.
animation-duration-002 Animated CSS Animations : animation-duration has a finite value.
  • When animation-duration is set to a finite value/duration, animation takes specified time to complete one cycle.
animation-duration-003 Animated CSS Animations : animation-duration with negative value.
  • A negative value for animation-duration is treated as 0 (zero); then animation cycle is immediate (i.e. there will be no animation seen).
animation-duration-004 Animated CSS Animations : animation-duration value set to 0 (zero).
  • When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen).
animation-iteration-count-001 Animated CSS Animations. animation-iteration-count is not set and testing for default value.
  • When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once.
animation-iteration-count-002 Animated CSS Animations. animation-iteration-count set to infinite.
  • animation-iteration-count set to infinite causes the animation to repeat forever.
animation-iteration-count-003 Animated CSS Animations. animation-iteration-count set to negative value.
  • When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation.
animation-iteration-count-004 Animated CSS Animations. animation-iteration-count set to non-integer.
  • Setting animation-iteration-count to non-integer leads animation to end part way.
animation-iteration-count-005 Animated CSS Animations. animation-iteration-count is set to a finite value.
  • When animation-iteration-count is set to a finite value; animation will play for the specified number of times.
animation-iteration-count-006 Animated CSS Animations. animation-iteration-count set to zero.
  • When animation-iteration-count is set to zero NO animation is seen.
animation-iteration-event Animated CSS3 Animations: To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.
  • To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.
animation-keyframes Animated CSS Animations : keyframes specified using percentages or from/to keywords on animation time line.
  • To verify that keyframes set using percentages or from/to keywords on animation time line are in effect.
animation-name-001 Animated CSS Animations : animation-name set with no value
  • To verify that NO animation is seen when animation-name is set without any value.
animation-name-002 Animated CSS Animations : animation-name set to valid keyframes rule name
  • When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation; desired animation should be seen.
animation-name-003 Animated CSS Animations : animation-name set to none
  • To verify that NO animation is seen when animation-name is set to none.
animation-name-004 Animated CSS Animations : animation-name does not match any keyframe at-rule.
  • To verify: if animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.
animation-play-state-001 Animated CSS Animations : animation-play-state set to paused
  • A paused animation will display the current value of the animation in a STATIC state (no animation).
animation-play-state-002 Animated CSS Animations : animation-play-state set to playing
  • When animation-play-state is set to running; animation continues to render.
animation-timing-function-001 Animated CSS Animations : animation-timing-function set to cubic-bezier with parameters (0,0,1,1).
  • To verify that: when animation-timing-function is set to cubic-bezier with parameters (0,0,1,1) animation is rendered with constant speed from begining till end.
animation-timing-function-002 Animated CSS Animations : animation-timing-function set to ease.
  • To verify that: when animation-timing-function is set to ease; animation starts slow, gains acceleration in the middle and again slows down at the end.
animation-timing-function-003 Animated CSS Animations : animation-timing-function set to ease-in.
  • To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses.
animation-timing-function-004 Animated CSS Animations : animation-timing-function set to ease-in-out.
  • To verify that: when animation-timing-function is set to ease-in-out; animation starts slow, gains acceleration in the middle and again slows down at the end.
animation-timing-function-005 Animated CSS Animations : animation-timing-function set to ease-out.
  • To verify that: when animation-timing-function is set to ease-out; animation starts with higher(than the normal) speed and relatively slows down as time progresses.
animation-timing-function-006 Animated CSS Animations : animation-timing-function set to linear.
  • To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end.
animationstart-and-animationend-events Animated CSS3 Animations: To verify animationstart and animationend events are handled.
  • To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.
animation-delay-001 Animated animation-delay - negative value
  • When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.
animation-delay-002 Animated animation-delay - positive value
  • When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.
animation-delay-003 Animated animation-delay - 0s
  • When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.
animation-delay-004 Animated animation-delay - ::after
  • Check that animation-delay applies to the ::after pseudo element.
animation-delay-005 Animated animation-delay - ::before
  • Check that animation-delay applies to the ::before pseudo element.
animation-direction-001 Animated animation-direction - alternate
  • When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
animation-direction-002 Animated animation-direction - normal
  • When animation-direction is set to normal, all iterations of animation are played as specified.
animation-direction-003 Animated animation-direction - alternate-reverse
  • When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
animation-direction-004 Animated animation-direction - reverse
  • When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.
animation-direction-005 Animated animation-direction - ::after
  • Check that animation-direction applies to the ::after pseudo element.
animation-direction-006 Animated animation-direction - ::before
  • Check that animation-direction applies to the ::before pseudo element
+ 4.3 The ‘animation-duration’ Property
animation-duration-001 Animated CSS Animations : animation-duration value is set blank.
  • When animation-duration value is set blank; animation is not visible.
animation-duration-002 Animated CSS Animations : animation-duration has a finite value.
  • When animation-duration is set to a finite value/duration, animation takes specified time to complete one cycle.
animation-duration-003 Animated CSS Animations : animation-duration with negative value.
  • A negative value for animation-duration is treated as 0 (zero); then animation cycle is immediate (i.e. there will be no animation seen).
animation-duration-004 Animated CSS Animations : animation-duration value set to 0 (zero).
  • When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen).
animation-iteration-count-001 Animated CSS Animations. animation-iteration-count is not set and testing for default value.
  • When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once.
animation-iteration-count-002 Animated CSS Animations. animation-iteration-count set to infinite.
  • animation-iteration-count set to infinite causes the animation to repeat forever.
animation-iteration-count-003 Animated CSS Animations. animation-iteration-count set to negative value.
  • When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation.
animation-iteration-count-004 Animated CSS Animations. animation-iteration-count set to non-integer.
  • Setting animation-iteration-count to non-integer leads animation to end part way.
animation-iteration-count-005 Animated CSS Animations. animation-iteration-count is set to a finite value.
  • When animation-iteration-count is set to a finite value; animation will play for the specified number of times.
animation-iteration-count-006 Animated CSS Animations. animation-iteration-count set to zero.
  • When animation-iteration-count is set to zero NO animation is seen.
animation-iteration-event Animated CSS3 Animations: To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.
  • To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.
animation-keyframes Animated CSS Animations : keyframes specified using percentages or from/to keywords on animation time line.
  • To verify that keyframes set using percentages or from/to keywords on animation time line are in effect.
animation-name-001 Animated CSS Animations : animation-name set with no value
  • To verify that NO animation is seen when animation-name is set without any value.
animation-name-002 Animated CSS Animations : animation-name set to valid keyframes rule name
  • When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation; desired animation should be seen.
animation-name-003 Animated CSS Animations : animation-name set to none
  • To verify that NO animation is seen when animation-name is set to none.
animation-name-004 Animated CSS Animations : animation-name does not match any keyframe at-rule.
  • To verify: if animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.
animation-play-state-001 Animated CSS Animations : animation-play-state set to paused
  • A paused animation will display the current value of the animation in a STATIC state (no animation).
animation-play-state-002 Animated CSS Animations : animation-play-state set to playing
  • When animation-play-state is set to running; animation continues to render.
animation-timing-function-001 Animated CSS Animations : animation-timing-function set to cubic-bezier with parameters (0,0,1,1).
  • To verify that: when animation-timing-function is set to cubic-bezier with parameters (0,0,1,1) animation is rendered with constant speed from begining till end.
animation-timing-function-002 Animated CSS Animations : animation-timing-function set to ease.
  • To verify that: when animation-timing-function is set to ease; animation starts slow, gains acceleration in the middle and again slows down at the end.
animation-timing-function-003 Animated CSS Animations : animation-timing-function set to ease-in.
  • To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses.
animation-timing-function-004 Animated CSS Animations : animation-timing-function set to ease-in-out.
  • To verify that: when animation-timing-function is set to ease-in-out; animation starts slow, gains acceleration in the middle and again slows down at the end.
animation-timing-function-005 Animated CSS Animations : animation-timing-function set to ease-out.
  • To verify that: when animation-timing-function is set to ease-out; animation starts with higher(than the normal) speed and relatively slows down as time progresses.
animation-timing-function-006 Animated CSS Animations : animation-timing-function set to linear.
  • To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end.
animationstart-and-animationend-events Animated CSS3 Animations: To verify animationstart and animationend events are handled.
  • To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.
animation-delay-001 Animated animation-delay - negative value
  • When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.
animation-delay-002 Animated animation-delay - positive value
  • When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.
animation-delay-003 Animated animation-delay - 0s
  • When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.
animation-delay-004 Animated animation-delay - ::after
  • Check that animation-delay applies to the ::after pseudo element.
animation-delay-005 Animated animation-delay - ::before
  • Check that animation-delay applies to the ::before pseudo element.
animation-direction-001 Animated animation-direction - alternate
  • When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
animation-direction-002 Animated animation-direction - normal
  • When animation-direction is set to normal, all iterations of animation are played as specified.
animation-direction-003 Animated animation-direction - alternate-reverse
  • When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
animation-direction-004 Animated animation-direction - reverse
  • When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.
animation-direction-005 Animated animation-direction - ::after
  • Check that animation-direction applies to the ::after pseudo element.
animation-direction-006 Animated animation-direction - ::before
  • Check that animation-direction applies to the ::before pseudo element
+ 4.4 The ‘animation-timing-function’ Property
animation-timing-function-001 Animated CSS Animations : animation-timing-function set to cubic-bezier with parameters (0,0,1,1).
  • To verify that: when animation-timing-function is set to cubic-bezier with parameters (0,0,1,1) animation is rendered with constant speed from begining till end.
animation-timing-function-002 Animated CSS Animations : animation-timing-function set to ease.
  • To verify that: when animation-timing-function is set to ease; animation starts slow, gains acceleration in the middle and again slows down at the end.
animation-timing-function-003 Animated CSS Animations : animation-timing-function set to ease-in.
  • To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses.
animation-timing-function-004 Animated CSS Animations : animation-timing-function set to ease-in-out.
  • To verify that: when animation-timing-function is set to ease-in-out; animation starts slow, gains acceleration in the middle and again slows down at the end.
animation-timing-function-005 Animated CSS Animations : animation-timing-function set to ease-out.
  • To verify that: when animation-timing-function is set to ease-out; animation starts with higher(than the normal) speed and relatively slows down as time progresses.
animation-timing-function-006 Animated CSS Animations : animation-timing-function set to linear.
  • To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end.
animation-delay-001 Animated animation-delay - negative value
  • When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.
+ 4.5 The ‘animation-iteration-count’ Property
animation-iteration-count-001 Animated CSS Animations. animation-iteration-count is not set and testing for default value.
  • When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once.
animation-iteration-count-002 Animated CSS Animations. animation-iteration-count set to infinite.
  • animation-iteration-count set to infinite causes the animation to repeat forever.
animation-iteration-count-003 Animated CSS Animations. animation-iteration-count set to negative value.
  • When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation.
animation-iteration-count-004 Animated CSS Animations. animation-iteration-count set to non-integer.
  • Setting animation-iteration-count to non-integer leads animation to end part way.
animation-iteration-count-005 Animated CSS Animations. animation-iteration-count is set to a finite value.
  • When animation-iteration-count is set to a finite value; animation will play for the specified number of times.
animation-iteration-count-006 Animated CSS Animations. animation-iteration-count set to zero.
  • When animation-iteration-count is set to zero NO animation is seen.
animation-iteration-event Animated CSS3 Animations: To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.
  • To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.
animation-direction-001 Animated animation-direction - alternate
  • When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
animation-direction-002 Animated animation-direction - normal
  • When animation-direction is set to normal, all iterations of animation are played as specified.
animation-direction-003 Animated animation-direction - alternate-reverse
  • When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
animation-direction-004 Animated animation-direction - reverse
  • When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.
animation-direction-005 Animated animation-direction - ::after
  • Check that animation-direction applies to the ::after pseudo element.
animation-direction-006 Animated animation-direction - ::before
  • Check that animation-direction applies to the ::before pseudo element
+ 4.6 The ‘animation-direction’ Property
animation-direction-001 Animated animation-direction - alternate
  • When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
animation-direction-002 Animated animation-direction - normal
  • When animation-direction is set to normal, all iterations of animation are played as specified.
animation-direction-003 Animated animation-direction - alternate-reverse
  • When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
animation-direction-004 Animated animation-direction - reverse
  • When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.
animation-direction-005 Animated animation-direction - ::after
  • Check that animation-direction applies to the ::after pseudo element.
animation-direction-006 Animated animation-direction - ::before
  • Check that animation-direction applies to the ::before pseudo element
+ 4.7 The ‘animation-play-state’ Property
animation-play-state-001 Animated CSS Animations : animation-play-state set to paused
  • A paused animation will display the current value of the animation in a STATIC state (no animation).
animation-play-state-002 Animated CSS Animations : animation-play-state set to playing
  • When animation-play-state is set to running; animation continues to render.
+ 4.8 The ‘animation-delay’ Property
animation-delay-001 Animated animation-delay - negative value
  • When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.
animation-delay-002 Animated animation-delay - positive value
  • When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.
animation-delay-003 Animated animation-delay - 0s
  • When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.
animation-delay-004 Animated animation-delay - ::after
  • Check that animation-delay applies to the ::after pseudo element.
animation-delay-005 Animated animation-delay - ::before
  • Check that animation-delay applies to the ::before pseudo element.
+ 4.9 The ‘animation-fill-mode’ Property
+ 4.10 The ‘animation’ Shorthand Property