Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / animations / keyframe-default-timing-function.html
blob8a480d9ac2cc0fb51e556c3bcdf52fc228c46ed1
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>Test animation with multiple keyframes</title>
8 <style type="text/css" media="screen">
9 #box {
10 position: relative;
11 left: 10px;
12 top: 10px;
13 height: 100px;
14 width: 100px;
15 background-color: blue;
16 -webkit-animation-duration: 2s;
17 -webkit-animation-name: anim;
19 @-webkit-keyframes anim {
20 from { left: 10px; top: 10px; }
21 40% { left: 30px; width: 300px; }
22 60% { top: 40px; height: 400px; }
23 to { left: 20px; top: 0px; }
25 </style>
26 <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8">
27 </script>
28 <script type="text/javascript" charset="utf-8">
30 const expectedValues = [
31 // [time, element-id, property, expected-value, tolerance]
32 [ 0.2, "box", "left", 18, 2],
33 [ 0.2, "box", "top", 16.6, 2],
34 [ 0.2, "box", "width", 182, 20],
35 [ 0.2, "box", "height", 166, 20],
36 [ 1.4, "box", "left", 22, 2],
37 [ 1.4, "box", "top", 23.7, 2],
38 [ 1.4, "box", "width", 140, 20],
39 [ 1.4, "box", "height", 277, 20],
42 runAnimationTest(expectedValues);
44 </script>
45 </head>
46 <body>
47 This test performs a keyframed animation of multiple properties, with their values supplied in different groups of keyframes.
48 It animates over 2 seconds.
49 <div id="box">
50 </div>
51 <div id="result">
52 </div>
53 </body>
54 </html>