| 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 | 
|---|