| 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 25 matching lines...) Expand all Loading... |
| 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 Loading... |
| 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> |
| OLD | NEW |