OLD | NEW |
---|---|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
2 "http://www.w3.org/TR/html4/loose.dtd"> | 2 "http://www.w3.org/TR/html4/loose.dtd"> |
3 | 3 |
4 <html lang="en"> | 4 <html lang="en"> |
5 <head> | 5 <head> |
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
7 <title>Test timing functions</title> | 7 <title>Test timing functions</title> |
8 <style type="text/css" media="screen"> | 8 <style type="text/css" media="screen"> |
9 .box { | 9 .box { |
10 position: relative; | 10 position: relative; |
(...skipping 25 matching lines...) Expand all Loading... | |
36 } | 36 } |
37 #box6 { | 37 #box6 { |
38 -webkit-animation-timing-function: steps(3); | 38 -webkit-animation-timing-function: steps(3); |
39 } | 39 } |
40 #box7 { | 40 #box7 { |
41 -webkit-animation-timing-function: steps(3, start); | 41 -webkit-animation-timing-function: steps(3, start); |
42 } | 42 } |
43 #box8 { | 43 #box8 { |
44 -webkit-animation-timing-function: steps(3, end); | 44 -webkit-animation-timing-function: steps(3, end); |
45 } | 45 } |
46 #box9 { | |
shans
2014/01/30 09:55:08
maybe a comment to indicate that these should act
| |
47 -webkit-animation-timing-function: steps(3, middle); | |
48 } | |
49 #box10 { | |
50 -webkit-animation-timing-function: step-middle; | |
51 } | |
46 | 52 |
47 </style> | 53 </style> |
48 <script src="resources/animation-test-helpers.js" type="text/javascript" chars et="utf-8"></script> | 54 <script src="resources/animation-test-helpers.js" type="text/javascript" chars et="utf-8"></script> |
49 <script type="text/javascript" charset="utf-8"> | 55 <script type="text/javascript" charset="utf-8"> |
50 | 56 |
51 const expectedValues = [ | 57 const expectedValues = [ |
52 // [time, element-id, property, expected-value, tolerance] | 58 // [time, element-id, property, expected-value, tolerance] |
53 [0.25, "box1", "left", 141, 5], | 59 [0.25, "box1", "left", 141, 5], |
54 [0.50, "box1", "left", 180, 5], | 60 [0.50, "box1", "left", 180, 5], |
55 [0.75, "box1", "left", 196, 5], | 61 [0.75, "box1", "left", 196, 5], |
(...skipping 11 matching lines...) Expand all Loading... | |
67 [0.75, "box5", "left", 100, 5], | 73 [0.75, "box5", "left", 100, 5], |
68 [0.25, "box6", "left", 100, 5], | 74 [0.25, "box6", "left", 100, 5], |
69 [0.50, "box6", "left", 133, 5], | 75 [0.50, "box6", "left", 133, 5], |
70 [0.75, "box6", "left", 166, 5], | 76 [0.75, "box6", "left", 166, 5], |
71 [0.25, "box7", "left", 133, 5], | 77 [0.25, "box7", "left", 133, 5], |
72 [0.50, "box7", "left", 166, 5], | 78 [0.50, "box7", "left", 166, 5], |
73 [0.75, "box7", "left", 200, 5], | 79 [0.75, "box7", "left", 200, 5], |
74 [0.25, "box8", "left", 100, 5], | 80 [0.25, "box8", "left", 100, 5], |
75 [0.50, "box8", "left", 133, 5], | 81 [0.50, "box8", "left", 133, 5], |
76 [0.75, "box8", "left", 166, 5], | 82 [0.75, "box8", "left", 166, 5], |
83 [0.25, "box9", "left", 141, 5], | |
84 [0.50, "box9", "left", 180, 5], | |
85 [0.75, "box9", "left", 196, 5], | |
86 [0.25, "box10", "left", 141, 5], | |
87 [0.50, "box10", "left", 180, 5], | |
88 [0.75, "box10", "left", 196, 5], | |
77 ]; | 89 ]; |
78 | 90 |
79 runAnimationTest(expectedValues); | 91 runAnimationTest(expectedValues); |
80 | 92 |
81 </script> | 93 </script> |
82 </head> | 94 </head> |
83 <body> | 95 <body> |
84 This test performs an animation of the left property. It animates over 1 second. | 96 This test performs an animation of the left property. It animates over 1 second. |
85 It takes 3 snapshots and expects each result to be within a specified range. | 97 It takes 3 snapshots and expects each result to be within a specified range. |
86 <div class="box" id="box1"> | 98 <div class="box" id="box1"> |
87 </div> | 99 </div> |
88 <div class="box" id="box2"> | 100 <div class="box" id="box2"> |
89 </div> | 101 </div> |
90 <div class="box" id="box3"> | 102 <div class="box" id="box3"> |
91 </div> | 103 </div> |
92 <div class="box" id="box4"> | 104 <div class="box" id="box4"> |
93 </div> | 105 </div> |
94 <div class="box" id="box5"> | 106 <div class="box" id="box5"> |
95 </div> | 107 </div> |
96 <div class="box" id="box6"> | 108 <div class="box" id="box6"> |
97 </div> | 109 </div> |
98 <div class="box" id="box7"> | 110 <div class="box" id="box7"> |
99 </div> | 111 </div> |
100 <div class="box" id="box8"> | 112 <div class="box" id="box8"> |
101 </div> | 113 </div> |
114 <div class="box" id="box9"> | |
115 </div> | |
116 <div class="box" id="box10"> | |
117 </div> | |
102 <div id="result"> | 118 <div id="result"> |
103 </div> | 119 </div> |
104 </body> | 120 </body> |
105 </html> | 121 </html> |
OLD | NEW |