1 <!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
6 <meta http-equiv=
"Content-Type" content=
"text/html; charset=utf-8">
7 <title>Keyframe Timing Functions
</title>
8 <style type=
"text/css" media=
"screen">
12 border:
1px solid black;
21 background-color: blue;
22 -webkit-animation-name: move;
23 -webkit-animation-duration:
1.5s;
26 @-webkit-keyframes move {
29 -webkit-animation-timing-function: linear;
37 <script type=
"text/javascript" charset=
"utf-8">
39 if (window.layoutTestController) {
40 layoutTestController.dumpAsText();
41 layoutTestController.waitUntilDone();
45 const kDefaultTolerance =
20;
47 function isEqual(actual, desired, tolerance)
49 if (tolerance == undefined || tolerance ==
0)
50 tolerance = kDefaultTolerance;
51 var diff = Math.abs(actual - desired);
52 return diff < tolerance;
57 var left = parseInt(window.getComputedStyle(document.getElementById('box')).left);
59 if (!isEqual(left, expected))
60 result =
"FAIL (was: " + left +
", expected: " + expected +
")";
62 document.getElementById('result').innerHTML = result;
63 if (window.layoutTestController)
64 layoutTestController.notifyDone();
69 window.setTimeout(snapshot,
750);
72 document.addEventListener('webkitAnimationStart', start, false);
78 This test should do a linear animation. The timing-function comes from the keyframe, so this is testing
79 whether or not the timing function in keyframes is used.