mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab
This commit is contained in:
James Graham
parent
1a81b18b9f
commit
2c9faf5363
91915 changed files with 5979820 additions and 0 deletions
|
|
@ -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="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-timing-function" rel="help">
|
||||
<meta content="animated" name="flags">
|
||||
<meta content="When animation-delay is set to a negative time offset,
|
||||
animation will execute as soon as it is applied
|
||||
but act as if the animation had started the specified
|
||||
time in the past." name="assert">
|
||||
<style>
|
||||
div {
|
||||
animation-timing-function: linear;
|
||||
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#test-negative-delay {
|
||||
animation-name: test-negative-delay;
|
||||
animation-duration: 10s;
|
||||
animation-delay: -5s;
|
||||
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
#ref-no-delay {
|
||||
animation-name: ref-no-delay;
|
||||
animation-duration: 5s;
|
||||
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
@keyframes test-negative-delay {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ref-no-delay {
|
||||
from {
|
||||
left: 75px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>
|
||||
Test passes if there are a filled blue square with 'Filler Text'
|
||||
and a filled yellow square with 'Filler Text', and if the two squares
|
||||
start moving together from right to left as soon as the page loads.
|
||||
</p>
|
||||
<div id="test-negative-delay">Filler Text</div>
|
||||
<div id="ref-no-delay">Filler Text</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
|
||||
<meta content="animated" name="flags">
|
||||
<meta content="When animation-delay is set to a positive time offset,
|
||||
animation will delay execution by the specified offset value." name="assert">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 5s;
|
||||
animation-delay: 5s;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left after about 5 seconds
|
||||
from the time the page is loaded.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
|
||||
<meta content="animated" name="flags">
|
||||
<meta content="When animation-delay is set to 0s (zero seconds),
|
||||
animation will execute as soon as it is applied." name="assert">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-delay: 0s;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left as soon as the page loads.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
|
||||
<meta content="animated" name="flags">
|
||||
<meta content="Check that animation-delay applies to the ::after pseudo element." name="assert">
|
||||
<style>
|
||||
div::after {
|
||||
animation-name: sample;
|
||||
animation-duration: 5s;
|
||||
animation-delay: 5s;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left after about 5 seconds
|
||||
from the time the page is loaded.
|
||||
</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
|
||||
<meta content="animated" name="flags">
|
||||
<meta content="Check that animation-delay applies to the ::before pseudo element." name="assert">
|
||||
<style>
|
||||
div::before {
|
||||
animation-name: sample;
|
||||
animation-duration: 5s;
|
||||
animation-delay: 5s;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left after about 5 seconds
|
||||
from the time the page is loaded.
|
||||
</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count" rel="help">
|
||||
<meta content="animated" name="flags">
|
||||
<meta content="When animation-direction is set to alternate,
|
||||
animation cycle will iteration that are
|
||||
odd counts are played in the normal direction,
|
||||
and the animation cycle iterations that are
|
||||
even counts are played in a reverse direction." name="assert">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-direction: alternate;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left on the page load,
|
||||
and then moves from left to right. This cycle gets repeated.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count" rel="help">
|
||||
<meta content="animated" name="flags">
|
||||
<meta content="When animation-direction is set to normal,
|
||||
all iterations of animation are played as specified." name="assert">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-direction: normal;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>
|
||||
Test passes if there is a filled color square with 'Filler Text',
|
||||
which starts moving from right to left, then back to right and moves from
|
||||
right to left again. This cycle gets repeated.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count" rel="help">
|
||||
<meta content="animated" name="flags">
|
||||
<meta content="When animation-direction is set to alternate-reverse,
|
||||
the animation cycle iterations that are
|
||||
odd counts are played in the normal direction,
|
||||
and the animation cycle iterations that are
|
||||
even counts are played in a reverse direction." name="assert">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-direction: alternate-reverse;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 0px;
|
||||
}
|
||||
to {
|
||||
left: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left on the page load,
|
||||
and then moves from left to right. This cycle gets repeated.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count" rel="help">
|
||||
<meta content="animated" name="flags">
|
||||
<meta content="When animation-direction is set to reverse,
|
||||
all iterations of the animation are played in the reverse direction
|
||||
from the way they were specified." name="assert">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-direction: reverse;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>
|
||||
Test passes if there is a filled color square with 'Filler Text',
|
||||
which starts moving from left to right, then back to left again and moves from
|
||||
left to right. This cycle gets repeated.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count" rel="help">
|
||||
<meta content="animated" name="flags">
|
||||
<meta content="Check that animation-direction applies to the ::after pseudo element." name="assert">
|
||||
<style>
|
||||
div::after {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-direction: alternate;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left on the page load,
|
||||
and then moves from left to right. This cycle gets repeated.
|
||||
</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help">
|
||||
<link href="http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count" rel="help">
|
||||
<meta content="animated" name="flags">
|
||||
<meta content="Check that animation-direction applies to the ::before pseudo element" name="assert">
|
||||
<style>
|
||||
div::before {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-direction: alternate;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left on the page load,
|
||||
and then moves from left to right. This cycle gets repeated.
|
||||
</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations : animation-duration value is set blank.</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-duration value is set blank; animation is not visible.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: ;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: ;
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: ;
|
||||
}
|
||||
.def {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
left: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
z-index: -1;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
Assertion: When animation-duration value is set blank; animation is not visible.
|
||||
</p>
|
||||
<p>
|
||||
<ul>
|
||||
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red should be visible on this page.</li>
|
||||
<li>FAIL if blue box is animated/moved or if red is visible.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
<div class="def">
|
||||
Reference
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations : animation-duration has a finite value.</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-duration is set to a finite value/duration, animation takes specified time to complete one cycle.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: relative;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: 10s;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: 10s;
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: When animation-duration is set to a finite value/duration, animation takes specified time to complete one cycle.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below; starts moving from right to left upon page load and lasts for a span of 10seconds</li>
|
||||
<li>FAIL if the animation does not span for 10seconds.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations : animation-duration with negative value.</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="A negative value for animation-duration is treated as 0 (zero); then animation cycle is immediate (i.e. there will be no animation seen).">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: -20s;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: -20s;
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: -20s;
|
||||
}
|
||||
.def {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
left: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
z-index: -1;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: A negative value for animation-duration is treated as 0 (zero); then animation cycle is immediate (i.e. there will be no animation seen).
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red should be visible on this page.</li>
|
||||
<li>FAIL if any animation is seen with the blue box or if red is visible.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
<div class="def">
|
||||
Reference
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations : animation-duration value set to 0 (zero).</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen).">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: 0s;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: 0s;
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: 0s;
|
||||
}
|
||||
.def {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
left: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
z-index: -1;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
Assertion: When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen).
|
||||
</p>
|
||||
<p>
|
||||
<ul>
|
||||
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red should be visible on this page.</li>
|
||||
<li>FAIL if blue box is animated/moved or if red is visible.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
<div class="def">
|
||||
Reference
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations. animation-iteration-count is not set and testing for default value.</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: relative;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: 10s;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: 10s;
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and box starts to animate/move from right to left ONCE.</li>
|
||||
<li>FAIL if the box fails to animate to left or repeats animation more than once.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations. animation-iteration-count set to infinite.</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="animation-iteration-count set to infinite causes the animation to repeat forever.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: relative;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: 10s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: 10s;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: animation-iteration-count set to infinite causes the animation to repeat forever.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and repeatedly moves from right to left. Every time a cycle is finished, the box gets re-positioned to right and continues to move left.</li>
|
||||
<li>FAIL if the box fails to repeat animation cycles infinitely from right to left</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations. animation-iteration-count set to negative value.</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-iteration-count: -1;
|
||||
-webkit-animation-duration: 10s;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-iteration-count: -1;
|
||||
-moz-animation-duration: 10s;
|
||||
|
||||
animation-name: sample;
|
||||
animation-iteration-count: -1;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
.def {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
left: 0px;
|
||||
z-index: -1;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and NO movement/animation is seen. Also, RED color should NOT be seen anywhere on this page.</li>
|
||||
<li>FAIL if the box animates to left OR if RED color is seen anywhere on this page.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
<div class="def">
|
||||
Reference
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations. animation-iteration-count set to non-integer.</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Setting animation-iteration-count to non-integer leads animation to end part way.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
//padding: 0.2em 1em;
|
||||
//margin: 6em;
|
||||
position: relative;
|
||||
left: 0px;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-iteration-count: 3.1;
|
||||
-webkit-animation-duration: 10s;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-iteration-count: 3.1;
|
||||
-moz-animation-duration: 10s;
|
||||
|
||||
animation-name: sample;
|
||||
animation-iteration-count: 3.1;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
|
||||
.def {
|
||||
background-color: green;
|
||||
width: 250px;
|
||||
height: 10px;
|
||||
position: relative;
|
||||
left: 0px;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: Setting animation-iteration-count to non-integer leads animation to end part way.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if a blue colored Box with text "CSS3 Testing Content" animates from right to left along the green bar THRICE (for a span of 10 seconds each) and for the FOURTH time animation appears to break in middle and blue box immediately positions itself to left.</li>
|
||||
<li>FAIL if NO animation is seen OR if animation does not end part-way in its FOURth cycle.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
<div class="def">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations. animation-iteration-count is set to a finite value.</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-iteration-count is set to a finite value; animation will play for the specified number of times.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: relative;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: 10s;
|
||||
-webkit-animation-iteration-count: 2;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: 10s;
|
||||
-moz-animation-iteration-count: 2;
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: When animation-iteration-count is set to a finite integer value; that value is taken as the number of times that the animation has to repeat from beginning to the end.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and box starts to animate/move from right to left twice.</li>
|
||||
<li>FAIL if the animation is not as expected.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations. animation-iteration-count set to zero.</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-iteration-count is set to zero NO animation is seen.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-iteration-count: 0;
|
||||
-webkit-animation-duration: 10s;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-iteration-count: 0;
|
||||
-moz-animation-duration: 10s;
|
||||
|
||||
animation-name: sample;
|
||||
animation-iteration-count: 0;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
.def {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
left: 0px;
|
||||
z-index: -1;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: When animation-iteration-count is set to zero NO animation is seen.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and NO movement/animation is seen. Also, RED color should NOT be seen anywhere on this page.</li>
|
||||
<li>FAIL if the box animates to left OR if RED color is seen anywhere on this page.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
<div class="def">
|
||||
Reference
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS3 Animations: To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-events">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content='To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.'>
|
||||
<style type="text/css" media="screen">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
/*Added extra style information --- BEGIN modification*/
|
||||
color: Yellow;
|
||||
font-weight: bolder;
|
||||
font-size: xx-large;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
/*Added extra style information --- END modification*/
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 1em;
|
||||
position: relative;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: 10s;
|
||||
-webkit-animation-iteration-count: 2;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: 10s;
|
||||
-moz-animation-iteration-count: 2;
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
/* */
|
||||
var box_var;
|
||||
function init()
|
||||
{
|
||||
getvalues();
|
||||
}
|
||||
function getvalues()
|
||||
{
|
||||
box_var = document.getElementById("box" );
|
||||
box_var.addEventListener("webkitAnimationIteration" , start_f, true);
|
||||
box_var.addEventListener("animationiteration" , start_f, true);
|
||||
}
|
||||
function start_f()
|
||||
{
|
||||
/*This line of code has been commented to avoid automated result evaluation.
|
||||
//document.getElementById(" result" ).innerHTML = "TRUE";
|
||||
*/
|
||||
box_var.innerHTML = "2";
|
||||
}
|
||||
/* */
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if the box moves from Right to Left for a period of 10 seconds. It should contain a digit 1 for first animation. Content of box changes to 2 during second animation. Also the animation should stop after 2 cycles. </li>
|
||||
<li>FAIL if the output is not as expected. </li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc" id="box">
|
||||
1
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations : keyframes specified using percentages or from/to keywords on animation time line.</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#keyframes">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="To verify that keyframes set using percentages or from/to keywords on animation time line are in effect.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
background-color: blue;
|
||||
}
|
||||
30% {
|
||||
background-color: green;
|
||||
}
|
||||
65% {
|
||||
background-color: red;
|
||||
}
|
||||
to {
|
||||
background-color: blue;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
background-color: blue;
|
||||
}
|
||||
30% {
|
||||
background-color: green;
|
||||
}
|
||||
65% {
|
||||
background-color: red;
|
||||
}
|
||||
to {
|
||||
background-color: blue;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
background-color: blue;
|
||||
}
|
||||
30% {
|
||||
background-color: green;
|
||||
}
|
||||
65% {
|
||||
background-color: red;
|
||||
}
|
||||
to {
|
||||
background-color: blue;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: 10s;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: 10s;
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: To verify that keyframes set using percentages or from/to keywords on animation time line are in effect.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if the color of the box is blue initially on page load and gradually changes in the order: BLUE to GREEN to RED and back to BLUE in 10 seconds</li>
|
||||
<li>FAIL if the color of the box is NOT changing in the specified order within a span of 10 seconds.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations : animation-name set with no value</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="To verify that NO animation is seen when animation-name is set without any value.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
|
||||
-webkit-animation-name: ;
|
||||
-webkit-animation-duration: 10s;
|
||||
|
||||
-moz-animation-name: ;
|
||||
-moz-animation-duration: 10s;
|
||||
|
||||
animation-name: ;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
.def {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
left: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
z-index: -1;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: To verify that NO animation is seen when animation-name is set without any value.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if a blue colored box with text "CSS3 Testing Content" inside it appears below and box should not animate/move towards left. Also no red should be visible on this page.</li>
|
||||
<li>FAIL if box moves to left or some animation is observed or if red is visible.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
<div class="def">
|
||||
Reference
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations : animation-name set to valid keyframes rule name</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation; desired animation should be seen.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: relative;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: 10s;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: 10s;
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation; desired animation should be seen.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if a blue colored box with text "CSS3 Testing Content" inside it appears below and animates/moves towards left.</li>
|
||||
<li>FAIL if box fails to transcend towards left.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations : animation-name set to none</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="To verify that NO animation is seen when animation-name is set to none.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
left: 0px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: absolute;
|
||||
|
||||
-webkit-animation-name: none;
|
||||
-webkit-animation-duration: 10s;
|
||||
|
||||
-moz-animation-name: none;
|
||||
-moz-animation-duration: 10s;
|
||||
|
||||
animation-name: none;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
.def {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
left: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
z-index: -1;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: To verify that NO animation is seen when animation-name is set to none.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if a blue colored box with text "CSS3 Testing Content" inside it appears below and box should not animate/move towards left. Also no red should be visible on this page.</li>
|
||||
<li>FAIL if box moves to left or some animation is observed or if red is visible.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
<div class="def">
|
||||
Reference
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations : animation-name does not match any keyframe at-rule.</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="To verify: if animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
|
||||
-webkit-animation-name: sample1;
|
||||
-webkit-animation-duration: 10s;
|
||||
|
||||
-moz-animation-name: sample1;
|
||||
-moz-animation-duration: 10s;
|
||||
|
||||
animation-name: sample1;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
.def {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
left: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: To verify: if animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if a blue colored box with text "CSS3 Testing Content" inside it appears below and box should not animate/move towards left. Also no red should be visible on this page.</li>
|
||||
<li>FAIL if box animates or moves towards left or if red is visible.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
<div class="def">
|
||||
Reference
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations : animation-play-state set to paused </title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-play-state">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="A paused animation will display the current value of the animation in a STATIC state (no animation).">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: 10s;
|
||||
-webkit-animation-play-state: paused;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: 10s;
|
||||
-moz-animation-play-state: paused;
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.def {
|
||||
position: absolute;
|
||||
left: 150px;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
z-index: -1;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: A paused animation will display the current value of the animation in a STATIC state (no animation).
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red color should be visible on this page.</li>
|
||||
<li>FAIL if the box is animated or if red color is visible.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
<div class="def">
|
||||
Reference
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations : animation-play-state set to playing </title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-play-state">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-play-state is set to running; animation continues to render.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: relative;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: 10s;
|
||||
-webkit-animation-play-state: running;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: 10s;
|
||||
-moz-animation-play-state: running;
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-play-state: running;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: When animation-play-state is set to running; animation continues to render.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if a blue colored box with text "CSS3 Testing Content" appears below, which moves from right to left (in 10seconds) upon page load.</li>
|
||||
<li>FAIL if the animation is not as expected.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations : animation-timing-function set to cubic-bezier with parameters (0,0,1,1). </title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="To verify that: when animation-timing-function is set to cubic-bezier with parameters (0,0,1,1) animation is rendered with constant speed from begining till end.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: relative;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: 10s;
|
||||
-webkit-animation-timing-function: cubic-bezier(0,0,1,1);
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: 10s;
|
||||
-moz-animation-timing-function: cubic-bezier(0,0,1,1);
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: cubic-bezier(0,0,1,1);
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: To verify that: when animation-timing-function is set to cubic-bezier with parameters (0,0,1,1) (this is same as setting time function to linear); animation is rendered with constant speed from begining till end.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left with constant speed</li>
|
||||
<li>FAIL if box is moved with accelerated/decelerated speed OR fails to move left(no animation).</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations : animation-timing-function set to ease. </title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="To verify that: when animation-timing-function is set to ease; animation starts slow, gains acceleration in the middle and again slows down at the end.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: relative;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: 10s;
|
||||
-webkit-animation-timing-function: ease;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: 10s;
|
||||
-moz-animation-timing-function: ease;
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: To verify that: when animation-timing-function is set to ease; animation starts slow, gains acceleration in the middle and again slows down at the end.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left; initially the animation starts slow, gains acceleration in the middle and again slows down at the end.</li>
|
||||
<li>FAIL if the animation is not as expected.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations : animation-timing-function set to ease-in. </title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: relative;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: 10s;
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: 10s;
|
||||
-moz-animation-timing-function: ease-in;
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left; animation starts slow and gains acceleration as time progresses.</li>
|
||||
<li>FAIL if the animation is not as expected.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations : animation-timing-function set to ease-in-out. </title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="To verify that: when animation-timing-function is set to ease-in-out; animation starts slow, gains acceleration in the middle and again slows down at the end.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: relative;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: 10s;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: 10s;
|
||||
-moz-animation-timing-function: ease-in-out;
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: To verify that: when animation-timing-function is set to ease-in-out; animation starts slow, gains acceleration in the middle and again slows down at the end.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left; initially the animation starts slow, gains acceleration in the middle and again slows down at the end.</li>
|
||||
<li>FAIL if the animation is not as expected.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations : animation-timing-function set to ease-out. </title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="To verify that: when animation-timing-function is set to ease-out; animation starts with higher(than the normal) speed and relatively slows down as time progresses.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: relative;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: 10s;
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: 10s;
|
||||
-moz-animation-timing-function: ease-out;
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: To verify that: when animation-timing-function is set to ease-out; animation starts with higher(than the normal) speed and relatively slows down as time progresses.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left, animation starts and relatively slows down as time progresses.</li>
|
||||
<li>FAIL if box is moved with constant/accelerated speed OR fails to move left (no animation).</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Tests: CSS Animations : animation-timing-function set to linear. </title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end.">
|
||||
<style type="text/css">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
margin: 6em;
|
||||
position: relative;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
-webkit-animation-duration: 10s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
-moz-animation-duration: 10s;
|
||||
-moz-animation-timing-function: linear;
|
||||
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if blue box with text "CSS3 Testing Content" moves from right to left with constant speed</li>
|
||||
<li>FAIL if box is moved with accelerated/decelerated speed OR fails to move left(no animation).</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc">
|
||||
CSS3 Testing Content
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Regions: animating content flowed into a region</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
|
||||
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#transform-functions" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
||||
<meta content="Test checks that content that has an animated 3D transform renders and animates when flowed in a region." name="assert">
|
||||
<meta content="ahem animated" name="flags">
|
||||
<!-- TODO Determine if it's OK for this test to be a ref-test or it should only be a manual one. -->
|
||||
<link href="reference/animations-001-ref.htm" rel="match">
|
||||
<link href="support/animations.css" rel="stylesheet">
|
||||
<style>
|
||||
.transformed {
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
.flow {
|
||||
flow-into: f;
|
||||
color: green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.region {
|
||||
flow-from: f;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.region p {
|
||||
background-color: red;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square rotating once on top of a static blue square and no red.</p>
|
||||
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
||||
<div class="transformed flow rotate once">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS3 Animations: To verify animationstart and animationend events are handled. </title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-events">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#timing-functions">
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com/">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content='To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.'>
|
||||
<style type="text/css" media="screen">
|
||||
/* */
|
||||
@-webkit-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.abc {
|
||||
background-color: blue;
|
||||
/*Added extra style information --- BEGIN modification*/
|
||||
color: Yellow;
|
||||
font-weight: bolder;
|
||||
font-size: xx-large;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
/*Added extra style information --- END modification*/
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0.2em 1em;
|
||||
//margin: 6em;
|
||||
position: relative;
|
||||
|
||||
-webkit-animation-name: sample;
|
||||
//-webkit-animation-delay: 0.1s;
|
||||
-webkit-animation-duration: 10s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
|
||||
-moz-animation-name: sample;
|
||||
//-moz-animation-delay: 0.1s;
|
||||
-moz-animation-duration: 10s;
|
||||
-moz-animation-timing-function: linear;
|
||||
|
||||
animation-name: sample;
|
||||
//animation-delay: 0.1s;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
/* */
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
/* */
|
||||
var box_var;
|
||||
function init()
|
||||
{
|
||||
getvalues();
|
||||
}
|
||||
function getvalues()
|
||||
{
|
||||
box_var=document.getElementById('box');
|
||||
box_var.addEventListener('webkitAnimationStart',start_f,true);
|
||||
box_var.addEventListener('webkitAnimationEnd',end_f,true);
|
||||
box_var.addEventListener('animationstart',start_f,true);
|
||||
box_var.addEventListener('animationend',end_f,true);
|
||||
<!--box_var.addEventListener('webkitAnimationEnd',start_f,true);-->
|
||||
}
|
||||
function start_f()
|
||||
{
|
||||
/*This line of code has been commented to avoid automated result evaluation.
|
||||
*document.getElementById('result').innerHTML="TRUE";
|
||||
*/
|
||||
document.getElementById('box').innerHTML = "START";
|
||||
}
|
||||
function end_f()
|
||||
{
|
||||
/*This line of code has been commented to avoid automated result evaluation.
|
||||
*document.getElementById('result1').innerHTML="TRUE";
|
||||
*/
|
||||
document.getElementById('box').innerHTML = "STOP";
|
||||
}
|
||||
/* */
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<p id="testdetails">
|
||||
<p>
|
||||
Assertion: To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if blue box is rendered with text START as the animation begins and changes to STOP when animation is finished. </li>
|
||||
<li>FAIL if text "FAIL" is displayed OR START is NOT rendered when animation begins OR STOP is NOT rendered when animation ends.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="abc" id="box">
|
||||
FAIL
|
||||
</div>
|
||||
<!-- below markup is removed to avoid inline display of results.
|
||||
* <p><b>Animation Event Start Value:</b> <span id="result"></span></p>
|
||||
* <p><b>Animation Event End Value:</b> <span id="result1"></span></p>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
42
tests/wpt/css-tests/css-animations-1_dev/html/chapter-1.htm
Normal file
42
tests/wpt/css-tests/css-animations-1_dev/html/chapter-1.htm
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Introduction - CSS Animations Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
|
||||
<h2>Introduction (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#introduction">1 Introduction</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s1.#defined-animations">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
tests/wpt/css-tests/css-animations-1_dev/html/chapter-2.htm
Normal file
39
tests/wpt/css-tests/css-animations-1_dev/html/chapter-2.htm
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Values - CSS Animations Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
|
||||
<h2>Values (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s2">
|
||||
<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 -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
204
tests/wpt/css-tests/css-animations-1_dev/html/chapter-3.htm
Normal file
204
tests/wpt/css-tests/css-animations-1_dev/html/chapter-3.htm
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Animations - CSS Animations Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
|
||||
<h2>Animations (15 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s3">
|
||||
<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 -->
|
||||
<tr id="animations-001-3" class="ahem animated">
|
||||
<td>
|
||||
<a href="animations-001.htm">animations-001</a></td>
|
||||
<td><a href="reference/animations-001-ref.htm">=</a> </td>
|
||||
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="animated" title="Animated test">Animated</abbr></td>
|
||||
<td>CSS Regions: animating content flowed into a region
|
||||
<ul class="assert">
|
||||
<li>Test checks that content that has an animated 3D transform renders and animates when flowed in a region.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-filters-animation-blur-3" class="">
|
||||
<td>
|
||||
<a href="css-filters-animation-blur.htm">css-filters-animation-blur</a></td>
|
||||
<td><a href="reference/css-filters-animation-blur-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Filters Animation: Blur
|
||||
<ul class="assert">
|
||||
<li>The blue square should be 10px blurred</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-filters-animation-brightness-3" class="">
|
||||
<td>
|
||||
<a href="css-filters-animation-brightness.htm">css-filters-animation-brightness</a></td>
|
||||
<td><a href="reference/css-filters-animation-brightness-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Filters Animation: Brightness
|
||||
<ul class="assert">
|
||||
<li>The blue square should be dark blue</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-filters-animation-combined-001-3" class="">
|
||||
<td>
|
||||
<a href="css-filters-animation-combined-001.htm">css-filters-animation-combined-001</a></td>
|
||||
<td><a href="reference/css-filters-animation-combined-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Filters Animation: Combined filters 001
|
||||
<ul class="assert">
|
||||
<li>The black square should be a gray square 10px blurred</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-filters-animation-contrast-3" class="">
|
||||
<td>
|
||||
<a href="css-filters-animation-contrast.htm">css-filters-animation-contrast</a></td>
|
||||
<td><a href="reference/css-filters-animation-contrast-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Filters Animation: Contrast
|
||||
<ul class="assert">
|
||||
<li>The black square should be gray</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-filters-animation-drop-shadow-3" class="">
|
||||
<td>
|
||||
<a href="css-filters-animation-drop-shadow.htm">css-filters-animation-drop-shadow</a></td>
|
||||
<td><a href="reference/css-filters-animation-drop-shadow-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Filters Animation: Drop Shadow
|
||||
<ul class="assert">
|
||||
<li>The blue square should be in top of a gray one</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-filters-animation-grayscale-3" class="">
|
||||
<td>
|
||||
<a href="css-filters-animation-grayscale.htm">css-filters-animation-grayscale</a></td>
|
||||
<td><a href="reference/css-filters-animation-grayscale-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Filters Animation: Grayscale
|
||||
<ul class="assert">
|
||||
<li>The blue square should be half-grayscaled</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-filters-animation-hue-rotate-3" class="">
|
||||
<td>
|
||||
<a href="css-filters-animation-hue-rotate.htm">css-filters-animation-hue-rotate</a></td>
|
||||
<td><a href="reference/css-filters-animation-hue-rotate-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Filters Animation: Hue-rotate
|
||||
<ul class="assert">
|
||||
<li>The blue square should be violet</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-filters-animation-invert-3" class="">
|
||||
<td>
|
||||
<a href="css-filters-animation-invert.htm">css-filters-animation-invert</a></td>
|
||||
<td><a href="reference/css-filters-animation-invert-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Filters Animation: Invert
|
||||
<ul class="assert">
|
||||
<li>The black square should be gray</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-filters-animation-opacity-3" class="">
|
||||
<td>
|
||||
<a href="css-filters-animation-opacity.htm">css-filters-animation-opacity</a></td>
|
||||
<td><a href="reference/css-filters-animation-opacity-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Filters Animation: Opacity
|
||||
<ul class="assert">
|
||||
<li>The black square should be gray</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-filters-animation-saturate-3" class="">
|
||||
<td>
|
||||
<a href="css-filters-animation-saturate.htm">css-filters-animation-saturate</a></td>
|
||||
<td><a href="reference/css-filters-animation-saturate-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Filters Animation: Saturate
|
||||
<ul class="assert">
|
||||
<li>The blue square should be light-blue</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-filters-animation-sepia-3" class="">
|
||||
<td>
|
||||
<a href="css-filters-animation-sepia.htm">css-filters-animation-sepia</a></td>
|
||||
<td><a href="reference/css-filters-animation-sepia-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Filters Animation: Sepia
|
||||
<ul class="assert">
|
||||
<li>The blue square should be half-sepia</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh-interpolate-pct-3" class="">
|
||||
<td>
|
||||
<a href="vh-interpolate-pct.htm">vh-interpolate-pct</a></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Viewport units are interpolated correctly
|
||||
<ul class="assert">
|
||||
<li>The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh-interpolate-px-3" class="">
|
||||
<td>
|
||||
<a href="vh-interpolate-px.htm">vh-interpolate-px</a></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Viewport units are interpolated correctly
|
||||
<ul class="assert">
|
||||
<li>The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="vh-interpolate-vh-3" class="">
|
||||
<td>
|
||||
<a href="vh-interpolate-vh.htm">vh-interpolate-vh</a></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Viewport units are interpolated correctly
|
||||
<ul class="assert">
|
||||
<li>The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1342
tests/wpt/css-tests/css-animations-1_dev/html/chapter-4.htm
Normal file
1342
tests/wpt/css-tests/css-animations-1_dev/html/chapter-4.htm
Normal file
File diff suppressed because it is too large
Load diff
131
tests/wpt/css-tests/css-animations-1_dev/html/chapter-5.htm
Normal file
131
tests/wpt/css-tests/css-animations-1_dev/html/chapter-5.htm
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Animation Events - CSS Animations Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
|
||||
<h2>Animation Events (4 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s5">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#animation-events">5 Animation Events</a></th></tr>
|
||||
<!-- 2 tests -->
|
||||
<tr id="animation-iteration-event-5" class="animated">
|
||||
<td>
|
||||
<a href="animation-iteration-event.htm">animation-iteration-event</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
||||
<td>CSS3 Animations: To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.
|
||||
<ul class="assert">
|
||||
<li>To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="animationstart-and-animationend-events-5" class="animated">
|
||||
<td>
|
||||
<a href="animationstart-and-animationend-events.htm">animationstart-and-animationend-events</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="animated" title="Animated test">Animated</abbr></td>
|
||||
<td>CSS3 Animations: To verify animationstart and animationend events are handled.
|
||||
<ul class="assert">
|
||||
<li>To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#AnimationEvent-interface">5.1 Interface AnimationEvent</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.#animationevent">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5.1.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#AnimationEvent-IDL">5.1.1 IDL Definition</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.1.#AnimationEventInit">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5.1.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#AnimationEvent-attributes">5.1.2 Attributes</a></th></tr>
|
||||
<!-- 2 tests -->
|
||||
<tr id="pseudoelement-001-5.1.2" class="primary script">
|
||||
<td><strong>
|
||||
<a href="pseudoElement-001.htm">pseudoelement-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>pseudoElement attribute of Event - return the name or empty string
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="pseudoelement-002-5.1.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="pseudoElement-002.htm">pseudoelement-002</a></strong></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>the target of the event is that pseudo-element's corresponding element
|
||||
<ul class="assert">
|
||||
<li>The target of the event is that pseudo-element's corresponding element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.1.2.#AnimationEvent-animationName">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.2.#AnimationEvent-constructor">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.2.#AnimationEvent-elapsedTime">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.2.#AnimationEvent-pseudoElement">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#AnimationEvent-types">5.2 Types of AnimationEvent</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.2.#animationend">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.2.#animationiteration">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.2.#animationstart">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
132
tests/wpt/css-tests/css-animations-1_dev/html/chapter-6.htm
Normal file
132
tests/wpt/css-tests/css-animations-1_dev/html/chapter-6.htm
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>DOM Interfaces - CSS Animations Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
|
||||
<h2>DOM Interfaces (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s6">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#dom-interfaces">6 DOM Interfaces</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#CSSRule-interface">6.1 Interface CSSRule</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#cssrule">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.1.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#CSSRule-IDL">6.1.1 IDL Definition</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#CSSKeyframeRule-interface">6.2 Interface CSSKeyframeRule</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2.#csskeyframerule">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.2.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#CSSKeyframeRule-IDL">6.2.1 IDL Definition</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.2.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#CSSKeyframeRule-attributes">6.2.2 Attributes</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2.2.#CSSKeyframeRule-keyText">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2.2.#CSSKeyframeRule-style">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#CSSKeyframesRule-interface">6.3 Interface CSSKeyframesRule</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.3.#csskeyframesrule">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.3.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.3.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#CSSKeyframesRule-IDL">6.3.1 IDL Definition</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.3.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.3.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#CSSKeyframesRule-attributes">6.3.2 Attributes</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.3.2.#CSSKeyframesRule-name">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.3.2.#CSSKeyframesRules-cssRules">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.3.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.3.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#CSSKeyframesRule-appendRule">6.3.3 The appendRule method</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.3.3.#appendrule">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.3.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.3.4">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#CSSKeyframesRules-deleteRule">6.3.4 The deleteRule method</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.3.4.#deleterule">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.3.5">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.3.5">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#CSSKeyframesRule-findRule">6.3.5 The findRule method</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
tests/wpt/css-tests/css-animations-1_dev/html/chapter-7.htm
Normal file
39
tests/wpt/css-tests/css-animations-1_dev/html/chapter-7.htm
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Acknowledgments - CSS Animations Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
|
||||
<h2>Acknowledgments (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s7">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#acknowledgments">7 Acknowledgments</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
78
tests/wpt/css-tests/css-animations-1_dev/html/chapter-8.htm
Normal file
78
tests/wpt/css-tests/css-animations-1_dev/html/chapter-8.htm
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>References - CSS Animations Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Animations Module Level 1 CR Test Suite</h1>
|
||||
<h2>References (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s8">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-animations/#references">8 References</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.#CSS21">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.#CSS3-TRANSITIONS">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.#CSS3VAL">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.#WCAG20">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.#normative-references">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.#other-references">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#abstract">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#contents">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#editors-list">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#longstatus-date">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#property-index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#status">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Blur</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#FilterProperty" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
||||
<link href="reference/css-filters-animation-blur-ref.htm" rel="match">
|
||||
<meta content="The blue square should be 10px blurred" name="assert">
|
||||
<style type="text/css">
|
||||
@keyframes animate {
|
||||
0% {
|
||||
filter: blur(20px);
|
||||
}
|
||||
100% {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
animation-name: animate;
|
||||
animation-play-state: paused;
|
||||
animation-delay: -2s;
|
||||
animation-duration: 4s;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a blurred rectangle.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Brightness</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#FilterProperty" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
||||
<link href="reference/css-filters-animation-brightness-ref.htm" rel="match">
|
||||
<meta content="The blue square should be dark blue" name="assert">
|
||||
<style type="text/css">
|
||||
@keyframes animate {
|
||||
0% {
|
||||
filter: brightness(0%);
|
||||
}
|
||||
100% {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
animation-name: animate;
|
||||
animation-play-state: paused;
|
||||
animation-delay: -2s;
|
||||
animation-duration: 4s;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a dark blue rectangle. Neither black nor blue.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Combined filters 001</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#FilterProperty" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
||||
<link href="reference/css-filters-animation-combined-001-ref.htm" rel="match">
|
||||
<meta content="The black square should be a gray square 10px blurred" name="assert">
|
||||
<style type="text/css">
|
||||
@keyframes animate {
|
||||
0% {
|
||||
filter:
|
||||
blur(20px)
|
||||
brightness(0%)
|
||||
sepia(100%)
|
||||
grayscale(100%)
|
||||
saturate(0%)
|
||||
hue-rotate(90deg)
|
||||
invert(100%)
|
||||
opacity(100%)
|
||||
}
|
||||
100% {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: black;
|
||||
animation-name: animate;
|
||||
animation-play-state: paused;
|
||||
animation-delay: -2s;
|
||||
animation-duration: 4s;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a gray blurred rectangle.</p>
|
||||
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Contrast</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#FilterProperty" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
||||
<link href="reference/css-filters-animation-contrast-ref.htm" rel="match">
|
||||
<meta content="The black square should be gray" name="assert">
|
||||
<style type="text/css">
|
||||
@keyframes animate {
|
||||
0% {
|
||||
filter: contrast(0%);
|
||||
}
|
||||
100% {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: black;
|
||||
animation-name: animate;
|
||||
animation-play-state: paused;
|
||||
animation-delay: -2s;
|
||||
animation-duration: 4s;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a gray rectangle. Neither black nor white.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Drop Shadow</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#FilterProperty" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-drop-shadow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
||||
<link href="reference/css-filters-animation-drop-shadow-ref.htm" rel="match">
|
||||
<meta content="The blue square should be in top of a gray one" name="assert">
|
||||
<style type="text/css">
|
||||
@keyframes animate {
|
||||
0% {
|
||||
filter: drop-shadow(30px 30px 0px black);
|
||||
}
|
||||
100% {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
animation-name: animate;
|
||||
animation-play-state: paused;
|
||||
animation-delay: -2s;
|
||||
animation-duration: 4s;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a blue rectangle in top of a gray one.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Grayscale</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#FilterProperty" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
||||
<link href="reference/css-filters-animation-grayscale-ref.htm" rel="match">
|
||||
<meta content="The blue square should be half-grayscaled" name="assert">
|
||||
<style type="text/css">
|
||||
@keyframes animate {
|
||||
0% {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
100% {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
animation-name: animate;
|
||||
animation-play-state: paused;
|
||||
animation-delay: -2s;
|
||||
animation-duration: 4s;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a dark blue rectangle.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Hue-rotate</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#FilterProperty" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
||||
<link href="reference/css-filters-animation-hue-rotate-ref.htm" rel="match">
|
||||
<meta content="The blue square should be violet" name="assert">
|
||||
<style type="text/css">
|
||||
@keyframes animate {
|
||||
0% {
|
||||
filter: hue-rotate(90deg);
|
||||
}
|
||||
100% {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
animation-name: animate;
|
||||
animation-play-state: paused;
|
||||
animation-delay: -1s;
|
||||
animation-duration: 4s;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a violet rectangle. Neither red nor blue.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Invert</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#FilterProperty" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
||||
<link href="reference/css-filters-animation-invert-ref.htm" rel="match">
|
||||
<meta content="The black square should be gray" name="assert">
|
||||
<style type="text/css">
|
||||
@keyframes animate {
|
||||
0% {
|
||||
filter: invert(100%);
|
||||
}
|
||||
100% {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: black;
|
||||
animation-name: animate;
|
||||
animation-play-state: paused;
|
||||
animation-delay: -2s;
|
||||
animation-duration: 4s;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a gray rectangle. Neither black nor white.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Opacity</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#FilterProperty" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
||||
<link href="reference/css-filters-animation-opacity-ref.htm" rel="match">
|
||||
<meta content="The black square should be gray" name="assert">
|
||||
<style type="text/css">
|
||||
@keyframes animate {
|
||||
0% {
|
||||
filter: opacity(0%);
|
||||
}
|
||||
100% {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: black;
|
||||
animation-name: animate;
|
||||
animation-play-state: paused;
|
||||
animation-delay: -2s;
|
||||
animation-duration: 4s;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a gray rectangle. Neither black nor white.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Saturate</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#FilterProperty" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
||||
<link href="reference/css-filters-animation-saturate-ref.htm" rel="match">
|
||||
<meta content="The blue square should be light-blue" name="assert">
|
||||
<style type="text/css">
|
||||
@keyframes animate {
|
||||
0% {
|
||||
filter: saturate(5000%);
|
||||
}
|
||||
100% {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #f4fbff;
|
||||
animation-name: animate;
|
||||
animation-play-state: paused;
|
||||
animation-delay: -2s;
|
||||
animation-duration: 4s;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a light-blue rectangle. Neither cyan nor white.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Sepia</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#FilterProperty" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
||||
<link href="reference/css-filters-animation-sepia-ref.htm" rel="match">
|
||||
<meta content="The blue square should be half-sepia" name="assert">
|
||||
<style type="text/css">
|
||||
@keyframes animate {
|
||||
0% {
|
||||
filter: sepia(100%);
|
||||
}
|
||||
100% {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
animation-name: animate;
|
||||
animation-play-state: paused;
|
||||
animation-delay: -2s;
|
||||
animation-duration: 4s;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a dark blue rectangle.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS3 Animations Test: pseudoElement attribute of Event - return the name or empty string</title>
|
||||
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||
<link href="mailto:jieqiongx.cui@intel.com" rel="author" title="Jieqiong Cui">
|
||||
<link href="http://www.w3.org/TR/css3-animations/#AnimationEvent-attributes" rel="help" title="5.1.2. Attributes">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.test {
|
||||
animation-duration: 10s;
|
||||
animation-name: sample;
|
||||
animation-timing-function: linear;
|
||||
background-color: blue;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
#testDiv2::after {
|
||||
content: "pseudoElement";
|
||||
}
|
||||
</style>
|
||||
</head><body><div id="log"></div>
|
||||
<div id="testDiv1" class="test"></div>
|
||||
<div id="testDiv2" class="test"></div>
|
||||
<script>
|
||||
var t1 = async_test("Check if the pseudoElement attribute returns the empty string when the animation runs on an element");
|
||||
var t2 = async_test("Check if the pseudoElement attribute returns the name (beginning with two colons) of the CSS pseudo-element when the animation runs");
|
||||
var testDiv1 = document.getElementById('testDiv1');
|
||||
var testDiv2 = document.getElementById('testDiv2');
|
||||
|
||||
testDiv1.addEventListener('animationstart', function(event) {
|
||||
t1.step(function() {
|
||||
assert_equals(event.pseudoElement, "", "the pseudoElement value");
|
||||
});
|
||||
t1.done();
|
||||
}, false);
|
||||
|
||||
testDiv2.addEventListener('animationstart', function(event) {
|
||||
t2.step(function() {
|
||||
assert_equals(event.pseudoElement, "::after", "the pseudoElement value");
|
||||
});
|
||||
t2.done();
|
||||
}, false);
|
||||
</script>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS3 Animations Test: the target of the event is that pseudo-element's corresponding element</title>
|
||||
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||
<link href="mailto:jieqiongx.cui@intel.com" rel="author" title="Jieqiong Cui">
|
||||
<link href="http://www.w3.org/TR/css3-animations/#AnimationEvent-attributes" rel="help" title="5.1.2. Attributes">
|
||||
<meta content="" name="flags">
|
||||
<meta content="The target of the event is that pseudo-element's corresponding element." name="assert">
|
||||
<style>
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
#testDiv {
|
||||
animation-duration: 5s;
|
||||
animation-name: sample;
|
||||
animation-timing-function: linear;
|
||||
position: relative;
|
||||
}
|
||||
#testDiv::before {
|
||||
content: "<";
|
||||
}
|
||||
#testDiv::after {
|
||||
content: ">";
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if the '<pseudoElement>' moves from right to left one time.</p>
|
||||
<div id="testDiv">pseudoElement</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
<!DOCTYPE html>
|
||||
<html style="background: green"><head></head><body></body></html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
|
||||
<link href="../support/animations.css" rel="stylesheet">
|
||||
<style>
|
||||
.transformed {
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
.flow {
|
||||
color: green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a rotating green square on top of a static blue square and no red.</p>
|
||||
|
||||
<div class="region">
|
||||
<div class="transformed flow rotate once">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Blur Reference</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<style type="text/css">
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
filter: blur(10px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a blurred rectangle.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Brightness Reference</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<style type="text/css">
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
filter: brightness(50%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a dark blue rectangle. Neither black nor blue.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Combined filters 001 Reference</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<style type="text/css">
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: black;
|
||||
filter:
|
||||
blur(10px)
|
||||
brightness(50%)
|
||||
sepia(50%)
|
||||
grayscale(50%)
|
||||
saturate(50%)
|
||||
hue-rotate(45deg)
|
||||
invert(50%)
|
||||
opacity(50%)
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a gray blurred rectangle.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Contrast Reference</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<style type="text/css">
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: black;
|
||||
filter: contrast(50%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a gray rectangle. Neither black nor white.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Drop Shadow Reference</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<style type="text/css">
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
filter: drop-shadow(15px 15px 0px gray);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a blue rectangle in top of a gray one.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Blur Reference</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<style type="text/css">
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
filter: grayscale(50%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a dark blue rectangle.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Hue-rotate Reference</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<style type="text/css">
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
filter: hue-rotate(45deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a violet rectangle. Neither red nor blue.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Invert Reference</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<style type="text/css">
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: black;
|
||||
filter: invert(50%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a gray rectangle. Neither black nor white.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Opacity Reference</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<style type="text/css">
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: black;
|
||||
filter: opacity(50%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a gray rectangle. Neither black nor white.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Saturate Reference</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<style type="text/css">
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #f4fbff;
|
||||
filter: saturate(2500%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a light-blue rectangle. Neither cyan nor white.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Filters Animation: Sepia Reference</title>
|
||||
<link href="mailto:takeshimiya@gmail.com" rel="author" title="Gunther Brunner">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<style type="text/css">
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
filter: sepia(50%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a dark blue rectangle.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 224 B |
Binary file not shown.
|
After Width: | Height: | Size: 218 B |
Binary file not shown.
|
After Width: | Height: | Size: 217 B |
|
|
@ -0,0 +1,29 @@
|
|||
CSS Global Support Directory
|
||||
============================
|
||||
|
||||
This directory contains common support files (such as images and external
|
||||
style sheets). These are sync'ed into the support directories of all our
|
||||
test suites. If you have test-suite-specific support files, please add
|
||||
them to the appropriate test-suite-specific support/ directory.
|
||||
|
||||
If you add to a support/ directory, please run the tools/supportprop.py
|
||||
script from the top of the repository to cascade support files into the
|
||||
lower-level support directories.
|
||||
|
||||
Description of the Common Support File Collection
|
||||
-------------------------------------------------
|
||||
|
||||
The 1x1-* images are all exactly one pixel.
|
||||
|
||||
The swatch-* images all use 15x15 cells.
|
||||
|
||||
The square-* images all use 15x15 cells with one pixel borders.
|
||||
|
||||
The pattern-* images use cells of various sizes:
|
||||
|
||||
pattern-gg-gr.png 20x20
|
||||
pattern-grg-rgr-grg.png 20x20
|
||||
pattern-rgr-grg-rgr.png 20x20
|
||||
pattern-tr.png 15x15
|
||||
pattern-grg-rrg-rgg.png 15x15
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
.a { color: green; }
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
/* Duration classes */
|
||||
|
||||
.once {
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
.infinite {
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.infinite-reversed {
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
.fast {
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
/* Animation declarations */
|
||||
|
||||
@keyframes pulse {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotateY(0);
|
||||
}
|
||||
to {
|
||||
transform: rotateY(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
to {
|
||||
transform: rotateZ(405deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slant {
|
||||
from {
|
||||
transform: rotate3d(0.23, 1.2, 0.83, 40deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate3d(1, 0.75, 1.3, 240deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation classes */
|
||||
|
||||
.pulse {
|
||||
animation-name: pulse;
|
||||
}
|
||||
|
||||
.spin {
|
||||
animation-name: spin;
|
||||
}
|
||||
|
||||
.rotate {
|
||||
animation-name: rotate;
|
||||
}
|
||||
|
||||
.slant {
|
||||
animation-name: slant;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
.b { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.c { color: red; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
.import { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.import { color: red; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 203 B |
Binary file not shown.
|
After Width: | Height: | Size: 222 B |
Binary file not shown.
|
After Width: | Height: | Size: 231 B |
Binary file not shown.
|
After Width: | Height: | Size: 223 B |
Binary file not shown.
|
After Width: | Height: | Size: 137 B |
Binary file not shown.
|
After Width: | Height: | Size: 691 B |
Binary file not shown.
|
After Width: | Height: | Size: 671 B |
Binary file not shown.
|
After Width: | Height: | Size: 760 B |
Binary file not shown.
|
After Width: | Height: | Size: 757 B |
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
Binary file not shown.
|
After Width: | Height: | Size: 78 B |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue