| 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 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 58 } | 58 } |
| 59 #box6 { | 59 #box6 { |
| 60 animation-timing-function: steps(3); | 60 animation-timing-function: steps(3); |
| 61 } | 61 } |
| 62 #box7 { | 62 #box7 { |
| 63 animation-timing-function: steps(3, start); | 63 animation-timing-function: steps(3, start); |
| 64 } | 64 } |
| 65 #box8 { | 65 #box8 { |
| 66 animation-timing-function: steps(3, end); | 66 animation-timing-function: steps(3, end); |
| 67 } | 67 } |
| 68 #box9 { |
| 69 animation-timing-function: frames(3); |
| 70 } |
| 68 /* | 71 /* |
| 69 * The step-middle functions are invalid except through the Web Animations A
PI | 72 * 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. | 73 * and should behave like 'ease', unless step-middle has been added to the C
SS specification. |
| 71 */ | 74 */ |
| 72 #box9 { | 75 #middlebox1 { |
| 73 animation-timing-function: steps(3, middle); | 76 animation-timing-function: steps(3, middle); |
| 74 } | 77 } |
| 75 #box10 { | 78 #middlebox2 { |
| 76 animation-timing-function: step-middle; | 79 animation-timing-function: step-middle; |
| 77 } | 80 } |
| 78 | 81 |
| 79 </style> | 82 </style> |
| 80 <script src="resources/animation-test-helpers.js" type="text/javascript" chars
et="utf-8"></script> | 83 <script src="resources/animation-test-helpers.js" type="text/javascript" chars
et="utf-8"></script> |
| 81 <script type="text/javascript" charset="utf-8"> | 84 <script type="text/javascript" charset="utf-8"> |
| 82 | 85 |
| 83 const expectedValues = [ | 86 const expectedValues = [ |
| 84 // [time, element-id, property, expected-value, tolerance] | 87 // [time, element-id, property, expected-value, tolerance] |
| 85 [0.25, "box1", "left", 141, 5], | 88 [0.25, "box1", "left", 141, 5], |
| (...skipping 13 matching lines...) Expand all Loading... |
| 99 [0.75, "box5", "left", 100, 5], | 102 [0.75, "box5", "left", 100, 5], |
| 100 [0.25, "box6", "left", 100, 5], | 103 [0.25, "box6", "left", 100, 5], |
| 101 [0.50, "box6", "left", 133, 5], | 104 [0.50, "box6", "left", 133, 5], |
| 102 [0.75, "box6", "left", 166, 5], | 105 [0.75, "box6", "left", 166, 5], |
| 103 [0.25, "box7", "left", 133, 5], | 106 [0.25, "box7", "left", 133, 5], |
| 104 [0.50, "box7", "left", 166, 5], | 107 [0.50, "box7", "left", 166, 5], |
| 105 [0.75, "box7", "left", 200, 5], | 108 [0.75, "box7", "left", 200, 5], |
| 106 [0.25, "box8", "left", 100, 5], | 109 [0.25, "box8", "left", 100, 5], |
| 107 [0.50, "box8", "left", 133, 5], | 110 [0.50, "box8", "left", 133, 5], |
| 108 [0.75, "box8", "left", 166, 5], | 111 [0.75, "box8", "left", 166, 5], |
| 109 [0.25, "box9", "left", 141, 5], | 112 [0.25, "box9", "left", 100, 5], |
| 110 [0.50, "box9", "left", 180, 5], | 113 [0.50, "box9", "left", 150, 5], |
| 111 [0.75, "box9", "left", 196, 5], | 114 [0.75, "box9", "left", 200, 5], |
| 112 [0.25, "box10", "left", 141, 5], | 115 [0.25, "middlebox1", "left", 141, 5], |
| 113 [0.50, "box10", "left", 180, 5], | 116 [0.50, "middlebox1", "left", 180, 5], |
| 114 [0.75, "box10", "left", 196, 5], | 117 [0.75, "middlebox1", "left", 196, 5], |
| 118 [0.25, "middlebox2", "left", 141, 5], |
| 119 [0.50, "middlebox2", "left", 180, 5], |
| 120 [0.75, "middlebox2", "left", 196, 5], |
| 115 ]; | 121 ]; |
| 116 | 122 |
| 117 runAnimationTest(expectedValues); | 123 runAnimationTest(expectedValues); |
| 118 | 124 |
| 119 </script> | 125 </script> |
| 120 </head> | 126 </head> |
| 121 <body> | 127 <body> |
| 122 This test performs an animation of the left property. It animates over 1 second. | 128 This test performs an animation of the left property. It animates over 1 second. |
| 123 It takes 3 snapshots and expects each result to be within a specified range. | 129 It takes 3 snapshots and expects each result to be within a specified range. |
| 124 <div class="box" id="box1"> | 130 <div class="box" id="box1"> |
| 125 </div> | 131 </div> |
| 126 <div class="box" id="box2"> | 132 <div class="box" id="box2"> |
| 127 </div> | 133 </div> |
| 128 <div class="box" id="box3"> | 134 <div class="box" id="box3"> |
| 129 </div> | 135 </div> |
| 130 <div class="box" id="box4"> | 136 <div class="box" id="box4"> |
| 131 </div> | 137 </div> |
| 132 <div class="box" id="box5"> | 138 <div class="box" id="box5"> |
| 133 </div> | 139 </div> |
| 134 <div class="box" id="box6"> | 140 <div class="box" id="box6"> |
| 135 </div> | 141 </div> |
| 136 <div class="box" id="box7"> | 142 <div class="box" id="box7"> |
| 137 </div> | 143 </div> |
| 138 <div class="box" id="box8"> | 144 <div class="box" id="box8"> |
| 139 </div> | 145 </div> |
| 140 <div class="box-step-middle" id="box9"> | 146 <div class="box" id="box9"> |
| 141 </div> | 147 </div> |
| 142 <div class="box-step-middle" id="box10"> | 148 <div class="box-step-middle" id="middlebox1"> |
| 149 </div> |
| 150 <div class="box-step-middle" id="middlebox2"> |
| 143 </div> | 151 </div> |
| 144 <div id="result"> | 152 <div id="result"> |
| 145 </div> | 153 </div> |
| 146 </body> | 154 </body> |
| 147 </html> | 155 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2775143002:
Implement frames() timing function (Closed)
