Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: timelapse
Fetching contributors…

Cannot retrieve contributors at this time

50 lines (45 sloc) 1.552 kB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Keyframes test with comma separated keys</title>
<style type="text/css" media="screen">
#box {
position: absolute;
left: 0;
top: 100px;
height: 100px;
width: 100px;
background-color: blue;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-name: "anim";
}
@-webkit-keyframes "anim" {
from { left: 50px; }
20%, 40% { left: 100px; }
60%,80%{ left: 200px; }
to { left: 300px; }
}
</style>
<script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
const expectedValues = [
// [animation-name, time, element-id, property, expected-value, tolerance]
["anim", 0.3, "box", "left", 100, 1],
["anim", 0.7, "box", "left", 200, 1],
];
runAnimationTest(expectedValues);
</script>
</head>
<body>
This test performs an animation of the left property. It should stop for 100ms at 100px and 200px
We test for those values 50ms after it has stopped at each position. Keys in two of the keyframes
are comma separated, so these should be correctly broken out into separate keyframes.
<div id="box">
</div>
<div id="result">
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.