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>Transition/Animation Test #
1</title>
8 <style type=
"text/css" media=
"screen">
15 background-color: blue;
16 -webkit-animation-duration:
0.5s;
17 -webkit-animation-timing-function: linear;
18 -webkit-animation-name:
"anim";
19 -webkit-transition-property: -webkit-transform;
20 -webkit-transition-duration:
10s;
22 @-webkit-keyframes
"anim" {
23 from { -webkit-transform: translateX(
200px); }
24 to { -webkit-transform: translateX(
300px); }
27 <script type=
"text/javascript" charset=
"utf-8">
28 if (window.layoutTestController) {
29 layoutTestController.dumpAsText();
30 layoutTestController.waitUntilDone();
34 const defaultTolerance =
0.2;
36 function isEqual(actual, desired, tolerance)
38 if (tolerance == undefined || tolerance ==
0)
39 tolerance = defaultTolerance;
40 var diff = Math.abs(actual - desired);
41 return diff < tolerance;
44 function snapshot(which)
46 var m = window.getComputedStyle(document.getElementById('box')).webkitTransform;
48 result =
"FAIL(was:"+m+
", expected:none)";
53 setTimeout(
"snapshot()",
550);
55 window.setTimeout(function() {
56 document.getElementById('result').innerHTML = result;
57 if (window.layoutTestController)
58 layoutTestController.notifyDone();
62 document.addEventListener('webkitAnimationStart', start, false);
67 This test has a transition and animation on the same property (-webkit-transform). But the transition is never triggered,
68 so nothing should be moving when the animation finishes.