mirror of
https://github.com/servo/servo.git
synced 2025-08-09 07:25:35 +01:00
Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444
This commit is contained in:
Josh Matthews
Anthony Ramine
parent
25e8bf69e6
commit
665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
7
tests/wpt/web-platform-tests/css/css-animations-1/OWNERS
Normal file
7
tests/wpt/web-platform-tests/css/css-animations-1/OWNERS
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@plinss
|
||||
@chunywang
|
||||
@yunxiaoxie
|
||||
@grorg
|
||||
@dbaron
|
||||
@tabatkins
|
||||
@birtles
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Brian Birtles" href="mailto:bbirtles@mozilla.com">
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-delay - negative value</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-03-18 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-delay">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-timing-function">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" 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.">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-delay - positive value</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-03-18 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-delay">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-delay is set to a positive time offset,
|
||||
animation will delay execution by the specified offset value.">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-delay - 0s</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-03-18 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-delay">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-delay is set to 0s (zero seconds),
|
||||
animation will execute as soon as it is applied.">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-delay - ::after</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-03-18 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-delay">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-delay applies to the ::after pseudo element.">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-delay - ::before</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-03-18 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-delay">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-delay applies to the ::before pseudo element.">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-delay - initial keyword</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-delay">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#values">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-delay property accepts 'initial' keyword.">
|
||||
<style>
|
||||
#contatiner {
|
||||
animation-delay: 5s;
|
||||
}
|
||||
|
||||
#test {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-delay: initial;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left upon page load and lasts for a span of 10 seconds.
|
||||
</p>
|
||||
<div id="container">
|
||||
<div id="test">Filler Text</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-delay - inherit keyword</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-delay">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#values">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-delay property accepts 'inherit' keyword.">
|
||||
<style>
|
||||
#container {
|
||||
animation-delay: 5s;
|
||||
}
|
||||
|
||||
#test {
|
||||
animation-name: sample;
|
||||
animation-duration: 5s;
|
||||
animation-delay: inherit;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts staying left for about 5 seconds, and then moves
|
||||
from right to left and lasts for a span of 5 seconds.
|
||||
</p>
|
||||
<div id="container">
|
||||
<div id="test">Filler Text</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-delay - liveness</title>
|
||||
<link rel="author" title="Brian Birtles" href="mailto:bbirtles@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animations">
|
||||
<meta name="assert" content="Check that changes to animation-delay on a running
|
||||
animation are reflected in output">
|
||||
<meta name="flags" content="dom">
|
||||
<link rel="match" href="animation-common-ref.html">
|
||||
<style>
|
||||
@keyframes two-step {
|
||||
from { background-color: red }
|
||||
50% { background-color: green }
|
||||
to { background-color: green }
|
||||
}
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
<script>
|
||||
// Set up animation with no delay
|
||||
var div = document.querySelector('div');
|
||||
div.style.animation = 'two-step 200s steps(1)';
|
||||
window.getComputedStyle(div).animation;
|
||||
|
||||
// Wait until animation has started and change delay
|
||||
window.requestAnimationFrame(function() {
|
||||
// Fast-forward to mid-point
|
||||
div.style.animationDelay = '-100s';
|
||||
document.documentElement.removeAttribute('class');
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-delay - liveness with animationend</title>
|
||||
<link rel="author" title="Brian Birtles" href="mailto:bbirtles@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animations">
|
||||
<meta name="assert" content="Check that shortening the animation-delay triggers
|
||||
an animationend event">
|
||||
<meta name="flags" content="dom">
|
||||
<link rel="match" href="animation-common-ref.html">
|
||||
<style>
|
||||
@keyframes all-red {
|
||||
from { background-color: red }
|
||||
to { background-color: red }
|
||||
}
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
<script>
|
||||
// Set up animation with no delay
|
||||
var div = document.querySelector('div');
|
||||
div.style.animation = 'all-red 1000s';
|
||||
window.getComputedStyle(div).animation;
|
||||
|
||||
// Set up an animationend event handler to change the background color
|
||||
div.addEventListener('animationend', function() {
|
||||
div.style.animation = 'none';
|
||||
div.style.backgroundColor = 'green';
|
||||
});
|
||||
|
||||
// Wait until animation has started and change delay
|
||||
window.requestAnimationFrame(function() {
|
||||
// Fast-forward to end
|
||||
div.style.animationDelay = '-1000s';
|
||||
|
||||
// Wait a frame to allow the event handler to run
|
||||
window.requestAnimationFrame(function() {
|
||||
document.documentElement.removeAttribute('class');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-delay - liveness with
|
||||
animationstart</title>
|
||||
<link rel="author" title="Brian Birtles" href="mailto:bbirtles@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animations">
|
||||
<meta name="assert" content="Check that extending the animation-delay triggers
|
||||
an animationstart event">
|
||||
<meta name="flags" content="dom">
|
||||
<link rel="match" href="animation-common-ref.html">
|
||||
<style>
|
||||
@keyframes all-orange {
|
||||
from { background-color: orange }
|
||||
to { background-color: orange }
|
||||
}
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
<script>
|
||||
// Set up animation with a negative delay such that it finishes very soon
|
||||
var div = document.querySelector('div');
|
||||
div.style.animation = 'all-orange 1000s -999.99s';
|
||||
|
||||
// Wait for the animation to finish
|
||||
div.addEventListener('animationend', function() {
|
||||
// Set up an animationstart event handler to change the background color
|
||||
div.addEventListener('animationstart', function() {
|
||||
div.style.animation = 'none';
|
||||
div.style.backgroundColor = 'green';
|
||||
});
|
||||
|
||||
// Then extend the delay so that the animation restarts
|
||||
div.style.animationDelay = '0s';
|
||||
|
||||
// Wait a frame to allow the event handler to run
|
||||
window.requestAnimationFrame(function() {
|
||||
document.documentElement.removeAttribute('class');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-direction - alternate</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-03-24 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-direction">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" 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.">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-direction - normal</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-03-24 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-direction">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-direction is set to normal,
|
||||
all iterations of animation are played as specified.">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-direction - alternate-reverse</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-03-24 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-direction">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" 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.">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-direction - reverse</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-03-24 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-direction">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" 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.">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-direction - ::after</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-03-24 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-direction">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-direction applies to the ::after pseudo element.">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-direction - ::before</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-03-24 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-direction">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-direction applies to the ::before pseudo element">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation - display</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animations">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that setting 'display' property to 'none' terminates
|
||||
running animation applied to the element, and updating 'display'
|
||||
property to a value other than 'none' will start the animation.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which moves from right to left twice.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
<script>
|
||||
var div = document.getElementsByTagName("div");
|
||||
|
||||
setTimeout(function() {
|
||||
div[0].style.display = "none";
|
||||
}, 5000);
|
||||
|
||||
setTimeout(function() {
|
||||
div[0].style.display = "block";
|
||||
}, 8000);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-duration - blank value</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-05 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-duration value is set blank, there will be no animation seen.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts staying left for about 2 seconds upon page load,
|
||||
then moves from right to left.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
<script>
|
||||
var div = document.getElementsByTagName("div");
|
||||
div[0].style.animationDuration = "";
|
||||
setTimeout(setAnimationDuration, 2000);
|
||||
|
||||
function setAnimationDuration() {
|
||||
div[0].style.animationDuration = "10s";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-duration - finite value</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-05 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-duration is set a finite time offset,
|
||||
animation takes the specifies time to complete one cycle.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left upon page load and lasts for a span of 10 seconds.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-duration - negative value</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-05 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-duration is set to a negative value,
|
||||
it is treated as 0s (zero seconds) and no animation is seen.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts staying left for about 2 seconds upon page load,
|
||||
then moves from right to left.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
<script>
|
||||
var div = document.getElementsByTagName("div");
|
||||
div[0].style.animationDuration = "-2s";
|
||||
setTimeout(setAnimationDuration, 2000);
|
||||
|
||||
function setAnimationDuration() {
|
||||
div[0].style.animationDuration = "10s";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-duration - 0s</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-05 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-duration is set to 0s (zero seconds),
|
||||
animation occurs instantaneously, there will be no animation seen.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts staying left for about 2 seconds upon page load,
|
||||
then moves from right to left.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
<script>
|
||||
var div = document.getElementsByTagName("div");
|
||||
div[0].style.animationDuration = "0s";
|
||||
setTimeout(setAnimationDuration, 2000);
|
||||
|
||||
function setAnimationDuration() {
|
||||
div[0].style.animationDuration = "10s";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-duration - 0s, animation-fill-mode - forwards</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-05 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-duration is set to 0s (zero seconds),
|
||||
and 'animation-fill-mode' is set to 'forwards',
|
||||
the last frame of the animation will be displayed.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#test {
|
||||
animation-name: sample;
|
||||
animation-duration: 0s;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
#ref {
|
||||
background-color: red;
|
||||
left: 150px;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 0px;
|
||||
}
|
||||
to {
|
||||
left: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue with 'Filler Text',
|
||||
and without animation, and if there is no red.
|
||||
</p>
|
||||
<div id="ref"></div>
|
||||
<div id="test">Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-duration - 0s, animation-fill-mode - both</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-05 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-duration is set to 0s (zero seconds),
|
||||
and 'animation-fill-mode' is set to 'both',
|
||||
the last frame of the animation will be displayed.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#test {
|
||||
animation-name: sample;
|
||||
animation-duration: 0s;
|
||||
animation-fill-mode: both;
|
||||
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
#ref {
|
||||
background-color: red;
|
||||
left: 150px;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 0px;
|
||||
}
|
||||
to {
|
||||
left: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue with 'Filler Text',
|
||||
and without animation, and if there is no red.
|
||||
</p>
|
||||
<div id="ref"></div>
|
||||
<div id="test">Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-duration - ::before</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-05 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-duration applies to the ::before pseudo element.">
|
||||
<style>
|
||||
div::before {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left upon page load and lasts for a span of 10 seconds.
|
||||
</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-duration - ::after</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-05 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-duration applies to the ::after pseudo element.">
|
||||
<style>
|
||||
div::after {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left upon page load and lasts for a span of 10 seconds.
|
||||
</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-fill-mode - none</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-fill-mode is set to none,
|
||||
animation has no effect when it is applied but not executing.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 5s;
|
||||
animation-fill-mode: none;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
@keyframes sample {
|
||||
from {
|
||||
background-color: yellow;
|
||||
}
|
||||
to {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled color square with 'Filler Text',
|
||||
whose color gradually changes in the order:
|
||||
YELLOW to GREEN to BLUE.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-fill-mode - forwards</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-fill-mode is set to forwards,
|
||||
animation will apply the property values for the time the amination ended
|
||||
after the animation ends.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 5s;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
@keyframes sample {
|
||||
from {
|
||||
background-color: yellow;
|
||||
}
|
||||
to {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled color square with 'Filler Text',
|
||||
whose color gradually changes in the order:
|
||||
YELLOW to GREEN.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-fill-mode - backwards</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-delay">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-fill-mode is set to backwards,
|
||||
animation-delay is set a positive time offset,
|
||||
and animation-direction is 'normal' or 'alternate-reverse',
|
||||
animation will apply the from or 0% keyframe
|
||||
that will start the first iteration.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 5s;
|
||||
animation-delay: 5s;
|
||||
animation-fill-mode: backwards;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
@keyframes sample {
|
||||
from {
|
||||
background-color: yellow;
|
||||
}
|
||||
to {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled color square with 'Filler Text',
|
||||
whose color gradually changes in the order:
|
||||
YELLOW to GREEN to BLUE.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-fill-mode - both</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-delay">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check if animation-fill-mode is set to both,
|
||||
the effects of both 'forwards' and 'backwards' will apply.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 5s;
|
||||
animation-delay: 5s;
|
||||
animation-fill-mode: both;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
@keyframes sample {
|
||||
from {
|
||||
background-color: yellow;
|
||||
}
|
||||
to {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled color square with 'Filler Text',
|
||||
whose color gradually changes in the order:
|
||||
YELLOW to GREEN.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-fill-mode - ::after</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-fill-mode applies to the ::after pseudo element.">
|
||||
<style>
|
||||
div::after {
|
||||
animation-name: sample;
|
||||
animation-duration: 5s;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
@keyframes sample {
|
||||
from {
|
||||
background-color: yellow;
|
||||
}
|
||||
to {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled color square with 'Filler Text',
|
||||
whose color gradually changes in the order:
|
||||
YELLOW to GREEN.
|
||||
</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-fill-mode - ::before</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-fill-mode applies to the ::before pseudo element.">
|
||||
<style>
|
||||
div::before {
|
||||
animation-name: sample;
|
||||
animation-duration: 5s;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
@keyframes sample {
|
||||
from {
|
||||
background-color: yellow;
|
||||
}
|
||||
to {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled color square with 'Filler Text',
|
||||
whose color gradually changes in the order:
|
||||
YELLOW to GREEN.
|
||||
</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-iteration-count - default value</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
|
||||
<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>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left once.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-iteration-count - infinite value</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-iteration-count is set to infinite,
|
||||
animation will repeat forever.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled square with 'Filler Text',
|
||||
which repeatedly moves from right to left. Every time a cycle is finished,
|
||||
the square gets re-positioned to right and continues to move left.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-iteration-count - negative value</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-iteration-count is set to negative count,
|
||||
it is invalid and animation will play from beginning to end once.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: -2;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left once.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-iteration-count - non-integer value</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-iteration-count is set to non-integer,
|
||||
animation will end partway through its last cycle.">
|
||||
<style>
|
||||
#test-iteration-count {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: 2.1;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#ref-path {
|
||||
background-color: yellow;
|
||||
height: 10px;
|
||||
width: 250px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left along the yellow bar twice,
|
||||
and for the third time it ends partway and then immediately positions
|
||||
itself to the left.
|
||||
</p>
|
||||
<div id="test-iteration-count">Filler Text</div>
|
||||
<div id="ref-path"></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-iteration-count - integer value</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-iteration-count is set to integer count,
|
||||
animation will repeat the specified number of times.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: 2;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left twice.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-iteration-count - 0 (zero)</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-iteration-count is set to 0 (zero), no animation is seen.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts staying left for about 2 seconds upon page load,
|
||||
then moves from right to left once.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
<script>
|
||||
var div = document.getElementsByTagName("div");
|
||||
div[0].style.animationIterationCount = 0;
|
||||
setTimeout(setAnimationDuration, 2000);
|
||||
|
||||
function setAnimationDuration() {
|
||||
div[0].style.animationIterationCount = 1;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-iteration-count - ::after</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-iteration-count applies to the ::after pseudo element.">
|
||||
<style>
|
||||
div::after {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: 2;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left twice.
|
||||
</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-iteration-count - ::before</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-iteration-count applies to the ::before pseudo element.">
|
||||
<style>
|
||||
div::before {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: 2;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left twice.
|
||||
</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation events - animationiteration</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#events">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animationiteration event occurs at the end of
|
||||
each iteration of an animation for which animation-iteration-count
|
||||
is greater than one.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: 3;
|
||||
|
||||
color: yellow;
|
||||
font-weight: bolder;
|
||||
font-size: xx-large;
|
||||
text-align: center;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square, which moves from right to left
|
||||
three times; and if the square contains digit 1 for the first animation,
|
||||
digit 2 for the second, and 3 for the third animation.
|
||||
</p>
|
||||
<div></div>
|
||||
<script>
|
||||
var count = 1;
|
||||
var div = document.getElementsByTagName("div");
|
||||
div[0].innerHTML = count;
|
||||
div[0].addEventListener("animationiteration", animationIteration, true);
|
||||
|
||||
function animationIteration() {
|
||||
count += 1;
|
||||
div[0].innerHTML = count;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: @keyframes - from, to, percentage</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#keyframes">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that @keyframes rule accepts 'from' and 'to'
|
||||
keywords, and percentage values.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
background-color: blue;
|
||||
}
|
||||
30% {
|
||||
background-color: green;
|
||||
}
|
||||
65% {
|
||||
background-color: yellow;
|
||||
}
|
||||
to {
|
||||
background-color: blue;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text'
|
||||
initially on page load, and if the color of the square gradully changes
|
||||
in order: BLUE to GREEN to YELLOW and back to BLUE in 10 seconds.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: @keyframes - negative percentage and higher than 100%</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#keyframes">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that a keyframe selector specifies negative percentage values
|
||||
or values higher than 100%, the keyframe will be ignored.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
-100% {
|
||||
background-color: red;
|
||||
}
|
||||
0% {
|
||||
background-color: blue;
|
||||
}
|
||||
30% {
|
||||
background-color: green;
|
||||
}
|
||||
65% {
|
||||
background-color: yellow;
|
||||
}
|
||||
100% {
|
||||
background-color: blue;
|
||||
}
|
||||
200% {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text'
|
||||
initially on page load, if the color of the square gradully changes
|
||||
in order: BLUE to GREEN to YELLOW and back to BLUE in 10 seconds,
|
||||
and if there is no red.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: @keyframes - animation-timing-function</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#keyframes">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that @keyframes rule accpets 'animation-timing-function'
|
||||
property used as the animation moves to the next keyframe.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
50% {
|
||||
left: 75px;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left with constant speed.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-name - blank value</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-name is set without any value,
|
||||
there will be no animation.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: ;
|
||||
animation-duration: 8s;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts staying left about 2 seconds, then moves from right to left.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
<script>
|
||||
setTimeout(setAnimationName, 2000);
|
||||
|
||||
function setAnimationName () {
|
||||
var div = document.getElementsByTagName("div");
|
||||
div[0].style.animationName = "sample";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-name matchs keyframes at-rule</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<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,
|
||||
animation will execute.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left on the page load.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-name - none</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-name is set to none, there will be no animation.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: none;
|
||||
animation-duration: 8s;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts staying left about 2 seconds, then moves from right to left.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
<script>
|
||||
setTimeout(setAnimationName, 2000);
|
||||
|
||||
function setAnimationName () {
|
||||
var div = document.getElementsByTagName("div");
|
||||
div[0].style.animationName = "sample";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-name mismatches keyframe at-rule</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-name does not match any keyframe at-rule,
|
||||
there are no properties to be animated and animation will not execute.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample1;
|
||||
animation-duration: 8s;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts staying left about 2 seconds, then moves from right to left.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
<script>
|
||||
setTimeout(setAnimationName, 2000);
|
||||
|
||||
function setAnimationName () {
|
||||
var div = document.getElementsByTagName("div");
|
||||
div[0].style.animationName = "sample";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-name - ::after</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-name applies to the ::after pseudo element.">
|
||||
<style>
|
||||
div::after {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left on the page load.
|
||||
</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-name - ::before</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-name applies to the ::before pseudo element.">
|
||||
<style>
|
||||
div::before {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left on the page load.
|
||||
</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-play-state - paused</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-play-state">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-play-state is set to paused,
|
||||
animation is paused where the progress it had made
|
||||
before being paused.">
|
||||
<style>
|
||||
#test-animation-paused {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#ref-path {
|
||||
background-color: yellow;
|
||||
height: 10px;
|
||||
width: 250px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving right to left along the yellow bar,
|
||||
and pauses in the middle after about 2 seconds' animation.
|
||||
</p>
|
||||
<div id="test-animation-paused">Filler Text</div>
|
||||
<div id="ref-path"></div>
|
||||
<script>
|
||||
setTimeout(setAnimationRunning, 2000);
|
||||
|
||||
function setAnimationRunning() {
|
||||
var div = document.getElementsByTagName("div");
|
||||
div[0].style.animationPlayState = "paused";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-play-state - running</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-play-state">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-play-state is set to running,
|
||||
animation will proceed as normal.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-play-state: running;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-play-state - ::after</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-play-state">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-play-state applies to the ::after pseudo element.">
|
||||
<style>
|
||||
div::after {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-play-state: running;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left.
|
||||
</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-play-state - ::before</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-play-state">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-play-state applies to the ::before pseudo element.">
|
||||
<style>
|
||||
div::before {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-play-state: running;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left.
|
||||
</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation shorthand</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation shorthand property accepts time
|
||||
values for animation-duration and animation-delay in order.">
|
||||
<style>
|
||||
div {
|
||||
animation: 10s 2s sample;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts staying left about 2 seconds, and then moves from right to left
|
||||
and lasts for a span of 10 seconds.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation shorthand - ::after</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation shorthand applies to the ::after pseudo element
|
||||
and accepts time values for animation-duration and animation-delay
|
||||
in order.">
|
||||
<style>
|
||||
div::after {
|
||||
animation: 10s 2s sample;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts staying left about 2 seconds, and then moves from right to left
|
||||
and lasts for a span of 10 seconds.
|
||||
</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation shorthand - ::before</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation shorthand applies to the ::before pseudo element
|
||||
and accepts time values for animation-duration and animation-delay
|
||||
in order.">
|
||||
<style>
|
||||
div::before {
|
||||
animation: 10s 2s sample;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts staying left about 2 seconds, and then moves from right to left
|
||||
and lasts for a span of 10 seconds.
|
||||
</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-timing-function - cubic-bezier with parameters (0,0,1,1)</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-timing-function">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-timing-function is set to cubic-bezier
|
||||
with parameters (0,0,1,1), animation will progress over one cycle
|
||||
of its duration with constant speed.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: cubic-bezier(0,0,1,1);
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left with constant speed.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-timing-function - ease</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-timing-function">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-timing-function is set to ease,
|
||||
animation will starts slow, gain acceleration in the middle
|
||||
and again slow down at the end.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: ease;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left; initially the animation starts slow,
|
||||
gains acceleration in the middle and again slows down at the end.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-timing-function - ease-in</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-timing-function">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-timing-function is set to ease-in,
|
||||
animation will start slow, gain acceleration as time progresses.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: ease-in;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left; animation starts slow
|
||||
and gains acceleration as time progresses.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-timing-function - ease-in-out</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-timing-function">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-timing-function is set to ease-in-out,
|
||||
animation will start slow, gain acceleration in the middel
|
||||
and again slow down at the end.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: ease-in-out;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left; initially the animation starts slow,
|
||||
gains acceleration in the middle and again slows down at the end.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-timing-function - ease-out</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-timing-function">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-timing-function is set to ease-out,
|
||||
animation will start with higher (than the normal) speed
|
||||
and relatively slow down as time progresses.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: ease-out;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left; animation starts and relatively
|
||||
slows down as time progresses.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-timing-function - linear</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-timing-function">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-timing-function is set to linear,
|
||||
animation will progress over one cycle of its duration
|
||||
with constant speed.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: linear;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which starts moving from right to left with constant speed.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-timing-function - step-start</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-timing-function">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-timing-function is set to step-start,
|
||||
animation will play the end effect at the start of the interval.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#test-step-start {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: step-start;
|
||||
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
#ref-no-animation {
|
||||
background-color: red;
|
||||
left: 150px;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 0px;
|
||||
}
|
||||
to {
|
||||
left: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which stays right, and if there is NO red.
|
||||
</p>
|
||||
<div id="ref-no-animation"></div>
|
||||
<div id="test-step-start">Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-timing-function - step-end</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-timing-function">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-timing-function is set to step-end,
|
||||
animation will play the end effect at the end time point,
|
||||
and keep the start effect at the start of the interval.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: step-end;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled square with 'Filler Text',
|
||||
which stays right for about 10 seconds, and then jumps to left.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-timing-function - steps with parameters (<number>, start)</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-timing-function">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-timing-function is set to steps with paramenters
|
||||
(<number>, start), animation will be defined by the number that divides
|
||||
the domain of operation into equally size intervals, evey time the changes
|
||||
happens at the start of the interval.">
|
||||
<style>
|
||||
div {
|
||||
float: left;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#test-step-start {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: steps(4, start);
|
||||
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
#ref-1 {
|
||||
background-color: yellow;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
#ref-2 {
|
||||
background-color: green;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
#ref-3 {
|
||||
background-color: red;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 400px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there are a filled square with 'Filler Text',
|
||||
which jumps three times from right to left and orderly covers
|
||||
the filled YELLOW, GREEN and RED squares.
|
||||
</p>
|
||||
<div id="ref-1"></div>
|
||||
<div id="ref-2"></div>
|
||||
<div id="ref-3"></div>
|
||||
<div id="test-step-start">Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-timing-function - steps with parameters (<number>, end)</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-timing-function">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="When animation-timing-function is set to steps with paramenters
|
||||
(<number>, end), animation will be defined by the number that divides
|
||||
the domain of operation into equally size intervals, evey time the changes
|
||||
happens at the end of the interval.">
|
||||
<style>
|
||||
div {
|
||||
float: left;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#test-step-end {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: steps(3, end);
|
||||
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
#ref-1 {
|
||||
background-color: yellow;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
#ref-2 {
|
||||
background-color: green;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
#ref-3 {
|
||||
background-color: red;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 300px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there are a filled square with 'Filler Text',
|
||||
which jumps three times from right to left and orderly covers
|
||||
the filled YELLOW, GREEN and RED squares.
|
||||
</p>
|
||||
<div id="ref-1"></div>
|
||||
<div id="ref-2"></div>
|
||||
<div id="ref-3"></div>
|
||||
<div id="test-step-end">Filler Text</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-timing-function - ::after</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-timing-function">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-timing-function applies to the ::after pseudo element.">
|
||||
<style>
|
||||
div::after {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: linear;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which moves from right to left with constant speed.
|
||||
</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation-timing-function - ::before</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-timing-function">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animation-timing-function applies to the ::before pseudo element.">
|
||||
<style>
|
||||
div::before {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: linear;
|
||||
|
||||
background-color: blue;
|
||||
content: "Filler Text";
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square with 'Filler Text',
|
||||
which moves from right to left with constant speed.
|
||||
</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: AnimationEvent interface</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#interface-dom">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="animationevent-interface.js"></script>
|
||||
<div id="log"></div>
|
||||
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
(function() {
|
||||
test(function() {
|
||||
var event = new AnimationEvent("");
|
||||
assert_true(event instanceof window.AnimationEvent);
|
||||
}, "the event is an instance of AnimationEvent");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("");
|
||||
assert_true(event instanceof window.Event);
|
||||
}, "the event inherts from Event");
|
||||
|
||||
test(function() {
|
||||
assert_throws(new TypeError(), function() {
|
||||
new AnimationEvent();
|
||||
}, 'First argument is required, so was expecting a TypeError.');
|
||||
}, 'Missing type argument');
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test");
|
||||
assert_equals(event.type, "test");
|
||||
}, "type argument is string");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent(null);
|
||||
assert_equals(event.type, "null");
|
||||
}, "type argument is null");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent(undefined);
|
||||
assert_equals(event.type, "undefined");
|
||||
}, "event type set to undefined");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test");
|
||||
assert_equals(event.animationName, "");
|
||||
}, "animationName has default value of empty string");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test");
|
||||
assert_equals(event.elapsedTime, 0.0);
|
||||
}, "elapsedTime has default value of 0.0");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test");
|
||||
assert_readonly(event, "animationName", "readonly attribute value");
|
||||
}, "animationName is readonly");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test");
|
||||
assert_readonly(event, "elapsedTime", "readonly attribute value");
|
||||
}, "elapsedTime is readonly");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", null);
|
||||
assert_equals(event.animationName, "");
|
||||
assert_equals(event.elapsedTime, 0.0);
|
||||
}, "animationEventInit argument is null");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", undefined);
|
||||
assert_equals(event.animationName, "");
|
||||
assert_equals(event.elapsedTime, 0.0);
|
||||
}, "animationEventInit argument is undefined");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {});
|
||||
assert_equals(event.animationName, "");
|
||||
assert_equals(event.elapsedTime, 0.0);
|
||||
}, "animationEventInit argument is empty dictionary");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {animationName: "sample"});
|
||||
assert_equals(event.animationName, "sample");
|
||||
}, "animationName set to 'sample'");
|
||||
|
||||
test(function() {
|
||||
var event = new AnimationEvent("test", {elapsedTime: 0.5});
|
||||
assert_equals(event.elapsedTime, 0.5);
|
||||
}, "elapsedTime set to 0.5");
|
||||
|
||||
test(function() {
|
||||
var eventInit = {animationName: "sample", elapsedTime: 0.5};
|
||||
var event = new AnimationEvent("test", eventInit);
|
||||
assert_equals(event.animationName, "sample");
|
||||
assert_equals(event.elapsedTime, 0.5);
|
||||
}, "AnimationEventInit properties set value");
|
||||
})();
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<meta name="timeout" content="long">
|
||||
<title>CSS Animations Test: AnimationEvnt types - animationstart, animationend,animationiteration</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#event-animationevent">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#test {
|
||||
animation-name: sample;
|
||||
animation-duration: 2s;
|
||||
animation-delay: -1s;
|
||||
animation-iteration-count: 2;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="test">Filler Text</div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var testDiv = document.getElementById("test");
|
||||
|
||||
async_test(function(t) {
|
||||
testDiv.addEventListener("animationstart", t.step_func(function(evt) {
|
||||
assert_true(evt instanceof window.AnimationEvent);
|
||||
|
||||
assert_idl_attribute(evt, "animationName", "animationstart has animationName property");
|
||||
assert_idl_attribute(evt, "elapsedTime", "animationstart has elapsedTime property");
|
||||
|
||||
assert_equals(evt.animationName, "sample", "animationstart has animationName value");
|
||||
assert_equals(evt.elapsedTime, 1, "animationstart has elapsedTime value");
|
||||
|
||||
t.done();
|
||||
}), true);
|
||||
}, "animationstart event is instanceof AnimationEvent");
|
||||
|
||||
async_test(function(t) {
|
||||
testDiv.addEventListener("animationend", t.step_func(function(evt) {
|
||||
assert_true(evt instanceof window.AnimationEvent);
|
||||
|
||||
assert_idl_attribute(evt, "animationName", "animationend has animationName property");
|
||||
assert_idl_attribute(evt, "elapsedTime", "animationend has elapsedTime property");
|
||||
|
||||
assert_equals(evt.animationName, "sample", "animationend has animationName value");
|
||||
assert_equals(evt.elapsedTime, 4, "animationend has elapsedTime value");
|
||||
|
||||
t.done();
|
||||
}), true);
|
||||
}, "animationend event is instanceof AnimationEvent");
|
||||
|
||||
async_test(function(t) {
|
||||
testDiv.addEventListener("animationiteration", t.step_func(function(evt) {
|
||||
assert_true(evt instanceof window.AnimationEvent);
|
||||
|
||||
assert_idl_attribute(evt, "animationName", "animationiteration has animationName property");
|
||||
assert_idl_attribute(evt, "elapsedTime", "animationiteration has elapsedTime property");
|
||||
|
||||
assert_equals(evt.animationName, "sample", "animationiteration has animationName value");
|
||||
assert_equals(evt.elapsedTime, 2, "animationiteration has elapsedTime value");
|
||||
|
||||
t.done();
|
||||
}), true);
|
||||
}, "animationiteration event is instanceof AnimationEvent");
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations Test: animation events - animationstart and animationend</title>
|
||||
<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#events">
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Check that animationstart event occurs at the start of an animation,
|
||||
animationend event occurs when animation finishes.">
|
||||
<style>
|
||||
div {
|
||||
animation-name: sample;
|
||||
animation-duration: 10s;
|
||||
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes sample {
|
||||
from {
|
||||
left: 150px;
|
||||
}
|
||||
to {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if there is a filled blue square,
|
||||
which moves from right to left with text 'START'
|
||||
and changes to 'END' when the animation is finished.
|
||||
</p>
|
||||
<div>Filler Text</div>
|
||||
<script>
|
||||
var div = document.getElementsByTagName("div");
|
||||
div[0].addEventListener("animationstart", animationStart, true);
|
||||
div[0].addEventListener("animationend", animationEnd, true);
|
||||
|
||||
function animationStart() {
|
||||
div[0].innerHTML = "START";
|
||||
}
|
||||
|
||||
function animationEnd() {
|
||||
div[0].innerHTML = "END";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue