Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(443)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/animations/timing-functions.html

Issue 149363002: Web Animations API: Implement step-middle and steps(x, middle) timing functions. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Merged patch into fresh branch (to avoid scary rebase) Created 6 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « LayoutTests/animations/animations-parsing-expected.txt ('k') | LayoutTests/animations/timing-functions-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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;
11 left: 100px; 11 left: 100px;
12 top: 0px; 12 top: 0px;
13 height: 5px; 13 height: 5px;
14 width: 5px; 14 width: 5px;
15 background-color: blue; 15 background-color: blue;
16 -webkit-animation-duration: 1s; 16 -webkit-animation-duration: 1s;
17 -webkit-animation-name: anim; 17 -webkit-animation-name: anim;
18 } 18 }
19 @-webkit-keyframes anim { 19 @-webkit-keyframes anim {
20 from { left: 100px; } 20 from { left: 100px; }
21 to { left: 200px; } 21 to { left: 200px; }
22 } 22 }
23
24 .box-step-middle {
25 position: relative;
26 left: 100px;
27 top: 0px;
28 height: 5px;
29 width: 5px;
30 background-color: blue;
31 -webkit-animation-duration: 1s;
32 -webkit-animation-name: anim-step-middle;
33 /*
34 * Set initial timing function to something other than the default (ease)
35 * to check that attempts to set easing to step-middle result in the
36 * default, not the initial, being used.
37 */
38 -webkit-animation-timing-function: linear;
39 }
40 @-webkit-keyframes anim-step-middle {
41 from { left: 100px; }
42 to { left: 200px; }
43 }
44
23 #box1 { 45 #box1 {
24 } 46 }
25 #box2 { 47 #box2 {
26 -webkit-animation-timing-function: ease; 48 -webkit-animation-timing-function: ease;
27 } 49 }
28 #box3 { 50 #box3 {
29 -webkit-animation-timing-function: linear; 51 -webkit-animation-timing-function: linear;
30 } 52 }
31 #box4 { 53 #box4 {
32 -webkit-animation-timing-function: step-start; 54 -webkit-animation-timing-function: step-start;
33 } 55 }
34 #box5 { 56 #box5 {
35 -webkit-animation-timing-function: step-end; 57 -webkit-animation-timing-function: step-end;
36 } 58 }
37 #box6 { 59 #box6 {
38 -webkit-animation-timing-function: steps(3); 60 -webkit-animation-timing-function: steps(3);
39 } 61 }
40 #box7 { 62 #box7 {
41 -webkit-animation-timing-function: steps(3, start); 63 -webkit-animation-timing-function: steps(3, start);
42 } 64 }
43 #box8 { 65 #box8 {
44 -webkit-animation-timing-function: steps(3, end); 66 -webkit-animation-timing-function: steps(3, end);
45 } 67 }
68 /*
69 * The step-middle functions are invalid except through the Web Animations A PI
70 * and should behave like 'ease', unless step-middle has been added to the C SS specification.
71 */
72 #box9 {
73 -webkit-animation-timing-function: steps(3, middle);
74 }
75 #box10 {
76 -webkit-animation-timing-function: step-middle;
77 }
46 78
47 </style> 79 </style>
48 <script src="resources/animation-test-helpers.js" type="text/javascript" chars et="utf-8"></script> 80 <script src="resources/animation-test-helpers.js" type="text/javascript" chars et="utf-8"></script>
49 <script type="text/javascript" charset="utf-8"> 81 <script type="text/javascript" charset="utf-8">
50 82
51 const expectedValues = [ 83 const expectedValues = [
52 // [time, element-id, property, expected-value, tolerance] 84 // [time, element-id, property, expected-value, tolerance]
53 [0.25, "box1", "left", 141, 5], 85 [0.25, "box1", "left", 141, 5],
54 [0.50, "box1", "left", 180, 5], 86 [0.50, "box1", "left", 180, 5],
55 [0.75, "box1", "left", 196, 5], 87 [0.75, "box1", "left", 196, 5],
(...skipping 11 matching lines...) Expand all
67 [0.75, "box5", "left", 100, 5], 99 [0.75, "box5", "left", 100, 5],
68 [0.25, "box6", "left", 100, 5], 100 [0.25, "box6", "left", 100, 5],
69 [0.50, "box6", "left", 133, 5], 101 [0.50, "box6", "left", 133, 5],
70 [0.75, "box6", "left", 166, 5], 102 [0.75, "box6", "left", 166, 5],
71 [0.25, "box7", "left", 133, 5], 103 [0.25, "box7", "left", 133, 5],
72 [0.50, "box7", "left", 166, 5], 104 [0.50, "box7", "left", 166, 5],
73 [0.75, "box7", "left", 200, 5], 105 [0.75, "box7", "left", 200, 5],
74 [0.25, "box8", "left", 100, 5], 106 [0.25, "box8", "left", 100, 5],
75 [0.50, "box8", "left", 133, 5], 107 [0.50, "box8", "left", 133, 5],
76 [0.75, "box8", "left", 166, 5], 108 [0.75, "box8", "left", 166, 5],
109 [0.25, "box9", "left", 141, 5],
110 [0.50, "box9", "left", 180, 5],
111 [0.75, "box9", "left", 196, 5],
112 [0.25, "box10", "left", 141, 5],
113 [0.50, "box10", "left", 180, 5],
114 [0.75, "box10", "left", 196, 5],
77 ]; 115 ];
78 116
79 runAnimationTest(expectedValues); 117 runAnimationTest(expectedValues);
80 118
81 </script> 119 </script>
82 </head> 120 </head>
83 <body> 121 <body>
84 This test performs an animation of the left property. It animates over 1 second. 122 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. 123 It takes 3 snapshots and expects each result to be within a specified range.
86 <div class="box" id="box1"> 124 <div class="box" id="box1">
87 </div> 125 </div>
88 <div class="box" id="box2"> 126 <div class="box" id="box2">
89 </div> 127 </div>
90 <div class="box" id="box3"> 128 <div class="box" id="box3">
91 </div> 129 </div>
92 <div class="box" id="box4"> 130 <div class="box" id="box4">
93 </div> 131 </div>
94 <div class="box" id="box5"> 132 <div class="box" id="box5">
95 </div> 133 </div>
96 <div class="box" id="box6"> 134 <div class="box" id="box6">
97 </div> 135 </div>
98 <div class="box" id="box7"> 136 <div class="box" id="box7">
99 </div> 137 </div>
100 <div class="box" id="box8"> 138 <div class="box" id="box8">
101 </div> 139 </div>
140 <div class="box-step-middle" id="box9">
141 </div>
142 <div class="box-step-middle" id="box10">
143 </div>
102 <div id="result"> 144 <div id="result">
103 </div> 145 </div>
104 </body> 146 </body>
105 </html> 147 </html>
OLDNEW
« no previous file with comments | « LayoutTests/animations/animations-parsing-expected.txt ('k') | LayoutTests/animations/timing-functions-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698