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

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: Remove class in BisonCSSParserTest and change to new license text 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 #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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698