Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-23 16:44:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update CSS tests to revision d674587d6ae7d2e231d632785559f2613d554eb0

Browse source
This commit is contained in:
Ms2ger 2015-08-21 17:46:44 +02:00
parent 7c45ff8e05
commit f235d49372
6623 changed files with 267392 additions and 10061 deletions
Download patch file Download diff file Expand all files Collapse all files

28
tests/wpt/css-tests/compositing-1_dev/html/chapter-3.htm
View file

@ -13,7 +13,7 @@
<body>
<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%">
<col id="test-column">
<col id="refs-column">
@ -61,7 +61,7 @@
<tr><th colspan="4" scope="rowgroup">
<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>
<!-- 5 tests -->
<!-- 6 tests -->
<tr id="blending_in_a_group_with_filter-3.4.1" class="primary svg">
<td><strong>
<a href="Blending_in_a_group_with_filter.htm">blending_in_a_group_with_filter</a></strong></td>
@ -111,6 +111,17 @@
</ul>
</td>
</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 id="s3.4.1.#ltblendmodegt">
<!-- 0 tests -->
@ -122,7 +133,7 @@
<tr><th colspan="4" scope="rowgroup">
<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>
<!-- 1 tests -->
<!-- 2 tests -->
<tr id="blend-isolation-3.4.2" class="">
<td>
<a href="blend-isolation.htm">blend-isolation</a></td>
@ -134,6 +145,17 @@
</ul>
</td>
</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 id="s3.4.2.#img_isolation">
<!-- 0 tests -->

13
tests/wpt/css-tests/compositing-1_dev/html/reference/green-square-100-by-100-ref.htm Normal file
View file

@ -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>

16
tests/wpt/css-tests/compositing-1_dev/html/reftest-toc.htm
View file

@ -24,6 +24,22 @@
<th>Flags</th>
</tr>
</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>
</body>

2
tests/wpt/css-tests/compositing-1_dev/html/reftest.list
View file

@ -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

2
tests/wpt/css-tests/compositing-1_dev/html/toc.htm
View file

@ -32,7 +32,7 @@
<tbody id="s3">
<tr><th><a href="chapter-3.htm">Chapter 3 -
Specifying Blending in CSS</a></th>
<td>(6 Tests)</td></tr>
<td>(8 Tests)</td></tr>
</tbody>
<tbody id="s4">
<tr><th><a href="chapter-4.htm">Chapter 4 -

22
tests/wpt/css-tests/compositing-1_dev/html/will-change-stacking-context-isolation-1.htm Normal file
View file

@ -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>

22
tests/wpt/css-tests/compositing-1_dev/html/will-change-stacking-context-mix-blend-mode-1.htm Normal file
View file

@ -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>

4
tests/wpt/css-tests/compositing-1_dev/implementation-report-TEMPLATE.data
View file

@ -15,3 +15,7 @@ html/text-with-svg-background.htm ba9c7ae99506609324d8fd3f671459e52e00fcbd ?
xhtml1/text-with-svg-background.xht ba9c7ae99506609324d8fd3f671459e52e00fcbd ?
html/text_with_svg_background.htm 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 ?

2
tests/wpt/css-tests/compositing-1_dev/index.htm
View file

@ -133,6 +133,8 @@
<ul>
<li>cabanier</li>
<li>dmyang</li>
<li>L. David Baron</li>
<li>Mozilla</li>
<li>windtale</li>
</ul>

2
tests/wpt/css-tests/compositing-1_dev/index.xht
View file

@ -133,6 +133,8 @@
<ul>
<li>cabanier</li>
<li>dmyang</li>
<li>L. David Baron</li>
<li>Mozilla</li>
<li>windtale</li>
</ul>

2
tests/wpt/css-tests/compositing-1_dev/testinfo.data
View file

@ -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>
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
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.

28
tests/wpt/css-tests/compositing-1_dev/xhtml1/chapter-3.xht
View file

@ -13,7 +13,7 @@
<body>
<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%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -61,7 +61,7 @@
<tr><th colspan="4" scope="rowgroup">
<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>
<!-- 5 tests -->
<!-- 6 tests -->
<tr id="blending_in_a_group_with_filter-3.4.1" class="primary svg">
<td><strong>
<a href="Blending_in_a_group_with_filter.xht">blending_in_a_group_with_filter</a></strong></td>
@ -111,6 +111,17 @@
</ul>
</td>
</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 id="s3.4.1.#ltblendmodegt">
<!-- 0 tests -->
@ -122,7 +133,7 @@
<tr><th colspan="4" scope="rowgroup">
<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>
<!-- 1 tests -->
<!-- 2 tests -->
<tr id="blend-isolation-3.4.2" class="">
<td>
<a href="blend-isolation.xht">blend-isolation</a></td>
@ -134,6 +145,17 @@
</ul>
</td>
</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 id="s3.4.2.#img_isolation">
<!-- 0 tests -->

13
tests/wpt/css-tests/compositing-1_dev/xhtml1/reference/green-square-100-by-100-ref.xht Normal file
View file

@ -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>

16
tests/wpt/css-tests/compositing-1_dev/xhtml1/reftest-toc.xht
View file

@ -24,6 +24,22 @@
<th>Flags</th>
</tr>
</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>
</body>

2
tests/wpt/css-tests/compositing-1_dev/xhtml1/reftest.list
View file

@ -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

2
tests/wpt/css-tests/compositing-1_dev/xhtml1/toc.xht
View file

@ -32,7 +32,7 @@
<tbody id="s3">
<tr><th><a href="chapter-3.xht">Chapter 3 -
Specifying Blending in CSS</a></th>
<td>(6 Tests)</td></tr>
<td>(8 Tests)</td></tr>
</tbody>
<tbody id="s4">
<tr><th><a href="chapter-4.xht">Chapter 4 -

22
tests/wpt/css-tests/compositing-1_dev/xhtml1/will-change-stacking-context-isolation-1.xht Normal file
View file

@ -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>

22
tests/wpt/css-tests/compositing-1_dev/xhtml1/will-change-stacking-context-mix-blend-mode-1.xht Normal file
View file

@ -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>

28
tests/wpt/css-tests/compositing-1_dev/xhtml1print/chapter-3.xht
View file

@ -13,7 +13,7 @@
<body>
<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%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -61,7 +61,7 @@
<tr><th colspan="4" scope="rowgroup">
<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>
<!-- 5 tests -->
<!-- 6 tests -->
<tr id="blending_in_a_group_with_filter-3.4.1" class="primary svg">
<td><strong>
<a href="Blending_in_a_group_with_filter.xht">blending_in_a_group_with_filter</a></strong></td>
@ -111,6 +111,17 @@
</ul>
</td>
</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 id="s3.4.1.#ltblendmodegt">
<!-- 0 tests -->
@ -122,7 +133,7 @@
<tr><th colspan="4" scope="rowgroup">
<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>
<!-- 1 tests -->
<!-- 2 tests -->
<tr id="blend-isolation-3.4.2" class="">
<td>
<a href="blend-isolation.xht">blend-isolation</a></td>
@ -134,6 +145,17 @@
</ul>
</td>
</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 id="s3.4.2.#img_isolation">
<!-- 0 tests -->

13
tests/wpt/css-tests/compositing-1_dev/xhtml1print/reference/green-square-100-by-100-ref.xht Normal file
View file

@ -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>

16
tests/wpt/css-tests/compositing-1_dev/xhtml1print/reftest-toc.xht
View file

@ -24,6 +24,22 @@
<th>Flags</th>
</tr>
</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>
</body>

2
tests/wpt/css-tests/compositing-1_dev/xhtml1print/reftest.list
View file

@ -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

2
tests/wpt/css-tests/compositing-1_dev/xhtml1print/toc.xht
View file

@ -32,7 +32,7 @@
<tbody id="s3">
<tr><th><a href="chapter-3.xht">Chapter 3 -
Specifying Blending in CSS</a></th>
<td>(6 Tests)</td></tr>
<td>(8 Tests)</td></tr>
</tbody>
<tbody id="s4">
<tr><th><a href="chapter-4.xht">Chapter 4 -

22
tests/wpt/css-tests/compositing-1_dev/xhtml1print/will-change-stacking-context-isolation-1.xht Normal file
View file

@ -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>

22
tests/wpt/css-tests/compositing-1_dev/xhtml1print/will-change-stacking-context-mix-blend-mode-1.xht Normal file
View file

@ -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>

68
tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-001.htm Normal file
View file

@ -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>

43
tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-002.htm Normal file
View file

@ -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>

42
tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-003.htm Normal file
View file

@ -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>

43
tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-004.htm Normal file
View file

@ -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>

43
tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-005.htm Normal file
View file

@ -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>

47
tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-006.htm Normal file
View file

@ -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>

48
tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-007.htm Normal file
View file

@ -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>

48
tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-001.htm Normal file
View file

@ -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>

45
tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-002.htm Normal file
View file

@ -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>

47
tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-003.htm Normal file
View file

@ -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>

45
tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-004.htm Normal file
View file

@ -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>

45
tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-005.htm Normal file
View file

@ -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>

45
tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-006.htm Normal file
View file

@ -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>

52
tests/wpt/css-tests/css-animations-1_dev/html/animation-display.htm Normal file
View file

@ -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>

48
tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-001.htm Normal file
View file

@ -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>

40
tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-002.htm Normal file
View file

@ -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>

49
tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-003.htm Normal file
View file

@ -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>

49
tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-004.htm Normal file
View file

@ -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>

51
tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-005.htm Normal file
View file

@ -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>

51
tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-006.htm Normal file
View file

@ -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>

39
tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-007.htm Normal file
View file

@ -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>

39
tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-008.htm Normal file
View file

@ -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>

41
tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-001.htm Normal file
View file

@ -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>

42
tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-002.htm Normal file
View file

@ -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>

46
tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-003.htm Normal file
View file

@ -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>

43
tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-004.htm Normal file
View file

@ -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>

42
tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-005.htm Normal file
View file

@ -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>

42
tests/wpt/css-tests/css-animations-1_dev/html/animation-fill-mode-006.htm Normal file
View file

@ -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>

41
tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-001.htm Normal file
View file

@ -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>

43
tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-002.htm Normal file
View file

@ -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>

41
tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-003.htm Normal file
View file

@ -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>

52
tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-004.htm Normal file
View file

@ -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>

42
tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-005.htm Normal file
View file

@ -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>

50
tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-006.htm Normal file
View file

@ -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>

42
tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-007.htm Normal file
View file

@ -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>

42
tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-008.htm Normal file
View file

@ -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>

61
tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-event.htm Normal file
View file

@ -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>

47
tests/wpt/css-tests/css-animations-1_dev/html/animation-keyframes-001.htm Normal file
View file

@ -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>

53
tests/wpt/css-tests/css-animations-1_dev/html/animation-keyframes-002.htm Normal file
View file

@ -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>

45
tests/wpt/css-tests/css-animations-1_dev/html/animation-keyframes-003.htm Normal file
View file

@ -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>

48
tests/wpt/css-tests/css-animations-1_dev/html/animation-name-001.htm Normal file
View file

@ -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>

41
tests/wpt/css-tests/css-animations-1_dev/html/animation-name-002.htm Normal file
View file

@ -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>

47
tests/wpt/css-tests/css-animations-1_dev/html/animation-name-003.htm Normal file
View file

@ -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>

48
tests/wpt/css-tests/css-animations-1_dev/html/animation-name-004.htm Normal file
View file

@ -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>

40
tests/wpt/css-tests/css-animations-1_dev/html/animation-name-005.htm Normal file
View file

@ -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>

40
tests/wpt/css-tests/css-animations-1_dev/html/animation-name-006.htm Normal file
View file

@ -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>

59
tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-001.htm Normal file
View file

@ -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>

42
tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-002.htm Normal file
View file

@ -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>

42
tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-003.htm Normal file
View file

@ -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>

42
tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-004.htm Normal file
View file

@ -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>

38
tests/wpt/css-tests/css-animations-1_dev/html/animation-shorthand-001.htm Normal file
View file

@ -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>

41
tests/wpt/css-tests/css-animations-1_dev/html/animation-shorthand-002.htm Normal file
View file

@ -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>

41
tests/wpt/css-tests/css-animations-1_dev/html/animation-shorthand-003.htm Normal file
View file

@ -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>

43
tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-001.htm Normal file
View file

@ -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>

44
tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-002.htm Normal file
View file

@ -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>

43
tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-003.htm Normal file
View file

@ -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>

44
tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-004.htm Normal file
View file

@ -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>

44
tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-005.htm Normal file
View file

@ -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>

43
tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-006.htm Normal file
View file

@ -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>

52
tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-007.htm Normal file
View file

@ -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>

42
tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-008.htm Normal file
View file

@ -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>

68
tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-009.htm Normal file
View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-timing-function - steps with parameters (&lt;number&gt;, 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>

68
tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-010.htm Normal file
View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-timing-function - steps with parameters (&lt;number&gt;, 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>

42
tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-011.htm Normal file
View file

@ -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>

42
tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-012.htm Normal file
View file

@ -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>

11
tests/wpt/css-tests/css-animations-1_dev/html/animationevent-interface.htm Normal file
View file

@ -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>

79
tests/wpt/css-tests/css-animations-1_dev/html/animationevent-types.htm Normal file
View file

@ -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>

55
tests/wpt/css-tests/css-animations-1_dev/html/animationstart-and-animationend-events.htm Normal file
View file

@ -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>

26
tests/wpt/css-tests/css-animations-1_dev/html/chapter-2.htm
View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
<h2>Values (0 tests)</h2>
<h2>Values (2 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -31,7 +31,29 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s2">+</a>
<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>
</table>

15
tests/wpt/css-tests/css-animations-1_dev/html/chapter-3.htm
View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
<h2>Animations (15 tests)</h2>
<h2>Animations (16 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -31,7 +31,18 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s3">+</a>
<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">
<td>
<a href="animations-001.htm">animations-001</a></td>

2112
tests/wpt/css-tests/css-animations-1_dev/html/chapter-4.htm
View file

File diff suppressed because it is too large Load diff

6
tests/wpt/css-tests/css-animations-1_dev/html/toc.htm
View file

@ -27,17 +27,17 @@
<tbody id="s2">
<tr><th><a href="chapter-2.htm">Chapter 2 -
Values</a></th>
<td>(0 Tests)</td></tr>
<td>(2 Tests)</td></tr>
</tbody>
<tbody id="s3">
<tr><th><a href="chapter-3.htm">Chapter 3 -
Animations</a></th>
<td>(15 Tests)</td></tr>
<td>(16 Tests)</td></tr>
</tbody>
<tbody id="s4">
<tr><th><a href="chapter-4.htm">Chapter 4 -
Keyframes</a></th>
<td>(0 Tests)</td></tr>
<td>(66 Tests)</td></tr>
</tbody>
<tbody id="s5">
<tr><th><a href="chapter-5.htm">Chapter 5 -

136
tests/wpt/css-tests/css-animations-1_dev/implementation-report-TEMPLATE.data
View file

@ -3,8 +3,144 @@
# http://test.csswg.org/suites/css-animations-1_dev/DATESTAMP/
# See http://wiki.csswg.org/test/implementation-report for instructions
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 ?
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 ?
xhtml1/css-filters-animation-blur.xht 53622387367e3daa90b9880e22ff9548665f4883 ?
html/css-filters-animation-brightness.htm 6ef87e3d77b51aaa2d33c91de5b6c84e96b41eae ?

2
tests/wpt/css-tests/css-animations-1_dev/index.htm
View file

@ -126,7 +126,9 @@
<ul>
<li>Fran&Atilde;&sect;ois REMY</li>
<li>Gunther Brunner</li>
<li>Intel</li>
<li>Mihai Balan</li>
<li>Nokia Inc.</li>
</ul>
</body>

2
tests/wpt/css-tests/css-animations-1_dev/index.xht
View file

@ -126,7 +126,9 @@
<ul>
<li>Fran&Atilde;&sect;ois REMY</li>
<li>Gunther Brunner</li>
<li>Intel</li>
<li>Mihai Balan</li>
<li>Nokia Inc.</li>
</ul>
</body>

Some files were not shown because too many files have changed in this diff Show more