mirror of
https://github.com/servo/servo.git
synced 2025-06-23 08:34:42 +01:00
215 lines
No EOL
8.1 KiB
HTML
215 lines
No EOL
8.1 KiB
HTML
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
<html>
|
|
<head>
|
|
<title>Animations - 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>Animations (16 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="s3">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3">+</a>
|
|
<a href="https://www.w3.org/TR/css3-animations/#animations">3 Animations</a></th></tr>
|
|
<!-- 16 tests -->
|
|
<tr id="animation-display-3" 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="animations-001-3" class="ahem animated">
|
|
<td>
|
|
<a href="animations-001.htm">animations-001</a></td>
|
|
<td><a href="reference/animations-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="animated" title="Animated test">Animated</abbr></td>
|
|
<td>CSS Regions: animating content flowed into a region
|
|
<ul class="assert">
|
|
<li>Test checks that content that has an animated 3D transform renders and animates when flowed in a region.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-filters-animation-blur-3" class="">
|
|
<td>
|
|
<a href="css-filters-animation-blur.htm">css-filters-animation-blur</a></td>
|
|
<td><a href="reference/css-filters-animation-blur-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Filters Animation: Blur
|
|
<ul class="assert">
|
|
<li>The blue square should be 10px blurred</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-filters-animation-brightness-3" class="">
|
|
<td>
|
|
<a href="css-filters-animation-brightness.htm">css-filters-animation-brightness</a></td>
|
|
<td><a href="reference/css-filters-animation-brightness-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Filters Animation: Brightness
|
|
<ul class="assert">
|
|
<li>The blue square should be dark blue</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-filters-animation-combined-001-3" class="">
|
|
<td>
|
|
<a href="css-filters-animation-combined-001.htm">css-filters-animation-combined-001</a></td>
|
|
<td><a href="reference/css-filters-animation-combined-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Filters Animation: Combined filters 001
|
|
<ul class="assert">
|
|
<li>The black square should be a gray square 10px blurred</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-filters-animation-contrast-3" class="">
|
|
<td>
|
|
<a href="css-filters-animation-contrast.htm">css-filters-animation-contrast</a></td>
|
|
<td><a href="reference/css-filters-animation-contrast-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Filters Animation: Contrast
|
|
<ul class="assert">
|
|
<li>The black square should be gray</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-filters-animation-drop-shadow-3" class="">
|
|
<td>
|
|
<a href="css-filters-animation-drop-shadow.htm">css-filters-animation-drop-shadow</a></td>
|
|
<td><a href="reference/css-filters-animation-drop-shadow-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Filters Animation: Drop Shadow
|
|
<ul class="assert">
|
|
<li>The blue square should be in top of a gray one</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-filters-animation-grayscale-3" class="">
|
|
<td>
|
|
<a href="css-filters-animation-grayscale.htm">css-filters-animation-grayscale</a></td>
|
|
<td><a href="reference/css-filters-animation-grayscale-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Filters Animation: Grayscale
|
|
<ul class="assert">
|
|
<li>The blue square should be half-grayscaled</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-filters-animation-hue-rotate-3" class="">
|
|
<td>
|
|
<a href="css-filters-animation-hue-rotate.htm">css-filters-animation-hue-rotate</a></td>
|
|
<td><a href="reference/css-filters-animation-hue-rotate-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Filters Animation: Hue-rotate
|
|
<ul class="assert">
|
|
<li>The blue square should be violet</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-filters-animation-invert-3" class="">
|
|
<td>
|
|
<a href="css-filters-animation-invert.htm">css-filters-animation-invert</a></td>
|
|
<td><a href="reference/css-filters-animation-invert-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Filters Animation: Invert
|
|
<ul class="assert">
|
|
<li>The black square should be gray</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-filters-animation-opacity-3" class="">
|
|
<td>
|
|
<a href="css-filters-animation-opacity.htm">css-filters-animation-opacity</a></td>
|
|
<td><a href="reference/css-filters-animation-opacity-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Filters Animation: Opacity
|
|
<ul class="assert">
|
|
<li>The black square should be gray</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-filters-animation-saturate-3" class="">
|
|
<td>
|
|
<a href="css-filters-animation-saturate.htm">css-filters-animation-saturate</a></td>
|
|
<td><a href="reference/css-filters-animation-saturate-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Filters Animation: Saturate
|
|
<ul class="assert">
|
|
<li>The blue square should be light-blue</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-filters-animation-sepia-3" class="">
|
|
<td>
|
|
<a href="css-filters-animation-sepia.htm">css-filters-animation-sepia</a></td>
|
|
<td><a href="reference/css-filters-animation-sepia-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Filters Animation: Sepia
|
|
<ul class="assert">
|
|
<li>The blue square should be half-sepia</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="vh-interpolate-pct-3" class="">
|
|
<td>
|
|
<a href="vh-interpolate-pct.htm">vh-interpolate-pct</a></td>
|
|
<td><a href="reference/all-green.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Viewport units are interpolated correctly
|
|
<ul class="assert">
|
|
<li>The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="vh-interpolate-px-3" class="">
|
|
<td>
|
|
<a href="vh-interpolate-px.htm">vh-interpolate-px</a></td>
|
|
<td><a href="reference/all-green.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Viewport units are interpolated correctly
|
|
<ul class="assert">
|
|
<li>The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="vh-interpolate-vh-3" class="">
|
|
<td>
|
|
<a href="vh-interpolate-vh.htm">vh-interpolate-vh</a></td>
|
|
<td><a href="reference/all-green.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Viewport units are interpolated correctly
|
|
<ul class="assert">
|
|
<li>The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw)</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |