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

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: Fix TimingFunctionTestHelperTest Created 6 years, 10 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
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;
(...skipping 25 matching lines...) Expand all
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 /*
47 * The step-middle functions are invalid except through the Web Animations A PI
48 * and should behave like 'ease', unless step-middle has been added to the C SS specification.
49 */
50 #box9 {
51 -webkit-animation-timing-function: steps(3, middle);
52 }
53 #box10 {
54 -webkit-animation-timing-function: step-middle;
55 }
46 56
47 </style> 57 </style>
48 <script src="resources/animation-test-helpers.js" type="text/javascript" chars et="utf-8"></script> 58 <script src="resources/animation-test-helpers.js" type="text/javascript" chars et="utf-8"></script>
49 <script type="text/javascript" charset="utf-8"> 59 <script type="text/javascript" charset="utf-8">
50 60
51 const expectedValues = [ 61 const expectedValues = [
52 // [time, element-id, property, expected-value, tolerance] 62 // [time, element-id, property, expected-value, tolerance]
53 [0.25, "box1", "left", 141, 5], 63 [0.25, "box1", "left", 141, 5],
54 [0.50, "box1", "left", 180, 5], 64 [0.50, "box1", "left", 180, 5],
55 [0.75, "box1", "left", 196, 5], 65 [0.75, "box1", "left", 196, 5],
(...skipping 11 matching lines...) Expand all
67 [0.75, "box5", "left", 100, 5], 77 [0.75, "box5", "left", 100, 5],
68 [0.25, "box6", "left", 100, 5], 78 [0.25, "box6", "left", 100, 5],
69 [0.50, "box6", "left", 133, 5], 79 [0.50, "box6", "left", 133, 5],
70 [0.75, "box6", "left", 166, 5], 80 [0.75, "box6", "left", 166, 5],
71 [0.25, "box7", "left", 133, 5], 81 [0.25, "box7", "left", 133, 5],
72 [0.50, "box7", "left", 166, 5], 82 [0.50, "box7", "left", 166, 5],
73 [0.75, "box7", "left", 200, 5], 83 [0.75, "box7", "left", 200, 5],
74 [0.25, "box8", "left", 100, 5], 84 [0.25, "box8", "left", 100, 5],
75 [0.50, "box8", "left", 133, 5], 85 [0.50, "box8", "left", 133, 5],
76 [0.75, "box8", "left", 166, 5], 86 [0.75, "box8", "left", 166, 5],
87 [0.25, "box9", "left", 141, 5],
88 [0.50, "box9", "left", 180, 5],
89 [0.75, "box9", "left", 196, 5],
90 [0.25, "box10", "left", 141, 5],
91 [0.50, "box10", "left", 180, 5],
92 [0.75, "box10", "left", 196, 5],
77 ]; 93 ];
78 94
79 runAnimationTest(expectedValues); 95 runAnimationTest(expectedValues);
80 96
81 </script> 97 </script>
82 </head> 98 </head>
83 <body> 99 <body>
84 This test performs an animation of the left property. It animates over 1 second. 100 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. 101 It takes 3 snapshots and expects each result to be within a specified range.
86 <div class="box" id="box1"> 102 <div class="box" id="box1">
87 </div> 103 </div>
88 <div class="box" id="box2"> 104 <div class="box" id="box2">
89 </div> 105 </div>
90 <div class="box" id="box3"> 106 <div class="box" id="box3">
91 </div> 107 </div>
92 <div class="box" id="box4"> 108 <div class="box" id="box4">
93 </div> 109 </div>
94 <div class="box" id="box5"> 110 <div class="box" id="box5">
95 </div> 111 </div>
96 <div class="box" id="box6"> 112 <div class="box" id="box6">
97 </div> 113 </div>
98 <div class="box" id="box7"> 114 <div class="box" id="box7">
99 </div> 115 </div>
100 <div class="box" id="box8"> 116 <div class="box" id="box8">
101 </div> 117 </div>
118 <div class="box" id="box9">
119 </div>
120 <div class="box" id="box10">
121 </div>
102 <div id="result"> 122 <div id="result">
103 </div> 123 </div>
104 </body> 124 </body>
105 </html> 125 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698