Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-07 06:25:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update CSS tests to revision 2baa72daab8bf37e3e910a9fd311a1eaa5b0f4a8

Browse source
This commit is contained in:
James Graham 2015-07-27 17:47:31 +01:00
parent 662c00a810
commit df03062d62
10934 changed files with 428309 additions and 254265 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,68 +0,0 @@
<!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="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
<link href="http://dev.w3.org/csswg/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
View file

@ -1,43 +0,0 @@
<!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="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
<link href="http://dev.w3.org/csswg/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
View file

@ -1,42 +0,0 @@
<!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="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
<link href="http://dev.w3.org/csswg/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
View file

@ -1,43 +0,0 @@
<!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="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
<link href="http://dev.w3.org/csswg/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
View file

@ -1,43 +0,0 @@
<!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="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
<link href="http://dev.w3.org/csswg/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>

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

@ -1,48 +0,0 @@
<!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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
<link href="http://dev.w3.org/csswg/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
View file

@ -1,45 +0,0 @@
<!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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
<link href="http://dev.w3.org/csswg/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
View file

@ -1,47 +0,0 @@
<!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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
<link href="http://dev.w3.org/csswg/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
View file

@ -1,45 +0,0 @@
<!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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
<link href="http://dev.w3.org/csswg/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
View file

@ -1,45 +0,0 @@
<!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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
<link href="http://dev.w3.org/csswg/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
View file

@ -1,45 +0,0 @@
<!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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
<link href="http://dev.w3.org/csswg/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>

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

@ -1,89 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations : animation-duration value is set blank.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="When animation-duration value is set blank; animation is not visible.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
left: 0px;
-webkit-animation-name: sample;
-webkit-animation-duration: ;
-moz-animation-name: sample;
-moz-animation-duration: ;
animation-name: sample;
animation-duration: ;
}
.def {
position: absolute;
background-color: red;
left: 0px;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
z-index: -1;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
Assertion: When animation-duration value is set blank; animation is not visible.
</p>
<p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red should be visible on this page.</li>
<li>FAIL if blue box is animated/moved or if red is visible.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

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

@ -1,75 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations : animation-duration has a finite value.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="When animation-duration is set to a finite value/duration, animation takes specified time to complete one cycle.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
animation-name: sample;
animation-duration: 10s;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: When animation-duration is set to a finite value/duration, animation takes specified time to complete one cycle.
</p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below; starts moving from right to left upon page load and lasts for a span of 10seconds</li>
<li>FAIL if the animation does not span for 10seconds.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

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

@ -1,89 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations : animation-duration with negative value.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="A negative value for animation-duration is treated as 0 (zero); then animation cycle is immediate (i.e. there will be no animation seen).">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
left: 0px;
-webkit-animation-name: sample;
-webkit-animation-duration: -20s;
-moz-animation-name: sample;
-moz-animation-duration: -20s;
animation-name: sample;
animation-duration: -20s;
}
.def {
position: absolute;
background-color: red;
left: 0px;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
z-index: -1;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: A negative value for animation-duration is treated as 0 (zero); then animation cycle is immediate (i.e. there will be no animation seen).
</p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red should be visible on this page.</li>
<li>FAIL if any animation is seen with the blue box or if red is visible.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

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

@ -1,89 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations : animation-duration value set to 0 (zero).</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen).">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
left: 0px;
-webkit-animation-name: sample;
-webkit-animation-duration: 0s;
-moz-animation-name: sample;
-moz-animation-duration: 0s;
animation-name: sample;
animation-duration: 0s;
}
.def {
position: absolute;
background-color: red;
left: 0px;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
z-index: -1;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
Assertion: When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen).
</p>
<p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red should be visible on this page.</li>
<li>FAIL if blue box is animated/moved or if red is visible.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

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

@ -1,75 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations. animation-iteration-count is not set and testing for default value.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
animation-name: sample;
animation-duration: 10s;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once.
</p>
<ul>
<li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and box starts to animate/move from right to left ONCE.</li>
<li>FAIL if the box fails to animate to left or repeats animation more than once.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

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

@ -1,79 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations. animation-iteration-count set to infinite.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="animation-iteration-count set to infinite causes the animation to repeat forever.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
animation-name: sample;
animation-duration: 10s;
animation-iteration-count: infinite;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: animation-iteration-count set to infinite causes the animation to repeat forever.
</p>
<ul>
<li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and repeatedly moves from right to left. Every time a cycle is finished, the box gets re-positioned to right and continues to move left.</li>
<li>FAIL if the box fails to repeat animation cycles infinitely from right to left</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

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

@ -1,94 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations. animation-iteration-count set to negative value.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
left: 0px;
-webkit-animation-name: sample;
-webkit-animation-iteration-count: -1;
-webkit-animation-duration: 10s;
-moz-animation-name: sample;
-moz-animation-iteration-count: -1;
-moz-animation-duration: 10s;
animation-name: sample;
animation-iteration-count: -1;
animation-duration: 10s;
}
.def {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
left: 0px;
z-index: -1;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation.
</p>
<ul>
<li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and NO movement/animation is seen. Also, RED color should NOT be seen anywhere on this page.</li>
<li>FAIL if the box animates to left OR if RED color is seen anywhere on this page.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

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

@ -1,91 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations. animation-iteration-count set to non-integer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="Setting animation-iteration-count to non-integer leads animation to end part way.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
//padding: 0.2em 1em;
//margin: 6em;
position: relative;
left: 0px;
-webkit-animation-name: sample;
-webkit-animation-iteration-count: 3.1;
-webkit-animation-duration: 10s;
-moz-animation-name: sample;
-moz-animation-iteration-count: 3.1;
-moz-animation-duration: 10s;
animation-name: sample;
animation-iteration-count: 3.1;
animation-duration: 10s;
}
.def {
background-color: green;
width: 250px;
height: 10px;
position: relative;
left: 0px;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: Setting animation-iteration-count to non-integer leads animation to end part way.
</p>
<ul>
<li>PASS if a blue colored Box with text "CSS3 Testing Content" animates from right to left along the green bar THRICE (for a span of 10 seconds each) and for the FOURTH time animation appears to break in middle and blue box immediately positions itself to left.</li>
<li>FAIL if NO animation is seen OR if animation does not end part-way in its FOURth cycle.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
</div>
</body>
</html>

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

@ -1,79 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations. animation-iteration-count is set to a finite value.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="When animation-iteration-count is set to a finite value; animation will play for the specified number of times.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 2;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: 2;
animation-name: sample;
animation-duration: 10s;
animation-iteration-count: 2;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: When animation-iteration-count is set to a finite integer value; that value is taken as the number of times that the animation has to repeat from beginning to the end.
</p>
<ul>
<li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and box starts to animate/move from right to left twice.</li>
<li>FAIL if the animation is not as expected.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

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

@ -1,93 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations. animation-iteration-count set to zero.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="When animation-iteration-count is set to zero NO animation is seen.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
left: 0px;
-webkit-animation-name: sample;
-webkit-animation-iteration-count: 0;
-webkit-animation-duration: 10s;
-moz-animation-name: sample;
-moz-animation-iteration-count: 0;
-moz-animation-duration: 10s;
animation-name: sample;
animation-iteration-count: 0;
animation-duration: 10s;
}
.def {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
left: 0px;
z-index: -1;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: When animation-iteration-count is set to zero NO animation is seen.
</p>
<ul>
<li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and NO movement/animation is seen. Also, RED color should NOT be seen anywhere on this page.</li>
<li>FAIL if the box animates to left OR if RED color is seen anywhere on this page.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

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

@ -1,111 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS3 Animations: To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-events">
<meta name="flags" content="animated">
<meta name="assert" content='To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.'>
<style type="text/css" media="screen">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
/*Added extra style information --- BEGIN modification*/
color: Yellow;
font-weight: bolder;
font-size: xx-large;
text-align: center;
vertical-align: middle;
/*Added extra style information --- END modification*/
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 1em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 2;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: 2;
animation-name: sample;
animation-duration: 10s;
animation-iteration-count: 2;
}
/* */
</style>
<script type="text/javascript">
/* */
var box_var;
function init()
{
getvalues();
}
function getvalues()
{
box_var = document.getElementById("box" );
box_var.addEventListener("webkitAnimationIteration" , start_f, true);
box_var.addEventListener("animationiteration" , start_f, true);
}
function start_f()
{
/*This line of code has been commented to avoid automated result evaluation.
//document.getElementById(&quot; result&quot; ).innerHTML = "TRUE";
*/
box_var.innerHTML = "2";
}
/* */
</script>
</head>
<body onload="init()">
<p id="testdetails">
<p>
Assertion: To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.
</p>
<ul>
<li>PASS if the box moves from Right to Left for a period of 10 seconds. It should contain a digit 1 for first animation. Content of box changes to 2 during second animation. Also the animation should stop after 2 cycles. </li>
<li>FAIL if the output is not as expected. </li>
</ul>
</p>
<div class="abc" id="box">
1
</div>
</body>
</html>

93
tests/wpt/css-tests/css-animations-1_dev/html/animation-keyframes.htm
View file

@ -1,93 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations : keyframes specified using percentages or from/to keywords on animation time line.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#keyframes">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="To verify that keyframes set using percentages or from/to keywords on animation time line are in effect.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
background-color: blue;
}
30% {
background-color: green;
}
65% {
background-color: red;
}
to {
background-color: blue;
}
}
@-moz-keyframes sample {
from {
background-color: blue;
}
30% {
background-color: green;
}
65% {
background-color: red;
}
to {
background-color: blue;
}
}
@keyframes sample {
from {
background-color: blue;
}
30% {
background-color: green;
}
65% {
background-color: red;
}
to {
background-color: blue;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
animation-name: sample;
animation-duration: 10s;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that keyframes set using percentages or from/to keywords on animation time line are in effect.
</p>
<ul>
<li>PASS if the color of the box is blue initially on page load and gradually changes in the order: BLUE to GREEN to RED and back to BLUE in 10 seconds</li>
<li>FAIL if the color of the box is NOT changing in the specified order within a span of 10 seconds.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

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

@ -1,89 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations : animation-name set with no value</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="To verify that NO animation is seen when animation-name is set without any value.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
left: 0px;
-webkit-animation-name: ;
-webkit-animation-duration: 10s;
-moz-animation-name: ;
-moz-animation-duration: 10s;
animation-name: ;
animation-duration: 10s;
}
.def {
position: absolute;
background-color: red;
left: 0px;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
z-index: -1;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that NO animation is seen when animation-name is set without any value.
</p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" inside it appears below and box should not animate/move towards left. Also no red should be visible on this page.</li>
<li>FAIL if box moves to left or some animation is observed or if red is visible.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

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

@ -1,75 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations : animation-name set to valid keyframes rule name</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation; desired animation should be seen.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
animation-name: sample;
animation-duration: 10s;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation; desired animation should be seen.
</p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" inside it appears below and animates/moves towards left.</li>
<li>FAIL if box fails to transcend towards left.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

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

@ -1,89 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations : animation-name set to none</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="To verify that NO animation is seen when animation-name is set to none.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
left: 0px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
-webkit-animation-name: none;
-webkit-animation-duration: 10s;
-moz-animation-name: none;
-moz-animation-duration: 10s;
animation-name: none;
animation-duration: 10s;
}
.def {
position: absolute;
background-color: red;
left: 0px;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
z-index: -1;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that NO animation is seen when animation-name is set to none.
</p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" inside it appears below and box should not animate/move towards left. Also no red should be visible on this page.</li>
<li>FAIL if box moves to left or some animation is observed or if red is visible.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

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

@ -1,91 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations : animation-name does not match any keyframe at-rule.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="To verify: if animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
left: 0px;
-webkit-animation-name: sample1;
-webkit-animation-duration: 10s;
-moz-animation-name: sample1;
-moz-animation-duration: 10s;
animation-name: sample1;
animation-duration: 10s;
}
.def {
position: absolute;
background-color: red;
left: 0px;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
z-index: -1;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify: if animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.
</p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" inside it appears below and box should not animate/move towards left. Also no red should be visible on this page.</li>
<li>FAIL if box animates or moves towards left or if red is visible.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

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

@ -1,93 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations : animation-play-state set to paused </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-play-state">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="A paused animation will display the current value of the animation in a STATIC state (no animation).">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
left: 0px;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-play-state: paused;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-play-state: paused;
animation-name: sample;
animation-duration: 10s;
animation-play-state: paused;
}
.def {
position: absolute;
left: 150px;
background-color: red;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
z-index: -1;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: A paused animation will display the current value of the animation in a STATIC state (no animation).
</p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red color should be visible on this page.</li>
<li>FAIL if the box is animated or if red color is visible.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

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

@ -1,80 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations : animation-play-state set to playing </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-play-state">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="When animation-play-state is set to running; animation continues to render.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-play-state: running;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-play-state: running;
animation-name: sample;
animation-duration: 10s;
animation-play-state: running;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: When animation-play-state is set to running; animation continues to render.
</p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below, which moves from right to left (in 10seconds) upon page load.</li>
<li>FAIL if the animation is not as expected.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

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

@ -1,79 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations : animation-timing-function set to cubic-bezier with parameters (0,0,1,1). </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="To verify that: when animation-timing-function is set to cubic-bezier with parameters (0,0,1,1) animation is rendered with constant speed from begining till end.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: cubic-bezier(0,0,1,1);
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-timing-function: cubic-bezier(0,0,1,1);
animation-name: sample;
animation-duration: 10s;
animation-timing-function: cubic-bezier(0,0,1,1);
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that: when animation-timing-function is set to cubic-bezier with parameters (0,0,1,1) (this is same as setting time function to linear); animation is rendered with constant speed from begining till end.
</p>
<ul>
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left with constant speed</li>
<li>FAIL if box is moved with accelerated/decelerated speed OR fails to move left(no animation).</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

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

@ -1,79 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations : animation-timing-function set to ease. </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="To verify that: when animation-timing-function is set to ease; animation starts slow, gains acceleration in the middle and again slows down at the end.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: ease;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-timing-function: ease;
animation-name: sample;
animation-duration: 10s;
animation-timing-function: ease;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that: when animation-timing-function is set to ease; animation starts slow, gains acceleration in the middle and again slows down at the end.
</p>
<ul>
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left; initially the animation starts slow, gains acceleration in the middle and again slows down at the end.</li>
<li>FAIL if the animation is not as expected.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

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

@ -1,79 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations : animation-timing-function set to ease-in. </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: ease-in;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-timing-function: ease-in;
animation-name: sample;
animation-duration: 10s;
animation-timing-function: ease-in;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses.
</p>
<ul>
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left; animation starts slow and gains acceleration as time progresses.</li>
<li>FAIL if the animation is not as expected.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

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

@ -1,79 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations : animation-timing-function set to ease-in-out. </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="To verify that: when animation-timing-function is set to ease-in-out; animation starts slow, gains acceleration in the middle and again slows down at the end.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-timing-function: ease-in-out;
animation-name: sample;
animation-duration: 10s;
animation-timing-function: ease-in-out;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that: when animation-timing-function is set to ease-in-out; animation starts slow, gains acceleration in the middle and again slows down at the end.
</p>
<ul>
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left; initially the animation starts slow, gains acceleration in the middle and again slows down at the end.</li>
<li>FAIL if the animation is not as expected.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

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

@ -1,79 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations : animation-timing-function set to ease-out. </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="To verify that: when animation-timing-function is set to ease-out; animation starts with higher(than the normal) speed and relatively slows down as time progresses.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: ease-out;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-timing-function: ease-out;
animation-name: sample;
animation-duration: 10s;
animation-timing-function: ease-out;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that: when animation-timing-function is set to ease-out; animation starts with higher(than the normal) speed and relatively slows down as time progresses.
</p>
<ul>
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left, animation starts and relatively slows down as time progresses.</li>
<li>FAIL if box is moved with constant/accelerated speed OR fails to move left (no animation).</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

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

@ -1,79 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tests: CSS Animations : animation-timing-function set to linear. </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content="To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end.">
<style type="text/css">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-timing-function: linear;
animation-name: sample;
animation-duration: 10s;
animation-timing-function: linear;
}
/* */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end.
</p>
<ul>
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left with constant speed</li>
<li>FAIL if box is moved with accelerated/decelerated speed OR fails to move left(no animation).</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

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

@ -1,127 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS3 Animations: To verify animationstart and animationend events are handled. </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-events">
<link rel="help" href="http://www.w3.org/TR/css3-animations/#timing-functions">
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
<meta name="flags" content="animated">
<meta name="assert" content='To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.'>
<style type="text/css" media="screen">
/* */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
/*Added extra style information --- BEGIN modification*/
color: Yellow;
font-weight: bolder;
font-size: xx-large;
text-align: center;
vertical-align: middle;
/*Added extra style information --- END modification*/
width: 100px;
height: 100px;
padding: 0.2em 1em;
//margin: 6em;
position: relative;
-webkit-animation-name: sample;
//-webkit-animation-delay: 0.1s;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-moz-animation-name: sample;
//-moz-animation-delay: 0.1s;
-moz-animation-duration: 10s;
-moz-animation-timing-function: linear;
animation-name: sample;
//animation-delay: 0.1s;
animation-duration: 10s;
animation-timing-function: linear;
}
/* */
</style>
<script type="text/javascript">
/* */
var box_var;
function init()
{
getvalues();
}
function getvalues()
{
box_var=document.getElementById('box');
box_var.addEventListener('webkitAnimationStart',start_f,true);
box_var.addEventListener('webkitAnimationEnd',end_f,true);
box_var.addEventListener('animationstart',start_f,true);
box_var.addEventListener('animationend',end_f,true);
<!--box_var.addEventListener('webkitAnimationEnd',start_f,true);-->
}
function start_f()
{
/*This line of code has been commented to avoid automated result evaluation.
*document.getElementById('result').innerHTML="TRUE";
*/
document.getElementById('box').innerHTML = "START";
}
function end_f()
{
/*This line of code has been commented to avoid automated result evaluation.
*document.getElementById('result1').innerHTML="TRUE";
*/
document.getElementById('box').innerHTML = "STOP";
}
/* */
</script>
</head>
<body onload="init()">
<p id="testdetails">
<p>
Assertion: To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.
</p>
<ul>
<li>PASS if blue box is rendered with text START as the animation begins and changes to STOP when animation is finished. </li>
<li>FAIL if text "FAIL" is displayed OR START is NOT rendered when animation begins OR STOP is NOT rendered when animation ends.</li>
</ul>
</p>
<div class="abc" id="box">
FAIL
</div>
<!-- below markup is removed to avoid inline display of results.
* <p><b>Animation Event Start Value:</b> <span id="result"></span></p>
* <p><b>Animation Event End Value:</b> <span id="result1"></span></p>
-->
</body>
</html>

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

File diff suppressed because it is too large Load diff

47
tests/wpt/css-tests/css-animations-1_dev/html/chapter-5.htm
View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
<h2>Animation Events (4 tests)</h2>
<h2>Animation Events (0 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -31,29 +31,7 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s5">+</a>
<a href="http://www.w3.org/TR/css3-animations/#animation-events">5 Animation Events</a></th></tr>
<!-- 2 tests -->
<tr id="animation-iteration-event-5" class="animated">
<td>
<a href="animation-iteration-event.htm">animation-iteration-event</a></td>
<td></td>
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
<td>CSS3 Animations: To verify if &quot; animationiteration &quot; event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.
<ul class="assert">
<li>To verify if &quot; animationiteration &quot; event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</li>
</ul>
</td>
</tr>
<tr id="animationstart-and-animationend-events-5" class="animated">
<td>
<a href="animationstart-and-animationend-events.htm">animationstart-and-animationend-events</a></td>
<td></td>
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
<td>CSS3 Animations: To verify animationstart and animationend events are handled.
<ul class="assert">
<li>To verify if &quot;animationstart&quot; event occurs when animation starts and &quot;animationend&quot; occurs when the animation ends.</li>
</ul>
</td>
</tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.1">
<tr><th colspan="4" scope="rowgroup">
@ -77,26 +55,7 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.1.2">+</a>
<a href="http://www.w3.org/TR/css3-animations/#AnimationEvent-attributes">5.1.2 Attributes</a></th></tr>
<!-- 2 tests -->
<tr id="pseudoelement-001-5.1.2" class="primary script">
<td><strong>
<a href="pseudoElement-001.htm">pseudoelement-001</a></strong></td>
<td></td>
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>pseudoElement attribute of Event - return the name or empty string
</td>
</tr>
<tr id="pseudoelement-002-5.1.2" class="primary">
<td><strong>
<a href="pseudoElement-002.htm">pseudoelement-002</a></strong></td>
<td></td>
<td></td>
<td>the target of the event is that pseudo-element's corresponding element
<ul class="assert">
<li>The target of the event is that pseudo-element's corresponding element.</li>
</ul>
</td>
</tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.2.#AnimationEvent-animationName">
<!-- 0 tests -->

54
tests/wpt/css-tests/css-animations-1_dev/html/pseudoElement-001.htm
View file

@ -1,54 +0,0 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS3 Animations Test: pseudoElement attribute of Event - return the name or empty string</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:jieqiongx.cui@intel.com" rel="author" title="Jieqiong Cui">
<link href="http://www.w3.org/TR/css3-animations/#AnimationEvent-attributes" rel="help" title="5.1.2. Attributes">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.test {
animation-duration: 10s;
animation-name: sample;
animation-timing-function: linear;
background-color: blue;
height: 50px;
position: relative;
width: 100px;
}
#testDiv2::after {
content: "pseudoElement";
}
</style>
</head><body><div id="log"></div>
<div id="testDiv1" class="test"></div>
<div id="testDiv2" class="test"></div>
<script>
var t1 = async_test("Check if the pseudoElement attribute returns the empty string when the animation runs on an element");
var t2 = async_test("Check if the pseudoElement attribute returns the name (beginning with two colons) of the CSS pseudo-element when the animation runs");
var testDiv1 = document.getElementById('testDiv1');
var testDiv2 = document.getElementById('testDiv2');
testDiv1.addEventListener('animationstart', function(event) {
t1.step(function() {
assert_equals(event.pseudoElement, "", "the pseudoElement value");
});
t1.done();
}, false);
testDiv2.addEventListener('animationstart', function(event) {
t2.step(function() {
assert_equals(event.pseudoElement, "::after", "the pseudoElement value");
});
t2.done();
}, false);
</script>
</body></html>

35
tests/wpt/css-tests/css-animations-1_dev/html/pseudoElement-002.htm
View file

@ -1,35 +0,0 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS3 Animations Test: the target of the event is that pseudo-element's corresponding element</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:jieqiongx.cui@intel.com" rel="author" title="Jieqiong Cui">
<link href="http://www.w3.org/TR/css3-animations/#AnimationEvent-attributes" rel="help" title="5.1.2. Attributes">
<meta content="" name="flags">
<meta content="The target of the event is that pseudo-element's corresponding element." name="assert">
<style>
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
#testDiv {
animation-duration: 5s;
animation-name: sample;
animation-timing-function: linear;
position: relative;
}
#testDiv::before {
content: "<";
}
#testDiv::after {
content: ">";
}
</style>
</head><body>
<p>Test passes if the '&lt;pseudoElement&gt;' moves from right to left one time.</p>
<div id="testDiv">pseudoElement</div>
</body></html>

BIN
tests/wpt/css-tests/css-animations-1_dev/html/reference/support/pattern-gg-gr.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 203 B

After

Width:  |  Height:  |  Size: 148 B

Before After
Before After

BIN
tests/wpt/css-tests/css-animations-1_dev/html/support/pattern-gg-gr.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 203 B

After

Width:  |  Height:  |  Size: 148 B

Before After
Before After

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

@ -37,12 +37,12 @@
<tbody id="s4">
<tr><th><a href="chapter-4.htm">Chapter 4 -
Keyframes</a></th>
<td>(36 Tests)</td></tr>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s5">
<tr><th><a href="chapter-5.htm">Chapter 5 -
Animation Events</a></th>
<td>(4 Tests)</td></tr>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s6">
<tr><th><a href="chapter-6.htm">Chapter 6 -

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

@ -2,110 +2,34 @@
# UA string (if applicable)
# http://test.csswg.org/suites/css-animations-1_dev/DATESTAMP/
# See http://wiki.csswg.org/test/implementation-report for instructions
testname result comment
html4/animation-delay-001.htm ?
xhtml1/animation-delay-001.xht ?
html4/animation-delay-002.htm ?
xhtml1/animation-delay-002.xht ?
html4/animation-delay-003.htm ?
xhtml1/animation-delay-003.xht ?
html4/animation-delay-004.htm ?
xhtml1/animation-delay-004.xht ?
html4/animation-delay-005.htm ?
xhtml1/animation-delay-005.xht ?
html4/animation-direction-001.htm ?
xhtml1/animation-direction-001.xht ?
html4/animation-direction-002.htm ?
xhtml1/animation-direction-002.xht ?
html4/animation-direction-003.htm ?
xhtml1/animation-direction-003.xht ?
html4/animation-direction-004.htm ?
xhtml1/animation-direction-004.xht ?
html4/animation-direction-005.htm ?
xhtml1/animation-direction-005.xht ?
html4/animation-direction-006.htm ?
xhtml1/animation-direction-006.xht ?
html4/animation-duration-001.htm ?
xhtml1/animation-duration-001.xht ?
html4/animation-duration-002.htm ?
xhtml1/animation-duration-002.xht ?
html4/animation-duration-003.htm ?
xhtml1/animation-duration-003.xht ?
html4/animation-duration-004.htm ?
xhtml1/animation-duration-004.xht ?
html4/animation-iteration-count-001.htm ?
xhtml1/animation-iteration-count-001.xht ?
html4/animation-iteration-count-002.htm ?
xhtml1/animation-iteration-count-002.xht ?
html4/animation-iteration-count-003.htm ?
xhtml1/animation-iteration-count-003.xht ?
html4/animation-iteration-count-004.htm ?
xhtml1/animation-iteration-count-004.xht ?
html4/animation-iteration-count-005.htm ?
xhtml1/animation-iteration-count-005.xht ?
html4/animation-iteration-count-006.htm ?
xhtml1/animation-iteration-count-006.xht ?
html4/animation-iteration-event.htm ?
xhtml1/animation-iteration-event.xht ?
html4/animation-keyframes.htm ?
xhtml1/animation-keyframes.xht ?
html4/animation-name-001.htm ?
xhtml1/animation-name-001.xht ?
html4/animation-name-002.htm ?
xhtml1/animation-name-002.xht ?
html4/animation-name-003.htm ?
xhtml1/animation-name-003.xht ?
html4/animation-name-004.htm ?
xhtml1/animation-name-004.xht ?
html4/animation-play-state-001.htm ?
xhtml1/animation-play-state-001.xht ?
html4/animation-play-state-002.htm ?
xhtml1/animation-play-state-002.xht ?
html4/animation-timing-function-001.htm ?
xhtml1/animation-timing-function-001.xht ?
html4/animation-timing-function-002.htm ?
xhtml1/animation-timing-function-002.xht ?
html4/animation-timing-function-003.htm ?
xhtml1/animation-timing-function-003.xht ?
html4/animation-timing-function-004.htm ?
xhtml1/animation-timing-function-004.xht ?
html4/animation-timing-function-005.htm ?
xhtml1/animation-timing-function-005.xht ?
html4/animation-timing-function-006.htm ?
xhtml1/animation-timing-function-006.xht ?
html4/animations-001.htm ?
xhtml1/animations-001.xht ?
html4/animationstart-and-animationend-events.htm ?
xhtml1/animationstart-and-animationend-events.xht ?
html4/css-filters-animation-blur.htm ?
xhtml1/css-filters-animation-blur.xht ?
html4/css-filters-animation-brightness.htm ?
xhtml1/css-filters-animation-brightness.xht ?
html4/css-filters-animation-combined-001.htm ?
xhtml1/css-filters-animation-combined-001.xht ?
html4/css-filters-animation-contrast.htm ?
xhtml1/css-filters-animation-contrast.xht ?
html4/css-filters-animation-drop-shadow.htm ?
xhtml1/css-filters-animation-drop-shadow.xht ?
html4/css-filters-animation-grayscale.htm ?
xhtml1/css-filters-animation-grayscale.xht ?
html4/css-filters-animation-hue-rotate.htm ?
xhtml1/css-filters-animation-hue-rotate.xht ?
html4/css-filters-animation-invert.htm ?
xhtml1/css-filters-animation-invert.xht ?
html4/css-filters-animation-opacity.htm ?
xhtml1/css-filters-animation-opacity.xht ?
html4/css-filters-animation-saturate.htm ?
xhtml1/css-filters-animation-saturate.xht ?
html4/css-filters-animation-sepia.htm ?
xhtml1/css-filters-animation-sepia.xht ?
html4/pseudoelement-001.htm ?
xhtml1/pseudoelement-001.xht ?
html4/pseudoelement-002.htm ?
xhtml1/pseudoelement-002.xht ?
html4/vh-interpolate-pct.htm ?
xhtml1/vh-interpolate-pct.xht ?
html4/vh-interpolate-px.htm ?
xhtml1/vh-interpolate-px.xht ?
html4/vh-interpolate-vh.htm ?
xhtml1/vh-interpolate-vh.xht ?
testname revision result comment
html/animations-001.htm 58200be49397d3ebd75335737334fadb5f72043a ?
xhtml1/animations-001.xht 58200be49397d3ebd75335737334fadb5f72043a ?
html/css-filters-animation-blur.htm 53622387367e3daa90b9880e22ff9548665f4883 ?
xhtml1/css-filters-animation-blur.xht 53622387367e3daa90b9880e22ff9548665f4883 ?
html/css-filters-animation-brightness.htm 6ef87e3d77b51aaa2d33c91de5b6c84e96b41eae ?
xhtml1/css-filters-animation-brightness.xht 6ef87e3d77b51aaa2d33c91de5b6c84e96b41eae ?
html/css-filters-animation-combined-001.htm aaaa710118343f2b999ebc2edcd0c2c7e18d1ffe ?
xhtml1/css-filters-animation-combined-001.xht aaaa710118343f2b999ebc2edcd0c2c7e18d1ffe ?
html/css-filters-animation-contrast.htm 517f0cbaf18b73ffe0d87947c8e48f8b13bb4c59 ?
xhtml1/css-filters-animation-contrast.xht 517f0cbaf18b73ffe0d87947c8e48f8b13bb4c59 ?
html/css-filters-animation-drop-shadow.htm 70bc0ac9029e86c93916acec368678aa6fbb5f87 ?
xhtml1/css-filters-animation-drop-shadow.xht 70bc0ac9029e86c93916acec368678aa6fbb5f87 ?
html/css-filters-animation-grayscale.htm 66ebc18a6a7c6e692cb223505fa362279d477ac0 ?
xhtml1/css-filters-animation-grayscale.xht 66ebc18a6a7c6e692cb223505fa362279d477ac0 ?
html/css-filters-animation-hue-rotate.htm 4abc8e87e83f87fcf3b41a12f2a0d1f2505a1abe ?
xhtml1/css-filters-animation-hue-rotate.xht 4abc8e87e83f87fcf3b41a12f2a0d1f2505a1abe ?
html/css-filters-animation-invert.htm ff60b4d8c0fc6a76ada1a62230af435de194fb0f ?
xhtml1/css-filters-animation-invert.xht ff60b4d8c0fc6a76ada1a62230af435de194fb0f ?
html/css-filters-animation-opacity.htm c280f619d6a33d5953c6bde268ba7b0813467b70 ?
xhtml1/css-filters-animation-opacity.xht c280f619d6a33d5953c6bde268ba7b0813467b70 ?
html/css-filters-animation-saturate.htm 1527b952f6a2421d3ff02ce50405d38d1cbb45b5 ?
xhtml1/css-filters-animation-saturate.xht 1527b952f6a2421d3ff02ce50405d38d1cbb45b5 ?
html/css-filters-animation-sepia.htm 36a7316bfb518ea1cdefd38151449383c02b57a0 ?
xhtml1/css-filters-animation-sepia.xht 36a7316bfb518ea1cdefd38151449383c02b57a0 ?
html/vh-interpolate-pct.htm e263245c653c76da4ebf1afd5463deb31d27e365 ?
xhtml1/vh-interpolate-pct.xht e263245c653c76da4ebf1afd5463deb31d27e365 ?
html/vh-interpolate-px.htm fa83d5d77411f3c93cf7e465552f47494bfe9d7a ?
xhtml1/vh-interpolate-px.xht fa83d5d77411f3c93cf7e465552f47494bfe9d7a ?
html/vh-interpolate-vh.htm 0e224532385323bb9061d9b18c1def8c330ad6ae ?
xhtml1/vh-interpolate-vh.xht 0e224532385323bb9061d9b18c1def8c330ad6ae ?

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

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

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

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

38
tests/wpt/css-tests/css-animations-1_dev/testinfo.data
View file

@ -1,41 +1,5 @@
id references title flags links revision credits assertion
animation-delay-001 animation-delay - negative value animated http://dev.w3.org/csswg/css-animations-1/#animation-delay,http://dev.w3.org/csswg/css-animations-1/#animation-name,http://dev.w3.org/csswg/css-animations-1/#animation-duration,http://dev.w3.org/csswg/css-animations-1/#animation-timing-function a171e1fdf124ee76802dd64b426c89857dc8c51b `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> 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.
animation-delay-002 animation-delay - positive value animated http://dev.w3.org/csswg/css-animations-1/#animation-delay,http://dev.w3.org/csswg/css-animations-1/#animation-name,http://dev.w3.org/csswg/css-animations-1/#animation-duration eccc94375c9fad0fcc3343a43fcc1a8d7b606522 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.
animation-delay-003 animation-delay - 0s animated http://dev.w3.org/csswg/css-animations-1/#animation-delay,http://dev.w3.org/csswg/css-animations-1/#animation-name,http://dev.w3.org/csswg/css-animations-1/#animation-duration 26b83b0da4ecf98ba5f769ac4c30f732a1a36d44 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.
animation-delay-004 animation-delay - ::after animated http://dev.w3.org/csswg/css-animations-1/#animation-delay,http://dev.w3.org/csswg/css-animations-1/#animation-name,http://dev.w3.org/csswg/css-animations-1/#animation-duration c7ba2e233bf1a5b6ccad0efed57106b4d2d3b131 `Intel`<http://www.intel.com> Check that animation-delay applies to the ::after pseudo element.
animation-delay-005 animation-delay - ::before animated http://dev.w3.org/csswg/css-animations-1/#animation-delay,http://dev.w3.org/csswg/css-animations-1/#animation-name,http://dev.w3.org/csswg/css-animations-1/#animation-duration 744abf764258cbddd42bf50d03dc41c4bf06428f `Intel`<http://www.intel.com> Check that animation-delay applies to the ::before pseudo element.
animation-direction-001 animation-direction - alternate animated http://dev.w3.org/csswg/css-animations-1/#animation-direction,http://dev.w3.org/csswg/css-animations-1/#animation-name,http://dev.w3.org/csswg/css-animations-1/#animation-duration,http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count 94cdb117006ec5104fe5726f18f614bae6c0bc69 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> 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.
animation-direction-002 animation-direction - normal animated http://dev.w3.org/csswg/css-animations-1/#animation-direction,http://dev.w3.org/csswg/css-animations-1/#animation-name,http://dev.w3.org/csswg/css-animations-1/#animation-duration,http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count 471227cd3908a6d9b240f09be126f2be38179386 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-direction is set to normal, all iterations of animation are played as specified.
animation-direction-003 animation-direction - alternate-reverse animated http://dev.w3.org/csswg/css-animations-1/#animation-direction,http://dev.w3.org/csswg/css-animations-1/#animation-name,http://dev.w3.org/csswg/css-animations-1/#animation-duration,http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count 45f67758c26482dc2c15288a0d70658b9d5acb32 `Intel`<http://www.intel.com> 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.
animation-direction-004 animation-direction - reverse animated http://dev.w3.org/csswg/css-animations-1/#animation-direction,http://dev.w3.org/csswg/css-animations-1/#animation-name,http://dev.w3.org/csswg/css-animations-1/#animation-duration,http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count 1c8a2bc01b3cc81f326f5b77cb38ef62459992de `Intel`<http://www.intel.com> When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.
animation-direction-005 animation-direction - ::after animated http://dev.w3.org/csswg/css-animations-1/#animation-direction,http://dev.w3.org/csswg/css-animations-1/#animation-name,http://dev.w3.org/csswg/css-animations-1/#animation-duration,http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count 54e4ef9f0fb47d29d4546e50995302e7faf1869e `Intel`<http://www.intel.com> Check that animation-direction applies to the ::after pseudo element.
animation-direction-006 animation-direction - ::before animated http://dev.w3.org/csswg/css-animations-1/#animation-direction,http://dev.w3.org/csswg/css-animations-1/#animation-name,http://dev.w3.org/csswg/css-animations-1/#animation-duration,http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count bc7863626b969c2b9fc02a7aecd068a02db0f09b `Intel`<http://www.intel.com> Check that animation-direction applies to the ::before pseudo element
animation-duration-001 CSS Animations : animation-duration value is set blank. animated http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property eb12544cff609c11744981d07c799f1c00daca40 `Nokia Inc.`<http://www.nokia.com/> When animation-duration value is set blank; animation is not visible.
animation-duration-002 CSS Animations : animation-duration has a finite value. animated http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property 05ee101ddb052ccc736a263479cdc8bff4b92004 `Nokia Inc.`<http://www.nokia.com/> When animation-duration is set to a finite value/duration, animation takes specified time to complete one cycle.
animation-duration-003 CSS Animations : animation-duration with negative value. animated http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property 5e001434e56c44a84d80746226199bf50f3b2a24 `Nokia Inc.`<http://www.nokia.com/> A negative value for animation-duration is treated as 0 (zero); then animation cycle is immediate (i.e. there will be no animation seen).
animation-duration-004 CSS Animations : animation-duration value set to 0 (zero). animated http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property 2ce88658d0133d8a91a74e0f4fbf7ccae540075c `Nokia Inc.`<http://www.nokia.com/> When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen).
animation-iteration-count-001 CSS Animations. animation-iteration-count is not set and testing for default value. animated http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property,http://www.w3.org/TR/css3-animations/#animation-iteration-count-property a2ec07022130072c3076872c7d4edf71719616db `Nokia Inc.`<http://www.nokia.com/> When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once.
animation-iteration-count-002 CSS Animations. animation-iteration-count set to infinite. animated http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property,http://www.w3.org/TR/css3-animations/#animation-iteration-count-property de49fbe99f44d5f6d801485a8794075865af2afb `Nokia Inc.`<http://www.nokia.com/> animation-iteration-count set to infinite causes the animation to repeat forever.
animation-iteration-count-003 CSS Animations. animation-iteration-count set to negative value. animated http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property,http://www.w3.org/TR/css3-animations/#animation-iteration-count-property 06e1e96c4efb5995e06069257c5d3be11357a160 `Nokia Inc.`<http://www.nokia.com/> When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation.
animation-iteration-count-004 CSS Animations. animation-iteration-count set to non-integer. animated http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property,http://www.w3.org/TR/css3-animations/#animation-iteration-count-property c23268c41ff16475c07875835b2ce50c70e1eeaa `Nokia Inc.`<http://www.nokia.com/> Setting animation-iteration-count to non-integer leads animation to end part way.
animation-iteration-count-005 CSS Animations. animation-iteration-count is set to a finite value. animated http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property,http://www.w3.org/TR/css3-animations/#animation-iteration-count-property 1352f0cf0f104ce8c1bdbd1bebea9abcab6cd961 `Nokia Inc.`<http://www.nokia.com/> When animation-iteration-count is set to a finite value; animation will play for the specified number of times.
animation-iteration-count-006 CSS Animations. animation-iteration-count set to zero. animated http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property,http://www.w3.org/TR/css3-animations/#animation-iteration-count-property f8686de6df3646f68d74bdcf94d548a056ad676d `Nokia Inc.`<http://www.nokia.com/> When animation-iteration-count is set to zero NO animation is seen.
animation-iteration-event CSS3 Animations: To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one. animated http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property,http://www.w3.org/TR/css3-animations/#animation-iteration-count-property,http://www.w3.org/TR/css3-animations/#animation-events 3b5ce6b9bb6bd2bc551db192da85541f6cac87b0 `Nokia Inc.`<http://www.nokia.com/> To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.
animation-keyframes CSS Animations : keyframes specified using percentages or from/to keywords on animation time line. animated http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property,http://www.w3.org/TR/css3-animations/#keyframes 7397aef5e97e68c6c0ce27b0ba0c4aca6ef51e7a `Nokia Inc.`<http://www.nokia.com/> To verify that keyframes set using percentages or from/to keywords on animation time line are in effect.
animation-name-001 CSS Animations : animation-name set with no value animated http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property 93b513fee7319c123e5bd91dda1e9760106c64a3 `Nokia Inc.`<http://www.nokia.com/> To verify that NO animation is seen when animation-name is set without any value.
animation-name-002 CSS Animations : animation-name set to valid keyframes rule name animated http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property 0dfee1361a561830234bc2cdbb92646016167150 `Nokia Inc.`<http://www.nokia.com/> When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation; desired animation should be seen.
animation-name-003 CSS Animations : animation-name set to none animated http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property 0281bdd02e8be795648ae52a0907e049eb26a5a5 `Nokia Inc.`<http://www.nokia.com/> To verify that NO animation is seen when animation-name is set to none.
animation-name-004 CSS Animations : animation-name does not match any keyframe at-rule. animated http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property 5de10e555768a3c8e46edf0ea7f25edc2746b105 `Nokia Inc.`<http://www.nokia.com/> To verify: if animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.
animation-play-state-001 CSS Animations : animation-play-state set to paused animated http://www.w3.org/TR/css3-animations/#animation-play-state,http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property 952c61737d3227275a49e5b619c1c087a8db1065 `Nokia Inc.`<http://www.nokia.com/> A paused animation will display the current value of the animation in a STATIC state (no animation).
animation-play-state-002 CSS Animations : animation-play-state set to playing animated http://www.w3.org/TR/css3-animations/#animation-play-state,http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property c1f96048bb8486aaaaac25820e6843c6f36c072a `Nokia Inc.`<http://www.nokia.com/> When animation-play-state is set to running; animation continues to render.
animation-timing-function-001 CSS Animations : animation-timing-function set to cubic-bezier with parameters (0,0,1,1). animated http://www.w3.org/TR/css3-animations/#animation-timing-function-property,http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property 4d49c7221d4fc7364c0d3cd06b80a378616065e3 `Nokia Inc.`<http://www.nokia.com/> To verify that: when animation-timing-function is set to cubic-bezier with parameters (0,0,1,1) animation is rendered with constant speed from begining till end.
animation-timing-function-002 CSS Animations : animation-timing-function set to ease. animated http://www.w3.org/TR/css3-animations/#animation-timing-function-property,http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property e78e667a5a67418f22e7335fa0c50e924c216ed5 `Nokia Inc.`<http://www.nokia.com/> To verify that: when animation-timing-function is set to ease; animation starts slow, gains acceleration in the middle and again slows down at the end.
animation-timing-function-003 CSS Animations : animation-timing-function set to ease-in. animated http://www.w3.org/TR/css3-animations/#animation-timing-function-property,http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property d4a08c4a3c35a1a75916aa2a29632cb5459ac0e9 `Nokia Inc.`<http://www.nokia.com/> To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses.
animation-timing-function-004 CSS Animations : animation-timing-function set to ease-in-out. animated http://www.w3.org/TR/css3-animations/#animation-timing-function-property,http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property 6a3481124e25f40291a82143b88898f78689ebf6 `Nokia Inc.`<http://www.nokia.com/> To verify that: when animation-timing-function is set to ease-in-out; animation starts slow, gains acceleration in the middle and again slows down at the end.
animation-timing-function-005 CSS Animations : animation-timing-function set to ease-out. animated http://www.w3.org/TR/css3-animations/#animation-timing-function-property,http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property dae1e6007606b565a027e5950074f016946fec9f `Nokia Inc.`<http://www.nokia.com/> To verify that: when animation-timing-function is set to ease-out; animation starts with higher(than the normal) speed and relatively slows down as time progresses.
animation-timing-function-006 CSS Animations : animation-timing-function set to linear. animated http://www.w3.org/TR/css3-animations/#animation-timing-function-property,http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property c51b11c0bbbc106e377755d56da7ca6801c1afbc `Nokia Inc.`<http://www.nokia.com/> To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end.
animations-001 reference/animations-001-ref CSS Regions: animating content flowed into a region ahem,animated http://www.w3.org/TR/css3-regions/#the-flow-into-property,http://www.w3.org/TR/css3-regions/#the-flow-from-property,http://www.w3.org/TR/css-transforms-1/#transform-functions,http://www.w3.org/TR/css3-animations/#animations 58200be49397d3ebd75335737334fadb5f72043a `Mihai Balan`<mailto:mibalan@adobe.com> Test checks that content that has an animated 3D transform renders and animates when flowed in a region.
animationstart-and-animationend-events CSS3 Animations: To verify animationstart and animationend events are handled. animated http://www.w3.org/TR/css3-animations/#animation-name-property,http://www.w3.org/TR/css3-animations/#animation-duration-property,http://www.w3.org/TR/css3-animations/#animation-events,http://www.w3.org/TR/css3-animations/#timing-functions 25163681aec715bbffeffcfcb316879117346356 `Nokia Inc.`<http://www.nokia.com/> To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.
css-filters-animation-blur reference/css-filters-animation-blur-ref CSS Filters Animation: Blur http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-blur,http://www.w3.org/TR/css3-animations/#animations 53622387367e3daa90b9880e22ff9548665f4883 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The blue square should be 10px blurred
css-filters-animation-brightness reference/css-filters-animation-brightness-ref CSS Filters Animation: Brightness http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-brightness,http://www.w3.org/TR/css3-animations/#animations 6ef87e3d77b51aaa2d33c91de5b6c84e96b41eae `Gunther Brunner`<mailto:takeshimiya@gmail.com> The blue square should be dark blue
css-filters-animation-combined-001 reference/css-filters-animation-combined-001-ref CSS Filters Animation: Combined filters 001 http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-blur,http://www.w3.org/TR/filter-effects-1/#funcdef-brightness,http://www.w3.org/TR/filter-effects-1/#funcdef-sepia,http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale,http://www.w3.org/TR/filter-effects-1/#funcdef-saturate,http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate,http://www.w3.org/TR/filter-effects-1/#funcdef-invert,http://www.w3.org/TR/filter-effects-1/#funcdef-opacity,http://www.w3.org/TR/css3-animations/#animations aaaa710118343f2b999ebc2edcd0c2c7e18d1ffe `Gunther Brunner`<mailto:takeshimiya@gmail.com> The black square should be a gray square 10px blurred
@ -47,8 +11,6 @@ css-filters-animation-invert reference/css-filters-animation-invert-ref CSS Filt
css-filters-animation-opacity reference/css-filters-animation-opacity-ref CSS Filters Animation: Opacity http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-opacity,http://www.w3.org/TR/css3-animations/#animations c280f619d6a33d5953c6bde268ba7b0813467b70 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The black square should be gray
css-filters-animation-saturate reference/css-filters-animation-saturate-ref CSS Filters Animation: Saturate http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-saturate,http://www.w3.org/TR/css3-animations/#animations 1527b952f6a2421d3ff02ce50405d38d1cbb45b5 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The blue square should be light-blue
css-filters-animation-sepia reference/css-filters-animation-sepia-ref CSS Filters Animation: Sepia http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-sepia,http://www.w3.org/TR/css3-animations/#animations 36a7316bfb518ea1cdefd38151449383c02b57a0 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The blue square should be half-sepia
pseudoElement-001 pseudoElement attribute of Event - return the name or empty string script http://www.w3.org/TR/css3-animations/#AnimationEvent-attributes 9a2d0cf1742b630bbc29886de1a0c66839c477c2 `Intel`<http://www.intel.com>,`Jieqiong Cui`<mailto:jieqiongx.cui@intel.com>
pseudoElement-002 the target of the event is that pseudo-element's corresponding element http://www.w3.org/TR/css3-animations/#AnimationEvent-attributes d4c7f52dcb137b11993c8b760822c9e3513a3a72 `Intel`<http://www.intel.com>,`Jieqiong Cui`<mailto:jieqiongx.cui@intel.com> The target of the event is that pseudo-element's corresponding element.
vh-interpolate-pct reference/all-green Viewport units are interpolated correctly http://www.w3.org/TR/css3-values/#viewport-relative-lengths,http://www.w3.org/TR/css3-animations/#animations e263245c653c76da4ebf1afd5463deb31d27e365 `Fran&Atilde;&sect;ois REMY`<mailto:fremycompany.developer@yahoo.fr> The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
vh-interpolate-px reference/all-green Viewport units are interpolated correctly http://www.w3.org/TR/css3-values/#viewport-relative-lengths,http://www.w3.org/TR/css3-animations/#animations fa83d5d77411f3c93cf7e465552f47494bfe9d7a `Fran&Atilde;&sect;ois REMY`<mailto:fremycompany.developer@yahoo.fr> The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
vh-interpolate-vh reference/all-green Viewport units are interpolated correctly http://www.w3.org/TR/css3-values/#viewport-relative-lengths,http://www.w3.org/TR/css3-animations/#animations 0e224532385323bb9061d9b18c1def8c330ad6ae `Fran&Atilde;&sect;ois REMY`<mailto:fremycompany.developer@yahoo.fr> The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw)

68
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-delay-001.xht
View file

@ -1,68 +0,0 @@
<!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 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="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help" />
<link href="http://dev.w3.org/csswg/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/xhtml1/animation-delay-002.xht
View file

@ -1,43 +0,0 @@
<!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 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="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help" />
<link href="http://dev.w3.org/csswg/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/xhtml1/animation-delay-003.xht
View file

@ -1,42 +0,0 @@
<!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 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="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help" />
<link href="http://dev.w3.org/csswg/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/xhtml1/animation-delay-004.xht
View file

@ -1,43 +0,0 @@
<!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 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="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help" />
<link href="http://dev.w3.org/csswg/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/xhtml1/animation-delay-005.xht
View file

@ -1,43 +0,0 @@
<!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 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="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help" />
<link href="http://dev.w3.org/csswg/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>

48
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-direction-001.xht
View file

@ -1,48 +0,0 @@
<!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 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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help" />
<link href="http://dev.w3.org/csswg/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/xhtml1/animation-direction-002.xht
View file

@ -1,45 +0,0 @@
<!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 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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help" />
<link href="http://dev.w3.org/csswg/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/xhtml1/animation-direction-003.xht
View file

@ -1,47 +0,0 @@
<!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 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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help" />
<link href="http://dev.w3.org/csswg/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/xhtml1/animation-direction-004.xht
View file

@ -1,45 +0,0 @@
<!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 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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help" />
<link href="http://dev.w3.org/csswg/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/xhtml1/animation-direction-005.xht
View file

@ -1,45 +0,0 @@
<!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 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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help" />
<link href="http://dev.w3.org/csswg/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/xhtml1/animation-direction-006.xht
View file

@ -1,45 +0,0 @@
<!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 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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help" />
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help" />
<link href="http://dev.w3.org/csswg/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>

89
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-001.xht
View file

@ -1,89 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations : animation-duration value is set blank.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="When animation-duration value is set blank; animation is not visible." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
left: 0px;
-webkit-animation-name: sample;
-webkit-animation-duration: ;
-moz-animation-name: sample;
-moz-animation-duration: ;
animation-name: sample;
animation-duration: ;
}
.def {
position: absolute;
background-color: red;
left: 0px;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
z-index: -1;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
Assertion: When animation-duration value is set blank; animation is not visible.
</p>
<p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red should be visible on this page.</li>
<li>FAIL if blue box is animated/moved or if red is visible.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

75
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-002.xht
View file

@ -1,75 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations : animation-duration has a finite value.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="When animation-duration is set to a finite value/duration, animation takes specified time to complete one cycle." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
animation-name: sample;
animation-duration: 10s;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: When animation-duration is set to a finite value/duration, animation takes specified time to complete one cycle.
</p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below; starts moving from right to left upon page load and lasts for a span of 10seconds</li>
<li>FAIL if the animation does not span for 10seconds.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

89
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-003.xht
View file

@ -1,89 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations : animation-duration with negative value.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="A negative value for animation-duration is treated as 0 (zero); then animation cycle is immediate (i.e. there will be no animation seen)." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
left: 0px;
-webkit-animation-name: sample;
-webkit-animation-duration: -20s;
-moz-animation-name: sample;
-moz-animation-duration: -20s;
animation-name: sample;
animation-duration: -20s;
}
.def {
position: absolute;
background-color: red;
left: 0px;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
z-index: -1;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: A negative value for animation-duration is treated as 0 (zero); then animation cycle is immediate (i.e. there will be no animation seen).
</p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red should be visible on this page.</li>
<li>FAIL if any animation is seen with the blue box or if red is visible.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

89
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-duration-004.xht
View file

@ -1,89 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations : animation-duration value set to 0 (zero).</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen)." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
left: 0px;
-webkit-animation-name: sample;
-webkit-animation-duration: 0s;
-moz-animation-name: sample;
-moz-animation-duration: 0s;
animation-name: sample;
animation-duration: 0s;
}
.def {
position: absolute;
background-color: red;
left: 0px;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
z-index: -1;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
Assertion: When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen).
</p>
<p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red should be visible on this page.</li>
<li>FAIL if blue box is animated/moved or if red is visible.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

75
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-001.xht
View file

@ -1,75 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations. animation-iteration-count is not set and testing for default value.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
animation-name: sample;
animation-duration: 10s;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once.
</p>
<ul>
<li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and box starts to animate/move from right to left ONCE.</li>
<li>FAIL if the box fails to animate to left or repeats animation more than once.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

79
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-002.xht
View file

@ -1,79 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations. animation-iteration-count set to infinite.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="animation-iteration-count set to infinite causes the animation to repeat forever." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
animation-name: sample;
animation-duration: 10s;
animation-iteration-count: infinite;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: animation-iteration-count set to infinite causes the animation to repeat forever.
</p>
<ul>
<li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and repeatedly moves from right to left. Every time a cycle is finished, the box gets re-positioned to right and continues to move left.</li>
<li>FAIL if the box fails to repeat animation cycles infinitely from right to left</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

94
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-003.xht
View file

@ -1,94 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations. animation-iteration-count set to negative value.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
left: 0px;
-webkit-animation-name: sample;
-webkit-animation-iteration-count: -1;
-webkit-animation-duration: 10s;
-moz-animation-name: sample;
-moz-animation-iteration-count: -1;
-moz-animation-duration: 10s;
animation-name: sample;
animation-iteration-count: -1;
animation-duration: 10s;
}
.def {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
left: 0px;
z-index: -1;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation.
</p>
<ul>
<li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and NO movement/animation is seen. Also, RED color should NOT be seen anywhere on this page.</li>
<li>FAIL if the box animates to left OR if RED color is seen anywhere on this page.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

91
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-004.xht
View file

@ -1,91 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations. animation-iteration-count set to non-integer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="Setting animation-iteration-count to non-integer leads animation to end part way." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
//padding: 0.2em 1em;
//margin: 6em;
position: relative;
left: 0px;
-webkit-animation-name: sample;
-webkit-animation-iteration-count: 3.1;
-webkit-animation-duration: 10s;
-moz-animation-name: sample;
-moz-animation-iteration-count: 3.1;
-moz-animation-duration: 10s;
animation-name: sample;
animation-iteration-count: 3.1;
animation-duration: 10s;
}
.def {
background-color: green;
width: 250px;
height: 10px;
position: relative;
left: 0px;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: Setting animation-iteration-count to non-integer leads animation to end part way.
</p>
<ul>
<li>PASS if a blue colored Box with text "CSS3 Testing Content" animates from right to left along the green bar THRICE (for a span of 10 seconds each) and for the FOURTH time animation appears to break in middle and blue box immediately positions itself to left.</li>
<li>FAIL if NO animation is seen OR if animation does not end part-way in its FOURth cycle.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
</div>
</body>
</html>

79
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-005.xht
View file

@ -1,79 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations. animation-iteration-count is set to a finite value.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="When animation-iteration-count is set to a finite value; animation will play for the specified number of times." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 2;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: 2;
animation-name: sample;
animation-duration: 10s;
animation-iteration-count: 2;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: When animation-iteration-count is set to a finite integer value; that value is taken as the number of times that the animation has to repeat from beginning to the end.
</p>
<ul>
<li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and box starts to animate/move from right to left twice.</li>
<li>FAIL if the animation is not as expected.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

93
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-count-006.xht
View file

@ -1,93 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations. animation-iteration-count set to zero.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="When animation-iteration-count is set to zero NO animation is seen." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
left: 0px;
-webkit-animation-name: sample;
-webkit-animation-iteration-count: 0;
-webkit-animation-duration: 10s;
-moz-animation-name: sample;
-moz-animation-iteration-count: 0;
-moz-animation-duration: 10s;
animation-name: sample;
animation-iteration-count: 0;
animation-duration: 10s;
}
.def {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
left: 0px;
z-index: -1;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: When animation-iteration-count is set to zero NO animation is seen.
</p>
<ul>
<li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and NO movement/animation is seen. Also, RED color should NOT be seen anywhere on this page.</li>
<li>FAIL if the box animates to left OR if RED color is seen anywhere on this page.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

111
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-iteration-event.xht
View file

@ -1,111 +0,0 @@
<!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>
<title>CSS3 Animations: To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-events" />
<meta name="flags" content="animated" />
<meta name="assert" content="To verify if &quot; animationiteration &quot; event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one." />
<style type="text/css" media="screen">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
/*Added extra style information --- BEGIN modification*/
color: Yellow;
font-weight: bolder;
font-size: xx-large;
text-align: center;
vertical-align: middle;
/*Added extra style information --- END modification*/
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 1em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 2;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: 2;
animation-name: sample;
animation-duration: 10s;
animation-iteration-count: 2;
}
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
var box_var;
function init()
{
getvalues();
}
function getvalues()
{
box_var = document.getElementById("box" );
box_var.addEventListener("webkitAnimationIteration" , start_f, true);
box_var.addEventListener("animationiteration" , start_f, true);
}
function start_f()
{
/*This line of code has been commented to avoid automated result evaluation.
//document.getElementById(&quot; result&quot; ).innerHTML = "TRUE";
*/
box_var.innerHTML = "2";
}
/* ]]> */
</script>
</head>
<body onload="init()">
<p id="testdetails">
<p>
Assertion: To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.
</p>
<ul>
<li>PASS if the box moves from Right to Left for a period of 10 seconds. It should contain a digit 1 for first animation. Content of box changes to 2 during second animation. Also the animation should stop after 2 cycles. </li>
<li>FAIL if the output is not as expected. </li>
</ul>
</p>
<div class="abc" id="box">
1
</div>
</body>
</html>

93
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-keyframes.xht
View file

@ -1,93 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations : keyframes specified using percentages or from/to keywords on animation time line.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#keyframes" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="To verify that keyframes set using percentages or from/to keywords on animation time line are in effect." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
background-color: blue;
}
30% {
background-color: green;
}
65% {
background-color: red;
}
to {
background-color: blue;
}
}
@-moz-keyframes sample {
from {
background-color: blue;
}
30% {
background-color: green;
}
65% {
background-color: red;
}
to {
background-color: blue;
}
}
@keyframes sample {
from {
background-color: blue;
}
30% {
background-color: green;
}
65% {
background-color: red;
}
to {
background-color: blue;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
animation-name: sample;
animation-duration: 10s;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that keyframes set using percentages or from/to keywords on animation time line are in effect.
</p>
<ul>
<li>PASS if the color of the box is blue initially on page load and gradually changes in the order: BLUE to GREEN to RED and back to BLUE in 10 seconds</li>
<li>FAIL if the color of the box is NOT changing in the specified order within a span of 10 seconds.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

89
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-001.xht
View file

@ -1,89 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations : animation-name set with no value</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="To verify that NO animation is seen when animation-name is set without any value." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
left: 0px;
-webkit-animation-name: ;
-webkit-animation-duration: 10s;
-moz-animation-name: ;
-moz-animation-duration: 10s;
animation-name: ;
animation-duration: 10s;
}
.def {
position: absolute;
background-color: red;
left: 0px;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
z-index: -1;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that NO animation is seen when animation-name is set without any value.
</p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" inside it appears below and box should not animate/move towards left. Also no red should be visible on this page.</li>
<li>FAIL if box moves to left or some animation is observed or if red is visible.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

75
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-002.xht
View file

@ -1,75 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations : animation-name set to valid keyframes rule name</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation; desired animation should be seen." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
animation-name: sample;
animation-duration: 10s;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation; desired animation should be seen.
</p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" inside it appears below and animates/moves towards left.</li>
<li>FAIL if box fails to transcend towards left.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

89
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-003.xht
View file

@ -1,89 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations : animation-name set to none</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="To verify that NO animation is seen when animation-name is set to none." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
left: 0px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
-webkit-animation-name: none;
-webkit-animation-duration: 10s;
-moz-animation-name: none;
-moz-animation-duration: 10s;
animation-name: none;
animation-duration: 10s;
}
.def {
position: absolute;
background-color: red;
left: 0px;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
z-index: -1;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that NO animation is seen when animation-name is set to none.
</p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" inside it appears below and box should not animate/move towards left. Also no red should be visible on this page.</li>
<li>FAIL if box moves to left or some animation is observed or if red is visible.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

91
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-name-004.xht
View file

@ -1,91 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations : animation-name does not match any keyframe at-rule.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="To verify: if animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
left: 0px;
-webkit-animation-name: sample1;
-webkit-animation-duration: 10s;
-moz-animation-name: sample1;
-moz-animation-duration: 10s;
animation-name: sample1;
animation-duration: 10s;
}
.def {
position: absolute;
background-color: red;
left: 0px;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
z-index: -1;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify: if animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.
</p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" inside it appears below and box should not animate/move towards left. Also no red should be visible on this page.</li>
<li>FAIL if box animates or moves towards left or if red is visible.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

93
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-play-state-001.xht
View file

@ -1,93 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations : animation-play-state set to paused </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-play-state" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="A paused animation will display the current value of the animation in a STATIC state (no animation)." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: absolute;
left: 0px;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-play-state: paused;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-play-state: paused;
animation-name: sample;
animation-duration: 10s;
animation-play-state: paused;
}
.def {
position: absolute;
left: 150px;
background-color: red;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
z-index: -1;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: A paused animation will display the current value of the animation in a STATIC state (no animation).
</p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red color should be visible on this page.</li>
<li>FAIL if the box is animated or if red color is visible.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
<div class="def">
Reference
</div>
</body>
</html>

80
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-play-state-002.xht
View file

@ -1,80 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations : animation-play-state set to playing </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-play-state" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="When animation-play-state is set to running; animation continues to render." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-play-state: running;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-play-state: running;
animation-name: sample;
animation-duration: 10s;
animation-play-state: running;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: When animation-play-state is set to running; animation continues to render.
</p>
<ul>
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below, which moves from right to left (in 10seconds) upon page load.</li>
<li>FAIL if the animation is not as expected.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

79
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-001.xht
View file

@ -1,79 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations : animation-timing-function set to cubic-bezier with parameters (0,0,1,1). </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="To verify that: when animation-timing-function is set to cubic-bezier with parameters (0,0,1,1) animation is rendered with constant speed from begining till end." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: cubic-bezier(0,0,1,1);
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-timing-function: cubic-bezier(0,0,1,1);
animation-name: sample;
animation-duration: 10s;
animation-timing-function: cubic-bezier(0,0,1,1);
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that: when animation-timing-function is set to cubic-bezier with parameters (0,0,1,1) (this is same as setting time function to linear); animation is rendered with constant speed from begining till end.
</p>
<ul>
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left with constant speed</li>
<li>FAIL if box is moved with accelerated/decelerated speed OR fails to move left(no animation).</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

79
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-002.xht
View file

@ -1,79 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations : animation-timing-function set to ease. </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="To verify that: when animation-timing-function is set to ease; animation starts slow, gains acceleration in the middle and again slows down at the end." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: ease;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-timing-function: ease;
animation-name: sample;
animation-duration: 10s;
animation-timing-function: ease;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that: when animation-timing-function is set to ease; animation starts slow, gains acceleration in the middle and again slows down at the end.
</p>
<ul>
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left; initially the animation starts slow, gains acceleration in the middle and again slows down at the end.</li>
<li>FAIL if the animation is not as expected.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

79
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-003.xht
View file

@ -1,79 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations : animation-timing-function set to ease-in. </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: ease-in;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-timing-function: ease-in;
animation-name: sample;
animation-duration: 10s;
animation-timing-function: ease-in;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses.
</p>
<ul>
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left; animation starts slow and gains acceleration as time progresses.</li>
<li>FAIL if the animation is not as expected.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

79
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-004.xht
View file

@ -1,79 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations : animation-timing-function set to ease-in-out. </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="To verify that: when animation-timing-function is set to ease-in-out; animation starts slow, gains acceleration in the middle and again slows down at the end." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-timing-function: ease-in-out;
animation-name: sample;
animation-duration: 10s;
animation-timing-function: ease-in-out;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that: when animation-timing-function is set to ease-in-out; animation starts slow, gains acceleration in the middle and again slows down at the end.
</p>
<ul>
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left; initially the animation starts slow, gains acceleration in the middle and again slows down at the end.</li>
<li>FAIL if the animation is not as expected.</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

79
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-005.xht
View file

@ -1,79 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations : animation-timing-function set to ease-out. </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="To verify that: when animation-timing-function is set to ease-out; animation starts with higher(than the normal) speed and relatively slows down as time progresses." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: ease-out;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-timing-function: ease-out;
animation-name: sample;
animation-duration: 10s;
animation-timing-function: ease-out;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that: when animation-timing-function is set to ease-out; animation starts with higher(than the normal) speed and relatively slows down as time progresses.
</p>
<ul>
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left, animation starts and relatively slows down as time progresses.</li>
<li>FAIL if box is moved with constant/accelerated speed OR fails to move left (no animation).</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

79
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animation-timing-function-006.xht
View file

@ -1,79 +0,0 @@
<!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>
<title>CSS Tests: CSS Animations : animation-timing-function set to linear. </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end." />
<style type="text/css">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
width: 100px;
height: 100px;
padding: 0.2em 1em;
margin: 6em;
position: relative;
-webkit-animation-name: sample;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-moz-animation-name: sample;
-moz-animation-duration: 10s;
-moz-animation-timing-function: linear;
animation-name: sample;
animation-duration: 10s;
animation-timing-function: linear;
}
/* ]]> */
</style>
</head>
<body>
<p id="testdetails">
<p>
Assertion: To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end.
</p>
<ul>
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left with constant speed</li>
<li>FAIL if box is moved with accelerated/decelerated speed OR fails to move left(no animation).</li>
</ul>
</p>
<div class="abc">
CSS3 Testing Content
</div>
</body>
</html>

127
tests/wpt/css-tests/css-animations-1_dev/xhtml1/animationstart-and-animationend-events.xht
View file

@ -1,127 +0,0 @@
<!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>
<title>CSS3 Animations: To verify animationstart and animationend events are handled. </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-events" />
<link rel="help" href="http://www.w3.org/TR/css3-animations/#timing-functions" />
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
<meta name="flags" content="animated" />
<meta name="assert" content="To verify if &quot;animationstart&quot; event occurs when animation starts and &quot;animationend&quot; occurs when the animation ends." />
<style type="text/css" media="screen">
/* <![CDATA[ */
@-webkit-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@-moz-keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.abc {
background-color: blue;
/*Added extra style information --- BEGIN modification*/
color: Yellow;
font-weight: bolder;
font-size: xx-large;
text-align: center;
vertical-align: middle;
/*Added extra style information --- END modification*/
width: 100px;
height: 100px;
padding: 0.2em 1em;
//margin: 6em;
position: relative;
-webkit-animation-name: sample;
//-webkit-animation-delay: 0.1s;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-moz-animation-name: sample;
//-moz-animation-delay: 0.1s;
-moz-animation-duration: 10s;
-moz-animation-timing-function: linear;
animation-name: sample;
//animation-delay: 0.1s;
animation-duration: 10s;
animation-timing-function: linear;
}
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
var box_var;
function init()
{
getvalues();
}
function getvalues()
{
box_var=document.getElementById('box');
box_var.addEventListener('webkitAnimationStart',start_f,true);
box_var.addEventListener('webkitAnimationEnd',end_f,true);
box_var.addEventListener('animationstart',start_f,true);
box_var.addEventListener('animationend',end_f,true);
<!--box_var.addEventListener('webkitAnimationEnd',start_f,true);-->
}
function start_f()
{
/*This line of code has been commented to avoid automated result evaluation.
*document.getElementById('result').innerHTML="TRUE";
*/
document.getElementById('box').innerHTML = "START";
}
function end_f()
{
/*This line of code has been commented to avoid automated result evaluation.
*document.getElementById('result1').innerHTML="TRUE";
*/
document.getElementById('box').innerHTML = "STOP";
}
/* ]]> */
</script>
</head>
<body onload="init()">
<p id="testdetails">
<p>
Assertion: To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.
</p>
<ul>
<li>PASS if blue box is rendered with text START as the animation begins and changes to STOP when animation is finished. </li>
<li>FAIL if text "FAIL" is displayed OR START is NOT rendered when animation begins OR STOP is NOT rendered when animation ends.</li>
</ul>
</p>
<div class="abc" id="box">
FAIL
</div>
<!-- below markup is removed to avoid inline display of results.
* <p><b>Animation Event Start Value:</b> <span id="result"></span></p>
* <p><b>Animation Event End Value:</b> <span id="result1"></span></p>
-->
</body>
</html>

1205
tests/wpt/css-tests/css-animations-1_dev/xhtml1/chapter-4.xht
View file

File diff suppressed because it is too large Load diff

47
tests/wpt/css-tests/css-animations-1_dev/xhtml1/chapter-5.xht
View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
<h2>Animation Events (4 tests)</h2>
<h2>Animation Events (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -31,29 +31,7 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s5">+</a>
<a href="http://www.w3.org/TR/css3-animations/#animation-events">5 Animation Events</a></th></tr>
<!-- 2 tests -->
<tr id="animation-iteration-event-5" class="animated">
<td>
<a href="animation-iteration-event.xht">animation-iteration-event</a></td>
<td></td>
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
<td>CSS3 Animations: To verify if &quot; animationiteration &quot; event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.
<ul class="assert">
<li>To verify if &quot; animationiteration &quot; event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</li>
</ul>
</td>
</tr>
<tr id="animationstart-and-animationend-events-5" class="animated">
<td>
<a href="animationstart-and-animationend-events.xht">animationstart-and-animationend-events</a></td>
<td></td>
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
<td>CSS3 Animations: To verify animationstart and animationend events are handled.
<ul class="assert">
<li>To verify if &quot;animationstart&quot; event occurs when animation starts and &quot;animationend&quot; occurs when the animation ends.</li>
</ul>
</td>
</tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.1">
<tr><th colspan="4" scope="rowgroup">
@ -77,26 +55,7 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.1.2">+</a>
<a href="http://www.w3.org/TR/css3-animations/#AnimationEvent-attributes">5.1.2 Attributes</a></th></tr>
<!-- 2 tests -->
<tr id="pseudoelement-001-5.1.2" class="primary script">
<td><strong>
<a href="pseudoElement-001.xht">pseudoelement-001</a></strong></td>
<td></td>
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>pseudoElement attribute of Event - return the name or empty string
</td>
</tr>
<tr id="pseudoelement-002-5.1.2" class="primary">
<td><strong>
<a href="pseudoElement-002.xht">pseudoelement-002</a></strong></td>
<td></td>
<td></td>
<td>the target of the event is that pseudo-element's corresponding element
<ul class="assert">
<li>The target of the event is that pseudo-element's corresponding element.</li>
</ul>
</td>
</tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.2.#AnimationEvent-animationName">
<!-- 0 tests -->

54
tests/wpt/css-tests/css-animations-1_dev/xhtml1/pseudoElement-001.xht
View file

@ -1,54 +0,0 @@
<!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>CSS3 Animations Test: pseudoElement attribute of Event - return the name or empty string</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="mailto:jieqiongx.cui@intel.com" rel="author" title="Jieqiong Cui" />
<link href="http://www.w3.org/TR/css3-animations/#AnimationEvent-attributes" rel="help" title="5.1.2. Attributes" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.test {
animation-duration: 10s;
animation-name: sample;
animation-timing-function: linear;
background-color: blue;
height: 50px;
position: relative;
width: 100px;
}
#testDiv2::after {
content: "pseudoElement";
}
</style>
</head><body><div id="log"></div>
<div id="testDiv1" class="test"></div>
<div id="testDiv2" class="test"></div>
<script>
var t1 = async_test("Check if the pseudoElement attribute returns the empty string when the animation runs on an element");
var t2 = async_test("Check if the pseudoElement attribute returns the name (beginning with two colons) of the CSS pseudo-element when the animation runs");
var testDiv1 = document.getElementById('testDiv1');
var testDiv2 = document.getElementById('testDiv2');
testDiv1.addEventListener('animationstart', function(event) {
t1.step(function() {
assert_equals(event.pseudoElement, "", "the pseudoElement value");
});
t1.done();
}, false);
testDiv2.addEventListener('animationstart', function(event) {
t2.step(function() {
assert_equals(event.pseudoElement, "::after", "the pseudoElement value");
});
t2.done();
}, false);
</script>
</body></html>

35
tests/wpt/css-tests/css-animations-1_dev/xhtml1/pseudoElement-002.xht
View file

@ -1,35 +0,0 @@
<!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>CSS3 Animations Test: the target of the event is that pseudo-element's corresponding element</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="mailto:jieqiongx.cui@intel.com" rel="author" title="Jieqiong Cui" />
<link href="http://www.w3.org/TR/css3-animations/#AnimationEvent-attributes" rel="help" title="5.1.2. Attributes" />
<meta content="" name="flags" />
<meta content="The target of the event is that pseudo-element's corresponding element." name="assert" />
<style>
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
#testDiv {
animation-duration: 5s;
animation-name: sample;
animation-timing-function: linear;
position: relative;
}
#testDiv::before {
content: "&lt;";
}
#testDiv::after {
content: "&gt;";
}
</style>
</head><body>
<p>Test passes if the '&lt;pseudoElement&gt;' moves from right to left one time.</p>
<div id="testDiv">pseudoElement</div>
</body></html>

BIN
tests/wpt/css-tests/css-animations-1_dev/xhtml1/reference/support/pattern-gg-gr.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 203 B

After

Width:  |  Height:  |  Size: 148 B

Before After
Before After

BIN
tests/wpt/css-tests/css-animations-1_dev/xhtml1/support/pattern-gg-gr.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 203 B

After

Width:  |  Height:  |  Size: 148 B

Before After
Before After

4
tests/wpt/css-tests/css-animations-1_dev/xhtml1/toc.xht
View file

@ -37,12 +37,12 @@
<tbody id="s4">
<tr><th><a href="chapter-4.xht">Chapter 4 -
Keyframes</a></th>
<td>(36 Tests)</td></tr>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s5">
<tr><th><a href="chapter-5.xht">Chapter 5 -
Animation Events</a></th>
<td>(4 Tests)</td></tr>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s6">
<tr><th><a href="chapter-6.xht">Chapter 6 -