mirror of
https://github.com/servo/servo.git
synced 2025-06-23 08:34:42 +01:00
296fa2512b
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
2277 lines
No EOL
108 KiB
HTML
2277 lines
No EOL
108 KiB
HTML
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
<html>
|
|
<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 (68 tests)</h2>
|
|
<table width="100%">
|
|
<col id="test-column">
|
|
<col id="refs-column">
|
|
<col id="flags-column">
|
|
<col id="info-column">
|
|
<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="https://www.w3.org/TR/css3-animations/#keyframes">4 Keyframes</a></th></tr>
|
|
<!-- 3 tests -->
|
|
<tr id="animation-keyframes-001-4" class="animated">
|
|
<td>
|
|
<a href="animation-keyframes-001.htm">animation-keyframes-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>@keyframes - from, to, percentage
|
|
<ul class="assert">
|
|
<li>Check that @keyframes rule accepts 'from' and 'to' keywords, and percentage values.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-keyframes-002-4" class="animated">
|
|
<td>
|
|
<a href="animation-keyframes-002.htm">animation-keyframes-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>@keyframes - negative percentage and higher than 100%
|
|
<ul class="assert">
|
|
<li>Check that a keyframe selector specifies negative percentage values or values higher than 100%, the keyframe will be ignored.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-keyframes-003-4" class="animated">
|
|
<td>
|
|
<a href="animation-keyframes-003.htm">animation-keyframes-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>@keyframes - animation-timing-function
|
|
<ul class="assert">
|
|
<li>Check that @keyframes rule accpets 'animation-timing-function' property used as the animation moves to the next keyframe.</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="https://www.w3.org/TR/css3-animations/#timing-functions">4.1 Timing functions for keyframes</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.2">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.2">+</a>
|
|
<a href="https://www.w3.org/TR/css3-animations/#animation-name-property">4.2 The ‘animation-name’ Property</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.2.#animation-name">
|
|
<!-- 63 tests -->
|
|
<tr id="animation-delay-001-4.2.#animation-name" class="animated">
|
|
<td>
|
|
<a href="animation-delay-001.htm">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.htm">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.htm">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.htm">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.htm">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-delay-006-4.2.#animation-name" class="animated">
|
|
<td>
|
|
<a href="animation-delay-006.htm">animation-delay-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - initial keyword
|
|
<ul class="assert">
|
|
<li>Check that animation-delay property accepts 'initial' keyword.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-delay-007-4.2.#animation-name" class="animated">
|
|
<td>
|
|
<a href="animation-delay-007.htm">animation-delay-007</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - inherit keyword
|
|
<ul class="assert">
|
|
<li>Check that animation-delay property accepts 'inherit' keyword.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-001-4.2.#animation-name" class="animated">
|
|
<td>
|
|
<a href="animation-direction-001.htm">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.htm">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.htm">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.htm">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.htm">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.htm">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>
|
|
<tr id="animation-display-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-display.htm">animation-display</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation - display
|
|
<ul class="assert">
|
|
<li>Check that setting 'display' property to 'none' terminates running animation applied to the element, and updating 'display' property to a value other than 'none' will start the animation.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-001-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-duration-001.htm">animation-duration-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - blank value
|
|
<ul class="assert">
|
|
<li>When animation-duration value is set blank, there will be no animation seen.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-002-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-duration-002.htm">animation-duration-002</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - finite value
|
|
<ul class="assert">
|
|
<li>When animation-duration is set a finite time offset, animation takes the specifies time to complete one cycle.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-003-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-duration-003.htm">animation-duration-003</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - negative value
|
|
<ul class="assert">
|
|
<li>When animation-duration is set to a negative value, it is treated as 0s (zero seconds) and no animation is seen.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-004-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-duration-004.htm">animation-duration-004</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - 0s
|
|
<ul class="assert">
|
|
<li>When animation-duration is set to 0s (zero seconds), animation occurs instantaneously, there will be no animation seen.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-005-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-duration-005.htm">animation-duration-005</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - 0s, animation-fill-mode - forwards
|
|
<ul class="assert">
|
|
<li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'forwards', the last frame of the animation will be displayed.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-006-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-duration-006.htm">animation-duration-006</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - 0s, animation-fill-mode - both
|
|
<ul class="assert">
|
|
<li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'both', the last frame of the animation will be displayed.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-007-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-duration-007.htm">animation-duration-007</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-duration applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-008-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-duration-008.htm">animation-duration-008</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-duration applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-001-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-fill-mode-001.htm">animation-fill-mode-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - none
|
|
<ul class="assert">
|
|
<li>When animation-fill-mode is set to none, animation has no effect when it is applied but not executing.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-002-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-fill-mode-002.htm">animation-fill-mode-002</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - forwards
|
|
<ul class="assert">
|
|
<li>When animation-fill-mode is set to forwards, animation will apply the property values for the time the amination ended after the animation ends.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-003-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-fill-mode-003.htm">animation-fill-mode-003</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - backwards
|
|
<ul class="assert">
|
|
<li>When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-004-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-fill-mode-004.htm">animation-fill-mode-004</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - both
|
|
<ul class="assert">
|
|
<li>Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-005-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-fill-mode-005.htm">animation-fill-mode-005</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-fill-mode applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-006-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-fill-mode-006.htm">animation-fill-mode-006</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-fill-mode applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-001-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-iteration-count-001.htm">animation-iteration-count-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - 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.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-iteration-count-002.htm">animation-iteration-count-002</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - infinite value
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to infinite, animation will repeat forever.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-003-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-iteration-count-003.htm">animation-iteration-count-003</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - negative value
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to negative count, it is invalid and animation will play from beginning to end once.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-004-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-iteration-count-004.htm">animation-iteration-count-004</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - non-integer value
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to non-integer, animation will end partway through its last cycle.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-005-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-iteration-count-005.htm">animation-iteration-count-005</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - integer value
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to integer count, animation will repeat the specified number of times.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-006-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-iteration-count-006.htm">animation-iteration-count-006</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - 0 (zero)
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to 0 (zero), no animation is seen.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-007-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-iteration-count-007.htm">animation-iteration-count-007</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-iteration-count applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-008-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-iteration-count-008.htm">animation-iteration-count-008</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-iteration-count applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-event-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-iteration-event.htm">animation-iteration-event</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation events - animationiteration
|
|
<ul class="assert">
|
|
<li>Check that 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-001-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-keyframes-001.htm">animation-keyframes-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>@keyframes - from, to, percentage
|
|
<ul class="assert">
|
|
<li>Check that @keyframes rule accepts 'from' and 'to' keywords, and percentage values.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-keyframes-002-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-keyframes-002.htm">animation-keyframes-002</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>@keyframes - negative percentage and higher than 100%
|
|
<ul class="assert">
|
|
<li>Check that a keyframe selector specifies negative percentage values or values higher than 100%, the keyframe will be ignored.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-keyframes-003-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-keyframes-003.htm">animation-keyframes-003</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>@keyframes - animation-timing-function
|
|
<ul class="assert">
|
|
<li>Check that @keyframes rule accpets 'animation-timing-function' property used as the animation moves to the next keyframe.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-001-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-name-001.htm">animation-name-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-name - blank value
|
|
<ul class="assert">
|
|
<li>Check that animation-name is set without any value, there will be no animation.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-002-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-name-002.htm">animation-name-002</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-name matchs keyframes at-rule
|
|
<ul class="assert">
|
|
<li>When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation, animation will execute.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-003-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-name-003.htm">animation-name-003</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-name - none
|
|
<ul class="assert">
|
|
<li>Check that animation-name is set to none, there will be no animation.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-004-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-name-004.htm">animation-name-004</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-name mismatches keyframe at-rule
|
|
<ul class="assert">
|
|
<li>Check that 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-name-005-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-name-005.htm">animation-name-005</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-name - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-name applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-006-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-name-006.htm">animation-name-006</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-name - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-name applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-play-state-001-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-play-state-001.htm">animation-play-state-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-play-state - paused
|
|
<ul class="assert">
|
|
<li>When animation-play-state is set to paused, animation is paused where the progress it had made before being paused.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-play-state-002-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-play-state-002.htm">animation-play-state-002</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-play-state - running
|
|
<ul class="assert">
|
|
<li>When animation-play-state is set to running, animation will proceed as normal.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-play-state-003-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-play-state-003.htm">animation-play-state-003</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-play-state - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-play-state applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-play-state-004-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-play-state-004.htm">animation-play-state-004</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-play-state - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-play-state applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-001-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-001.htm">animation-timing-function-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - cubic-bezier with parameters (0,0,1,1)
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to cubic-bezier with parameters (0,0,1,1), animation will progress over one cycle of its duration with constant speed.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-002-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-002.htm">animation-timing-function-002</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ease
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function is set to ease, animation will starts slow, gain acceleration in the middle and again slow down at the end.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-003-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-003.htm">animation-timing-function-003</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ease-in
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function is set to ease-in, animation will start slow, gain acceleration as time progresses.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-004-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-004.htm">animation-timing-function-004</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ease-in-out
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function is set to ease-in-out, animation will start slow, gain acceleration in the middel and again slow down at the end.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-005-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-005.htm">animation-timing-function-005</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ease-out
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function is set to ease-out, animation will start with higher (than the normal) speed and relatively slow down as time progresses.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-006-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-006.htm">animation-timing-function-006</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - linear
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to linear, animation will progress over one cycle of its duration with constant speed.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-007-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-007.htm">animation-timing-function-007</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - step-start
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-008-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-008.htm">animation-timing-function-008</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - step-end
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to step-end, animation will play the end effect at the end time point, and keep the start effect at the start of the interval.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-009-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-009.htm">animation-timing-function-009</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - steps with parameters (<number>, start)
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to steps with paramenters (<number>, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-010-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-010.htm">animation-timing-function-010</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - steps with parameters (<number>, end)
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to steps with paramenters (<number>, end), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the end of the interval.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-011-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-011.htm">animation-timing-function-011</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-012-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-timing-function-012.htm">animation-timing-function-012</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animationstart-and-animationend-events-4.2.#animation-name" class="primary animated">
|
|
<td><strong>
|
|
<a href="animationstart-and-animationend-events.htm">animationstart-and-animationend-events</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation events - animationstart and animationend
|
|
<ul class="assert">
|
|
<li>Check that animationstart event occurs at the start of an animation, animationend event occurs when animation finishes.</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="https://www.w3.org/TR/css3-animations/#animation-duration-property">4.3 The ‘animation-duration’ Property</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.3.#animation-duration">
|
|
<!-- 63 tests -->
|
|
<tr id="animation-delay-001-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-delay-001.htm">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.htm">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.htm">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.htm">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.htm">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-delay-006-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-delay-006.htm">animation-delay-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - initial keyword
|
|
<ul class="assert">
|
|
<li>Check that animation-delay property accepts 'initial' keyword.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-delay-007-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-delay-007.htm">animation-delay-007</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - inherit keyword
|
|
<ul class="assert">
|
|
<li>Check that animation-delay property accepts 'inherit' keyword.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-direction-001-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-direction-001.htm">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.htm">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.htm">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.htm">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.htm">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.htm">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>
|
|
<tr id="animation-display-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-display.htm">animation-display</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation - display
|
|
<ul class="assert">
|
|
<li>Check that setting 'display' property to 'none' terminates running animation applied to the element, and updating 'display' property to a value other than 'none' will start the animation.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-001-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-duration-001.htm">animation-duration-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - blank value
|
|
<ul class="assert">
|
|
<li>When animation-duration value is set blank, there will be no animation seen.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-002-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-duration-002.htm">animation-duration-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - finite value
|
|
<ul class="assert">
|
|
<li>When animation-duration is set a finite time offset, animation takes the specifies time to complete one cycle.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-003-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-duration-003.htm">animation-duration-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - negative value
|
|
<ul class="assert">
|
|
<li>When animation-duration is set to a negative value, it is treated as 0s (zero seconds) and no animation is seen.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-004-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-duration-004.htm">animation-duration-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - 0s
|
|
<ul class="assert">
|
|
<li>When animation-duration is set to 0s (zero seconds), animation occurs instantaneously, there will be no animation seen.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-005-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-duration-005.htm">animation-duration-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - 0s, animation-fill-mode - forwards
|
|
<ul class="assert">
|
|
<li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'forwards', the last frame of the animation will be displayed.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-006-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-duration-006.htm">animation-duration-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - 0s, animation-fill-mode - both
|
|
<ul class="assert">
|
|
<li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'both', the last frame of the animation will be displayed.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-007-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-duration-007.htm">animation-duration-007</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-duration applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-008-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-duration-008.htm">animation-duration-008</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-duration applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-001-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-fill-mode-001.htm">animation-fill-mode-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - none
|
|
<ul class="assert">
|
|
<li>When animation-fill-mode is set to none, animation has no effect when it is applied but not executing.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-002-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-fill-mode-002.htm">animation-fill-mode-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - forwards
|
|
<ul class="assert">
|
|
<li>When animation-fill-mode is set to forwards, animation will apply the property values for the time the amination ended after the animation ends.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-003-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-fill-mode-003.htm">animation-fill-mode-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - backwards
|
|
<ul class="assert">
|
|
<li>When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-004-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-fill-mode-004.htm">animation-fill-mode-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - both
|
|
<ul class="assert">
|
|
<li>Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-005-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-fill-mode-005.htm">animation-fill-mode-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-fill-mode applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-006-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-fill-mode-006.htm">animation-fill-mode-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-fill-mode applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-001-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-001.htm">animation-iteration-count-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - 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.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-002.htm">animation-iteration-count-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - infinite value
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to infinite, animation will repeat forever.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-003-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-003.htm">animation-iteration-count-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - negative value
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to negative count, it is invalid and animation will play from beginning to end once.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-004-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-004.htm">animation-iteration-count-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - non-integer value
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to non-integer, animation will end partway through its last cycle.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-005-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-005.htm">animation-iteration-count-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - integer value
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to integer count, animation will repeat the specified number of times.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-006-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-006.htm">animation-iteration-count-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - 0 (zero)
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to 0 (zero), no animation is seen.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-007-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-007.htm">animation-iteration-count-007</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-iteration-count applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-008-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-008.htm">animation-iteration-count-008</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-iteration-count applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-event-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-event.htm">animation-iteration-event</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation events - animationiteration
|
|
<ul class="assert">
|
|
<li>Check that 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-001-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-keyframes-001.htm">animation-keyframes-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>@keyframes - from, to, percentage
|
|
<ul class="assert">
|
|
<li>Check that @keyframes rule accepts 'from' and 'to' keywords, and percentage values.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-keyframes-002-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-keyframes-002.htm">animation-keyframes-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>@keyframes - negative percentage and higher than 100%
|
|
<ul class="assert">
|
|
<li>Check that a keyframe selector specifies negative percentage values or values higher than 100%, the keyframe will be ignored.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-keyframes-003-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-keyframes-003.htm">animation-keyframes-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>@keyframes - animation-timing-function
|
|
<ul class="assert">
|
|
<li>Check that @keyframes rule accpets 'animation-timing-function' property used as the animation moves to the next keyframe.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-001-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-name-001.htm">animation-name-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-name - blank value
|
|
<ul class="assert">
|
|
<li>Check that animation-name is set without any value, there will be no animation.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-002-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-name-002.htm">animation-name-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-name matchs keyframes at-rule
|
|
<ul class="assert">
|
|
<li>When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation, animation will execute.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-003-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-name-003.htm">animation-name-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-name - none
|
|
<ul class="assert">
|
|
<li>Check that animation-name is set to none, there will be no animation.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-004-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-name-004.htm">animation-name-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-name mismatches keyframe at-rule
|
|
<ul class="assert">
|
|
<li>Check that 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-name-005-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-name-005.htm">animation-name-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-name - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-name applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-name-006-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-name-006.htm">animation-name-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-name - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-name applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-play-state-001-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-play-state-001.htm">animation-play-state-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-play-state - paused
|
|
<ul class="assert">
|
|
<li>When animation-play-state is set to paused, animation is paused where the progress it had made before being paused.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-play-state-002-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-play-state-002.htm">animation-play-state-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-play-state - running
|
|
<ul class="assert">
|
|
<li>When animation-play-state is set to running, animation will proceed as normal.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-play-state-003-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-play-state-003.htm">animation-play-state-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-play-state - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-play-state applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-play-state-004-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-play-state-004.htm">animation-play-state-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-play-state - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-play-state applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-001-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-001.htm">animation-timing-function-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - cubic-bezier with parameters (0,0,1,1)
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to cubic-bezier with parameters (0,0,1,1), animation will progress over one cycle of its duration with constant speed.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-002-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-002.htm">animation-timing-function-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ease
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function is set to ease, animation will starts slow, gain acceleration in the middle and again slow down at the end.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-003-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-003.htm">animation-timing-function-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ease-in
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function is set to ease-in, animation will start slow, gain acceleration as time progresses.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-004-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-004.htm">animation-timing-function-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ease-in-out
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function is set to ease-in-out, animation will start slow, gain acceleration in the middel and again slow down at the end.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-005-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-005.htm">animation-timing-function-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ease-out
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function is set to ease-out, animation will start with higher (than the normal) speed and relatively slow down as time progresses.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-006-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-006.htm">animation-timing-function-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - linear
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to linear, animation will progress over one cycle of its duration with constant speed.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-007-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-007.htm">animation-timing-function-007</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - step-start
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-008-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-008.htm">animation-timing-function-008</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - step-end
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to step-end, animation will play the end effect at the end time point, and keep the start effect at the start of the interval.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-009-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-009.htm">animation-timing-function-009</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - steps with parameters (<number>, start)
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to steps with paramenters (<number>, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-010-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-010.htm">animation-timing-function-010</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - steps with parameters (<number>, end)
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to steps with paramenters (<number>, end), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the end of the interval.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-011-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-011.htm">animation-timing-function-011</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-012-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-012.htm">animation-timing-function-012</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animationstart-and-animationend-events-4.3.#animation-duration" class="animated">
|
|
<td>
|
|
<a href="animationstart-and-animationend-events.htm">animationstart-and-animationend-events</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation events - animationstart and animationend
|
|
<ul class="assert">
|
|
<li>Check that animationstart event occurs at the start of an animation, animationend event occurs when animation finishes.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.4">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.4">+</a>
|
|
<a href="https://www.w3.org/TR/css3-animations/#animation-timing-function-property">4.4 The ‘animation-timing-function’ Property</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.4.#animation-timing-function">
|
|
<!-- 13 tests -->
|
|
<tr id="animation-delay-001-4.4.#animation-timing-function" class="animated">
|
|
<td>
|
|
<a href="animation-delay-001.htm">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-timing-function-001-4.4.#animation-timing-function" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-001.htm">animation-timing-function-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - cubic-bezier with parameters (0,0,1,1)
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to cubic-bezier with parameters (0,0,1,1), animation will progress over one cycle of its duration with constant speed.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-002-4.4.#animation-timing-function" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-002.htm">animation-timing-function-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ease
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function is set to ease, animation will starts slow, gain acceleration in the middle and again slow down at the end.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-003-4.4.#animation-timing-function" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-003.htm">animation-timing-function-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ease-in
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function is set to ease-in, animation will start slow, gain acceleration as time progresses.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-004-4.4.#animation-timing-function" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-004.htm">animation-timing-function-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ease-in-out
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function is set to ease-in-out, animation will start slow, gain acceleration in the middel and again slow down at the end.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-005-4.4.#animation-timing-function" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-005.htm">animation-timing-function-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ease-out
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function is set to ease-out, animation will start with higher (than the normal) speed and relatively slow down as time progresses.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-006-4.4.#animation-timing-function" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-006.htm">animation-timing-function-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - linear
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to linear, animation will progress over one cycle of its duration with constant speed.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-007-4.4.#animation-timing-function" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-007.htm">animation-timing-function-007</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - step-start
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-008-4.4.#animation-timing-function" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-008.htm">animation-timing-function-008</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - step-end
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to step-end, animation will play the end effect at the end time point, and keep the start effect at the start of the interval.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-009-4.4.#animation-timing-function" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-009.htm">animation-timing-function-009</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - steps with parameters (<number>, start)
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to steps with paramenters (<number>, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-010-4.4.#animation-timing-function" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-010.htm">animation-timing-function-010</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - steps with parameters (<number>, end)
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to steps with paramenters (<number>, end), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the end of the interval.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-011-4.4.#animation-timing-function" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-011.htm">animation-timing-function-011</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-012-4.4.#animation-timing-function" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-012.htm">animation-timing-function-012</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-timing-function applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.5">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.5">+</a>
|
|
<a href="https://www.w3.org/TR/css3-animations/#animation-iteration-count-property">4.5 The ‘animation-iteration-count’ Property</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.5.#animation-iteration-count">
|
|
<!-- 15 tests -->
|
|
<tr id="animation-direction-001-4.5.#animation-iteration-count" class="animated">
|
|
<td>
|
|
<a href="animation-direction-001.htm">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.htm">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.htm">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.htm">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.htm">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.htm">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>
|
|
<tr id="animation-iteration-count-001-4.5.#animation-iteration-count" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-001.htm">animation-iteration-count-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - 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.#animation-iteration-count" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-002.htm">animation-iteration-count-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - infinite value
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to infinite, animation will repeat forever.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-003-4.5.#animation-iteration-count" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-003.htm">animation-iteration-count-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - negative value
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to negative count, it is invalid and animation will play from beginning to end once.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-004-4.5.#animation-iteration-count" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-004.htm">animation-iteration-count-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - non-integer value
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to non-integer, animation will end partway through its last cycle.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-005-4.5.#animation-iteration-count" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-005.htm">animation-iteration-count-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - integer value
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to integer count, animation will repeat the specified number of times.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-006-4.5.#animation-iteration-count" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-006.htm">animation-iteration-count-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - 0 (zero)
|
|
<ul class="assert">
|
|
<li>When animation-iteration-count is set to 0 (zero), no animation is seen.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-007-4.5.#animation-iteration-count" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-007.htm">animation-iteration-count-007</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-iteration-count applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-count-008-4.5.#animation-iteration-count" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-count-008.htm">animation-iteration-count-008</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-iteration-count - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-iteration-count applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-iteration-event-4.5.#animation-iteration-count" class="animated">
|
|
<td>
|
|
<a href="animation-iteration-event.htm">animation-iteration-event</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation events - animationiteration
|
|
<ul class="assert">
|
|
<li>Check that 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.#single-animation-iteration-count">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.6">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.6">+</a>
|
|
<a href="https://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.htm">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.htm">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.htm">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.htm">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.htm">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.htm">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="https://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">
|
|
<!-- 4 tests -->
|
|
<tr id="animation-play-state-001-4.7.#animation-play-state" class="animated">
|
|
<td>
|
|
<a href="animation-play-state-001.htm">animation-play-state-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-play-state - paused
|
|
<ul class="assert">
|
|
<li>When animation-play-state is set to paused, animation is paused where the progress it had made before being paused.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-play-state-002-4.7.#animation-play-state" class="animated">
|
|
<td>
|
|
<a href="animation-play-state-002.htm">animation-play-state-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-play-state - running
|
|
<ul class="assert">
|
|
<li>When animation-play-state is set to running, animation will proceed as normal.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-play-state-003-4.7.#animation-play-state" class="animated">
|
|
<td>
|
|
<a href="animation-play-state-003.htm">animation-play-state-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-play-state - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-play-state applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-play-state-004-4.7.#animation-play-state" class="animated">
|
|
<td>
|
|
<a href="animation-play-state-004.htm">animation-play-state-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-play-state - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-play-state applies to the ::before pseudo element.</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="https://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">
|
|
<!-- 9 tests -->
|
|
<tr id="animation-delay-001-4.8.#animation-delay" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-delay-001.htm">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.htm">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.htm">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.htm">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.htm">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>
|
|
<tr id="animation-delay-006-4.8.#animation-delay" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-delay-006.htm">animation-delay-006</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - initial keyword
|
|
<ul class="assert">
|
|
<li>Check that animation-delay property accepts 'initial' keyword.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-delay-007-4.8.#animation-delay" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-delay-007.htm">animation-delay-007</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-delay - inherit keyword
|
|
<ul class="assert">
|
|
<li>Check that animation-delay property accepts 'inherit' keyword.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-003-4.8.#animation-delay" class="animated">
|
|
<td>
|
|
<a href="animation-fill-mode-003.htm">animation-fill-mode-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - backwards
|
|
<ul class="assert">
|
|
<li>When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-004-4.8.#animation-delay" class="animated">
|
|
<td>
|
|
<a href="animation-fill-mode-004.htm">animation-fill-mode-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - both
|
|
<ul class="assert">
|
|
<li>Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.9">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.9">+</a>
|
|
<a href="https://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">
|
|
<!-- 11 tests -->
|
|
<tr id="animation-duration-005-4.9.#animation-fill-mode" class="animated">
|
|
<td>
|
|
<a href="animation-duration-005.htm">animation-duration-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - 0s, animation-fill-mode - forwards
|
|
<ul class="assert">
|
|
<li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'forwards', the last frame of the animation will be displayed.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-duration-006-4.9.#animation-fill-mode" class="animated">
|
|
<td>
|
|
<a href="animation-duration-006.htm">animation-duration-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-duration - 0s, animation-fill-mode - both
|
|
<ul class="assert">
|
|
<li>When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'both', the last frame of the animation will be displayed.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-001-4.9.#animation-fill-mode" class="animated">
|
|
<td>
|
|
<a href="animation-fill-mode-001.htm">animation-fill-mode-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - none
|
|
<ul class="assert">
|
|
<li>When animation-fill-mode is set to none, animation has no effect when it is applied but not executing.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-002-4.9.#animation-fill-mode" class="animated">
|
|
<td>
|
|
<a href="animation-fill-mode-002.htm">animation-fill-mode-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - forwards
|
|
<ul class="assert">
|
|
<li>When animation-fill-mode is set to forwards, animation will apply the property values for the time the amination ended after the animation ends.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-003-4.9.#animation-fill-mode" class="animated">
|
|
<td>
|
|
<a href="animation-fill-mode-003.htm">animation-fill-mode-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - backwards
|
|
<ul class="assert">
|
|
<li>When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-004-4.9.#animation-fill-mode" class="animated">
|
|
<td>
|
|
<a href="animation-fill-mode-004.htm">animation-fill-mode-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - both
|
|
<ul class="assert">
|
|
<li>Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-005-4.9.#animation-fill-mode" class="animated">
|
|
<td>
|
|
<a href="animation-fill-mode-005.htm">animation-fill-mode-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation-fill-mode applies to the ::after pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-fill-mode-006-4.9.#animation-fill-mode" class="animated">
|
|
<td>
|
|
<a href="animation-fill-mode-006.htm">animation-fill-mode-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-fill-mode - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation-fill-mode applies to the ::before pseudo element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-007-4.9.#animation-fill-mode" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-007.htm">animation-timing-function-007</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - step-start
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-009-4.9.#animation-fill-mode" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-009.htm">animation-timing-function-009</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - steps with parameters (<number>, start)
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to steps with paramenters (<number>, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-timing-function-010-4.9.#animation-fill-mode" class="animated">
|
|
<td>
|
|
<a href="animation-timing-function-010.htm">animation-timing-function-010</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation-timing-function - steps with parameters (<number>, end)
|
|
<ul class="assert">
|
|
<li>When animation-timing-function is set to steps with paramenters (<number>, end), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the end of the interval.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</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="https://www.w3.org/TR/css3-animations/#animation-shorthand-property">4.10 The ‘animation’ Shorthand Property</a></th></tr>
|
|
<!-- 1 tests -->
|
|
<tr id="caret-color-021-4.10" class="script">
|
|
<td>
|
|
<a href="caret-color-021.htm">caret-color-021</a></td>
|
|
<td></td>
|
|
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Default caret-color test animation
|
|
<ul class="assert">
|
|
<li>Test checks that the default value for caret-color property, which is 'auto', is not interpolable.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.10.#animation">
|
|
<!-- 4 tests -->
|
|
<tr id="animation-shorthand-001-4.10.#animation" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-shorthand-001.htm">animation-shorthand-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation shorthand
|
|
<ul class="assert">
|
|
<li>Check that animation shorthand property accepts time values for animation-duration and animation-delay in order.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-shorthand-002-4.10.#animation" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-shorthand-002.htm">animation-shorthand-002</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation shorthand - ::after
|
|
<ul class="assert">
|
|
<li>Check that animation shorthand applies to the ::after pseudo element and accepts time values for animation-duration and animation-delay in order.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="animation-shorthand-003-4.10.#animation" class="primary animated">
|
|
<td><strong>
|
|
<a href="animation-shorthand-003.htm">animation-shorthand-003</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>animation shorthand - ::before
|
|
<ul class="assert">
|
|
<li>Check that animation shorthand applies to the ::before pseudo element and accepts time values for animation-duration and animation-delay in order.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="caret-color-008-4.10.#animation" class="animated interact">
|
|
<td>
|
|
<a href="caret-color-008.htm">caret-color-008</a></td>
|
|
<td></td>
|
|
<td><abbr class="animated" title="Animated test">Animated</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
|
<td>caret-color animation
|
|
<ul class="assert">
|
|
<li>Test checks that caret-color is animatable as a color</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.10.#single-animation">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |