servo/tests/wpt/css-tests/css-transitions-1_dev/xhtml1/chapter-2.xht
Ms2ger 296fa2512b Update web-platform-tests and CSS tests.
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180.
- Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
2017-02-06 22:38:29 +01:00

576 lines
No EOL
26 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Transitions - CSS Transitions 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 Transitions Module Level 1 CR Test Suite</h1>
<h2>Transitions (42 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2">+</a>
<a href="https://www.w3.org/TR/css3-transitions/#transitions">2 Transitions</a></th></tr>
<!-- 8 tests -->
<tr id="detached-container-001-2" class="dom script">
<td>
<a href="detached-container-001.xht">detached-container-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Not Transitioning within detached element
<ul class="assert">
<li>Test checks that transitions are NOT run within detached elements</li>
</ul>
</td>
</tr>
<tr id="hidden-container-001-2" class="dom script">
<td>
<a href="hidden-container-001.xht">hidden-container-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Not Transitioning within hidden element
<ul class="assert">
<li>Test checks that transitions are NOT run within hidden elements</li>
</ul>
</td>
</tr>
<tr id="properties-value-001-2" class="dom script">
<td>
<a href="properties-value-001.xht">properties-value-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Intermediate Property Values
<ul class="assert">
<li>Test checks that value ranges between start and end while transitioning</li>
</ul>
</td>
</tr>
<tr id="properties-value-002-2" class="dom script">
<td>
<a href="properties-value-002.xht">properties-value-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Intermediate Property Values of missing value types
<ul class="assert">
<li>Test checks that expected value types that haven't been specified are transitionable</li>
</ul>
</td>
</tr>
<tr id="properties-value-003-2" class="dom script">
<td>
<a href="properties-value-003.xht">properties-value-003</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Intermediate Property Values of unspecified properties
<ul class="assert">
<li>Test checks that properties are transitionable that haven't been specified</li>
</ul>
</td>
</tr>
<tr id="properties-value-auto-001-2" class="dom script">
<td>
<a href="properties-value-auto-001.xht">properties-value-auto-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>transitioning property value &quot;auto&quot;
<ul class="assert">
<li>Test checks that properties are transitioned from an to auto-value</li>
</ul>
</td>
</tr>
<tr id="properties-value-implicit-001-2" class="dom script">
<td>
<a href="properties-value-implicit-001.xht">properties-value-implicit-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>font-size-relative properties transition by implicit value change
<ul class="assert">
<li>Test checks that font-size-relative properties (all em-lengths) run a transition when font-size is changed</li>
</ul>
</td>
</tr>
<tr id="transitions-animatable-properties-01-2" class="script">
<td>
<a href="transitions-animatable-properties-01.xht">transitions-animatable-properties-01</a></td>
<td></td>
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Transitions: Animatable CSS properties
<ul class="assert">
<li>Check that all animatable CSS properties are animatable and then accepted by the 'transition-property' property</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s2.#list-matching">
<!-- 1 tests -->
<tr id="events-004-2.#list-matching" class="dom script">
<td>
<a href="events-004.xht">events-004</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>transitionend event with non matching lists
<ul class="assert">
<li>Test checks that non-matching lists are properly resolved</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s2.#transitions-">
<!-- 0 tests -->
</tbody>
<tbody id="s2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2.1">+</a>
<a href="https://www.w3.org/TR/css3-transitions/#transition-property-property">2.1 The &#8216;transition-property&#8217; Property</a></th></tr>
<!-- 9 tests -->
<tr id="events-001-2.1" class="dom script">
<td>
<a href="events-001.xht">events-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>transitionend event for shorthand property
<ul class="assert">
<li>Test checks that all transitionend events are triggered for shorthand property</li>
</ul>
</td>
</tr>
<tr id="events-005-2.1" class="dom script">
<td>
<a href="events-005.xht">events-005</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>transitionend event with property specificity
<ul class="assert">
<li>Test checks that property specificity is properly resolved</li>
</ul>
</td>
</tr>
<tr id="pseudo-elements-001-2.1" class="dom script">
<td>
<a href="pseudo-elements-001.xht">pseudo-elements-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Transitioning Pseudo Elements
<ul class="assert">
<li>Test checks that transitions are run on pseudo elements</li>
</ul>
</td>
</tr>
<tr id="transition-property-001-2.1" class="dom script">
<td>
<a href="transition-property-001.xht">transition-property-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Parsing transition-property
<ul class="assert">
<li>Test checks that transition-property values are parsed properly</li>
</ul>
</td>
</tr>
<tr id="transition-property-002-2.1" class="dom script">
<td>
<a href="transition-property-002.xht">transition-property-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Parsing invalid transition-property
<ul class="assert">
<li>Test checks that unrecognized or non-animatable properties must be kept in the list to preserve the matching of indices.</li>
</ul>
</td>
</tr>
<tr id="transition-property-003-2.1" class="interact">
<td>
<a href="transition-property-003.xht">transition-property-003</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-property - none
<ul class="assert">
<li>The 'transition-duration' property set 'none' means that no property will be transitioned.</li>
</ul>
</td>
</tr>
<tr id="transition-property-004-2.1" class="interact">
<td>
<a href="transition-property-004.xht">transition-property-004</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-property - all
<ul class="assert">
<li>The 'transition-duration' property set 'all' means that all properties are transitioned.</li>
</ul>
</td>
</tr>
<tr id="transition-property-005-2.1" class="interact">
<td>
<a href="transition-property-005.xht">transition-property-005</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-property - height width(more than one properties specified)
<ul class="assert">
<li>The 'transition-duration' property set more than one properties like 'height, width' means only the specified properties will be transitioned.</li>
</ul>
</td>
</tr>
<tr id="transition-test-2.1" class="">
<td>
<a href="transition-test.xht">transition-test</a></td>
<td><a href="reference/transition-test-ref.xht">=</a> </td>
<td></td>
<td>invalid values cause all properites to animate.
<ul class="assert">
<li>When an invalid value is specified as one of the transition properties, it causes the the transition-property to change to 'all'. Instead of leaving the invalid property in and animating the valid properites with matching durations.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s2.1.#single-transition-property">
<!-- 0 tests -->
</tbody>
<tbody id="s2.1.#the-transition-property-property-">
<!-- 0 tests -->
</tbody>
<tbody id="s2.1.#transition-property">
<!-- 0 tests -->
</tbody>
<tbody id="s2.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2.2">+</a>
<a href="https://www.w3.org/TR/css3-transitions/#transition-duration-property">2.2 The &#8216;transition-duration&#8217; Property</a></th></tr>
<!-- 4 tests -->
<tr id="transition-duration-001-2.2" class="dom script">
<td>
<a href="transition-duration-001.xht">transition-duration-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Parsing transition-duration
<ul class="assert">
<li>Test checks that transition-duration values are parsed properly</li>
</ul>
</td>
</tr>
<tr id="transition-duration-002-2.2" class="interact">
<td>
<a href="transition-duration-002.xht">transition-duration-002</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-duration - positive number
<ul class="assert">
<li>The 'transition-duration' property set positive number specifies the time that transition from the old value to the new value should take.</li>
</ul>
</td>
</tr>
<tr id="transition-duration-003-2.2" class="interact">
<td>
<a href="transition-duration-003.xht">transition-duration-003</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-duration - 0s(initial value)
<ul class="assert">
<li>Test checks that the initial value of 'transition-duration' property is '0s' which means the transition is immediate.</li>
</ul>
</td>
</tr>
<tr id="transition-duration-004-2.2" class="interact">
<td>
<a href="transition-duration-004.xht">transition-duration-004</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-duration - negative number
<ul class="assert">
<li>A negative value for 'transition-duration renders the declaration invalid which means the transition is immediate.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s2.2.#the-transition-duration-property-">
<!-- 0 tests -->
</tbody>
<tbody id="s2.2.#transition-duration">
<!-- 0 tests -->
</tbody>
<tbody id="s2.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2.3">+</a>
<a href="https://www.w3.org/TR/css3-transitions/#transition-timing-function-property">2.3 The &#8216;transition-timing-function&#8217; Property</a></th></tr>
<!-- 1 tests -->
<tr id="transition-timing-function-001-2.3" class="dom script">
<td>
<a href="transition-timing-function-001.xht">transition-timing-function-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Parsing transition-timing-function
<ul class="assert">
<li>Test checks that transition-timing-function values are parsed properly</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s2.3.#single-transition-timing-function">
<!-- 0 tests -->
</tbody>
<tbody id="s2.3.#transition-timing-function">
<!-- 12 tests -->
<tr id="transition-timing-function-002-2.3.#transition-timing-function" class="interact">
<td>
<a href="transition-timing-function-002.xht">transition-timing-function-002</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-timing-function - 'ease' equivalent to 'cubic-bezier(0.25, 0.1, 0.25, 1.0)'
<ul class="assert">
<li>The 'transition-timing-function' property set 'ease' is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)</li>
</ul>
</td>
</tr>
<tr id="transition-timing-function-003-2.3.#transition-timing-function" class="interact">
<td>
<a href="transition-timing-function-003.xht">transition-timing-function-003</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-timing-function - 'ease-in' equivalent to 'cubic-bezier(0.42, 0, 1.0, 1.0)'
<ul class="assert">
<li>The 'transition-timing-function' property set 'ease-in' is equivalent to cubic-bezier(0.42, 0, 1.0, 1.0)</li>
</ul>
</td>
</tr>
<tr id="transition-timing-function-004-2.3.#transition-timing-function" class="interact">
<td>
<a href="transition-timing-function-004.xht">transition-timing-function-004</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-timing-function - 'ease-in-out' equivalent to 'cubic-bezier(0.42, 0, 0.58, 1.0)'
<ul class="assert">
<li>The 'transition-timing-function' property set 'ease-in-out' is equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)</li>
</ul>
</td>
</tr>
<tr id="transition-timing-function-005-2.3.#transition-timing-function" class="interact">
<td>
<a href="transition-timing-function-005.xht">transition-timing-function-005</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-timing-function - 'ease-out' equivalent to 'cubic-bezier(0, 0, 0.58, 1.0)'
<ul class="assert">
<li>The 'transition-timing-function' property set 'ease-out' is equivalent to cubic-bezier(0, 0, 0.58, 1.0)</li>
</ul>
</td>
</tr>
<tr id="transition-timing-function-006-2.3.#transition-timing-function" class="interact">
<td>
<a href="transition-timing-function-006.xht">transition-timing-function-006</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-timing-function - 'linear' equivalent to 'cubic-bezier(0.0, 0.0, 1.0, 1.0)'
<ul class="assert">
<li>The 'transition-timing-function' property set 'linear' is equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)</li>
</ul>
</td>
</tr>
<tr id="transition-timing-function-007-2.3.#transition-timing-function" class="interact">
<td>
<a href="transition-timing-function-007.xht">transition-timing-function-007</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-timing-function - 'step-end' equivalent to 'steps(1, end)'
<ul class="assert">
<li>The 'transition-timing-function' property set 'step-end' is equivalent to 'steps(1, end)'</li>
</ul>
</td>
</tr>
<tr id="transition-timing-function-008-2.3.#transition-timing-function" class="interact">
<td>
<a href="transition-timing-function-008.xht">transition-timing-function-008</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-timing-function - 'step-start' equivalent to 'steps(1, start)'
<ul class="assert">
<li>The 'transition-timing-function' property set 'step-start' is equivalent to 'steps(1, start)'</li>
</ul>
</td>
</tr>
<tr id="transition-timing-function-009-2.3.#transition-timing-function" class="interact">
<td>
<a href="transition-timing-function-009.xht">transition-timing-function-009</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-timing-function - ease(initial value)
<ul class="assert">
<li>Test checks that the initial value of 'transition-timing-function' property is 'ease'.</li>
</ul>
</td>
</tr>
<tr id="transition-timing-function-010-2.3.#transition-timing-function" class="interact">
<td>
<a href="transition-timing-function-010.xht">transition-timing-function-010</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-timing-function - steps(2)
<ul class="assert">
<li>Test checks that the first parameter of 'steps()' function specifies the number of intervals.</li>
</ul>
</td>
</tr>
<tr id="transition-timing-function-011-2.3.#transition-timing-function" class="interact">
<td>
<a href="transition-timing-function-011.xht">transition-timing-function-011</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-timing-function - steps(the second parameter default 'end')
<ul class="assert">
<li>Test checks that the second parameter of 'steps()' function is default 'end'.</li>
</ul>
</td>
</tr>
<tr id="transition-timing-function-012-2.3.#transition-timing-function" class="interact">
<td>
<a href="transition-timing-function-012.xht">transition-timing-function-012</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-timing-function - steps(-2)
<ul class="assert">
<li>Test checks that the 'steps()' function with negative number is invalid, the transition-timing-function will use 'ease' as default.</li>
</ul>
</td>
</tr>
<tr id="transition-timing-function-013-2.3.#transition-timing-function" class="interact">
<td>
<a href="transition-timing-function-013.xht">transition-timing-function-013</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-timing-function - steps(0)
<ul class="assert">
<li>Test checks that the 'steps()' function with '0' is invalid, the transition-timing-function will use 'ease' as default.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s2.3.#transition-timing-function_tag">
<!-- 0 tests -->
</tbody>
<tbody id="s2.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2.4">+</a>
<a href="https://www.w3.org/TR/css3-transitions/#transition-delay-property">2.4 The &#8216;transition-delay&#8217; Property</a></th></tr>
<!-- 5 tests -->
<tr id="events-003-2.4" class="dom script">
<td>
<a href="events-003.xht">events-003</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>transitionend event with negative delay
<ul class="assert">
<li>Test checks that transitionend event is triggered for duration time being canceled out by negative delay</li>
</ul>
</td>
</tr>
<tr id="transition-delay-000-2.4" class="interact">
<td>
<a href="transition-delay-000.xht">transition-delay-000</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-delay - positive number
<ul class="assert">
<li>The 'transition-delay' property set positive number to delay the execution of transition</li>
</ul>
</td>
</tr>
<tr id="transition-delay-001-2.4" class="dom script">
<td>
<a href="transition-delay-001.xht">transition-delay-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Parsing transition-delay
<ul class="assert">
<li>Test checks that transition-delay values are parsed properly</li>
</ul>
</td>
</tr>
<tr id="transition-delay-002-2.4" class="interact">
<td>
<a href="transition-delay-002.xht">transition-delay-002</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-delay - 0s
<ul class="assert">
<li>Test checks that the 'transition-delay' property set 0 will not delay the execution of transition</li>
</ul>
</td>
</tr>
<tr id="transition-delay-003-2.4" class="interact">
<td>
<a href="transition-delay-003.xht">transition-delay-003</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>transition-delay - negative number
<ul class="assert">
<li>Test checks that the 'transition-delay' property set negative number will not delay the execution of transition</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s2.4.#the-transition-delay-property-">
<!-- 0 tests -->
</tbody>
<tbody id="s2.4.#transition-delay">
<!-- 0 tests -->
</tbody>
<tbody id="s2.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2.5">+</a>
<a href="https://www.w3.org/TR/css3-transitions/#transition-shorthand-property">2.5 The &#8216;transition&#8217; Shorthand Property</a></th></tr>
<!-- 1 tests -->
<tr id="transition-001-2.5" class="dom script">
<td>
<a href="transition-001.xht">transition-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Parsing transition shorthand
<ul class="assert">
<li>Test checks that transition shorthand values are parsed properly</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s2.5.#single-transition">
<!-- 0 tests -->
</tbody>
<tbody id="s2.5.#the-transition-shorthand-property-">
<!-- 0 tests -->
</tbody>
<tbody id="s2.5.#transition">
<!-- 1 tests -->
<tr id="caret-color-017-2.5.#transition" class="interact">
<td>
<a href="caret-color-017.xht">caret-color-017</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>caret-color transition
<ul class="assert">
<li>Test checks that caret-color can be used in a transition</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>