Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / animations / transition-and-animation-2.html
blob17383c19f8375a37eb25b86b720b26d1323a4886
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
4 <html lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7 <title>Transition/Animation Test #2</title>
8 <style type="text/css" media="screen">
9 #box {
10 position: absolute;
11 left: 0;
12 top: 100px;
13 height: 100px;
14 width: 100px;
15 background-color: blue;
16 -webkit-animation-duration: 0.3s;
17 -webkit-animation-timing-function: linear;
18 -webkit-animation-name: anim;
19 -webkit-transition-property: -webkit-transform;
20 -webkit-transition-duration: 10s;
21 -webkit-transition-timing-function: linear;
23 @-webkit-keyframes anim {
24 from { transform: translate(0,100px) }
25 to { transform: translate(400px, 100px) }
27 </style>
28 <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
29 <script type="text/javascript" charset="utf-8">
31 const expectedValues = [
32 // [time, element-id, property, expected-value, tolerance]
33 [0.4, "box", "transform", "none", 0],
36 // FIXME: This doesn't get called so we don't trigger a transition...
37 function setup()
39 document.getElementById("box").style.webkitTransform = "translateX(400px)";
42 runAnimationTest(expectedValues, undefined, undefined, 'do-not-use-pause-api');
44 </script>
45 </head>
46 <body>
47 This test has a transition and animation on the same property (-webkit-transform).
48 The animation starts and then the transition is triggered. The transition should start
49 at the position before the animation started (the unanimated position), which is (0,0). If it
50 starts from the start point of the animation (0,100) then there is an error
51 <div id="box">
52 </div>
53 <div id="result">
54 </div>
55 </body>
56 </html>