| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | |
| 2 "http://www.w3.org/TR/html4/loose.dtd"> | |
| 3 | |
| 4 <html lang="en"> | |
| 5 <head> | |
| 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| 7 <title>Test timing functions</title> | |
| 8 <style type="text/css" media="screen"> | |
| 9 .box { | |
| 10 position: relative; | |
| 11 left: 100px; | |
| 12 top: 0px; | |
| 13 height: 5px; | |
| 14 width: 5px; | |
| 15 background-color: blue; | |
| 16 animation-duration: 1s; | |
| 17 animation-name: anim; | |
| 18 } | |
| 19 @keyframes anim { | |
| 20 from { left: 100px; } | |
| 21 to { left: 200px; } | |
| 22 } | |
| 23 | |
| 24 .box-step-middle { | |
| 25 position: relative; | |
| 26 left: 100px; | |
| 27 top: 0px; | |
| 28 height: 5px; | |
| 29 width: 5px; | |
| 30 background-color: blue; | |
| 31 animation-duration: 1s; | |
| 32 animation-name: anim-step-middle; | |
| 33 /* | |
| 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 | |
| 36 * default, not the initial, being used. | |
| 37 */ | |
| 38 animation-timing-function: linear; | |
| 39 } | |
| 40 @keyframes anim-step-middle { | |
| 41 from { left: 100px; } | |
| 42 to { left: 200px; } | |
| 43 } | |
| 44 | |
| 45 #box1 { | |
| 46 } | |
| 47 #box2 { | |
| 48 animation-timing-function: ease; | |
| 49 } | |
| 50 #box3 { | |
| 51 animation-timing-function: linear; | |
| 52 } | |
| 53 #box4 { | |
| 54 animation-timing-function: step-start; | |
| 55 } | |
| 56 #box5 { | |
| 57 animation-timing-function: step-end; | |
| 58 } | |
| 59 #box6 { | |
| 60 animation-timing-function: steps(3); | |
| 61 } | |
| 62 #box7 { | |
| 63 animation-timing-function: steps(3, start); | |
| 64 } | |
| 65 #box8 { | |
| 66 animation-timing-function: steps(3, end); | |
| 67 } | |
| 68 #box9 { | |
| 69 animation-timing-function: frames(3); | |
| 70 } | |
| 71 /* | |
| 72 * The step-middle functions are invalid except through the Web Animations A
PI | |
| 73 * (where they are deprecated) and should behave like 'ease'. | |
| 74 */ | |
| 75 #middlebox1 { | |
| 76 animation-timing-function: steps(3, middle); | |
| 77 } | |
| 78 #middlebox2 { | |
| 79 animation-timing-function: step-middle; | |
| 80 } | |
| 81 | |
| 82 </style> | |
| 83 <script src="resources/animation-test-helpers.js" type="text/javascript" chars
et="utf-8"></script> | |
| 84 <script type="text/javascript" charset="utf-8"> | |
| 85 | |
| 86 const expectedValues = [ | |
| 87 // [time, element-id, property, expected-value, tolerance] | |
| 88 [0.25, "box1", "left", 141, 5], | |
| 89 [0.50, "box1", "left", 180, 5], | |
| 90 [0.75, "box1", "left", 196, 5], | |
| 91 [0.25, "box2", "left", 141, 5], | |
| 92 [0.50, "box2", "left", 180, 5], | |
| 93 [0.75, "box2", "left", 196, 5], | |
| 94 [0.25, "box3", "left", 125, 5], | |
| 95 [0.50, "box3", "left", 150, 5], | |
| 96 [0.75, "box3", "left", 175, 5], | |
| 97 [0.25, "box4", "left", 200, 5], | |
| 98 [0.50, "box4", "left", 200, 5], | |
| 99 [0.75, "box4", "left", 200, 5], | |
| 100 [0.25, "box5", "left", 100, 5], | |
| 101 [0.50, "box5", "left", 100, 5], | |
| 102 [0.75, "box5", "left", 100, 5], | |
| 103 [0.25, "box6", "left", 100, 5], | |
| 104 [0.50, "box6", "left", 133, 5], | |
| 105 [0.75, "box6", "left", 166, 5], | |
| 106 [0.25, "box7", "left", 133, 5], | |
| 107 [0.50, "box7", "left", 166, 5], | |
| 108 [0.75, "box7", "left", 200, 5], | |
| 109 [0.25, "box8", "left", 100, 5], | |
| 110 [0.50, "box8", "left", 133, 5], | |
| 111 [0.75, "box8", "left", 166, 5], | |
| 112 [0.25, "box9", "left", 100, 5], | |
| 113 [0.50, "box9", "left", 150, 5], | |
| 114 [0.75, "box9", "left", 200, 5], | |
| 115 [0.25, "middlebox1", "left", 141, 5], | |
| 116 [0.50, "middlebox1", "left", 180, 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], | |
| 121 ]; | |
| 122 | |
| 123 runAnimationTest(expectedValues); | |
| 124 | |
| 125 </script> | |
| 126 </head> | |
| 127 <body> | |
| 128 This test performs an animation of the left property. It animates over 1 second. | |
| 129 It takes 3 snapshots and expects each result to be within a specified range. | |
| 130 <div class="box" id="box1"> | |
| 131 </div> | |
| 132 <div class="box" id="box2"> | |
| 133 </div> | |
| 134 <div class="box" id="box3"> | |
| 135 </div> | |
| 136 <div class="box" id="box4"> | |
| 137 </div> | |
| 138 <div class="box" id="box5"> | |
| 139 </div> | |
| 140 <div class="box" id="box6"> | |
| 141 </div> | |
| 142 <div class="box" id="box7"> | |
| 143 </div> | |
| 144 <div class="box" id="box8"> | |
| 145 </div> | |
| 146 <div class="box" id="box9"> | |
| 147 </div> | |
| 148 <div class="box-step-middle" id="middlebox1"> | |
| 149 </div> | |
| 150 <div class="box-step-middle" id="middlebox2"> | |
| 151 </div> | |
| 152 <div id="result"> | |
| 153 </div> | |
| 154 </body> | |
| 155 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2979503002:
Move animation timing tests to subdirectory (Closed)
