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 d674587d6ae7d2e231d632785559f2613d554eb0

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

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

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-delay - negative value</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-delay is set to a negative time offset,
animation will execute as soon as it is applied
but act as if the animation had started the specified
time in the past." name="assert">
<style>
div {
animation-timing-function: linear;
height: 100px;
width: 100px;
position: relative;
}
#test-negative-delay {
animation-name: test-negative-delay;
animation-duration: 10s;
animation-delay: -5s;
background-color: blue;
}
#ref-no-delay {
animation-name: ref-no-delay;
animation-duration: 5s;
background-color: yellow;
}
@keyframes test-negative-delay {
from {
left: 150px;
}
to {
left: 0px;
}
}
@keyframes ref-no-delay {
from {
left: 75px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there are a filled blue square with 'Filler Text'
and a filled yellow square with 'Filler Text', and if the two squares
start moving together from right to left as soon as the page loads.
</p>
<div id="test-negative-delay">Filler Text</div>
<div id="ref-no-delay">Filler Text</div>
</body></html>

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

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-delay - positive value</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-delay is set to a positive time offset,
animation will delay execution by the specified offset value." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 5s;
animation-delay: 5s;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left after about 5 seconds
from the time the page is loaded.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-delay - 0s</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-delay is set to 0s (zero seconds),
animation will execute as soon as it is applied." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
animation-delay: 0s;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left as soon as the page loads.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-delay - ::after</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-delay applies to the ::after pseudo element." name="assert">
<style>
div::after {
animation-name: sample;
animation-duration: 5s;
animation-delay: 5s;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left after about 5 seconds
from the time the page is loaded.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-delay - ::before</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-delay applies to the ::before pseudo element." name="assert">
<style>
div::before {
animation-name: sample;
animation-duration: 5s;
animation-delay: 5s;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left after about 5 seconds
from the time the page is loaded.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-delay - initial keyword</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#values" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-delay property accepts 'initial' keyword." name="assert">
<style>
#contatiner {
animation-delay: 5s;
}
#test {
animation-name: sample;
animation-duration: 10s;
animation-delay: initial;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left upon page load and lasts for a span of 10 seconds.
</p>
<div id="container">
<div id="test">Filler Text</div>
</div>
</body></html>

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

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-delay - inherit keyword</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#values" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-delay property accepts 'inherit' keyword." name="assert">
<style>
#container {
animation-delay: 5s;
}
#test {
animation-name: sample;
animation-duration: 5s;
animation-delay: inherit;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts staying left for about 5 seconds, and then moves
from right to left and lasts for a span of 5 seconds.
</p>
<div id="container">
<div id="test">Filler Text</div>
</div>
</body></html>

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

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-direction - alternate</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-direction is set to alternate,
animation cycle will iteration that are
odd counts are played in the normal direction,
and the animation cycle iterations that are
even counts are played in a reverse direction." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
animation-direction: alternate;
animation-iteration-count: infinite;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left on the page load,
and then moves from left to right. This cycle gets repeated.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-direction - normal</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-direction is set to normal,
all iterations of animation are played as specified." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
animation-direction: normal;
animation-iteration-count: infinite;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled color square with 'Filler Text',
which starts moving from right to left, then back to right and moves from
right to left again. This cycle gets repeated.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-direction - alternate-reverse</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-direction is set to alternate-reverse,
the animation cycle iterations that are
odd counts are played in the normal direction,
and the animation cycle iterations that are
even counts are played in a reverse direction." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 0px;
}
to {
left: 150px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left on the page load,
and then moves from left to right. This cycle gets repeated.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-direction - reverse</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-direction is set to reverse,
all iterations of the animation are played in the reverse direction
from the way they were specified." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
animation-direction: reverse;
animation-iteration-count: infinite;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled color square with 'Filler Text',
which starts moving from left to right, then back to left again and moves from
left to right. This cycle gets repeated.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-direction - ::after</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-direction applies to the ::after pseudo element." name="assert">
<style>
div::after {
animation-name: sample;
animation-duration: 10s;
animation-direction: alternate;
animation-iteration-count: infinite;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left on the page load,
and then moves from left to right. This cycle gets repeated.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-direction - ::before</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-direction" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-direction applies to the ::before pseudo element" name="assert">
<style>
div::before {
animation-name: sample;
animation-duration: 10s;
animation-direction: alternate;
animation-iteration-count: infinite;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left on the page load,
and then moves from left to right. This cycle gets repeated.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation - display</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animations" rel="help">
<meta content="animated" name="flags">
<meta content="Check that setting 'display' property to 'none' terminates
running animation applied to the element, and updating 'display'
property to a value other than 'none' will start the animation." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which moves from right to left twice.
</p>
<div>Filler Text</div>
<script>
var div = document.getElementsByTagName("div");
setTimeout(function() {
div[0].style.display = "none";
}, 5000);
setTimeout(function() {
div[0].style.display = "block";
}, 8000);
</script>
</body></html>

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

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-duration - blank value</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-duration value is set blank, there will be no animation seen." name="assert">
<style>
div {
animation-name: sample;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts staying left for about 2 seconds upon page load,
then moves from right to left.
</p>
<div>Filler Text</div>
<script>
var div = document.getElementsByTagName("div");
div[0].style.animationDuration = "";
setTimeout(setAnimationDuration, 2000);
function setAnimationDuration() {
div[0].style.animationDuration = "10s";
}
</script>
</body></html>

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

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-duration - finite value</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-duration is set a finite time offset,
animation takes the specifies time to complete one cycle." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left upon page load and lasts for a span of 10 seconds.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-duration - negative value</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-duration is set to a negative value,
it is treated as 0s (zero seconds) and no animation is seen." name="assert">
<style>
div {
animation-name: sample;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts staying left for about 2 seconds upon page load,
then moves from right to left.
</p>
<div>Filler Text</div>
<script>
var div = document.getElementsByTagName("div");
div[0].style.animationDuration = "-2s";
setTimeout(setAnimationDuration, 2000);
function setAnimationDuration() {
div[0].style.animationDuration = "10s";
}
</script>
</body></html>

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

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-duration - 0s</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-duration is set to 0s (zero seconds),
animation occurs instantaneously, there will be no animation seen." name="assert">
<style>
div {
animation-name: sample;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts staying left for about 2 seconds upon page load,
then moves from right to left.
</p>
<div>Filler Text</div>
<script>
var div = document.getElementsByTagName("div");
div[0].style.animationDuration = "0s";
setTimeout(setAnimationDuration, 2000);
function setAnimationDuration() {
div[0].style.animationDuration = "10s";
}
</script>
</body></html>

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

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-duration - 0s, animation-fill-mode - forwards</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-duration is set to 0s (zero seconds),
and 'animation-fill-mode' is set to 'forwards',
the last frame of the animation will be displayed." name="assert">
<style>
div {
height: 100px;
width: 100px;
position: absolute;
}
#test {
animation-name: sample;
animation-duration: 0s;
animation-fill-mode: forwards;
background-color: blue;
}
#ref {
background-color: red;
left: 150px;
}
@keyframes sample {
from {
left: 0px;
}
to {
left: 150px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue with 'Filler Text',
and without animation, and if there is no red.
</p>
<div id="ref"></div>
<div id="test">Filler Text</div>
</body></html>

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

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-duration - 0s, animation-fill-mode - both</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-duration is set to 0s (zero seconds),
and 'animation-fill-mode' is set to 'both',
the last frame of the animation will be displayed." name="assert">
<style>
div {
height: 100px;
width: 100px;
position: absolute;
}
#test {
animation-name: sample;
animation-duration: 0s;
animation-fill-mode: both;
background-color: blue;
}
#ref {
background-color: red;
left: 150px;
}
@keyframes sample {
from {
left: 0px;
}
to {
left: 150px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue with 'Filler Text',
and without animation, and if there is no red.
</p>
<div id="ref"></div>
<div id="test">Filler Text</div>
</body></html>

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

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-duration - ::before</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-duration applies to the ::before pseudo element." name="assert">
<style>
div::before {
animation-name: sample;
animation-duration: 10s;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left upon page load and lasts for a span of 10 seconds.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-duration - ::after</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-05 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-duration applies to the ::after pseudo element." name="assert">
<style>
div::after {
animation-name: sample;
animation-duration: 10s;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left upon page load and lasts for a span of 10 seconds.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-fill-mode - none</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-fill-mode is set to none,
animation has no effect when it is applied but not executing." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 5s;
animation-fill-mode: none;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
background-color: yellow;
}
to {
background-color: green;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled color square with 'Filler Text',
whose color gradually changes in the order:
YELLOW to GREEN to BLUE.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-fill-mode - forwards</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-fill-mode is set to forwards,
animation will apply the property values for the time the amination ended
after the animation ends." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 5s;
animation-fill-mode: forwards;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
background-color: yellow;
}
to {
background-color: green;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled color square with 'Filler Text',
whose color gradually changes in the order:
YELLOW to GREEN.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-fill-mode - backwards</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-fill-mode is set to backwards,
animation-delay is set a positive time offset,
and animation-direction is 'normal' or 'alternate-reverse',
animation will apply the from or 0% keyframe
that will start the first iteration." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 5s;
animation-delay: 5s;
animation-fill-mode: backwards;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
background-color: yellow;
}
to {
background-color: green;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled color square with 'Filler Text',
whose color gradually changes in the order:
YELLOW to GREEN to BLUE.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-fill-mode - both</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-delay" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
<meta content="animated" name="flags">
<meta content="Check if animation-fill-mode is set to both,
the effects of both 'forwards' and 'backwards' will apply." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 5s;
animation-delay: 5s;
animation-fill-mode: both;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
background-color: yellow;
}
to {
background-color: green;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled color square with 'Filler Text',
whose color gradually changes in the order:
YELLOW to GREEN.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-fill-mode - ::after</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-fill-mode applies to the ::after pseudo element." name="assert">
<style>
div::after {
animation-name: sample;
animation-duration: 5s;
animation-fill-mode: forwards;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
background-color: yellow;
}
to {
background-color: green;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled color square with 'Filler Text',
whose color gradually changes in the order:
YELLOW to GREEN.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-fill-mode - ::before</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-fill-mode applies to the ::before pseudo element." name="assert">
<style>
div::before {
animation-name: sample;
animation-duration: 5s;
animation-fill-mode: forwards;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
background-color: yellow;
}
to {
background-color: green;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled color square with 'Filler Text',
whose color gradually changes in the order:
YELLOW to GREEN.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-iteration-count - default value</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-iteration-count is not set, 1 is taken by default and
animation will play from beginning to end once." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left once.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-iteration-count - infinite value</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-iteration-count is set to infinite,
animation will repeat forever." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
animation-iteration-count: infinite;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled square with 'Filler Text',
which repeatedly moves from right to left. Every time a cycle is finished,
the square gets re-positioned to right and continues to move left.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-iteration-count - negative value</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-iteration-count is set to negative count,
it is invalid and animation will play from beginning to end once." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
animation-iteration-count: -2;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left once.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-iteration-count - non-integer value</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-iteration-count is set to non-integer,
animation will end partway through its last cycle." name="assert">
<style>
#test-iteration-count {
animation-name: sample;
animation-duration: 10s;
animation-iteration-count: 2.1;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
#ref-path {
background-color: yellow;
height: 10px;
width: 250px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left along the yellow bar twice,
and for the third time it ends partway and then immediately positions
itself to the left.
</p>
<div id="test-iteration-count">Filler Text</div>
<div id="ref-path"></div>
</body></html>

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

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-iteration-count - integer value</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-iteration-count is set to integer count,
animation will repeat the specified number of times." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
animation-iteration-count: 2;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left twice.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-iteration-count - 0 (zero)</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-iteration-count is set to 0 (zero), no animation is seen." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts staying left for about 2 seconds upon page load,
then moves from right to left once.
</p>
<div>Filler Text</div>
<script>
var div = document.getElementsByTagName("div");
div[0].style.animationIterationCount = 0;
setTimeout(setAnimationDuration, 2000);
function setAnimationDuration() {
div[0].style.animationIterationCount = 1;
}
</script>
</body></html>

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

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-iteration-count - ::after</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-iteration-count applies to the ::after pseudo element." name="assert">
<style>
div::after {
animation-name: sample;
animation-duration: 10s;
animation-iteration-count: 2;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left twice.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-iteration-count - ::before</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-iteration-count applies to the ::before pseudo element." name="assert">
<style>
div::before {
animation-name: sample;
animation-duration: 10s;
animation-iteration-count: 2;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left twice.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation events - animationiteration</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#events" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animationiteration event occurs at the end of
each iteration of an animation for which animation-iteration-count
is greater than one." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
animation-iteration-count: 3;
color: yellow;
font-weight: bolder;
font-size: xx-large;
text-align: center;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square, which moves from right to left
three times; and if the square contains digit 1 for the first animation,
digit 2 for the second, and 3 for the third animation.
</p>
<div></div>
<script>
var count = 1;
var div = document.getElementsByTagName("div");
div[0].innerHTML = count;
div[0].addEventListener("animationiteration", animationIteration, true);
function animationIteration() {
count += 1;
div[0].innerHTML = count;
}
</script>
</body></html>

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

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: @keyframes - from, to, percentage</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#keyframes" rel="help">
<meta content="animated" name="flags">
<meta content="Check that @keyframes rule accepts 'from' and 'to'
keywords, and percentage values." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
background-color: blue;
height: 100px;
width: 100px;
}
@keyframes sample {
from {
background-color: blue;
}
30% {
background-color: green;
}
65% {
background-color: yellow;
}
to {
background-color: blue;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text'
initially on page load, and if the color of the square gradully changes
in order: BLUE to GREEN to YELLOW and back to BLUE in 10 seconds.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: @keyframes - negative percentage and higher than 100%</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#keyframes" rel="help">
<meta content="animated" name="flags">
<meta content="Check that a keyframe selector specifies negative percentage values
or values higher than 100%, the keyframe will be ignored." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
background-color: blue;
height: 100px;
width: 100px;
}
@keyframes sample {
-100% {
background-color: red;
}
0% {
background-color: blue;
}
30% {
background-color: green;
}
65% {
background-color: yellow;
}
100% {
background-color: blue;
}
200% {
background-color: red;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text'
initially on page load, if the color of the square gradully changes
in order: BLUE to GREEN to YELLOW and back to BLUE in 10 seconds,
and if there is no red.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: @keyframes - animation-timing-function</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#keyframes" rel="help">
<meta content="animated" name="flags">
<meta content="Check that @keyframes rule accpets 'animation-timing-function'
property used as the animation moves to the next keyframe." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
animation-timing-function: linear;
}
50% {
left: 75px;
animation-timing-function: linear;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left with constant speed.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-name - blank value</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-name is set without any value,
there will be no animation." name="assert">
<style>
div {
animation-name: ;
animation-duration: 8s;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts staying left about 2 seconds, then moves from right to left.
</p>
<div>Filler Text</div>
<script>
setTimeout(setAnimationName, 2000);
function setAnimationName () {
var div = document.getElementsByTagName("div");
div[0].style.animationName = "sample";
}
</script>
</body></html>

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

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-name matchs keyframes at-rule</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-name is set to refer to a keyframe at-rule
that provides the property values for the animation,
animation will execute." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left on the page load.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-name - none</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-name is set to none, there will be no animation." name="assert">
<style>
div {
animation-name: none;
animation-duration: 8s;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts staying left about 2 seconds, then moves from right to left.
</p>
<div>Filler Text</div>
<script>
setTimeout(setAnimationName, 2000);
function setAnimationName () {
var div = document.getElementsByTagName("div");
div[0].style.animationName = "sample";
}
</script>
</body></html>

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

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-name mismatches keyframe at-rule</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-name does not match any keyframe at-rule,
there are no properties to be animated and animation will not execute." name="assert">
<style>
div {
animation-name: sample1;
animation-duration: 8s;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts staying left about 2 seconds, then moves from right to left.
</p>
<div>Filler Text</div>
<script>
setTimeout(setAnimationName, 2000);
function setAnimationName () {
var div = document.getElementsByTagName("div");
div[0].style.animationName = "sample";
}
</script>
</body></html>

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

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-name - ::after</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-name applies to the ::after pseudo element." name="assert">
<style>
div::after {
animation-name: sample;
animation-duration: 10s;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left on the page load.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-name - ::before</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-name applies to the ::before pseudo element." name="assert">
<style>
div::before {
animation-name: sample;
animation-duration: 10s;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left on the page load.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-play-state - paused</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-play-state" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-play-state is set to paused,
animation is paused where the progress it had made
before being paused." name="assert">
<style>
#test-animation-paused {
animation-name: sample;
animation-duration: 10s;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
#ref-path {
background-color: yellow;
height: 10px;
width: 250px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving right to left along the yellow bar,
and pauses in the middle after about 2 seconds' animation.
</p>
<div id="test-animation-paused">Filler Text</div>
<div id="ref-path"></div>
<script>
setTimeout(setAnimationRunning, 2000);
function setAnimationRunning() {
var div = document.getElementsByTagName("div");
div[0].style.animationPlayState = "paused";
}
</script>
</body></html>

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

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-play-state - running</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-play-state" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-play-state is set to running,
animation will proceed as normal." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
animation-play-state: running;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-play-state - ::after</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-play-state" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-play-state applies to the ::after pseudo element." name="assert">
<style>
div::after {
animation-name: sample;
animation-duration: 10s;
animation-play-state: running;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-play-state - ::before</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-play-state" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-play-state applies to the ::before pseudo element." name="assert">
<style>
div::before {
animation-name: sample;
animation-duration: 10s;
animation-play-state: running;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation shorthand</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation shorthand property accepts time
values for animation-duration and animation-delay in order." name="assert">
<style>
div {
animation: 10s 2s sample;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts staying left about 2 seconds, and then moves from right to left
and lasts for a span of 10 seconds.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation shorthand - ::after</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation shorthand applies to the ::after pseudo element
and accepts time values for animation-duration and animation-delay
in order." name="assert">
<style>
div::after {
animation: 10s 2s sample;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts staying left about 2 seconds, and then moves from right to left
and lasts for a span of 10 seconds.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation shorthand - ::before</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation shorthand applies to the ::before pseudo element
and accepts time values for animation-duration and animation-delay
in order." name="assert">
<style>
div::before {
animation: 10s 2s sample;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts staying left about 2 seconds, and then moves from right to left
and lasts for a span of 10 seconds.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-timing-function - cubic-bezier with parameters (0,0,1,1)</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-timing-function is set to cubic-bezier
with parameters (0,0,1,1), animation will progress over one cycle
of its duration with constant speed." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
animation-timing-function: cubic-bezier(0,0,1,1);
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left with constant speed.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-timing-function - ease</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-timing-function is set to ease,
animation will starts slow, gain acceleration in the middle
and again slow down at the end." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
animation-timing-function: ease;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left; initially the animation starts slow,
gains acceleration in the middle and again slows down at the end.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-timing-function - ease-in</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-timing-function is set to ease-in,
animation will start slow, gain acceleration as time progresses." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
animation-timing-function: ease-in;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left; animation starts slow
and gains acceleration as time progresses.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-timing-function - ease-in-out</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-timing-function is set to ease-in-out,
animation will start slow, gain acceleration in the middel
and again slow down at the end." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
animation-timing-function: ease-in-out;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left; initially the animation starts slow,
gains acceleration in the middle and again slows down at the end.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-timing-function - ease-out</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-timing-function is set to ease-out,
animation will start with higher (than the normal) speed
and relatively slow down as time progresses." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
animation-timing-function: ease-out;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left; animation starts and relatively
slows down as time progresses.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-timing-function - linear</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-timing-function is set to linear,
animation will progress over one cycle of its duration
with constant speed." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
animation-timing-function: linear;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left with constant speed.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-timing-function - step-start</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-timing-function is set to step-start,
animation will play the end effect at the start of the interval." name="assert">
<style>
div {
height: 100px;
width: 100px;
position: absolute;
}
#test-step-start {
animation-name: sample;
animation-duration: 10s;
animation-fill-mode: forwards;
animation-timing-function: step-start;
background-color: blue;
}
#ref-no-animation {
background-color: red;
left: 150px;
}
@keyframes sample {
from {
left: 0px;
}
to {
left: 150px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which stays right, and if there is NO red.
</p>
<div id="ref-no-animation"></div>
<div id="test-step-start">Filler Text</div>
</body></html>

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

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-timing-function - step-end</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-timing-function is set to step-end,
animation will play the end effect at the end time point,
and keep the start effect at the start of the interval." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
animation-timing-function: step-end;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled square with 'Filler Text',
which stays right for about 10 seconds, and then jumps to left.
</p>
<div>Filler Text</div>
</body></html>

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

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-timing-function - steps with parameters (&lt;number&gt;, start)</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-timing-function is set to steps with paramenters
(<number>, start), animation will be defined by the number that divides
the domain of operation into equally size intervals, evey time the changes
happens at the start of the interval." name="assert">
<style>
div {
float: left;
height: 100px;
width: 100px;
position: absolute;
}
#test-step-start {
animation-name: sample;
animation-duration: 10s;
animation-fill-mode: forwards;
animation-timing-function: steps(4, start);
background-color: blue;
}
#ref-1 {
background-color: yellow;
left: 200px;
}
#ref-2 {
background-color: green;
left: 100px;
}
#ref-3 {
background-color: red;
left: 0px;
}
@keyframes sample {
from {
left: 400px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there are a filled square with 'Filler Text',
which jumps three times from right to left and orderly covers
the filled YELLOW, GREEN and RED squares.
</p>
<div id="ref-1"></div>
<div id="ref-2"></div>
<div id="ref-3"></div>
<div id="test-step-start">Filler Text</div>
</body></html>

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

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-timing-function - steps with parameters (&lt;number&gt;, end)</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
<meta content="animated" name="flags">
<meta content="When animation-timing-function is set to steps with paramenters
(<number>, end), animation will be defined by the number that divides
the domain of operation into equally size intervals, evey time the changes
happens at the end of the interval." name="assert">
<style>
div {
float: left;
height: 100px;
width: 100px;
position: absolute;
}
#test-step-end {
animation-name: sample;
animation-duration: 10s;
animation-fill-mode: forwards;
animation-timing-function: steps(3, end);
background-color: blue;
}
#ref-1 {
background-color: yellow;
left: 200px;
}
#ref-2 {
background-color: green;
left: 100px;
}
#ref-3 {
background-color: red;
left: 0px;
}
@keyframes sample {
from {
left: 300px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there are a filled square with 'Filler Text',
which jumps three times from right to left and orderly covers
the filled YELLOW, GREEN and RED squares.
</p>
<div id="ref-1"></div>
<div id="ref-2"></div>
<div id="ref-3"></div>
<div id="test-step-end">Filler Text</div>
</body></html>

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

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-timing-function - ::after</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-timing-function applies to the ::after pseudo element." name="assert">
<style>
div::after {
animation-name: sample;
animation-duration: 10s;
animation-timing-function: linear;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which moves from right to left with constant speed.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation-timing-function - ::before</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-07 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animation-timing-function applies to the ::before pseudo element." name="assert">
<style>
div::before {
animation-name: sample;
animation-duration: 10s;
animation-timing-function: linear;
background-color: blue;
content: "Filler Text";
display: block;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which moves from right to left with constant speed.
</p>
<div></div>
</body></html>

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

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: AnimationEvent interface</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="https://drafts.csswg.org/css-animations-1/#interface-dom" rel="help">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="animationevent-interface.js"></script>
</head><body><div id="log"></div>
</body></html>

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

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<meta content="long" name="timeout">
<title>CSS Animations Test: AnimationEvnt types - animationstart, animationend,animationiteration</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="https://drafts.csswg.org/css-animations-1/#event-animationevent" rel="help">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#test {
animation-name: sample;
animation-duration: 2s;
animation-delay: -1s;
animation-iteration-count: 2;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body><div id="test">Filler Text</div>
<div id="log"></div>
<script>
var testDiv = document.getElementById("test");
async_test(function(t) {
testDiv.addEventListener("animationstart", t.step_func(function(evt) {
assert_true(evt instanceof window.AnimationEvent);
assert_idl_attribute(evt, "animationName", "animationstart has animationName property");
assert_idl_attribute(evt, "elapsedTime", "animationstart has elapsedTime property");
assert_equals(evt.animationName, "sample", "animationstart has animationName value");
assert_equals(evt.elapsedTime, 1, "animationstart has elapsedTime value");
t.done();
}), true);
}, "animationstart event is instanceof AnimationEvent");
async_test(function(t) {
testDiv.addEventListener("animationend", t.step_func(function(evt) {
assert_true(evt instanceof window.AnimationEvent);
assert_idl_attribute(evt, "animationName", "animationend has animationName property");
assert_idl_attribute(evt, "elapsedTime", "animationend has elapsedTime property");
assert_equals(evt.animationName, "sample", "animationend has animationName value");
assert_equals(evt.elapsedTime, 4, "animationend has elapsedTime value");
t.done();
}), true);
}, "animationend event is instanceof AnimationEvent");
async_test(function(t) {
testDiv.addEventListener("animationiteration", t.step_func(function(evt) {
assert_true(evt instanceof window.AnimationEvent);
assert_idl_attribute(evt, "animationName", "animationiteration has animationName property");
assert_idl_attribute(evt, "elapsedTime", "animationiteration has elapsedTime property");
assert_equals(evt.animationName, "sample", "animationiteration has animationName value");
assert_equals(evt.elapsedTime, 2, "animationiteration has elapsedTime value");
t.done();
}), true);
}, "animationiteration event is instanceof AnimationEvent");
</script>
</body></html>

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

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Animations Test: animation events - animationstart and animationend</title>
<link href="http://www.nokia.com" rel="author" title="Nokia Inc.">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-05-06 -->
<link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
<link href="https://drafts.csswg.org/css-animations-1/#events" rel="help">
<meta content="animated" name="flags">
<meta content="Check that animationstart event occurs at the start of an animation,
animationend event occurs when animation finishes." name="assert">
<style>
div {
animation-name: sample;
animation-duration: 10s;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
</head><body>
<p>
Test passes if there is a filled blue square,
which moves from right to left with text 'START'
and changes to 'END' when the animation is finished.
</p>
<div>Filler Text</div>
<script>
var div = document.getElementsByTagName("div");
div[0].addEventListener("animationstart", animationStart, true);
div[0].addEventListener("animationend", animationEnd, true);
function animationStart() {
div[0].innerHTML = "START";
}
function animationEnd() {
div[0].innerHTML = "END";
}
</script>
</body></html>

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

@ -13,7 +13,7 @@
<body>
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
<h2>Values (0 tests)</h2>
<h2>Values (2 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -31,7 +31,29 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s2">+</a>
<a href="http://www.w3.org/TR/css3-animations/#values">2 Values</a></th></tr>
<!-- 0 tests -->
<!-- 2 tests -->
<tr id="animation-delay-006-2" class="animated">
<td>
<a href="animation-delay-006.htm">animation-delay-006</a></td>
<td></td>
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
<td>animation-delay - initial keyword
<ul class="assert">
<li>Check that animation-delay property accepts 'initial' keyword.</li>
</ul>
</td>
</tr>
<tr id="animation-delay-007-2" class="animated">
<td>
<a href="animation-delay-007.htm">animation-delay-007</a></td>
<td></td>
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
<td>animation-delay - inherit keyword
<ul class="assert">
<li>Check that animation-delay property accepts 'inherit' keyword.</li>
</ul>
</td>
</tr>
</tbody>
</table>

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

@ -13,7 +13,7 @@
<body>
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
<h2>Animations (15 tests)</h2>
<h2>Animations (16 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -31,7 +31,18 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s3">+</a>
<a href="http://www.w3.org/TR/css3-animations/#animations">3 Animations</a></th></tr>
<!-- 15 tests -->
<!-- 16 tests -->
<tr id="animation-display-3" class="animated">
<td>
<a href="animation-display.htm">animation-display</a></td>
<td></td>
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
<td>animation - display
<ul class="assert">
<li>Check that setting 'display' property to 'none' terminates running animation applied to the element, and updating 'display' property to a value other than 'none' will start the animation.</li>
</ul>
</td>
</tr>
<tr id="animations-001-3" class="ahem animated">
<td>
<a href="animations-001.htm">animations-001</a></td>

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

File diff suppressed because it is too large Load diff

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

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