mirror of
https://github.com/servo/servo.git
synced 2025-06-26 01:54:33 +01:00
1342 lines
No EOL
63 KiB
HTML
1342 lines
No EOL
63 KiB
HTML
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>Keyframes - CSS Animations Module Level 1 CR Test Suite</title>
|
|
<style type="text/css">
|
|
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
|
@import "../indices.css";
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
|
|
<h2>Keyframes (36 tests)</h2>
|
|
<table width="100%">
|
|
<col id="test-column"></col>
|
|
<col id="refs-column"></col>
|
|
<col id="flags-column"></col>
|
|
<col id="info-column"></col>
|
|
<thead>
|
|
<tr>
|
|
<th>Test</th>
|
|
<th><abbr title="Rendering References">Refs</abbr></th>
|
|
<th>Flags</th>
|
|
<th>Info</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="s4">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4">+</a>
|
|
<a href="http://www.w3.org/TR/css3-animations/#keyframes">4 Keyframes</a></th></tr>
|
|
<!-- 1 tests -->
|
|
<tr id="animation-keyframes-4" class="animated">
|
|
<td>
|
|
<a href="animation-keyframes.xht">animation-keyframes</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : keyframes specified using percentages or from/to keywords on animation time line.
|
|
<ul class="assert">
|
|
<li>To verify that keyframes set using percentages or from/to keywords on animation time line are in effect.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.#keyframe-declaration-block">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.#keyframe-selector">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.1">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.1">+</a>
|
|
<a href="http://www.w3.org/TR/css3-animations/#timing-functions">4.1 Timing functions for keyframes</a></th></tr>
|
|
<!-- 1 tests -->
|
|
<tr id="animationstart-and-animationend-events-4.1" class="animated">
|
|
<td>
|
|
<a href="animationstart-and-animationend-events.xht">animationstart-and-animationend-events</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS3 Animations: To verify animationstart and animationend events are handled.
|
|
<ul class="assert">
|
|
<li>To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.2">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.2">+</a>
|
|
<a href="http://www.w3.org/TR/css3-animations/#animation-name-property">4.2 The ‘animation-name’ Property</a></th></tr>
|
|
<!-- 25 tests -->
|
|
<tr id="animation-duration-001-4.2" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-duration-001.xht">animation-duration-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-duration value is set blank.
|
|
<ul class="assert">
|
|
<li>When animation-duration value is set blank; animation is not visible.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-002-4.2" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-duration-002.xht">animation-duration-002</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-duration has a finite value.
|
|
<ul class="assert">
|
|
<li>When animation-duration is set to a finite value/duration, animation takes specified time to complete one cycle.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-003-4.2" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-duration-003.xht">animation-duration-003</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-duration with negative value.
|
|
<ul class="assert">
|
|
<li>A negative value for animation-duration is treated as 0 (zero); then animation cycle is immediate (i.e. there will be no animation seen).</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-004-4.2" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-duration-004.xht">animation-duration-004</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-duration value set to 0 (zero).
|
|
<ul class="assert">
|
|
<li>When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen).</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-001-4.2" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-iteration-count-001.xht">animation-iteration-count-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count is not set and testing for default value.
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-002-4.2" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-iteration-count-002.xht">animation-iteration-count-002</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count set to infinite.
|
|
<ul class="assert">
|
|
<li>animation-iteration-count set to infinite causes the animation to repeat forever.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-003-4.2" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-iteration-count-003.xht">animation-iteration-count-003</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count set to negative value.
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-004-4.2" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-iteration-count-004.xht">animation-iteration-count-004</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count set to non-integer.
|
|
<ul class="assert">
|
|
<li>Setting animation-iteration-count to non-integer leads animation to end part way.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-005-4.2" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-iteration-count-005.xht">animation-iteration-count-005</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count is set to a finite value.
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to a finite value; animation will play for the specified number of times.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-006-4.2" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-iteration-count-006.xht">animation-iteration-count-006</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count set to zero.
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to zero NO animation is seen.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-event-4.2" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-iteration-event.xht">animation-iteration-event</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>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.
|
|
<ul class="assert">
|
|
<li>To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-keyframes-4.2" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-keyframes.xht">animation-keyframes</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : keyframes specified using percentages or from/to keywords on animation time line.
|
|
<ul class="assert">
|
|
<li>To verify that keyframes set using percentages or from/to keywords on animation time line are in effect.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-001-4.2" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-name-001.xht">animation-name-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-name set with no value
|
|
<ul class="assert">
|
|
<li>To verify that NO animation is seen when animation-name is set without any value.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-002-4.2" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-name-002.xht">animation-name-002</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-name set to valid keyframes rule name
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-003-4.2" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-name-003.xht">animation-name-003</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-name set to none
|
|
<ul class="assert">
|
|
<li>To verify that NO animation is seen when animation-name is set to none.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-004-4.2" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-name-004.xht">animation-name-004</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-name does not match any keyframe at-rule.
|
|
<ul class="assert">
|
|
<li>To verify: if animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-play-state-001-4.2" class="animated">
|
|
<td>
|
|
<a href="animation-play-state-001.xht">animation-play-state-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-play-state set to paused
|
|
<ul class="assert">
|
|
<li>A paused animation will display the current value of the animation in a STATIC state (no animation).</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-play-state-002-4.2" class="animated">
|
|
<td>
|
|
<a href="animation-play-state-002.xht">animation-play-state-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-play-state set to playing
|
|
<ul class="assert">
|
|
<li>When animation-play-state is set to running; animation continues to render.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-001-4.2" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-001.xht">animation-timing-function-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to cubic-bezier with parameters (0,0,1,1).
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-002-4.2" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-002.xht">animation-timing-function-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to ease.
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-003-4.2" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-003.xht">animation-timing-function-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to ease-in.
|
|
<ul class="assert">
|
|
<li>To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-004-4.2" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-004.xht">animation-timing-function-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to ease-in-out.
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-005-4.2" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-005.xht">animation-timing-function-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to ease-out.
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-006-4.2" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-006.xht">animation-timing-function-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to linear.
|
|
<ul class="assert">
|
|
<li>To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animationstart-and-animationend-events-4.2" class="primary animated">
|
|
<td><strong>
|
|
<a href="animationstart-and-animationend-events.xht">animationstart-and-animationend-events</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS3 Animations: To verify animationstart and animationend events are handled.
|
|
<ul class="assert">
|
|
<li>To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.2.#animation-name">
|
|
<!-- 11 tests -->
|
|
<tr id="animation-delay-001-4.2.#animation-name" class="animated">
|
|
<td>
|
|
<a href="animation-delay-001.xht">animation-delay-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - negative value
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-delay-002-4.2.#animation-name" class="animated">
|
|
<td>
|
|
<a href="animation-delay-002.xht">animation-delay-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - positive value
|
|
<ul class="assert">
|
|
<li>When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-delay-003-4.2.#animation-name" class="animated">
|
|
<td>
|
|
<a href="animation-delay-003.xht">animation-delay-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - 0s
|
|
<ul class="assert">
|
|
<li>When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-delay-004-4.2.#animation-name" class="animated">
|
|
<td>
|
|
<a href="animation-delay-004.xht">animation-delay-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-delay applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-delay-005-4.2.#animation-name" class="animated">
|
|
<td>
|
|
<a href="animation-delay-005.xht">animation-delay-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-delay applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-001-4.2.#animation-name" class="animated">
|
|
<td>
|
|
<a href="animation-direction-001.xht">animation-direction-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - alternate
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-002-4.2.#animation-name" class="animated">
|
|
<td>
|
|
<a href="animation-direction-002.xht">animation-direction-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - normal
|
|
<ul class="assert">
|
|
<li>When animation-direction is set to normal, all iterations of animation are played as specified.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-003-4.2.#animation-name" class="animated">
|
|
<td>
|
|
<a href="animation-direction-003.xht">animation-direction-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - alternate-reverse
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-004-4.2.#animation-name" class="animated">
|
|
<td>
|
|
<a href="animation-direction-004.xht">animation-direction-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - reverse
|
|
<ul class="assert">
|
|
<li>When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-005-4.2.#animation-name" class="animated">
|
|
<td>
|
|
<a href="animation-direction-005.xht">animation-direction-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-direction applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-006-4.2.#animation-name" class="animated">
|
|
<td>
|
|
<a href="animation-direction-006.xht">animation-direction-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-direction applies to the ::before pseudo element</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.2.#list-matching">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.2.#single-animation-name">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.3">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.3">+</a>
|
|
<a href="http://www.w3.org/TR/css3-animations/#animation-duration-property">4.3 The ‘animation-duration’ Property</a></th></tr>
|
|
<!-- 25 tests -->
|
|
<tr id="animation-duration-001-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-duration-001.xht">animation-duration-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-duration value is set blank.
|
|
<ul class="assert">
|
|
<li>When animation-duration value is set blank; animation is not visible.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-002-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-duration-002.xht">animation-duration-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-duration has a finite value.
|
|
<ul class="assert">
|
|
<li>When animation-duration is set to a finite value/duration, animation takes specified time to complete one cycle.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-003-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-duration-003.xht">animation-duration-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-duration with negative value.
|
|
<ul class="assert">
|
|
<li>A negative value for animation-duration is treated as 0 (zero); then animation cycle is immediate (i.e. there will be no animation seen).</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-004-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-duration-004.xht">animation-duration-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-duration value set to 0 (zero).
|
|
<ul class="assert">
|
|
<li>When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen).</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-001-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-001.xht">animation-iteration-count-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count is not set and testing for default value.
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-002-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-002.xht">animation-iteration-count-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count set to infinite.
|
|
<ul class="assert">
|
|
<li>animation-iteration-count set to infinite causes the animation to repeat forever.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-003-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-003.xht">animation-iteration-count-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count set to negative value.
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-004-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-004.xht">animation-iteration-count-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count set to non-integer.
|
|
<ul class="assert">
|
|
<li>Setting animation-iteration-count to non-integer leads animation to end part way.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-005-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-005.xht">animation-iteration-count-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count is set to a finite value.
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to a finite value; animation will play for the specified number of times.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-006-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-006.xht">animation-iteration-count-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count set to zero.
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to zero NO animation is seen.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-event-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-event.xht">animation-iteration-event</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>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.
|
|
<ul class="assert">
|
|
<li>To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-keyframes-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-keyframes.xht">animation-keyframes</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : keyframes specified using percentages or from/to keywords on animation time line.
|
|
<ul class="assert">
|
|
<li>To verify that keyframes set using percentages or from/to keywords on animation time line are in effect.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-001-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-name-001.xht">animation-name-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-name set with no value
|
|
<ul class="assert">
|
|
<li>To verify that NO animation is seen when animation-name is set without any value.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-002-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-name-002.xht">animation-name-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-name set to valid keyframes rule name
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-003-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-name-003.xht">animation-name-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-name set to none
|
|
<ul class="assert">
|
|
<li>To verify that NO animation is seen when animation-name is set to none.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-004-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-name-004.xht">animation-name-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-name does not match any keyframe at-rule.
|
|
<ul class="assert">
|
|
<li>To verify: if animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-play-state-001-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-play-state-001.xht">animation-play-state-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-play-state set to paused
|
|
<ul class="assert">
|
|
<li>A paused animation will display the current value of the animation in a STATIC state (no animation).</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-play-state-002-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-play-state-002.xht">animation-play-state-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-play-state set to playing
|
|
<ul class="assert">
|
|
<li>When animation-play-state is set to running; animation continues to render.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-001-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-001.xht">animation-timing-function-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to cubic-bezier with parameters (0,0,1,1).
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-002-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-002.xht">animation-timing-function-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to ease.
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-003-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-003.xht">animation-timing-function-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to ease-in.
|
|
<ul class="assert">
|
|
<li>To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-004-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-004.xht">animation-timing-function-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to ease-in-out.
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-005-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-005.xht">animation-timing-function-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to ease-out.
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-006-4.3" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-006.xht">animation-timing-function-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to linear.
|
|
<ul class="assert">
|
|
<li>To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animationstart-and-animationend-events-4.3" class="animated">
|
|
<td>
|
|
<a href="animationstart-and-animationend-events.xht">animationstart-and-animationend-events</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS3 Animations: To verify animationstart and animationend events are handled.
|
|
<ul class="assert">
|
|
<li>To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.3.#animation-duration">
|
|
<!-- 11 tests -->
|
|
<tr id="animation-delay-001-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-delay-001.xht">animation-delay-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - negative value
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-delay-002-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-delay-002.xht">animation-delay-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - positive value
|
|
<ul class="assert">
|
|
<li>When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-delay-003-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-delay-003.xht">animation-delay-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - 0s
|
|
<ul class="assert">
|
|
<li>When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-delay-004-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-delay-004.xht">animation-delay-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-delay applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-delay-005-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-delay-005.xht">animation-delay-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-delay applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-001-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-direction-001.xht">animation-direction-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - alternate
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-002-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-direction-002.xht">animation-direction-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - normal
|
|
<ul class="assert">
|
|
<li>When animation-direction is set to normal, all iterations of animation are played as specified.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-003-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-direction-003.xht">animation-direction-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - alternate-reverse
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-004-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-direction-004.xht">animation-direction-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - reverse
|
|
<ul class="assert">
|
|
<li>When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-005-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-direction-005.xht">animation-direction-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-direction applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-006-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-direction-006.xht">animation-direction-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-direction applies to the ::before pseudo element</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.4">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.4">+</a>
|
|
<a href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property">4.4 The ‘animation-timing-function’ Property</a></th></tr>
|
|
<!-- 6 tests -->
|
|
<tr id="animation-timing-function-001-4.4" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-001.xht">animation-timing-function-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to cubic-bezier with parameters (0,0,1,1).
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-002-4.4" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-002.xht">animation-timing-function-002</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to ease.
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-003-4.4" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-003.xht">animation-timing-function-003</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to ease-in.
|
|
<ul class="assert">
|
|
<li>To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-004-4.4" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-004.xht">animation-timing-function-004</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to ease-in-out.
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-005-4.4" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-005.xht">animation-timing-function-005</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to ease-out.
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-006-4.4" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-006.xht">animation-timing-function-006</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-timing-function set to linear.
|
|
<ul class="assert">
|
|
<li>To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.4.#animation-timing-function">
|
|
<!-- 1 tests -->
|
|
<tr id="animation-delay-001-4.4.#animation-timing-function" class="animated">
|
|
<td>
|
|
<a href="animation-delay-001.xht">animation-delay-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - negative value
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.5">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.5">+</a>
|
|
<a href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property">4.5 The ‘animation-iteration-count’ Property</a></th></tr>
|
|
<!-- 7 tests -->
|
|
<tr id="animation-iteration-count-001-4.5" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-001.xht">animation-iteration-count-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count is not set and testing for default value.
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-002-4.5" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-002.xht">animation-iteration-count-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count set to infinite.
|
|
<ul class="assert">
|
|
<li>animation-iteration-count set to infinite causes the animation to repeat forever.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-003-4.5" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-003.xht">animation-iteration-count-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count set to negative value.
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-004-4.5" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-004.xht">animation-iteration-count-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count set to non-integer.
|
|
<ul class="assert">
|
|
<li>Setting animation-iteration-count to non-integer leads animation to end part way.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-005-4.5" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-005.xht">animation-iteration-count-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count is set to a finite value.
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to a finite value; animation will play for the specified number of times.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-006-4.5" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-006.xht">animation-iteration-count-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations. animation-iteration-count set to zero.
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to zero NO animation is seen.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-event-4.5" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-event.xht">animation-iteration-event</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>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.
|
|
<ul class="assert">
|
|
<li>To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.5.#animation-iteration-count">
|
|
<!-- 6 tests -->
|
|
<tr id="animation-direction-001-4.5.#animation-iteration-count" class="animated">
|
|
<td>
|
|
<a href="animation-direction-001.xht">animation-direction-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - alternate
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-002-4.5.#animation-iteration-count" class="animated">
|
|
<td>
|
|
<a href="animation-direction-002.xht">animation-direction-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - normal
|
|
<ul class="assert">
|
|
<li>When animation-direction is set to normal, all iterations of animation are played as specified.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-003-4.5.#animation-iteration-count" class="animated">
|
|
<td>
|
|
<a href="animation-direction-003.xht">animation-direction-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - alternate-reverse
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-004-4.5.#animation-iteration-count" class="animated">
|
|
<td>
|
|
<a href="animation-direction-004.xht">animation-direction-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - reverse
|
|
<ul class="assert">
|
|
<li>When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-005-4.5.#animation-iteration-count" class="animated">
|
|
<td>
|
|
<a href="animation-direction-005.xht">animation-direction-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-direction applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-006-4.5.#animation-iteration-count" class="animated">
|
|
<td>
|
|
<a href="animation-direction-006.xht">animation-direction-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-direction applies to the ::before pseudo element</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.5.#single-animation-iteration-count">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.6">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.6">+</a>
|
|
<a href="http://www.w3.org/TR/css3-animations/#animation-direction-property">4.6 The ‘animation-direction’ Property</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.6.#alternate">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.6.#alternate-reverse">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.6.#animation-direction">
|
|
<!-- 6 tests -->
|
|
<tr id="animation-direction-001-4.6.#animation-direction" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-direction-001.xht">animation-direction-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - alternate
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-002-4.6.#animation-direction" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-direction-002.xht">animation-direction-002</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - normal
|
|
<ul class="assert">
|
|
<li>When animation-direction is set to normal, all iterations of animation are played as specified.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-003-4.6.#animation-direction" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-direction-003.xht">animation-direction-003</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - alternate-reverse
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-004-4.6.#animation-direction" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-direction-004.xht">animation-direction-004</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - reverse
|
|
<ul class="assert">
|
|
<li>When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-005-4.6.#animation-direction" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-direction-005.xht">animation-direction-005</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-direction applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-006-4.6.#animation-direction" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-direction-006.xht">animation-direction-006</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-direction - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-direction applies to the ::before pseudo element</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.6.#normal">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.6.#reverse">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.6.#single-animation-direction">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.7">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.7">+</a>
|
|
<a href="http://www.w3.org/TR/css3-animations/#animation-play-state-property">4.7 The ‘animation-play-state’ Property</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.7.#animation-play-state">
|
|
<!-- 2 tests -->
|
|
<tr id="animation-play-state-001-4.7.#animation-play-state" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-play-state-001.xht">animation-play-state-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-play-state set to paused
|
|
<ul class="assert">
|
|
<li>A paused animation will display the current value of the animation in a STATIC state (no animation).</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-play-state-002-4.7.#animation-play-state" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-play-state-002.xht">animation-play-state-002</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Animations : animation-play-state set to playing
|
|
<ul class="assert">
|
|
<li>When animation-play-state is set to running; animation continues to render.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.7.#single-animation-play-state">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.8">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.8">+</a>
|
|
<a href="http://www.w3.org/TR/css3-animations/#animation-delay-property">4.8 The ‘animation-delay’ Property</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.8.#animation-delay">
|
|
<!-- 5 tests -->
|
|
<tr id="animation-delay-001-4.8.#animation-delay" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-delay-001.xht">animation-delay-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - negative value
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-delay-002-4.8.#animation-delay" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-delay-002.xht">animation-delay-002</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - positive value
|
|
<ul class="assert">
|
|
<li>When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-delay-003-4.8.#animation-delay" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-delay-003.xht">animation-delay-003</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - 0s
|
|
<ul class="assert">
|
|
<li>When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-delay-004-4.8.#animation-delay" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-delay-004.xht">animation-delay-004</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-delay applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-delay-005-4.8.#animation-delay" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-delay-005.xht">animation-delay-005</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-delay applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.9">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.9">+</a>
|
|
<a href="http://www.w3.org/TR/css3-animations/#animation-fill-mode-property">4.9 The ‘animation-fill-mode’ Property</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.9.#animation-fill-mode">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.9.#single-animation-fill-mode">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.10">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.10">+</a>
|
|
<a href="http://www.w3.org/TR/css3-animations/#animation-shorthand-property">4.10 The ‘animation’ Shorthand Property</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.10.#animation">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.10.#single-animation">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |