Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 06:00:15 +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 -