| 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; |
| 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 animation-duration: 1s; |
| 17 -webkit-animation-name: anim; | 17 animation-name: anim; |
| 18 } | 18 } |
| 19 @-webkit-keyframes anim { | 19 @keyframes anim { |
| 20 from { left: 100px; } | 20 from { left: 100px; } |
| 21 to { left: 200px; } | 21 to { left: 200px; } |
| 22 } | 22 } |
| 23 | 23 |
| 24 .box-step-middle { | 24 .box-step-middle { |
| 25 position: relative; | 25 position: relative; |
| 26 left: 100px; | 26 left: 100px; |
| 27 top: 0px; | 27 top: 0px; |
| 28 height: 5px; | 28 height: 5px; |
| 29 width: 5px; | 29 width: 5px; |
| 30 background-color: blue; | 30 background-color: blue; |
| 31 -webkit-animation-duration: 1s; | 31 animation-duration: 1s; |
| 32 -webkit-animation-name: anim-step-middle; | 32 animation-name: anim-step-middle; |
| 33 /* | 33 /* |
| 34 * Set initial timing function to something other than the default (ease) | 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 | 35 * to check that attempts to set easing to step-middle result in the |
| 36 * default, not the initial, being used. | 36 * default, not the initial, being used. |
| 37 */ | 37 */ |
| 38 -webkit-animation-timing-function: linear; | 38 animation-timing-function: linear; |
| 39 } | 39 } |
| 40 @-webkit-keyframes anim-step-middle { | 40 @keyframes anim-step-middle { |
| 41 from { left: 100px; } | 41 from { left: 100px; } |
| 42 to { left: 200px; } | 42 to { left: 200px; } |
| 43 } | 43 } |
| 44 | 44 |
| 45 #box1 { | 45 #box1 { |
| 46 } | 46 } |
| 47 #box2 { | 47 #box2 { |
| 48 -webkit-animation-timing-function: ease; | 48 animation-timing-function: ease; |
| 49 } | 49 } |
| 50 #box3 { | 50 #box3 { |
| 51 -webkit-animation-timing-function: linear; | 51 animation-timing-function: linear; |
| 52 } | 52 } |
| 53 #box4 { | 53 #box4 { |
| 54 -webkit-animation-timing-function: step-start; | 54 animation-timing-function: step-start; |
| 55 } | 55 } |
| 56 #box5 { | 56 #box5 { |
| 57 -webkit-animation-timing-function: step-end; | 57 animation-timing-function: step-end; |
| 58 } | 58 } |
| 59 #box6 { | 59 #box6 { |
| 60 -webkit-animation-timing-function: steps(3); | 60 animation-timing-function: steps(3); |
| 61 } | 61 } |
| 62 #box7 { | 62 #box7 { |
| 63 -webkit-animation-timing-function: steps(3, start); | 63 animation-timing-function: steps(3, start); |
| 64 } | 64 } |
| 65 #box8 { | 65 #box8 { |
| 66 -webkit-animation-timing-function: steps(3, end); | 66 animation-timing-function: steps(3, end); |
| 67 } | 67 } |
| 68 /* | 68 /* |
| 69 * The step-middle functions are invalid except through the Web Animations A
PI | 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. | 70 * and should behave like 'ease', unless step-middle has been added to the C
SS specification. |
| 71 */ | 71 */ |
| 72 #box9 { | 72 #box9 { |
| 73 -webkit-animation-timing-function: steps(3, middle); | 73 animation-timing-function: steps(3, middle); |
| 74 } | 74 } |
| 75 #box10 { | 75 #box10 { |
| 76 -webkit-animation-timing-function: step-middle; | 76 animation-timing-function: step-middle; |
| 77 } | 77 } |
| 78 | 78 |
| 79 </style> | 79 </style> |
| 80 <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> |
| 81 <script type="text/javascript" charset="utf-8"> | 81 <script type="text/javascript" charset="utf-8"> |
| 82 | 82 |
| 83 const expectedValues = [ | 83 const expectedValues = [ |
| 84 // [time, element-id, property, expected-value, tolerance] | 84 // [time, element-id, property, expected-value, tolerance] |
| 85 [0.25, "box1", "left", 141, 5], | 85 [0.25, "box1", "left", 141, 5], |
| 86 [0.50, "box1", "left", 180, 5], | 86 [0.50, "box1", "left", 180, 5], |
| (...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 138 <div class="box" id="box8"> | 138 <div class="box" id="box8"> |
| 139 </div> | 139 </div> |
| 140 <div class="box-step-middle" id="box9"> | 140 <div class="box-step-middle" id="box9"> |
| 141 </div> | 141 </div> |
| 142 <div class="box-step-middle" id="box10"> | 142 <div class="box-step-middle" id="box10"> |
| 143 </div> | 143 </div> |
| 144 <div id="result"> | 144 <div id="result"> |
| 145 </div> | 145 </div> |
| 146 </body> | 146 </body> |
| 147 </html> | 147 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2518273002:
Remove unnecessary webkit prefixes from animation layout tests (Closed)
