mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
Update CSS tests to revision d674587d6ae7d2e231d632785559f2613d554eb0
This commit is contained in:
Ms2ger
parent
7c45ff8e05
commit
f235d49372
6623 changed files with 267392 additions and 10061 deletions
|
|
@ -13,7 +13,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||||
<h2>Specifying Blending in CSS (6 tests)</h2>
|
<h2>Specifying Blending in CSS (8 tests)</h2>
|
||||||
<table width="100%">
|
<table width="100%">
|
||||||
<col id="test-column">
|
<col id="test-column">
|
||||||
<col id="refs-column">
|
<col id="refs-column">
|
||||||
|
|
@ -61,7 +61,7 @@
|
||||||
<tr><th colspan="4" scope="rowgroup">
|
<tr><th colspan="4" scope="rowgroup">
|
||||||
<a href="#s3.4.1">+</a>
|
<a href="#s3.4.1">+</a>
|
||||||
<a href="http://www.w3.org/TR/compositing-1/#mix-blend-mode">3.4.1 The mix-blend-mode property</a></th></tr>
|
<a href="http://www.w3.org/TR/compositing-1/#mix-blend-mode">3.4.1 The mix-blend-mode property</a></th></tr>
|
||||||
<!-- 5 tests -->
|
<!-- 6 tests -->
|
||||||
<tr id="blending_in_a_group_with_filter-3.4.1" class="primary svg">
|
<tr id="blending_in_a_group_with_filter-3.4.1" class="primary svg">
|
||||||
<td><strong>
|
<td><strong>
|
||||||
<a href="Blending_in_a_group_with_filter.htm">blending_in_a_group_with_filter</a></strong></td>
|
<a href="Blending_in_a_group_with_filter.htm">blending_in_a_group_with_filter</a></strong></td>
|
||||||
|
|
@ -111,6 +111,17 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr id="will-change-stacking-context-mix-blend-mode-1-3.4.1" class="">
|
||||||
|
<td>
|
||||||
|
<a href="will-change-stacking-context-mix-blend-mode-1.htm">will-change-stacking-context-mix-blend-mode-1</a></td>
|
||||||
|
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||||
|
<td></td>
|
||||||
|
<td>CSS will-change: 'will-change: mix-blend-mode' creates a stacking context
|
||||||
|
<ul class="assert">
|
||||||
|
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s3.4.1.#ltblendmodegt">
|
<tbody id="s3.4.1.#ltblendmodegt">
|
||||||
<!-- 0 tests -->
|
<!-- 0 tests -->
|
||||||
|
|
@ -122,7 +133,7 @@
|
||||||
<tr><th colspan="4" scope="rowgroup">
|
<tr><th colspan="4" scope="rowgroup">
|
||||||
<a href="#s3.4.2">+</a>
|
<a href="#s3.4.2">+</a>
|
||||||
<a href="http://www.w3.org/TR/compositing-1/#isolation">3.4.2 The isolation property</a></th></tr>
|
<a href="http://www.w3.org/TR/compositing-1/#isolation">3.4.2 The isolation property</a></th></tr>
|
||||||
<!-- 1 tests -->
|
<!-- 2 tests -->
|
||||||
<tr id="blend-isolation-3.4.2" class="">
|
<tr id="blend-isolation-3.4.2" class="">
|
||||||
<td>
|
<td>
|
||||||
<a href="blend-isolation.htm">blend-isolation</a></td>
|
<a href="blend-isolation.htm">blend-isolation</a></td>
|
||||||
|
|
@ -134,6 +145,17 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr id="will-change-stacking-context-isolation-1-3.4.2" class="">
|
||||||
|
<td>
|
||||||
|
<a href="will-change-stacking-context-isolation-1.htm">will-change-stacking-context-isolation-1</a></td>
|
||||||
|
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||||
|
<td></td>
|
||||||
|
<td>CSS will-change: 'will-change: isolation' creates a stacking context
|
||||||
|
<ul class="assert">
|
||||||
|
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s3.4.2.#img_isolation">
|
<tbody id="s3.4.2.#img_isolation">
|
||||||
<!-- 0 tests -->
|
<!-- 0 tests -->
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS will-change reference</title>
|
||||||
|
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||||
|
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||||
|
<style>
|
||||||
|
html, body { margin: 0; padding: 0; }
|
||||||
|
div { width: 100px; height: 100px; background: green }
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -24,6 +24,22 @@
|
||||||
<th>Flags</th>
|
<th>Flags</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
<tbody id="will-change-stacking-context-isolation-1" class="">
|
||||||
|
<tr>
|
||||||
|
<td rowspan="1" title="CSS will-change: 'will-change: isolation' creates a stacking context">
|
||||||
|
<a href="will-change-stacking-context-isolation-1.htm">will-change-stacking-context-isolation-1</a></td>
|
||||||
|
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||||
|
<td rowspan="1"></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tbody id="will-change-stacking-context-mix-blend-mode-1" class="">
|
||||||
|
<tr>
|
||||||
|
<td rowspan="1" title="CSS will-change: 'will-change: mix-blend-mode' creates a stacking context">
|
||||||
|
<a href="will-change-stacking-context-mix-blend-mode-1.htm">will-change-stacking-context-mix-blend-mode-1</a></td>
|
||||||
|
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||||
|
<td rowspan="1"></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -1 +1,3 @@
|
||||||
|
|
||||||
|
will-change-stacking-context-isolation-1.htm == reference/green-square-100-by-100-ref.htm
|
||||||
|
will-change-stacking-context-mix-blend-mode-1.htm == reference/green-square-100-by-100-ref.htm
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
<tbody id="s3">
|
<tbody id="s3">
|
||||||
<tr><th><a href="chapter-3.htm">Chapter 3 -
|
<tr><th><a href="chapter-3.htm">Chapter 3 -
|
||||||
Specifying Blending in CSS</a></th>
|
Specifying Blending in CSS</a></th>
|
||||||
<td>(6 Tests)</td></tr>
|
<td>(8 Tests)</td></tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s4">
|
<tbody id="s4">
|
||||||
<tr><th><a href="chapter-4.htm">Chapter 4 -
|
<tr><th><a href="chapter-4.htm">Chapter 4 -
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS will-change: 'will-change: isolation' creates a stacking context</title>
|
||||||
|
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||||
|
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||||
|
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||||
|
<link href="http://www.w3.org/TR/compositing-1/#isolation" rel="help">
|
||||||
|
<link href="reference/green-square-100-by-100-ref.htm" rel="match">
|
||||||
|
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert">
|
||||||
|
<style>
|
||||||
|
html, body { margin: 0; padding: 0; }
|
||||||
|
div { width: 100px; height: 100px }
|
||||||
|
#wc { will-change: isolation; background: red }
|
||||||
|
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<div id="wc">
|
||||||
|
<div id="child">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS will-change: 'will-change: mix-blend-mode' creates a stacking context</title>
|
||||||
|
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||||
|
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||||
|
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||||
|
<link href="http://www.w3.org/TR/compositing-1/#mix-blend-mode" rel="help">
|
||||||
|
<link href="reference/green-square-100-by-100-ref.htm" rel="match">
|
||||||
|
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert">
|
||||||
|
<style>
|
||||||
|
html, body { margin: 0; padding: 0; }
|
||||||
|
div { width: 100px; height: 100px }
|
||||||
|
#wc { will-change: mix-blend-mode; background: red }
|
||||||
|
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<div id="wc">
|
||||||
|
<div id="child">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -15,3 +15,7 @@ html/text-with-svg-background.htm ba9c7ae99506609324d8fd3f671459e52e00fcbd ?
|
||||||
xhtml1/text-with-svg-background.xht ba9c7ae99506609324d8fd3f671459e52e00fcbd ?
|
xhtml1/text-with-svg-background.xht ba9c7ae99506609324d8fd3f671459e52e00fcbd ?
|
||||||
html/text_with_svg_background.htm 2b9ae3afd4e0927b11adcab29b13f9ab1d7e4098 ?
|
html/text_with_svg_background.htm 2b9ae3afd4e0927b11adcab29b13f9ab1d7e4098 ?
|
||||||
xhtml1/text_with_svg_background.xht 2b9ae3afd4e0927b11adcab29b13f9ab1d7e4098 ?
|
xhtml1/text_with_svg_background.xht 2b9ae3afd4e0927b11adcab29b13f9ab1d7e4098 ?
|
||||||
|
html/will-change-stacking-context-isolation-1.htm ce631e0d14948d2831d084bad24c675f5f760f3c ?
|
||||||
|
xhtml1/will-change-stacking-context-isolation-1.xht ce631e0d14948d2831d084bad24c675f5f760f3c ?
|
||||||
|
html/will-change-stacking-context-mix-blend-mode-1.htm 0db38bd13bc550a378147e5e1507421035defd4d ?
|
||||||
|
xhtml1/will-change-stacking-context-mix-blend-mode-1.xht 0db38bd13bc550a378147e5e1507421035defd4d ?
|
||||||
|
|
|
||||||
|
|
@ -133,6 +133,8 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li>cabanier</li>
|
<li>cabanier</li>
|
||||||
<li>dmyang</li>
|
<li>dmyang</li>
|
||||||
|
<li>L. David Baron</li>
|
||||||
|
<li>Mozilla</li>
|
||||||
<li>windtale</li>
|
<li>windtale</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -133,6 +133,8 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li>cabanier</li>
|
<li>cabanier</li>
|
||||||
<li>dmyang</li>
|
<li>dmyang</li>
|
||||||
|
<li>L. David Baron</li>
|
||||||
|
<li>Mozilla</li>
|
||||||
<li>windtale</li>
|
<li>windtale</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,3 +5,5 @@ Blending_in_a_group_with_opacity Blending in a group with opacity svg http://ww
|
||||||
line-with-svg-background CSS mix-blend-mode API Test svg http://www.w3.org/TR/compositing-1/#mix-blend-mode 29d19c66e2d9a863866bb93010a482900db0631f `dmyang`<mailto:yangdemo@gmail.com>
|
line-with-svg-background CSS mix-blend-mode API Test svg http://www.w3.org/TR/compositing-1/#mix-blend-mode 29d19c66e2d9a863866bb93010a482900db0631f `dmyang`<mailto:yangdemo@gmail.com>
|
||||||
text-with-svg-background CSS mix-blend-mode API Test svg http://www.w3.org/TR/compositing-1/#mix-blend-mode ba9c7ae99506609324d8fd3f671459e52e00fcbd `dmyang`<mailto:yangdemo@gmail.com>
|
text-with-svg-background CSS mix-blend-mode API Test svg http://www.w3.org/TR/compositing-1/#mix-blend-mode ba9c7ae99506609324d8fd3f671459e52e00fcbd `dmyang`<mailto:yangdemo@gmail.com>
|
||||||
Text_with_SVG_background Text with SVG background svg http://www.w3.org/TR/compositing-1/#mix-blend-mode 2b9ae3afd4e0927b11adcab29b13f9ab1d7e4098 `windtale`<mailto:windtale@163.com> Text with SVG background
|
Text_with_SVG_background Text with SVG background svg http://www.w3.org/TR/compositing-1/#mix-blend-mode 2b9ae3afd4e0927b11adcab29b13f9ab1d7e4098 `windtale`<mailto:windtale@163.com> Text with SVG background
|
||||||
|
will-change-stacking-context-isolation-1 reference/green-square-100-by-100-ref CSS will-change: 'will-change: isolation' creates a stacking context https://drafts.csswg.org/css-will-change-1/#will-change,http://www.w3.org/TR/compositing-1/#isolation ce631e0d14948d2831d084bad24c675f5f760f3c `L. David Baron`<http://dbaron.org/>,`Mozilla`<http://www.mozilla.org/> If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.
|
||||||
|
will-change-stacking-context-mix-blend-mode-1 reference/green-square-100-by-100-ref CSS will-change: 'will-change: mix-blend-mode' creates a stacking context https://drafts.csswg.org/css-will-change-1/#will-change,http://www.w3.org/TR/compositing-1/#mix-blend-mode 0db38bd13bc550a378147e5e1507421035defd4d `L. David Baron`<http://dbaron.org/>,`Mozilla`<http://www.mozilla.org/> If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||||
<h2>Specifying Blending in CSS (6 tests)</h2>
|
<h2>Specifying Blending in CSS (8 tests)</h2>
|
||||||
<table width="100%">
|
<table width="100%">
|
||||||
<col id="test-column"></col>
|
<col id="test-column"></col>
|
||||||
<col id="refs-column"></col>
|
<col id="refs-column"></col>
|
||||||
|
|
@ -61,7 +61,7 @@
|
||||||
<tr><th colspan="4" scope="rowgroup">
|
<tr><th colspan="4" scope="rowgroup">
|
||||||
<a href="#s3.4.1">+</a>
|
<a href="#s3.4.1">+</a>
|
||||||
<a href="http://www.w3.org/TR/compositing-1/#mix-blend-mode">3.4.1 The mix-blend-mode property</a></th></tr>
|
<a href="http://www.w3.org/TR/compositing-1/#mix-blend-mode">3.4.1 The mix-blend-mode property</a></th></tr>
|
||||||
<!-- 5 tests -->
|
<!-- 6 tests -->
|
||||||
<tr id="blending_in_a_group_with_filter-3.4.1" class="primary svg">
|
<tr id="blending_in_a_group_with_filter-3.4.1" class="primary svg">
|
||||||
<td><strong>
|
<td><strong>
|
||||||
<a href="Blending_in_a_group_with_filter.xht">blending_in_a_group_with_filter</a></strong></td>
|
<a href="Blending_in_a_group_with_filter.xht">blending_in_a_group_with_filter</a></strong></td>
|
||||||
|
|
@ -111,6 +111,17 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr id="will-change-stacking-context-mix-blend-mode-1-3.4.1" class="">
|
||||||
|
<td>
|
||||||
|
<a href="will-change-stacking-context-mix-blend-mode-1.xht">will-change-stacking-context-mix-blend-mode-1</a></td>
|
||||||
|
<td><a href="reference/green-square-100-by-100-ref.xht">=</a> </td>
|
||||||
|
<td></td>
|
||||||
|
<td>CSS will-change: 'will-change: mix-blend-mode' creates a stacking context
|
||||||
|
<ul class="assert">
|
||||||
|
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s3.4.1.#ltblendmodegt">
|
<tbody id="s3.4.1.#ltblendmodegt">
|
||||||
<!-- 0 tests -->
|
<!-- 0 tests -->
|
||||||
|
|
@ -122,7 +133,7 @@
|
||||||
<tr><th colspan="4" scope="rowgroup">
|
<tr><th colspan="4" scope="rowgroup">
|
||||||
<a href="#s3.4.2">+</a>
|
<a href="#s3.4.2">+</a>
|
||||||
<a href="http://www.w3.org/TR/compositing-1/#isolation">3.4.2 The isolation property</a></th></tr>
|
<a href="http://www.w3.org/TR/compositing-1/#isolation">3.4.2 The isolation property</a></th></tr>
|
||||||
<!-- 1 tests -->
|
<!-- 2 tests -->
|
||||||
<tr id="blend-isolation-3.4.2" class="">
|
<tr id="blend-isolation-3.4.2" class="">
|
||||||
<td>
|
<td>
|
||||||
<a href="blend-isolation.xht">blend-isolation</a></td>
|
<a href="blend-isolation.xht">blend-isolation</a></td>
|
||||||
|
|
@ -134,6 +145,17 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr id="will-change-stacking-context-isolation-1-3.4.2" class="">
|
||||||
|
<td>
|
||||||
|
<a href="will-change-stacking-context-isolation-1.xht">will-change-stacking-context-isolation-1</a></td>
|
||||||
|
<td><a href="reference/green-square-100-by-100-ref.xht">=</a> </td>
|
||||||
|
<td></td>
|
||||||
|
<td>CSS will-change: 'will-change: isolation' creates a stacking context
|
||||||
|
<ul class="assert">
|
||||||
|
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s3.4.2.#img_isolation">
|
<tbody id="s3.4.2.#img_isolation">
|
||||||
<!-- 0 tests -->
|
<!-- 0 tests -->
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||||
|
<title>CSS will-change reference</title>
|
||||||
|
<link href="http://dbaron.org/" rel="author" title="L. David Baron" />
|
||||||
|
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||||
|
<style>
|
||||||
|
html, body { margin: 0; padding: 0; }
|
||||||
|
div { width: 100px; height: 100px; background: green }
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -24,6 +24,22 @@
|
||||||
<th>Flags</th>
|
<th>Flags</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
<tbody id="will-change-stacking-context-isolation-1" class="">
|
||||||
|
<tr>
|
||||||
|
<td rowspan="1" title="CSS will-change: 'will-change: isolation' creates a stacking context">
|
||||||
|
<a href="will-change-stacking-context-isolation-1.xht">will-change-stacking-context-isolation-1</a></td>
|
||||||
|
<td><a href="reference/green-square-100-by-100-ref.xht">=</a> </td>
|
||||||
|
<td rowspan="1"></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tbody id="will-change-stacking-context-mix-blend-mode-1" class="">
|
||||||
|
<tr>
|
||||||
|
<td rowspan="1" title="CSS will-change: 'will-change: mix-blend-mode' creates a stacking context">
|
||||||
|
<a href="will-change-stacking-context-mix-blend-mode-1.xht">will-change-stacking-context-mix-blend-mode-1</a></td>
|
||||||
|
<td><a href="reference/green-square-100-by-100-ref.xht">=</a> </td>
|
||||||
|
<td rowspan="1"></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -1 +1,3 @@
|
||||||
|
|
||||||
|
will-change-stacking-context-isolation-1.xht == reference/green-square-100-by-100-ref.xht
|
||||||
|
will-change-stacking-context-mix-blend-mode-1.xht == reference/green-square-100-by-100-ref.xht
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
<tbody id="s3">
|
<tbody id="s3">
|
||||||
<tr><th><a href="chapter-3.xht">Chapter 3 -
|
<tr><th><a href="chapter-3.xht">Chapter 3 -
|
||||||
Specifying Blending in CSS</a></th>
|
Specifying Blending in CSS</a></th>
|
||||||
<td>(6 Tests)</td></tr>
|
<td>(8 Tests)</td></tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s4">
|
<tbody id="s4">
|
||||||
<tr><th><a href="chapter-4.xht">Chapter 4 -
|
<tr><th><a href="chapter-4.xht">Chapter 4 -
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||||
|
<title>CSS will-change: 'will-change: isolation' creates a stacking context</title>
|
||||||
|
<link href="http://dbaron.org/" rel="author" title="L. David Baron" />
|
||||||
|
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||||
|
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help" />
|
||||||
|
<link href="http://www.w3.org/TR/compositing-1/#isolation" rel="help" />
|
||||||
|
<link href="reference/green-square-100-by-100-ref.xht" rel="match" />
|
||||||
|
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert" />
|
||||||
|
<style>
|
||||||
|
html, body { margin: 0; padding: 0; }
|
||||||
|
div { width: 100px; height: 100px }
|
||||||
|
#wc { will-change: isolation; background: red }
|
||||||
|
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<div id="wc">
|
||||||
|
<div id="child">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||||
|
<title>CSS will-change: 'will-change: mix-blend-mode' creates a stacking context</title>
|
||||||
|
<link href="http://dbaron.org/" rel="author" title="L. David Baron" />
|
||||||
|
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||||
|
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help" />
|
||||||
|
<link href="http://www.w3.org/TR/compositing-1/#mix-blend-mode" rel="help" />
|
||||||
|
<link href="reference/green-square-100-by-100-ref.xht" rel="match" />
|
||||||
|
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert" />
|
||||||
|
<style>
|
||||||
|
html, body { margin: 0; padding: 0; }
|
||||||
|
div { width: 100px; height: 100px }
|
||||||
|
#wc { will-change: mix-blend-mode; background: red }
|
||||||
|
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<div id="wc">
|
||||||
|
<div id="child">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||||
<h2>Specifying Blending in CSS (6 tests)</h2>
|
<h2>Specifying Blending in CSS (8 tests)</h2>
|
||||||
<table width="100%">
|
<table width="100%">
|
||||||
<col id="test-column"></col>
|
<col id="test-column"></col>
|
||||||
<col id="refs-column"></col>
|
<col id="refs-column"></col>
|
||||||
|
|
@ -61,7 +61,7 @@
|
||||||
<tr><th colspan="4" scope="rowgroup">
|
<tr><th colspan="4" scope="rowgroup">
|
||||||
<a href="#s3.4.1">+</a>
|
<a href="#s3.4.1">+</a>
|
||||||
<a href="http://www.w3.org/TR/compositing-1/#mix-blend-mode">3.4.1 The mix-blend-mode property</a></th></tr>
|
<a href="http://www.w3.org/TR/compositing-1/#mix-blend-mode">3.4.1 The mix-blend-mode property</a></th></tr>
|
||||||
<!-- 5 tests -->
|
<!-- 6 tests -->
|
||||||
<tr id="blending_in_a_group_with_filter-3.4.1" class="primary svg">
|
<tr id="blending_in_a_group_with_filter-3.4.1" class="primary svg">
|
||||||
<td><strong>
|
<td><strong>
|
||||||
<a href="Blending_in_a_group_with_filter.xht">blending_in_a_group_with_filter</a></strong></td>
|
<a href="Blending_in_a_group_with_filter.xht">blending_in_a_group_with_filter</a></strong></td>
|
||||||
|
|
@ -111,6 +111,17 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr id="will-change-stacking-context-mix-blend-mode-1-3.4.1" class="">
|
||||||
|
<td>
|
||||||
|
<a href="will-change-stacking-context-mix-blend-mode-1.xht">will-change-stacking-context-mix-blend-mode-1</a></td>
|
||||||
|
<td><a href="reference/green-square-100-by-100-ref.xht">=</a> </td>
|
||||||
|
<td></td>
|
||||||
|
<td>CSS will-change: 'will-change: mix-blend-mode' creates a stacking context
|
||||||
|
<ul class="assert">
|
||||||
|
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s3.4.1.#ltblendmodegt">
|
<tbody id="s3.4.1.#ltblendmodegt">
|
||||||
<!-- 0 tests -->
|
<!-- 0 tests -->
|
||||||
|
|
@ -122,7 +133,7 @@
|
||||||
<tr><th colspan="4" scope="rowgroup">
|
<tr><th colspan="4" scope="rowgroup">
|
||||||
<a href="#s3.4.2">+</a>
|
<a href="#s3.4.2">+</a>
|
||||||
<a href="http://www.w3.org/TR/compositing-1/#isolation">3.4.2 The isolation property</a></th></tr>
|
<a href="http://www.w3.org/TR/compositing-1/#isolation">3.4.2 The isolation property</a></th></tr>
|
||||||
<!-- 1 tests -->
|
<!-- 2 tests -->
|
||||||
<tr id="blend-isolation-3.4.2" class="">
|
<tr id="blend-isolation-3.4.2" class="">
|
||||||
<td>
|
<td>
|
||||||
<a href="blend-isolation.xht">blend-isolation</a></td>
|
<a href="blend-isolation.xht">blend-isolation</a></td>
|
||||||
|
|
@ -134,6 +145,17 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr id="will-change-stacking-context-isolation-1-3.4.2" class="">
|
||||||
|
<td>
|
||||||
|
<a href="will-change-stacking-context-isolation-1.xht">will-change-stacking-context-isolation-1</a></td>
|
||||||
|
<td><a href="reference/green-square-100-by-100-ref.xht">=</a> </td>
|
||||||
|
<td></td>
|
||||||
|
<td>CSS will-change: 'will-change: isolation' creates a stacking context
|
||||||
|
<ul class="assert">
|
||||||
|
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s3.4.2.#img_isolation">
|
<tbody id="s3.4.2.#img_isolation">
|
||||||
<!-- 0 tests -->
|
<!-- 0 tests -->
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||||
|
<title>CSS will-change reference</title>
|
||||||
|
<link href="http://dbaron.org/" rel="author" title="L. David Baron" />
|
||||||
|
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||||
|
<style>
|
||||||
|
html, body { margin: 0; padding: 0; }
|
||||||
|
div { width: 100px; height: 100px; background: green }
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -24,6 +24,22 @@
|
||||||
<th>Flags</th>
|
<th>Flags</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
<tbody id="will-change-stacking-context-isolation-1" class="">
|
||||||
|
<tr>
|
||||||
|
<td rowspan="1" title="CSS will-change: 'will-change: isolation' creates a stacking context">
|
||||||
|
<a href="will-change-stacking-context-isolation-1.xht">will-change-stacking-context-isolation-1</a></td>
|
||||||
|
<td><a href="reference/green-square-100-by-100-ref.xht">=</a> </td>
|
||||||
|
<td rowspan="1"></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tbody id="will-change-stacking-context-mix-blend-mode-1" class="">
|
||||||
|
<tr>
|
||||||
|
<td rowspan="1" title="CSS will-change: 'will-change: mix-blend-mode' creates a stacking context">
|
||||||
|
<a href="will-change-stacking-context-mix-blend-mode-1.xht">will-change-stacking-context-mix-blend-mode-1</a></td>
|
||||||
|
<td><a href="reference/green-square-100-by-100-ref.xht">=</a> </td>
|
||||||
|
<td rowspan="1"></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -1 +1,3 @@
|
||||||
|
|
||||||
|
will-change-stacking-context-isolation-1.xht == reference/green-square-100-by-100-ref.xht
|
||||||
|
will-change-stacking-context-mix-blend-mode-1.xht == reference/green-square-100-by-100-ref.xht
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
<tbody id="s3">
|
<tbody id="s3">
|
||||||
<tr><th><a href="chapter-3.xht">Chapter 3 -
|
<tr><th><a href="chapter-3.xht">Chapter 3 -
|
||||||
Specifying Blending in CSS</a></th>
|
Specifying Blending in CSS</a></th>
|
||||||
<td>(6 Tests)</td></tr>
|
<td>(8 Tests)</td></tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s4">
|
<tbody id="s4">
|
||||||
<tr><th><a href="chapter-4.xht">Chapter 4 -
|
<tr><th><a href="chapter-4.xht">Chapter 4 -
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||||
|
<title>CSS will-change: 'will-change: isolation' creates a stacking context</title>
|
||||||
|
<link href="http://dbaron.org/" rel="author" title="L. David Baron" />
|
||||||
|
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||||
|
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help" />
|
||||||
|
<link href="http://www.w3.org/TR/compositing-1/#isolation" rel="help" />
|
||||||
|
<link href="reference/green-square-100-by-100-ref.xht" rel="match" />
|
||||||
|
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert" />
|
||||||
|
<style>
|
||||||
|
html, body { margin: 0; padding: 0; }
|
||||||
|
div { width: 100px; height: 100px }
|
||||||
|
#wc { will-change: isolation; background: red }
|
||||||
|
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<div id="wc">
|
||||||
|
<div id="child">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||||
|
<title>CSS will-change: 'will-change: mix-blend-mode' creates a stacking context</title>
|
||||||
|
<link href="http://dbaron.org/" rel="author" title="L. David Baron" />
|
||||||
|
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||||
|
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help" />
|
||||||
|
<link href="http://www.w3.org/TR/compositing-1/#mix-blend-mode" rel="help" />
|
||||||
|
<link href="reference/green-square-100-by-100-ref.xht" rel="match" />
|
||||||
|
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert" />
|
||||||
|
<style>
|
||||||
|
html, body { margin: 0; padding: 0; }
|
||||||
|
div { width: 100px; height: 100px }
|
||||||
|
#wc { will-change: mix-blend-mode; background: red }
|
||||||
|
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<div id="wc">
|
||||||
|
<div id="child">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-delay - negative value</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="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." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-timing-function: linear;
|
||||||
|
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#test-negative-delay {
|
||||||
|
animation-name: test-negative-delay;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-delay: -5s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ref-no-delay {
|
||||||
|
animation-name: ref-no-delay;
|
||||||
|
animation-duration: 5s;
|
||||||
|
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes test-negative-delay {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ref-no-delay {
|
||||||
|
from {
|
||||||
|
left: 75px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there are a filled blue square with 'Filler Text'
|
||||||
|
and a filled yellow square with 'Filler Text', and if the two squares
|
||||||
|
start moving together from right to left as soon as the page loads.
|
||||||
|
</p>
|
||||||
|
<div id="test-negative-delay">Filler Text</div>
|
||||||
|
<div id="ref-no-delay">Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-delay - positive value</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-delay is set to a positive time offset,
|
||||||
|
animation will delay execution by the specified offset value." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 5s;
|
||||||
|
animation-delay: 5s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left after about 5 seconds
|
||||||
|
from the time the page is loaded.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-delay - 0s</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-delay is set to 0s (zero seconds),
|
||||||
|
animation will execute as soon as it is applied." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-delay: 0s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left as soon as the page loads.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-delay - ::after</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-delay applies to the ::after pseudo element." name="assert">
|
||||||
|
<style>
|
||||||
|
div::after {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 5s;
|
||||||
|
animation-delay: 5s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left after about 5 seconds
|
||||||
|
from the time the page is loaded.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-delay - ::before</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-delay applies to the ::before pseudo element." name="assert">
|
||||||
|
<style>
|
||||||
|
div::before {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 5s;
|
||||||
|
animation-delay: 5s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left after about 5 seconds
|
||||||
|
from the time the page is loaded.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-delay - initial keyword</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#values" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-delay property accepts 'initial' keyword." name="assert">
|
||||||
|
<style>
|
||||||
|
#contatiner {
|
||||||
|
animation-delay: 5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#test {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-delay: initial;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left upon page load and lasts for a span of 10 seconds.
|
||||||
|
</p>
|
||||||
|
<div id="container">
|
||||||
|
<div id="test">Filler Text</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-delay - inherit keyword</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#values" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-delay property accepts 'inherit' keyword." name="assert">
|
||||||
|
<style>
|
||||||
|
#container {
|
||||||
|
animation-delay: 5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#test {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 5s;
|
||||||
|
animation-delay: inherit;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts staying left for about 5 seconds, and then moves
|
||||||
|
from right to left and lasts for a span of 5 seconds.
|
||||||
|
</p>
|
||||||
|
<div id="container">
|
||||||
|
<div id="test">Filler Text</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-direction - alternate</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="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." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-direction: alternate;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left on the page load,
|
||||||
|
and then moves from left to right. This cycle gets repeated.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-direction - normal</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-direction is set to normal,
|
||||||
|
all iterations of animation are played as specified." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-direction: normal;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled color square with 'Filler Text',
|
||||||
|
which starts moving from right to left, then back to right and moves from
|
||||||
|
right to left again. This cycle gets repeated.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-direction - alternate-reverse</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="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." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-direction: alternate-reverse;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left on the page load,
|
||||||
|
and then moves from left to right. This cycle gets repeated.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-direction - reverse</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-direction is set to reverse,
|
||||||
|
all iterations of the animation are played in the reverse direction
|
||||||
|
from the way they were specified." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-direction: reverse;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled color square with 'Filler Text',
|
||||||
|
which starts moving from left to right, then back to left again and moves from
|
||||||
|
left to right. This cycle gets repeated.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-direction - ::after</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-direction applies to the ::after pseudo element." name="assert">
|
||||||
|
<style>
|
||||||
|
div::after {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-direction: alternate;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left on the page load,
|
||||||
|
and then moves from left to right. This cycle gets repeated.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-direction - ::before</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-direction applies to the ::before pseudo element" name="assert">
|
||||||
|
<style>
|
||||||
|
div::before {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-direction: alternate;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left on the page load,
|
||||||
|
and then moves from left to right. This cycle gets repeated.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation - display</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animations" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="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." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which moves from right to left twice.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
<script>
|
||||||
|
var div = document.getElementsByTagName("div");
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
div[0].style.display = "none";
|
||||||
|
}, 5000);
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
div[0].style.display = "block";
|
||||||
|
}, 8000);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-duration - blank value</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-duration value is set blank, there will be no animation seen." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts staying left for about 2 seconds upon page load,
|
||||||
|
then moves from right to left.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
<script>
|
||||||
|
var div = document.getElementsByTagName("div");
|
||||||
|
div[0].style.animationDuration = "";
|
||||||
|
setTimeout(setAnimationDuration, 2000);
|
||||||
|
|
||||||
|
function setAnimationDuration() {
|
||||||
|
div[0].style.animationDuration = "10s";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-duration - finite value</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-duration is set a finite time offset,
|
||||||
|
animation takes the specifies time to complete one cycle." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left upon page load and lasts for a span of 10 seconds.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-duration - negative value</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-duration is set to a negative value,
|
||||||
|
it is treated as 0s (zero seconds) and no animation is seen." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts staying left for about 2 seconds upon page load,
|
||||||
|
then moves from right to left.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
<script>
|
||||||
|
var div = document.getElementsByTagName("div");
|
||||||
|
div[0].style.animationDuration = "-2s";
|
||||||
|
setTimeout(setAnimationDuration, 2000);
|
||||||
|
|
||||||
|
function setAnimationDuration() {
|
||||||
|
div[0].style.animationDuration = "10s";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-duration - 0s</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-duration is set to 0s (zero seconds),
|
||||||
|
animation occurs instantaneously, there will be no animation seen." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts staying left for about 2 seconds upon page load,
|
||||||
|
then moves from right to left.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
<script>
|
||||||
|
var div = document.getElementsByTagName("div");
|
||||||
|
div[0].style.animationDuration = "0s";
|
||||||
|
setTimeout(setAnimationDuration, 2000);
|
||||||
|
|
||||||
|
function setAnimationDuration() {
|
||||||
|
div[0].style.animationDuration = "10s";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-duration - 0s, animation-fill-mode - forwards</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="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." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#test {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 0s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ref {
|
||||||
|
background-color: red;
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue with 'Filler Text',
|
||||||
|
and without animation, and if there is no red.
|
||||||
|
</p>
|
||||||
|
<div id="ref"></div>
|
||||||
|
<div id="test">Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-duration - 0s, animation-fill-mode - both</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="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." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#test {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 0s;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ref {
|
||||||
|
background-color: red;
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue with 'Filler Text',
|
||||||
|
and without animation, and if there is no red.
|
||||||
|
</p>
|
||||||
|
<div id="ref"></div>
|
||||||
|
<div id="test">Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-duration - ::before</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-duration applies to the ::before pseudo element." name="assert">
|
||||||
|
<style>
|
||||||
|
div::before {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left upon page load and lasts for a span of 10 seconds.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-duration - ::after</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-duration applies to the ::after pseudo element." name="assert">
|
||||||
|
<style>
|
||||||
|
div::after {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left upon page load and lasts for a span of 10 seconds.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-fill-mode - none</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-fill-mode is set to none,
|
||||||
|
animation has no effect when it is applied but not executing." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 5s;
|
||||||
|
animation-fill-mode: none;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled color square with 'Filler Text',
|
||||||
|
whose color gradually changes in the order:
|
||||||
|
YELLOW to GREEN to BLUE.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-fill-mode - forwards</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-fill-mode is set to forwards,
|
||||||
|
animation will apply the property values for the time the amination ended
|
||||||
|
after the animation ends." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 5s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled color square with 'Filler Text',
|
||||||
|
whose color gradually changes in the order:
|
||||||
|
YELLOW to GREEN.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-fill-mode - backwards</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="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." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 5s;
|
||||||
|
animation-delay: 5s;
|
||||||
|
animation-fill-mode: backwards;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled color square with 'Filler Text',
|
||||||
|
whose color gradually changes in the order:
|
||||||
|
YELLOW to GREEN to BLUE.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-fill-mode - both</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check if animation-fill-mode is set to both,
|
||||||
|
the effects of both 'forwards' and 'backwards' will apply." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 5s;
|
||||||
|
animation-delay: 5s;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled color square with 'Filler Text',
|
||||||
|
whose color gradually changes in the order:
|
||||||
|
YELLOW to GREEN.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-fill-mode - ::after</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-fill-mode applies to the ::after pseudo element." name="assert">
|
||||||
|
<style>
|
||||||
|
div::after {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 5s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled color square with 'Filler Text',
|
||||||
|
whose color gradually changes in the order:
|
||||||
|
YELLOW to GREEN.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-fill-mode - ::before</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-fill-mode applies to the ::before pseudo element." name="assert">
|
||||||
|
<style>
|
||||||
|
div::before {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 5s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled color square with 'Filler Text',
|
||||||
|
whose color gradually changes in the order:
|
||||||
|
YELLOW to GREEN.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-iteration-count - default value</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-iteration-count is not set, 1 is taken by default and
|
||||||
|
animation will play from beginning to end once." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left once.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-iteration-count - infinite value</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-iteration-count is set to infinite,
|
||||||
|
animation will repeat forever." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled square with 'Filler Text',
|
||||||
|
which repeatedly moves from right to left. Every time a cycle is finished,
|
||||||
|
the square gets re-positioned to right and continues to move left.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-iteration-count - negative value</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-iteration-count is set to negative count,
|
||||||
|
it is invalid and animation will play from beginning to end once." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-iteration-count: -2;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left once.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-iteration-count - non-integer value</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-iteration-count is set to non-integer,
|
||||||
|
animation will end partway through its last cycle." name="assert">
|
||||||
|
<style>
|
||||||
|
#test-iteration-count {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-iteration-count: 2.1;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ref-path {
|
||||||
|
background-color: yellow;
|
||||||
|
height: 10px;
|
||||||
|
width: 250px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left along the yellow bar twice,
|
||||||
|
and for the third time it ends partway and then immediately positions
|
||||||
|
itself to the left.
|
||||||
|
</p>
|
||||||
|
<div id="test-iteration-count">Filler Text</div>
|
||||||
|
<div id="ref-path"></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-iteration-count - integer value</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-iteration-count is set to integer count,
|
||||||
|
animation will repeat the specified number of times." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-iteration-count: 2;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left twice.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-iteration-count - 0 (zero)</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-iteration-count is set to 0 (zero), no animation is seen." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts staying left for about 2 seconds upon page load,
|
||||||
|
then moves from right to left once.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
<script>
|
||||||
|
var div = document.getElementsByTagName("div");
|
||||||
|
div[0].style.animationIterationCount = 0;
|
||||||
|
setTimeout(setAnimationDuration, 2000);
|
||||||
|
|
||||||
|
function setAnimationDuration() {
|
||||||
|
div[0].style.animationIterationCount = 1;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-iteration-count - ::after</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-iteration-count applies to the ::after pseudo element." name="assert">
|
||||||
|
<style>
|
||||||
|
div::after {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-iteration-count: 2;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left twice.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-iteration-count - ::before</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-iteration-count applies to the ::before pseudo element." name="assert">
|
||||||
|
<style>
|
||||||
|
div::before {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-iteration-count: 2;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left twice.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation events - animationiteration</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#events" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animationiteration event occurs at the end of
|
||||||
|
each iteration of an animation for which animation-iteration-count
|
||||||
|
is greater than one." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-iteration-count: 3;
|
||||||
|
|
||||||
|
color: yellow;
|
||||||
|
font-weight: bolder;
|
||||||
|
font-size: xx-large;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square, which moves from right to left
|
||||||
|
three times; and if the square contains digit 1 for the first animation,
|
||||||
|
digit 2 for the second, and 3 for the third animation.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
<script>
|
||||||
|
var count = 1;
|
||||||
|
var div = document.getElementsByTagName("div");
|
||||||
|
div[0].innerHTML = count;
|
||||||
|
div[0].addEventListener("animationiteration", animationIteration, true);
|
||||||
|
|
||||||
|
function animationIteration() {
|
||||||
|
count += 1;
|
||||||
|
div[0].innerHTML = count;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: @keyframes - from, to, percentage</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#keyframes" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that @keyframes rule accepts 'from' and 'to'
|
||||||
|
keywords, and percentage values." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
65% {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text'
|
||||||
|
initially on page load, and if the color of the square gradully changes
|
||||||
|
in order: BLUE to GREEN to YELLOW and back to BLUE in 10 seconds.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: @keyframes - negative percentage and higher than 100%</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#keyframes" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that a keyframe selector specifies negative percentage values
|
||||||
|
or values higher than 100%, the keyframe will be ignored." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
-100% {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
0% {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
65% {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
200% {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text'
|
||||||
|
initially on page load, if the color of the square gradully changes
|
||||||
|
in order: BLUE to GREEN to YELLOW and back to BLUE in 10 seconds,
|
||||||
|
and if there is no red.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: @keyframes - animation-timing-function</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#keyframes" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that @keyframes rule accpets 'animation-timing-function'
|
||||||
|
property used as the animation moves to the next keyframe." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
left: 75px;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left with constant speed.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-name - blank value</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-name is set without any value,
|
||||||
|
there will be no animation." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: ;
|
||||||
|
animation-duration: 8s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts staying left about 2 seconds, then moves from right to left.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
<script>
|
||||||
|
setTimeout(setAnimationName, 2000);
|
||||||
|
|
||||||
|
function setAnimationName () {
|
||||||
|
var div = document.getElementsByTagName("div");
|
||||||
|
div[0].style.animationName = "sample";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-name matchs keyframes at-rule</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-name is set to refer to a keyframe at-rule
|
||||||
|
that provides the property values for the animation,
|
||||||
|
animation will execute." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left on the page load.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-name - none</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-name is set to none, there will be no animation." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: none;
|
||||||
|
animation-duration: 8s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts staying left about 2 seconds, then moves from right to left.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
<script>
|
||||||
|
setTimeout(setAnimationName, 2000);
|
||||||
|
|
||||||
|
function setAnimationName () {
|
||||||
|
var div = document.getElementsByTagName("div");
|
||||||
|
div[0].style.animationName = "sample";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-name mismatches keyframe at-rule</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-name does not match any keyframe at-rule,
|
||||||
|
there are no properties to be animated and animation will not execute." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample1;
|
||||||
|
animation-duration: 8s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts staying left about 2 seconds, then moves from right to left.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
<script>
|
||||||
|
setTimeout(setAnimationName, 2000);
|
||||||
|
|
||||||
|
function setAnimationName () {
|
||||||
|
var div = document.getElementsByTagName("div");
|
||||||
|
div[0].style.animationName = "sample";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-name - ::after</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-name applies to the ::after pseudo element." name="assert">
|
||||||
|
<style>
|
||||||
|
div::after {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left on the page load.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-name - ::before</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-name applies to the ::before pseudo element." name="assert">
|
||||||
|
<style>
|
||||||
|
div::before {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left on the page load.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-play-state - paused</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-play-state" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-play-state is set to paused,
|
||||||
|
animation is paused where the progress it had made
|
||||||
|
before being paused." name="assert">
|
||||||
|
<style>
|
||||||
|
#test-animation-paused {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ref-path {
|
||||||
|
background-color: yellow;
|
||||||
|
height: 10px;
|
||||||
|
width: 250px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving right to left along the yellow bar,
|
||||||
|
and pauses in the middle after about 2 seconds' animation.
|
||||||
|
</p>
|
||||||
|
<div id="test-animation-paused">Filler Text</div>
|
||||||
|
<div id="ref-path"></div>
|
||||||
|
<script>
|
||||||
|
setTimeout(setAnimationRunning, 2000);
|
||||||
|
|
||||||
|
function setAnimationRunning() {
|
||||||
|
var div = document.getElementsByTagName("div");
|
||||||
|
div[0].style.animationPlayState = "paused";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-play-state - running</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-play-state" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-play-state is set to running,
|
||||||
|
animation will proceed as normal." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-play-state: running;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-play-state - ::after</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-play-state" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-play-state applies to the ::after pseudo element." name="assert">
|
||||||
|
<style>
|
||||||
|
div::after {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-play-state: running;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-play-state - ::before</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-play-state" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-play-state applies to the ::before pseudo element." name="assert">
|
||||||
|
<style>
|
||||||
|
div::before {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-play-state: running;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation shorthand</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation shorthand property accepts time
|
||||||
|
values for animation-duration and animation-delay in order." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation: 10s 2s sample;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts staying left about 2 seconds, and then moves from right to left
|
||||||
|
and lasts for a span of 10 seconds.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation shorthand - ::after</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation shorthand applies to the ::after pseudo element
|
||||||
|
and accepts time values for animation-duration and animation-delay
|
||||||
|
in order." name="assert">
|
||||||
|
<style>
|
||||||
|
div::after {
|
||||||
|
animation: 10s 2s sample;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts staying left about 2 seconds, and then moves from right to left
|
||||||
|
and lasts for a span of 10 seconds.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation shorthand - ::before</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation shorthand applies to the ::before pseudo element
|
||||||
|
and accepts time values for animation-duration and animation-delay
|
||||||
|
in order." name="assert">
|
||||||
|
<style>
|
||||||
|
div::before {
|
||||||
|
animation: 10s 2s sample;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts staying left about 2 seconds, and then moves from right to left
|
||||||
|
and lasts for a span of 10 seconds.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-timing-function - cubic-bezier with parameters (0,0,1,1)</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="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." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-timing-function: cubic-bezier(0,0,1,1);
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left with constant speed.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-timing-function - ease</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="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." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-timing-function: ease;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left; initially the animation starts slow,
|
||||||
|
gains acceleration in the middle and again slows down at the end.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-timing-function - ease-in</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-timing-function is set to ease-in,
|
||||||
|
animation will start slow, gain acceleration as time progresses." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-timing-function: ease-in;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left; animation starts slow
|
||||||
|
and gains acceleration as time progresses.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-timing-function - ease-in-out</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="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." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left; initially the animation starts slow,
|
||||||
|
gains acceleration in the middle and again slows down at the end.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-timing-function - ease-out</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="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." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left; animation starts and relatively
|
||||||
|
slows down as time progresses.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-timing-function - linear</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-timing-function is set to linear,
|
||||||
|
animation will progress over one cycle of its duration
|
||||||
|
with constant speed." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which starts moving from right to left with constant speed.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-timing-function - step-start</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="When animation-timing-function is set to step-start,
|
||||||
|
animation will play the end effect at the start of the interval." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#test-step-start {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-timing-function: step-start;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ref-no-animation {
|
||||||
|
background-color: red;
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which stays right, and if there is NO red.
|
||||||
|
</p>
|
||||||
|
<div id="ref-no-animation"></div>
|
||||||
|
<div id="test-step-start">Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-timing-function - step-end</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="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." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-timing-function: step-end;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled square with 'Filler Text',
|
||||||
|
which stays right for about 10 seconds, and then jumps to left.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-timing-function - steps with parameters (<number>, start)</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="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." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
float: left;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#test-step-start {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-timing-function: steps(4, start);
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ref-1 {
|
||||||
|
background-color: yellow;
|
||||||
|
left: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ref-2 {
|
||||||
|
background-color: green;
|
||||||
|
left: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ref-3 {
|
||||||
|
background-color: red;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 400px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there are a filled square with 'Filler Text',
|
||||||
|
which jumps three times from right to left and orderly covers
|
||||||
|
the filled YELLOW, GREEN and RED squares.
|
||||||
|
</p>
|
||||||
|
<div id="ref-1"></div>
|
||||||
|
<div id="ref-2"></div>
|
||||||
|
<div id="ref-3"></div>
|
||||||
|
<div id="test-step-start">Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-timing-function - steps with parameters (<number>, end)</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="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." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
float: left;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#test-step-end {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-timing-function: steps(3, end);
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ref-1 {
|
||||||
|
background-color: yellow;
|
||||||
|
left: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ref-2 {
|
||||||
|
background-color: green;
|
||||||
|
left: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ref-3 {
|
||||||
|
background-color: red;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 300px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there are a filled square with 'Filler Text',
|
||||||
|
which jumps three times from right to left and orderly covers
|
||||||
|
the filled YELLOW, GREEN and RED squares.
|
||||||
|
</p>
|
||||||
|
<div id="ref-1"></div>
|
||||||
|
<div id="ref-2"></div>
|
||||||
|
<div id="ref-3"></div>
|
||||||
|
<div id="test-step-end">Filler Text</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-timing-function - ::after</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-timing-function applies to the ::after pseudo element." name="assert">
|
||||||
|
<style>
|
||||||
|
div::after {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which moves from right to left with constant speed.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation-timing-function - ::before</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animation-timing-function applies to the ::before pseudo element." name="assert">
|
||||||
|
<style>
|
||||||
|
div::before {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
content: "Filler Text";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
|
which moves from right to left with constant speed.
|
||||||
|
</p>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: AnimationEvent interface</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#interface-dom" rel="help">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="animationevent-interface.js"></script>
|
||||||
|
</head><body><div id="log"></div>
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<meta content="long" name="timeout">
|
||||||
|
<title>CSS Animations Test: AnimationEvnt types - animationstart, animationend,animationiteration</title>
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#event-animationevent" rel="help">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<style>
|
||||||
|
#test {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-delay: -1s;
|
||||||
|
animation-iteration-count: 2;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body><div id="test">Filler Text</div>
|
||||||
|
<div id="log"></div>
|
||||||
|
<script>
|
||||||
|
var testDiv = document.getElementById("test");
|
||||||
|
|
||||||
|
async_test(function(t) {
|
||||||
|
testDiv.addEventListener("animationstart", t.step_func(function(evt) {
|
||||||
|
assert_true(evt instanceof window.AnimationEvent);
|
||||||
|
|
||||||
|
assert_idl_attribute(evt, "animationName", "animationstart has animationName property");
|
||||||
|
assert_idl_attribute(evt, "elapsedTime", "animationstart has elapsedTime property");
|
||||||
|
|
||||||
|
assert_equals(evt.animationName, "sample", "animationstart has animationName value");
|
||||||
|
assert_equals(evt.elapsedTime, 1, "animationstart has elapsedTime value");
|
||||||
|
|
||||||
|
t.done();
|
||||||
|
}), true);
|
||||||
|
}, "animationstart event is instanceof AnimationEvent");
|
||||||
|
|
||||||
|
async_test(function(t) {
|
||||||
|
testDiv.addEventListener("animationend", t.step_func(function(evt) {
|
||||||
|
assert_true(evt instanceof window.AnimationEvent);
|
||||||
|
|
||||||
|
assert_idl_attribute(evt, "animationName", "animationend has animationName property");
|
||||||
|
assert_idl_attribute(evt, "elapsedTime", "animationend has elapsedTime property");
|
||||||
|
|
||||||
|
assert_equals(evt.animationName, "sample", "animationend has animationName value");
|
||||||
|
assert_equals(evt.elapsedTime, 4, "animationend has elapsedTime value");
|
||||||
|
|
||||||
|
t.done();
|
||||||
|
}), true);
|
||||||
|
}, "animationend event is instanceof AnimationEvent");
|
||||||
|
|
||||||
|
async_test(function(t) {
|
||||||
|
testDiv.addEventListener("animationiteration", t.step_func(function(evt) {
|
||||||
|
assert_true(evt instanceof window.AnimationEvent);
|
||||||
|
|
||||||
|
assert_idl_attribute(evt, "animationName", "animationiteration has animationName property");
|
||||||
|
assert_idl_attribute(evt, "elapsedTime", "animationiteration has elapsedTime property");
|
||||||
|
|
||||||
|
assert_equals(evt.animationName, "sample", "animationiteration has animationName value");
|
||||||
|
assert_equals(evt.elapsedTime, 2, "animationiteration has elapsedTime value");
|
||||||
|
|
||||||
|
t.done();
|
||||||
|
}), true);
|
||||||
|
}, "animationiteration event is instanceof AnimationEvent");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head><meta charset="utf-8">
|
||||||
|
<title>CSS Animations Test: animation events - animationstart and animationend</title>
|
||||||
|
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
|
||||||
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
|
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
|
<link href="https://drafts.csswg.org/css-animations-1/#events" rel="help">
|
||||||
|
<meta content="animated" name="flags">
|
||||||
|
<meta content="Check that animationstart event occurs at the start of an animation,
|
||||||
|
animationend event occurs when animation finishes." name="assert">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
animation-name: sample;
|
||||||
|
animation-duration: 10s;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sample {
|
||||||
|
from {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head><body>
|
||||||
|
<p>
|
||||||
|
Test passes if there is a filled blue square,
|
||||||
|
which moves from right to left with text 'START'
|
||||||
|
and changes to 'END' when the animation is finished.
|
||||||
|
</p>
|
||||||
|
<div>Filler Text</div>
|
||||||
|
<script>
|
||||||
|
var div = document.getElementsByTagName("div");
|
||||||
|
div[0].addEventListener("animationstart", animationStart, true);
|
||||||
|
div[0].addEventListener("animationend", animationEnd, true);
|
||||||
|
|
||||||
|
function animationStart() {
|
||||||
|
div[0].innerHTML = "START";
|
||||||
|
}
|
||||||
|
|
||||||
|
function animationEnd() {
|
||||||
|
div[0].innerHTML = "END";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
|
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
|
||||||
<h2>Values (0 tests)</h2>
|
<h2>Values (2 tests)</h2>
|
||||||
<table width="100%">
|
<table width="100%">
|
||||||
<col id="test-column">
|
<col id="test-column">
|
||||||
<col id="refs-column">
|
<col id="refs-column">
|
||||||
|
|
@ -31,7 +31,29 @@
|
||||||
<tr><th colspan="4" scope="rowgroup">
|
<tr><th colspan="4" scope="rowgroup">
|
||||||
<a href="#s2">+</a>
|
<a href="#s2">+</a>
|
||||||
<a href="http://www.w3.org/TR/css3-animations/#values">2 Values</a></th></tr>
|
<a href="http://www.w3.org/TR/css3-animations/#values">2 Values</a></th></tr>
|
||||||
<!-- 0 tests -->
|
<!-- 2 tests -->
|
||||||
|
<tr id="animation-delay-006-2" 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-2" 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>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
|
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
|
||||||
<h2>Animations (15 tests)</h2>
|
<h2>Animations (16 tests)</h2>
|
||||||
<table width="100%">
|
<table width="100%">
|
||||||
<col id="test-column">
|
<col id="test-column">
|
||||||
<col id="refs-column">
|
<col id="refs-column">
|
||||||
|
|
@ -31,7 +31,18 @@
|
||||||
<tr><th colspan="4" scope="rowgroup">
|
<tr><th colspan="4" scope="rowgroup">
|
||||||
<a href="#s3">+</a>
|
<a href="#s3">+</a>
|
||||||
<a href="http://www.w3.org/TR/css3-animations/#animations">3 Animations</a></th></tr>
|
<a href="http://www.w3.org/TR/css3-animations/#animations">3 Animations</a></th></tr>
|
||||||
<!-- 15 tests -->
|
<!-- 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">
|
<tr id="animations-001-3" class="ahem animated">
|
||||||
<td>
|
<td>
|
||||||
<a href="animations-001.htm">animations-001</a></td>
|
<a href="animations-001.htm">animations-001</a></td>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -27,17 +27,17 @@
|
||||||
<tbody id="s2">
|
<tbody id="s2">
|
||||||
<tr><th><a href="chapter-2.htm">Chapter 2 -
|
<tr><th><a href="chapter-2.htm">Chapter 2 -
|
||||||
Values</a></th>
|
Values</a></th>
|
||||||
<td>(0 Tests)</td></tr>
|
<td>(2 Tests)</td></tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s3">
|
<tbody id="s3">
|
||||||
<tr><th><a href="chapter-3.htm">Chapter 3 -
|
<tr><th><a href="chapter-3.htm">Chapter 3 -
|
||||||
Animations</a></th>
|
Animations</a></th>
|
||||||
<td>(15 Tests)</td></tr>
|
<td>(16 Tests)</td></tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s4">
|
<tbody id="s4">
|
||||||
<tr><th><a href="chapter-4.htm">Chapter 4 -
|
<tr><th><a href="chapter-4.htm">Chapter 4 -
|
||||||
Keyframes</a></th>
|
Keyframes</a></th>
|
||||||
<td>(0 Tests)</td></tr>
|
<td>(66 Tests)</td></tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s5">
|
<tbody id="s5">
|
||||||
<tr><th><a href="chapter-5.htm">Chapter 5 -
|
<tr><th><a href="chapter-5.htm">Chapter 5 -
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,144 @@
|
||||||
# http://test.csswg.org/suites/css-animations-1_dev/DATESTAMP/
|
# http://test.csswg.org/suites/css-animations-1_dev/DATESTAMP/
|
||||||
# See http://wiki.csswg.org/test/implementation-report for instructions
|
# See http://wiki.csswg.org/test/implementation-report for instructions
|
||||||
testname revision result comment
|
testname revision result comment
|
||||||
|
html/animation-delay-001.htm a59cfbaf4a9ecfae621b3b94f31a39d973effc6b ?
|
||||||
|
xhtml1/animation-delay-001.xht a59cfbaf4a9ecfae621b3b94f31a39d973effc6b ?
|
||||||
|
html/animation-delay-002.htm c2f5a26e91124f1659e115345c64e46b29e77ddf ?
|
||||||
|
xhtml1/animation-delay-002.xht c2f5a26e91124f1659e115345c64e46b29e77ddf ?
|
||||||
|
html/animation-delay-003.htm d00f228e0f8b6dedb1323493b1b73072f2385212 ?
|
||||||
|
xhtml1/animation-delay-003.xht d00f228e0f8b6dedb1323493b1b73072f2385212 ?
|
||||||
|
html/animation-delay-004.htm 126b62ca8059c74fc012172a5f19dd6f2dadbde4 ?
|
||||||
|
xhtml1/animation-delay-004.xht 126b62ca8059c74fc012172a5f19dd6f2dadbde4 ?
|
||||||
|
html/animation-delay-005.htm 26ecab722c342d2f3f8dd7dc864f1ac64490027c ?
|
||||||
|
xhtml1/animation-delay-005.xht 26ecab722c342d2f3f8dd7dc864f1ac64490027c ?
|
||||||
|
html/animation-delay-006.htm 13c48bd6b709280df6a9a5bfff09c2880e868a41 ?
|
||||||
|
xhtml1/animation-delay-006.xht 13c48bd6b709280df6a9a5bfff09c2880e868a41 ?
|
||||||
|
html/animation-delay-007.htm 2f27e7970e6df9f0039f97e9543f4cf5fb16d5a3 ?
|
||||||
|
xhtml1/animation-delay-007.xht 2f27e7970e6df9f0039f97e9543f4cf5fb16d5a3 ?
|
||||||
|
html/animation-direction-001.htm a7e38f2510c639abc4f8a90f699435377d04bcfd ?
|
||||||
|
xhtml1/animation-direction-001.xht a7e38f2510c639abc4f8a90f699435377d04bcfd ?
|
||||||
|
html/animation-direction-002.htm 10d5d6cd6132c928fadcbe3312b8a7ffb2c0dacc ?
|
||||||
|
xhtml1/animation-direction-002.xht 10d5d6cd6132c928fadcbe3312b8a7ffb2c0dacc ?
|
||||||
|
html/animation-direction-003.htm 2525726c04b8605f6b2c4809f33866f566ae1b3e ?
|
||||||
|
xhtml1/animation-direction-003.xht 2525726c04b8605f6b2c4809f33866f566ae1b3e ?
|
||||||
|
html/animation-direction-004.htm f14768d125e6639a43406b4640dcc9d93ba83576 ?
|
||||||
|
xhtml1/animation-direction-004.xht f14768d125e6639a43406b4640dcc9d93ba83576 ?
|
||||||
|
html/animation-direction-005.htm 5fa0f64355db4c2c051c6232bdb80f4ac8ff248b ?
|
||||||
|
xhtml1/animation-direction-005.xht 5fa0f64355db4c2c051c6232bdb80f4ac8ff248b ?
|
||||||
|
html/animation-direction-006.htm 05f86fa498917fde4d1216bb9252609c74a7c3f3 ?
|
||||||
|
xhtml1/animation-direction-006.xht 05f86fa498917fde4d1216bb9252609c74a7c3f3 ?
|
||||||
|
html/animation-display.htm 8e6c27c47e1a837e07eed4a94d6cff0b13f133dc ?
|
||||||
|
xhtml1/animation-display.xht 8e6c27c47e1a837e07eed4a94d6cff0b13f133dc ?
|
||||||
|
html/animation-duration-001.htm b7e9e6b620eddf01ef5ce9ff3a90a9d39ce733b2 ?
|
||||||
|
xhtml1/animation-duration-001.xht b7e9e6b620eddf01ef5ce9ff3a90a9d39ce733b2 ?
|
||||||
|
html/animation-duration-002.htm 0a1ced535f37c055b5be633a34613f4a40dc4ed9 ?
|
||||||
|
xhtml1/animation-duration-002.xht 0a1ced535f37c055b5be633a34613f4a40dc4ed9 ?
|
||||||
|
html/animation-duration-003.htm 5578f320f4d80f5d8e5c0ede61139763bd6343a2 ?
|
||||||
|
xhtml1/animation-duration-003.xht 5578f320f4d80f5d8e5c0ede61139763bd6343a2 ?
|
||||||
|
html/animation-duration-004.htm 62fffb69c3d6ef31d371778495735a3f55ef1c51 ?
|
||||||
|
xhtml1/animation-duration-004.xht 62fffb69c3d6ef31d371778495735a3f55ef1c51 ?
|
||||||
|
html/animation-duration-005.htm 1aa4ed306edafc44f849e8c7e270af0cc73a09a4 ?
|
||||||
|
xhtml1/animation-duration-005.xht 1aa4ed306edafc44f849e8c7e270af0cc73a09a4 ?
|
||||||
|
html/animation-duration-006.htm 8f01bff7015212232e2e378bdb2bf30f4d7e390d ?
|
||||||
|
xhtml1/animation-duration-006.xht 8f01bff7015212232e2e378bdb2bf30f4d7e390d ?
|
||||||
|
html/animation-duration-007.htm a4fc15e755ec66168590d0e39c02e49e1dc10efb ?
|
||||||
|
xhtml1/animation-duration-007.xht a4fc15e755ec66168590d0e39c02e49e1dc10efb ?
|
||||||
|
html/animation-duration-008.htm 1a0b1995d43a4a2524555d9da34a6b36ae31a8ff ?
|
||||||
|
xhtml1/animation-duration-008.xht 1a0b1995d43a4a2524555d9da34a6b36ae31a8ff ?
|
||||||
|
html/animation-fill-mode-001.htm 92d88eae75f4d45c2af24235c5390469f6a2fe70 ?
|
||||||
|
xhtml1/animation-fill-mode-001.xht 92d88eae75f4d45c2af24235c5390469f6a2fe70 ?
|
||||||
|
html/animation-fill-mode-002.htm a2e61dd6fc284dc628ed692448f222e8b560622a ?
|
||||||
|
xhtml1/animation-fill-mode-002.xht a2e61dd6fc284dc628ed692448f222e8b560622a ?
|
||||||
|
html/animation-fill-mode-003.htm abb5c141f0f145c8dfda82c28f669112f5b89c3a ?
|
||||||
|
xhtml1/animation-fill-mode-003.xht abb5c141f0f145c8dfda82c28f669112f5b89c3a ?
|
||||||
|
html/animation-fill-mode-004.htm e3a3d5e256446592c490233b94568d41e820a6f1 ?
|
||||||
|
xhtml1/animation-fill-mode-004.xht e3a3d5e256446592c490233b94568d41e820a6f1 ?
|
||||||
|
html/animation-fill-mode-005.htm d60439ebb629902cc04d45b8a9d3f46d334e54b3 ?
|
||||||
|
xhtml1/animation-fill-mode-005.xht d60439ebb629902cc04d45b8a9d3f46d334e54b3 ?
|
||||||
|
html/animation-fill-mode-006.htm e4474eae90dde4cb56ce31fd173ff32cbde1437b ?
|
||||||
|
xhtml1/animation-fill-mode-006.xht e4474eae90dde4cb56ce31fd173ff32cbde1437b ?
|
||||||
|
html/animation-iteration-count-001.htm f0d73fe77862535d66dfb252ab96a0ec4adf4a5a ?
|
||||||
|
xhtml1/animation-iteration-count-001.xht f0d73fe77862535d66dfb252ab96a0ec4adf4a5a ?
|
||||||
|
html/animation-iteration-count-002.htm c0cf3a4cd1863455e91de1ee14cfe7a04d8055d0 ?
|
||||||
|
xhtml1/animation-iteration-count-002.xht c0cf3a4cd1863455e91de1ee14cfe7a04d8055d0 ?
|
||||||
|
html/animation-iteration-count-003.htm 8021971d9a81045eddbc7ca024479aa4d5390122 ?
|
||||||
|
xhtml1/animation-iteration-count-003.xht 8021971d9a81045eddbc7ca024479aa4d5390122 ?
|
||||||
|
html/animation-iteration-count-004.htm 3f36b4a02e18c3883aa19c5216af3fd3222fd4ae ?
|
||||||
|
xhtml1/animation-iteration-count-004.xht 3f36b4a02e18c3883aa19c5216af3fd3222fd4ae ?
|
||||||
|
html/animation-iteration-count-005.htm 5ed553e15237ae1c9b18cc0466aee617ca246cac ?
|
||||||
|
xhtml1/animation-iteration-count-005.xht 5ed553e15237ae1c9b18cc0466aee617ca246cac ?
|
||||||
|
html/animation-iteration-count-006.htm 649574f98923c8f0d9ba605ba4573596cc7c63aa ?
|
||||||
|
xhtml1/animation-iteration-count-006.xht 649574f98923c8f0d9ba605ba4573596cc7c63aa ?
|
||||||
|
html/animation-iteration-count-007.htm 053fffd162daaf0db34a1e25da133bd20cd01f3a ?
|
||||||
|
xhtml1/animation-iteration-count-007.xht 053fffd162daaf0db34a1e25da133bd20cd01f3a ?
|
||||||
|
html/animation-iteration-count-008.htm 3ae4c0e686fb5cf330151ee176b298cb51a77ef9 ?
|
||||||
|
xhtml1/animation-iteration-count-008.xht 3ae4c0e686fb5cf330151ee176b298cb51a77ef9 ?
|
||||||
|
html/animation-iteration-event.htm e521ed19e72a1757572ca7c324be4e288a5c33c6 ?
|
||||||
|
xhtml1/animation-iteration-event.xht e521ed19e72a1757572ca7c324be4e288a5c33c6 ?
|
||||||
|
html/animation-keyframes-001.htm dd13bbf052c41758c69fd457cda3747ad6a10fb2 ?
|
||||||
|
xhtml1/animation-keyframes-001.xht dd13bbf052c41758c69fd457cda3747ad6a10fb2 ?
|
||||||
|
html/animation-keyframes-002.htm 91d4a884eb431ceb0c8636098d33a6d93a2c014e ?
|
||||||
|
xhtml1/animation-keyframes-002.xht 91d4a884eb431ceb0c8636098d33a6d93a2c014e ?
|
||||||
|
html/animation-keyframes-003.htm d1768e205585cf4224307af0b7cee0cf72c01258 ?
|
||||||
|
xhtml1/animation-keyframes-003.xht d1768e205585cf4224307af0b7cee0cf72c01258 ?
|
||||||
|
html/animation-name-001.htm cb26f4c55e9f6b4c169dcb2e13f4378c5c7136f1 ?
|
||||||
|
xhtml1/animation-name-001.xht cb26f4c55e9f6b4c169dcb2e13f4378c5c7136f1 ?
|
||||||
|
html/animation-name-002.htm 70bd1cb364ec82be357ee418cb344e10ea301376 ?
|
||||||
|
xhtml1/animation-name-002.xht 70bd1cb364ec82be357ee418cb344e10ea301376 ?
|
||||||
|
html/animation-name-003.htm 8c98816bda0880f90a945cab8806e89fa6542d70 ?
|
||||||
|
xhtml1/animation-name-003.xht 8c98816bda0880f90a945cab8806e89fa6542d70 ?
|
||||||
|
html/animation-name-004.htm 3cce09a98cd0cb9d7b3d101f608128e4a759bc79 ?
|
||||||
|
xhtml1/animation-name-004.xht 3cce09a98cd0cb9d7b3d101f608128e4a759bc79 ?
|
||||||
|
html/animation-name-005.htm 9ef57c67ba391e1a00060db5eca52be5fc68c6f0 ?
|
||||||
|
xhtml1/animation-name-005.xht 9ef57c67ba391e1a00060db5eca52be5fc68c6f0 ?
|
||||||
|
html/animation-name-006.htm af99446d3d688a8e6ad08caee199229327c2279a ?
|
||||||
|
xhtml1/animation-name-006.xht af99446d3d688a8e6ad08caee199229327c2279a ?
|
||||||
|
html/animation-play-state-001.htm 64af3a1bf0816b76b3ac6f15ad15e6cc6c7ccfb3 ?
|
||||||
|
xhtml1/animation-play-state-001.xht 64af3a1bf0816b76b3ac6f15ad15e6cc6c7ccfb3 ?
|
||||||
|
html/animation-play-state-002.htm 22aac25e6c5bc4fccf865d0843e7f97e05ff72e0 ?
|
||||||
|
xhtml1/animation-play-state-002.xht 22aac25e6c5bc4fccf865d0843e7f97e05ff72e0 ?
|
||||||
|
html/animation-play-state-003.htm 1dca5c63b44436557a976a9d2f26755fefb6ade5 ?
|
||||||
|
xhtml1/animation-play-state-003.xht 1dca5c63b44436557a976a9d2f26755fefb6ade5 ?
|
||||||
|
html/animation-play-state-004.htm 5047e6044f322dd9211c9c3ffc4655b4d6c50540 ?
|
||||||
|
xhtml1/animation-play-state-004.xht 5047e6044f322dd9211c9c3ffc4655b4d6c50540 ?
|
||||||
|
html/animation-shorthand-001.htm 021fa6b8453b8e7c009ce8fea9853bc4a31bf762 ?
|
||||||
|
xhtml1/animation-shorthand-001.xht 021fa6b8453b8e7c009ce8fea9853bc4a31bf762 ?
|
||||||
|
html/animation-shorthand-002.htm 75ac427634fb58686568403ea3f5f91c6654ac95 ?
|
||||||
|
xhtml1/animation-shorthand-002.xht 75ac427634fb58686568403ea3f5f91c6654ac95 ?
|
||||||
|
html/animation-shorthand-003.htm 228b0f49702e90694efdca63112fe58f2d3efeff ?
|
||||||
|
xhtml1/animation-shorthand-003.xht 228b0f49702e90694efdca63112fe58f2d3efeff ?
|
||||||
|
html/animation-timing-function-001.htm f9aadf639f98f9795400a5218e8540c08366e8cd ?
|
||||||
|
xhtml1/animation-timing-function-001.xht f9aadf639f98f9795400a5218e8540c08366e8cd ?
|
||||||
|
html/animation-timing-function-002.htm 7527eff75562c5f49d9599e7495c47aa9bd9f414 ?
|
||||||
|
xhtml1/animation-timing-function-002.xht 7527eff75562c5f49d9599e7495c47aa9bd9f414 ?
|
||||||
|
html/animation-timing-function-003.htm 214819b56e1e46f9c7aa07d0ce144830ac65e924 ?
|
||||||
|
xhtml1/animation-timing-function-003.xht 214819b56e1e46f9c7aa07d0ce144830ac65e924 ?
|
||||||
|
html/animation-timing-function-004.htm 4064198bc4b46aaf5eb99144c7343655485b86a9 ?
|
||||||
|
xhtml1/animation-timing-function-004.xht 4064198bc4b46aaf5eb99144c7343655485b86a9 ?
|
||||||
|
html/animation-timing-function-005.htm 5a29c60d50b81071e5c7d9d5d75aacbf7fd56fe5 ?
|
||||||
|
xhtml1/animation-timing-function-005.xht 5a29c60d50b81071e5c7d9d5d75aacbf7fd56fe5 ?
|
||||||
|
html/animation-timing-function-006.htm 2bb42397e46fd890be8f37a020d4febef34c5b96 ?
|
||||||
|
xhtml1/animation-timing-function-006.xht 2bb42397e46fd890be8f37a020d4febef34c5b96 ?
|
||||||
|
html/animation-timing-function-007.htm ffbe76fc315f072878076a7bf711ac9a891eba52 ?
|
||||||
|
xhtml1/animation-timing-function-007.xht ffbe76fc315f072878076a7bf711ac9a891eba52 ?
|
||||||
|
html/animation-timing-function-008.htm 4fbb8d08f0f4b411101c203fc66f72d222df7f44 ?
|
||||||
|
xhtml1/animation-timing-function-008.xht 4fbb8d08f0f4b411101c203fc66f72d222df7f44 ?
|
||||||
|
html/animation-timing-function-009.htm 0c8dd1d5b92dfaeb20edb3ff4f3287bb06ecff30 ?
|
||||||
|
xhtml1/animation-timing-function-009.xht 0c8dd1d5b92dfaeb20edb3ff4f3287bb06ecff30 ?
|
||||||
|
html/animation-timing-function-010.htm da7e0cd2f6006255f27cbd3721e0040771631adb ?
|
||||||
|
xhtml1/animation-timing-function-010.xht da7e0cd2f6006255f27cbd3721e0040771631adb ?
|
||||||
|
html/animation-timing-function-011.htm bbc7283ae0b15aaa2ed784a7645b404a7fa301a5 ?
|
||||||
|
xhtml1/animation-timing-function-011.xht bbc7283ae0b15aaa2ed784a7645b404a7fa301a5 ?
|
||||||
|
html/animation-timing-function-012.htm d6a471751d34018dfc5e91a83592e896d8e6e5b5 ?
|
||||||
|
xhtml1/animation-timing-function-012.xht d6a471751d34018dfc5e91a83592e896d8e6e5b5 ?
|
||||||
|
html/animationevent-interface.htm a1e39dcdabe246037312ac3a8bab7bf3fe904a79 ?
|
||||||
|
xhtml1/animationevent-interface.xht a1e39dcdabe246037312ac3a8bab7bf3fe904a79 ?
|
||||||
|
html/animationevent-types.htm 11cda4945e4216dee93775c6217d3ce303ea04a9 ?
|
||||||
|
xhtml1/animationevent-types.xht 11cda4945e4216dee93775c6217d3ce303ea04a9 ?
|
||||||
html/animations-001.htm 58200be49397d3ebd75335737334fadb5f72043a ?
|
html/animations-001.htm 58200be49397d3ebd75335737334fadb5f72043a ?
|
||||||
xhtml1/animations-001.xht 58200be49397d3ebd75335737334fadb5f72043a ?
|
xhtml1/animations-001.xht 58200be49397d3ebd75335737334fadb5f72043a ?
|
||||||
|
html/animationstart-and-animationend-events.htm 8faa1d6d24026a7e26d4c00bc57b7f70d4042146 ?
|
||||||
|
xhtml1/animationstart-and-animationend-events.xht 8faa1d6d24026a7e26d4c00bc57b7f70d4042146 ?
|
||||||
html/css-filters-animation-blur.htm 53622387367e3daa90b9880e22ff9548665f4883 ?
|
html/css-filters-animation-blur.htm 53622387367e3daa90b9880e22ff9548665f4883 ?
|
||||||
xhtml1/css-filters-animation-blur.xht 53622387367e3daa90b9880e22ff9548665f4883 ?
|
xhtml1/css-filters-animation-blur.xht 53622387367e3daa90b9880e22ff9548665f4883 ?
|
||||||
html/css-filters-animation-brightness.htm 6ef87e3d77b51aaa2d33c91de5b6c84e96b41eae ?
|
html/css-filters-animation-brightness.htm 6ef87e3d77b51aaa2d33c91de5b6c84e96b41eae ?
|
||||||
|
|
|
||||||
|
|
@ -126,7 +126,9 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li>François REMY</li>
|
<li>François REMY</li>
|
||||||
<li>Gunther Brunner</li>
|
<li>Gunther Brunner</li>
|
||||||
|
<li>Intel</li>
|
||||||
<li>Mihai Balan</li>
|
<li>Mihai Balan</li>
|
||||||
|
<li>Nokia Inc.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -126,7 +126,9 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li>François REMY</li>
|
<li>François REMY</li>
|
||||||
<li>Gunther Brunner</li>
|
<li>Gunther Brunner</li>
|
||||||
|
<li>Intel</li>
|
||||||
<li>Mihai Balan</li>
|
<li>Mihai Balan</li>
|
||||||
|
<li>Nokia Inc.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue