| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <script src="../fast/js/resources/js-test-pre.js"></script> |
| 5 </head> |
| 6 <body> |
| 7 <script> |
| 8 description("Test the parsing and the computed style values of the animations pr
operties.") |
| 9 |
| 10 var testContainer = document.createElement("div"); |
| 11 document.body.appendChild(testContainer); |
| 12 |
| 13 testContainer.innerHTML = '<div style="width:500px;height:500px"><div id="test">
hello</div></div>'; |
| 14 |
| 15 e = document.getElementById('test'); |
| 16 style = e.style; |
| 17 computedStyle = window.getComputedStyle(e, null); |
| 18 |
| 19 // This function checks the return value of computedStyle.animation and verifies
Blink can parse it. |
| 20 function checkTransitionShorthandValue() { |
| 21 var before = computedStyle.getPropertyValue('animation'); |
| 22 e.style.animation = ''; |
| 23 e.style.animation = before; |
| 24 return (computedStyle.getPropertyValue('animation') == before); |
| 25 } |
| 26 |
| 27 debug("Valid animation-name values."); |
| 28 // Initial test. |
| 29 shouldBe("computedStyle.animationName", "'none'"); |
| 30 shouldBe("computedStyle.webkitAnimationName", "'none'"); |
| 31 |
| 32 style.animationName = "none"; |
| 33 shouldNotBe("Object.keys(style).indexOf('animationName')", "-1"); |
| 34 shouldNotBe("Object.keys(style).indexOf('webkitAnimationName')", "-1"); |
| 35 shouldBe("style.animationName", "'none'"); |
| 36 shouldBe("computedStyle.animationName", "'none'"); |
| 37 shouldBe("style.webkitAnimationName", "'none'"); |
| 38 shouldBe("computedStyle.webkitAnimationName", "'none'"); |
| 39 |
| 40 style.animationName = "none, none"; |
| 41 shouldBe("style.animationName", "'none, none'"); |
| 42 shouldBe("computedStyle.animationName", "'none'"); |
| 43 shouldBe("style.webkitAnimationName", "'none, none'"); |
| 44 shouldBe("computedStyle.webkitAnimationName", "'none'"); |
| 45 |
| 46 style.animationName = "myAnim"; |
| 47 shouldBe("style.animationName", "'myAnim'"); |
| 48 shouldBe("computedStyle.animationName", "'myAnim'"); |
| 49 shouldBe("style.webkitAnimationName", "'myAnim'"); |
| 50 shouldBe("computedStyle.webkitAnimationName", "'myAnim'"); |
| 51 |
| 52 style.animationName = "background-position, font-size"; |
| 53 shouldBe("style.animationName", "'background-position, font-size'"); |
| 54 shouldBe("computedStyle.animationName", "'background-position, font-size'"); |
| 55 shouldBe("style.webkitAnimationName", "'background-position, font-size'"); |
| 56 shouldBe("computedStyle.webkitAnimationName", "'background-position, font-size'"
); |
| 57 |
| 58 style.animationName = "background-position, font-size, color"; |
| 59 shouldBe("style.animationName", "'background-position, font-size, color'"); |
| 60 shouldBe("computedStyle.animationName", "'background-position, font-size, color'
"); |
| 61 shouldBe("style.webkitAnimationName", "'background-position, font-size, color'")
; |
| 62 shouldBe("computedStyle.webkitAnimationName", "'background-position, font-size,
color'"); |
| 63 |
| 64 style.animationName = "all, font-size, color"; |
| 65 shouldBe("style.animationName", "'all, font-size, color'"); |
| 66 shouldBe("computedStyle.animationName", "'all, font-size, color'"); |
| 67 shouldBe("style.webkitAnimationName", "'all, font-size, color'"); |
| 68 shouldBe("computedStyle.webkitAnimationName", "'all, font-size, color'"); |
| 69 |
| 70 style.animationName = "inherit"; |
| 71 shouldBe("style.animationName", "'inherit'"); |
| 72 shouldBe("computedStyle.animationName", "'none'"); |
| 73 shouldBe("style.webkitAnimationName", "'inherit'"); |
| 74 shouldBe("computedStyle.webkitAnimationName", "'none'"); |
| 75 |
| 76 style.animationName = "initial"; |
| 77 shouldBe("style.animationName", "'initial'"); |
| 78 shouldBe("computedStyle.animationName", "'none'"); |
| 79 shouldBe("style.webkitAnimationName", "'initial'"); |
| 80 shouldBe("computedStyle.webkitAnimationName", "'none'"); |
| 81 |
| 82 debug("Invalid animation-name values."); |
| 83 style.animationName = ""; |
| 84 |
| 85 style.animationName = "0"; |
| 86 shouldBe("style.animationName", "''"); |
| 87 shouldBe("computedStyle.animationName", "'none'"); |
| 88 shouldBe("style.webkitAnimationName", "''"); |
| 89 shouldBe("computedStyle.webkitAnimationName", "'none'"); |
| 90 |
| 91 style.animationName = "all none"; |
| 92 shouldBe("style.animationName", "''"); |
| 93 shouldBe("computedStyle.animationName", "'none'"); |
| 94 shouldBe("style.webkitAnimationName", "''"); |
| 95 shouldBe("computedStyle.webkitAnimationName", "'none'"); |
| 96 |
| 97 style.animationName = "opacity width"; |
| 98 shouldBe("style.animationName", "''"); |
| 99 shouldBe("computedStyle.animationName", "'none'"); |
| 100 shouldBe("style.webkitAnimationName", "''"); |
| 101 shouldBe("computedStyle.webkitAnimationName", "'none'"); |
| 102 |
| 103 style.animationName = ""; |
| 104 |
| 105 debug("Valid animation-duration values."); |
| 106 // Initial test. |
| 107 shouldBe("computedStyle.animationDuration", "'0s'"); |
| 108 shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| 109 |
| 110 style.animationDuration = "0s"; |
| 111 shouldNotBe("Object.keys(style).indexOf('animationDuration')", "-1"); |
| 112 shouldNotBe("Object.keys(style).indexOf('webkitAnimationDuration')", "-1"); |
| 113 shouldBe("style.animationDuration", "'0s'"); |
| 114 shouldBe("computedStyle.animationDuration", "'0s'"); |
| 115 shouldBe("style.webkitAnimationDuration", "'0s'"); |
| 116 shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| 117 |
| 118 style.animationDuration = "5s"; |
| 119 shouldBe("style.animationDuration", "'5s'"); |
| 120 shouldBe("computedStyle.animationDuration", "'5s'"); |
| 121 shouldBe("style.webkitAnimationDuration", "'5s'"); |
| 122 shouldBe("computedStyle.webkitAnimationDuration", "'5s'"); |
| 123 |
| 124 style.animationDuration = "10ms"; |
| 125 shouldBe("style.animationDuration", "'10ms'"); |
| 126 shouldBe("computedStyle.animationDuration", "'0.01s'"); |
| 127 shouldBe("style.webkitAnimationDuration", "'10ms'"); |
| 128 shouldBe("computedStyle.webkitAnimationDuration", "'0.01s'"); |
| 129 |
| 130 style.animationDuration = "10ms, 20s"; |
| 131 shouldBe("style.animationDuration", "'10ms, 20s'"); |
| 132 shouldBe("computedStyle.animationDuration", "'0.01s, 20s'"); |
| 133 shouldBe("style.webkitAnimationDuration", "'10ms, 20s'"); |
| 134 shouldBe("computedStyle.webkitAnimationDuration", "'0.01s, 20s'"); |
| 135 |
| 136 debug("Invalid animation-duration values."); |
| 137 style.animationDuration = ""; |
| 138 |
| 139 // Negative values are invalid. |
| 140 style.animationDuration = "-10ms"; |
| 141 shouldBe("style.animationDuration", "''"); |
| 142 shouldBe("computedStyle.animationDuration", "'0s'"); |
| 143 shouldBe("style.webkitAnimationDuration", "''"); |
| 144 shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| 145 |
| 146 style.animationDuration = "'5ms'"; |
| 147 shouldBe("style.animationDuration", "''"); |
| 148 shouldBe("computedStyle.animationDuration", "'0s'"); |
| 149 shouldBe("style.webkitAnimationDuration", "''"); |
| 150 shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| 151 |
| 152 style.animationDuration = "30px"; |
| 153 shouldBe("style.animationDuration", "''"); |
| 154 shouldBe("computedStyle.animationDuration", "'0s'"); |
| 155 shouldBe("style.webkitAnimationDuration", "''"); |
| 156 shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| 157 |
| 158 style.animationDuration = "solid"; |
| 159 shouldBe("style.animationDuration", "''"); |
| 160 shouldBe("computedStyle.animationDuration", "'0s'"); |
| 161 shouldBe("style.webkitAnimationDuration", "''"); |
| 162 shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| 163 |
| 164 style.animationDuration = "20"; |
| 165 shouldBe("style.animationDuration", "''"); |
| 166 shouldBe("computedStyle.animationDuration", "'0s'"); |
| 167 shouldBe("style.webkitAnimationDuration", "''"); |
| 168 shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| 169 |
| 170 style.animationDuration = "20%"; |
| 171 shouldBe("style.animationDuration", "''"); |
| 172 shouldBe("computedStyle.animationDuration", "'0s'"); |
| 173 shouldBe("style.webkitAnimationDuration", "''"); |
| 174 shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| 175 |
| 176 style.animationDuration = "0s, 20px"; |
| 177 shouldBe("style.animationDuration", "''"); |
| 178 shouldBe("computedStyle.animationDuration", "'0s'"); |
| 179 shouldBe("style.webkitAnimationDuration", "''"); |
| 180 shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| 181 |
| 182 debug("Valid animation-timing-function values."); |
| 183 // Initial test. |
| 184 shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| 185 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| 186 |
| 187 style.animationTimingFunction = "linear"; |
| 188 shouldNotBe("Object.keys(style).indexOf('animationTimingFunction')", "-1"); |
| 189 shouldNotBe("Object.keys(style).indexOf('webkitAnimationTimingFunction')", "-1")
; |
| 190 shouldBe("style.animationTimingFunction", "'linear'"); |
| 191 shouldBe("computedStyle.animationTimingFunction", "'linear'"); |
| 192 shouldBe("style.webkitAnimationTimingFunction", "'linear'"); |
| 193 shouldBe("computedStyle.webkitAnimationTimingFunction", "'linear'"); |
| 194 |
| 195 style.animationTimingFunction = "ease"; |
| 196 shouldBe("style.animationTimingFunction", "'ease'"); |
| 197 shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| 198 shouldBe("style.webkitAnimationTimingFunction", "'ease'"); |
| 199 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| 200 |
| 201 style.animationTimingFunction = "ease-in"; |
| 202 shouldBe("style.animationTimingFunction", "'ease-in'"); |
| 203 shouldBe("computedStyle.animationTimingFunction", "'ease-in'"); |
| 204 shouldBe("style.webkitAnimationTimingFunction", "'ease-in'"); |
| 205 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease-in'"); |
| 206 |
| 207 style.animationTimingFunction = "ease-out"; |
| 208 shouldBe("style.animationTimingFunction", "'ease-out'"); |
| 209 shouldBe("computedStyle.animationTimingFunction", "'ease-out'"); |
| 210 shouldBe("style.webkitAnimationTimingFunction", "'ease-out'"); |
| 211 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease-out'"); |
| 212 |
| 213 style.animationTimingFunction = "ease-in-out"; |
| 214 shouldBe("style.animationTimingFunction", "'ease-in-out'"); |
| 215 shouldBe("computedStyle.animationTimingFunction", "'ease-in-out'"); |
| 216 shouldBe("style.webkitAnimationTimingFunction", "'ease-in-out'"); |
| 217 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease-in-out'"); |
| 218 |
| 219 style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1)"; |
| 220 shouldBe("style.animationTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'"); |
| 221 shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25
, 1)'"); |
| 222 shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25,
1)'"); |
| 223 shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.25, 0.1
, 0.25, 1)'"); |
| 224 |
| 225 style.animationTimingFunction = "cubic-bezier(0.1, 0, 0.23, 0.4)"; |
| 226 shouldBe("style.animationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'"); |
| 227 shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0
.4)'"); |
| 228 shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4
)'"); |
| 229 shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 0, 0
.23, 0.4)'"); |
| 230 |
| 231 style.animationTimingFunction = "cubic-bezier(0.1, 0, 0.23, 3)"; |
| 232 shouldBe("style.animationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'"); |
| 233 shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3
)'"); |
| 234 shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'
"); |
| 235 shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 0, 0
.23, 3)'"); |
| 236 |
| 237 style.animationTimingFunction = "cubic-bezier(0.1, 5, 0.23, 3)"; |
| 238 shouldBe("style.animationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'"); |
| 239 shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3
)'"); |
| 240 shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'
"); |
| 241 shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 5, 0
.23, 3)'"); |
| 242 |
| 243 style.animationTimingFunction = "cubic-bezier(0.1, 5, 0.23, 0)"; |
| 244 shouldBe("style.animationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'"); |
| 245 shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0
)'"); |
| 246 shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'
"); |
| 247 shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 5, 0
.23, 0)'"); |
| 248 |
| 249 style.animationTimingFunction = "cubic-bezier(0.2, 2, 0.2, -0.4)"; |
| 250 shouldBe("style.animationTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'"); |
| 251 shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0
.4)'"); |
| 252 shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4
)'"); |
| 253 shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.2, 2, 0
.2, -0.4)'"); |
| 254 |
| 255 style.animationTimingFunction = "cubic-bezier(0.2, -2, 0.2, 0.4)"; |
| 256 shouldBe("style.animationTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'"); |
| 257 shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0
.4)'"); |
| 258 shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4
)'"); |
| 259 shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.2, -2,
0.2, 0.4)'"); |
| 260 |
| 261 style.animationTimingFunction = "step-start"; |
| 262 shouldBe("style.animationTimingFunction", "'step-start'"); |
| 263 shouldBe("computedStyle.animationTimingFunction", "'steps(1, start)'"); |
| 264 shouldBe("style.webkitAnimationTimingFunction", "'step-start'"); |
| 265 shouldBe("computedStyle.webkitAnimationTimingFunction", "'steps(1, start)'"); |
| 266 |
| 267 style.animationTimingFunction = "step-end"; |
| 268 shouldBe("style.animationTimingFunction", "'step-end'"); |
| 269 shouldBe("computedStyle.animationTimingFunction", "'steps(1, end)'"); |
| 270 shouldBe("style.webkitAnimationTimingFunction", "'step-end'"); |
| 271 shouldBe("computedStyle.webkitAnimationTimingFunction", "'steps(1, end)'"); |
| 272 |
| 273 style.animationTimingFunction = "steps(3)"; |
| 274 shouldBe("style.animationTimingFunction", "'steps(3, end)'"); |
| 275 shouldBe("computedStyle.animationTimingFunction", "'steps(3, end)'"); |
| 276 shouldBe("style.webkitAnimationTimingFunction", "'steps(3, end)'"); |
| 277 shouldBe("computedStyle.webkitAnimationTimingFunction", "'steps(3, end)'"); |
| 278 |
| 279 style.animationTimingFunction = "steps(4, end)"; |
| 280 shouldBe("style.animationTimingFunction", "'steps(4, end)'"); |
| 281 shouldBe("computedStyle.animationTimingFunction", "'steps(4, end)'"); |
| 282 shouldBe("style.webkitAnimationTimingFunction", "'steps(4, end)'"); |
| 283 shouldBe("computedStyle.webkitAnimationTimingFunction", "'steps(4, end)'"); |
| 284 |
| 285 style.animationTimingFunction = "steps(5, start)"; |
| 286 shouldBe("style.animationTimingFunction", "'steps(5, start)'"); |
| 287 shouldBe("computedStyle.animationTimingFunction", "'steps(5, start)'"); |
| 288 shouldBe("style.webkitAnimationTimingFunction", "'steps(5, start)'"); |
| 289 shouldBe("computedStyle.webkitAnimationTimingFunction", "'steps(5, start)'"); |
| 290 |
| 291 style.animationName = "anim1, anim2"; |
| 292 |
| 293 style.animationTimingFunction = "ease-in-out, ease-in"; |
| 294 shouldBe("style.animationTimingFunction", "'ease-in-out, ease-in'"); |
| 295 shouldBe("computedStyle.animationTimingFunction", "'ease-in-out, ease-in'"); |
| 296 shouldBe("style.webkitAnimationTimingFunction", "'ease-in-out, ease-in'"); |
| 297 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease-in-out, ease-in'"
); |
| 298 |
| 299 style.animationTimingFunction = "ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)"; |
| 300 shouldBe("style.animationTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.
23, 0.4)'"); |
| 301 shouldBe("computedStyle.animationTimingFunction", "'ease-in-out, cubic-bezier(0.
1, 0, 0.23, 0.4)'"); |
| 302 shouldBe("style.webkitAnimationTimingFunction", "'ease-in-out, cubic-bezier(0.1,
0, 0.23, 0.4)'"); |
| 303 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease-in-out, cubic-bez
ier(0.1, 0, 0.23, 0.4)'"); |
| 304 |
| 305 style.animationTimingFunction = "steps(3, start), ease-in-out"; |
| 306 shouldBe("style.animationTimingFunction", "'steps(3, start), ease-in-out'"); |
| 307 shouldBe("computedStyle.animationTimingFunction", "'steps(3, start), ease-in-out
'"); |
| 308 shouldBe("style.webkitAnimationTimingFunction", "'steps(3, start), ease-in-out'"
); |
| 309 shouldBe("computedStyle.webkitAnimationTimingFunction", "'steps(3, start), ease-
in-out'"); |
| 310 |
| 311 debug("Invalid animation-timing-function values."); |
| 312 style.animationName = ""; |
| 313 style.animationTimingFunction = ""; |
| 314 |
| 315 style.animationTimingFunction = "cubic-bezier(3, 0.1, 4, 1)"; |
| 316 shouldBe("style.animationTimingFunction", "''"); |
| 317 shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| 318 shouldBe("style.webkitAnimationTimingFunction", "''"); |
| 319 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| 320 |
| 321 style.animationTimingFunction = "cubic-bezier(1, 0.1, 3, 1)"; |
| 322 shouldBe("style.animationTimingFunction", "''"); |
| 323 shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| 324 shouldBe("style.webkitAnimationTimingFunction", "''"); |
| 325 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| 326 |
| 327 style.animationTimingFunction = "cubic-bezier(0.1, 0, 4, 0.4)"; |
| 328 shouldBe("style.animationTimingFunction", "''"); |
| 329 shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| 330 shouldBe("style.webkitAnimationTimingFunction", "''"); |
| 331 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| 332 |
| 333 style.animationTimingFunction = "cubic-bezier(3, 0, 4, 0.4)"; |
| 334 shouldBe("style.animationTimingFunction", "''"); |
| 335 shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| 336 shouldBe("style.webkitAnimationTimingFunction", "''"); |
| 337 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| 338 |
| 339 style.animationTimingFunction = "cubic-bezier(3, 0, 0.2, 0.4)"; |
| 340 shouldBe("style.animationTimingFunction", "''"); |
| 341 shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| 342 shouldBe("style.webkitAnimationTimingFunction", "''"); |
| 343 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| 344 |
| 345 style.animationTimingFunction = "cubic-bezier(-0.2, 0, 0.2, 0.4)"; |
| 346 shouldBe("style.animationTimingFunction", "''"); |
| 347 shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| 348 shouldBe("style.webkitAnimationTimingFunction", "''"); |
| 349 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| 350 |
| 351 style.animationTimingFunction = "cubic-bezier(0.2, 2, -0.2, 0.4)"; |
| 352 shouldBe("style.animationTimingFunction", "''"); |
| 353 shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| 354 shouldBe("style.webkitAnimationTimingFunction", "''"); |
| 355 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| 356 |
| 357 style.animationTimingFunction = "steps(5, 3)"; |
| 358 shouldBe("style.animationTimingFunction", "''"); |
| 359 shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| 360 shouldBe("style.webkitAnimationTimingFunction", "''"); |
| 361 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| 362 |
| 363 style.animationTimingFunction = "steps(-5, start)"; |
| 364 shouldBe("style.animationTimingFunction", "''"); |
| 365 shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| 366 shouldBe("style.webkitAnimationTimingFunction", "''"); |
| 367 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| 368 |
| 369 style.animationTimingFunction = "steps(5, start, end)"; |
| 370 shouldBe("style.animationTimingFunction", "''"); |
| 371 shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| 372 shouldBe("style.webkitAnimationTimingFunction", "''"); |
| 373 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| 374 |
| 375 style.animationTimingFunction = "step(5)"; |
| 376 shouldBe("style.animationTimingFunction", "''"); |
| 377 shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| 378 shouldBe("style.webkitAnimationTimingFunction", "''"); |
| 379 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| 380 |
| 381 style.animationTimingFunction = "red"; |
| 382 shouldBe("style.animationTimingFunction", "''"); |
| 383 shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| 384 shouldBe("style.webkitAnimationTimingFunction", "''"); |
| 385 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| 386 |
| 387 style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25)"; |
| 388 shouldBe("style.animationTimingFunction", "''"); |
| 389 shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| 390 shouldBe("style.webkitAnimationTimingFunction", "''"); |
| 391 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| 392 |
| 393 style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1, 2)"; |
| 394 shouldBe("style.animationTimingFunction", "''"); |
| 395 shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| 396 shouldBe("style.webkitAnimationTimingFunction", "''"); |
| 397 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| 398 |
| 399 style.animationTimingFunction = "cubic-foo(0.25, 0.1, 0.25, 1)"; |
| 400 shouldBe("style.animationTimingFunction", "''"); |
| 401 shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| 402 shouldBe("style.webkitAnimationTimingFunction", "''"); |
| 403 shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| 404 |
| 405 debug("Valid animation-delay values."); |
| 406 // Initial test. |
| 407 shouldBe("computedStyle.animationDelay", "'0s'"); |
| 408 shouldBe("computedStyle.webkitAnimationDelay", "'0s'"); |
| 409 |
| 410 style.animationDelay = "0s"; |
| 411 shouldNotBe("Object.keys(style).indexOf('animationDelay')", "-1"); |
| 412 shouldNotBe("Object.keys(style).indexOf('webkitAnimationDelay')", "-1"); |
| 413 shouldBe("style.animationDelay", "'0s'"); |
| 414 shouldBe("computedStyle.animationDelay", "'0s'"); |
| 415 shouldBe("style.webkitAnimationDelay", "'0s'"); |
| 416 shouldBe("computedStyle.webkitAnimationDelay", "'0s'"); |
| 417 |
| 418 style.animationDelay = "5s"; |
| 419 shouldBe("style.animationDelay", "'5s'"); |
| 420 shouldBe("computedStyle.animationDelay", "'5s'"); |
| 421 shouldBe("style.webkitAnimationDelay", "'5s'"); |
| 422 shouldBe("computedStyle.webkitAnimationDelay", "'5s'"); |
| 423 |
| 424 style.animationDelay = "10ms"; |
| 425 shouldBe("style.animationDelay", "'10ms'"); |
| 426 shouldBe("computedStyle.animationDelay", "'0.01s'"); |
| 427 shouldBe("style.webkitAnimationDelay", "'10ms'"); |
| 428 shouldBe("computedStyle.webkitAnimationDelay", "'0.01s'"); |
| 429 |
| 430 style.animationDelay = "-10ms"; |
| 431 shouldBe("style.animationDelay", "'-10ms'"); |
| 432 shouldBe("computedStyle.animationDelay", "'-0.01s'"); |
| 433 shouldBe("style.webkitAnimationDelay", "'-10ms'"); |
| 434 shouldBe("computedStyle.webkitAnimationDelay", "'-0.01s'"); |
| 435 |
| 436 style.transitionProperty = "opacity, width"; |
| 437 |
| 438 style.animationDelay = "-10ms, 20s"; |
| 439 shouldBe("style.animationDelay", "'-10ms, 20s'"); |
| 440 shouldBe("computedStyle.animationDelay", "'-0.01s, 20s'"); |
| 441 shouldBe("style.webkitAnimationDelay", "'-10ms, 20s'"); |
| 442 shouldBe("computedStyle.webkitAnimationDelay", "'-0.01s, 20s'"); |
| 443 |
| 444 debug("Invalid animation-delay values."); |
| 445 style.transitionProperty = "opacity"; |
| 446 style.animationDelay = ""; |
| 447 |
| 448 style.animationDelay = "'5ms'"; |
| 449 shouldBe("style.animationDelay", "''"); |
| 450 shouldBe("computedStyle.animationDelay", "'0s'"); |
| 451 shouldBe("style.webkitAnimationDelay", "''"); |
| 452 shouldBe("computedStyle.webkitAnimationDelay", "'0s'"); |
| 453 |
| 454 style.animationDelay = "30px"; |
| 455 shouldBe("style.animationDelay", "''"); |
| 456 shouldBe("computedStyle.animationDelay", "'0s'"); |
| 457 shouldBe("style.webkitAnimationDelay", "''"); |
| 458 shouldBe("computedStyle.webkitAnimationDelay", "'0s'"); |
| 459 |
| 460 style.animationDelay = "solid"; |
| 461 shouldBe("style.animationDelay", "''"); |
| 462 shouldBe("computedStyle.animationDelay", "'0s'"); |
| 463 shouldBe("style.webkitAnimationDelay", "''"); |
| 464 shouldBe("computedStyle.webkitAnimationDelay", "'0s'"); |
| 465 |
| 466 style.animationDelay = "20"; |
| 467 shouldBe("style.animationDelay", "''"); |
| 468 shouldBe("computedStyle.animationDelay", "'0s'"); |
| 469 shouldBe("style.webkitAnimationDelay", "''"); |
| 470 shouldBe("computedStyle.webkitAnimationDelay", "'0s'"); |
| 471 |
| 472 style.animationDelay = "20%"; |
| 473 shouldBe("style.animationDelay", "''"); |
| 474 shouldBe("computedStyle.animationDelay", "'0s'"); |
| 475 shouldBe("style.webkitAnimationDelay", "''"); |
| 476 shouldBe("computedStyle.webkitAnimationDelay", "'0s'"); |
| 477 |
| 478 style.animationDelay = "0s, 20px"; |
| 479 shouldBe("style.animationDelay", "''"); |
| 480 shouldBe("computedStyle.animationDelay", "'0s'"); |
| 481 shouldBe("style.webkitAnimationDelay", "''"); |
| 482 shouldBe("computedStyle.webkitAnimationDelay", "'0s'"); |
| 483 |
| 484 debug("Valid animation-iteration-count values."); |
| 485 // Initial test. |
| 486 shouldBe("computedStyle.animationIterationCount", "'1'"); |
| 487 shouldBe("computedStyle.webkitAnimationIterationCount", "'1'"); |
| 488 |
| 489 style.animationIterationCount = "4"; |
| 490 shouldNotBe("Object.keys(style).indexOf('animationIterationCount')", "-1"); |
| 491 shouldNotBe("Object.keys(style).indexOf('webkitAnimationIterationCount')", "-1")
; |
| 492 shouldBe("style.animationIterationCount", "'4'"); |
| 493 shouldBe("computedStyle.animationIterationCount", "'4'"); |
| 494 shouldBe("style.webkitAnimationIterationCount", "'4'"); |
| 495 shouldBe("computedStyle.webkitAnimationIterationCount", "'4'"); |
| 496 |
| 497 style.animationIterationCount = "2.5"; |
| 498 shouldBe("style.animationIterationCount", "'2.5'"); |
| 499 shouldBe("computedStyle.animationIterationCount", "'2.5'"); |
| 500 shouldBe("style.webkitAnimationIterationCount", "'2.5'"); |
| 501 shouldBe("computedStyle.webkitAnimationIterationCount", "'2.5'"); |
| 502 |
| 503 style.animationIterationCount = "infinite"; |
| 504 shouldBe("style.animationIterationCount", "'infinite'"); |
| 505 shouldBe("computedStyle.animationIterationCount", "'infinite'"); |
| 506 shouldBe("style.webkitAnimationIterationCount", "'infinite'"); |
| 507 shouldBe("computedStyle.webkitAnimationIterationCount", "'infinite'"); |
| 508 |
| 509 style.animationIterationCount = "infinite, 3"; |
| 510 shouldBe("style.animationIterationCount", "'infinite, 3'"); |
| 511 shouldBe("computedStyle.animationIterationCount", "'infinite, 3'"); |
| 512 shouldBe("style.webkitAnimationIterationCount", "'infinite, 3'"); |
| 513 shouldBe("computedStyle.webkitAnimationIterationCount", "'infinite, 3'"); |
| 514 |
| 515 style.animationIterationCount = "0"; |
| 516 shouldBe("style.animationIterationCount", "'0'"); |
| 517 shouldBe("computedStyle.animationIterationCount", "'0'"); |
| 518 shouldBe("style.webkitAnimationIterationCount", "'0'"); |
| 519 shouldBe("computedStyle.webkitAnimationIterationCount", "'0'"); |
| 520 |
| 521 style.animationIterationCount = "infinite, infinite"; |
| 522 shouldBe("style.animationIterationCount", "'infinite, infinite'"); |
| 523 shouldBe("computedStyle.animationIterationCount", "'infinite, infinite'"); |
| 524 shouldBe("style.webkitAnimationIterationCount", "'infinite, infinite'"); |
| 525 shouldBe("computedStyle.webkitAnimationIterationCount", "'infinite, infinite'"); |
| 526 |
| 527 debug("Invalid animation-iteration-count values."); |
| 528 style.animationIterationCount = ""; |
| 529 |
| 530 style.animationIterationCount = "none"; |
| 531 shouldBe("style.animationIterationCount", "''"); |
| 532 shouldBe("computedStyle.animationIterationCount", "'1'"); |
| 533 shouldBe("style.webkitAnimationIterationCount", "''"); |
| 534 shouldBe("computedStyle.webkitAnimationIterationCount", "'1'"); |
| 535 |
| 536 style.animationIterationCount = "-3"; |
| 537 shouldBe("style.animationIterationCount", "''"); |
| 538 shouldBe("computedStyle.animationIterationCount", "'1'"); |
| 539 shouldBe("style.webkitAnimationIterationCount", "''"); |
| 540 shouldBe("computedStyle.webkitAnimationIterationCount", "'1'"); |
| 541 |
| 542 style.animationIterationCount = "infinite, -3"; |
| 543 shouldBe("style.animationIterationCount", "''"); |
| 544 shouldBe("computedStyle.animationIterationCount", "'1'"); |
| 545 shouldBe("style.webkitAnimationIterationCount", "''"); |
| 546 shouldBe("computedStyle.webkitAnimationIterationCount", "'1'"); |
| 547 |
| 548 style.animationIterationCount = "solid"; |
| 549 shouldBe("style.animationIterationCount", "''"); |
| 550 shouldBe("computedStyle.animationIterationCount", "'1'"); |
| 551 shouldBe("style.webkitAnimationIterationCount", "''"); |
| 552 shouldBe("computedStyle.webkitAnimationIterationCount", "'1'"); |
| 553 |
| 554 style.animationIterationCount = "-1, infinite"; |
| 555 shouldBe("style.animationIterationCount", "''"); |
| 556 shouldBe("computedStyle.animationIterationCount", "'1'"); |
| 557 shouldBe("style.webkitAnimationIterationCount", "''"); |
| 558 shouldBe("computedStyle.webkitAnimationIterationCount", "'1'"); |
| 559 |
| 560 style.animationIterationCount = "-1, 3"; |
| 561 shouldBe("style.animationIterationCount", "''"); |
| 562 shouldBe("computedStyle.animationIterationCount", "'1'"); |
| 563 shouldBe("style.webkitAnimationIterationCount", "''"); |
| 564 shouldBe("computedStyle.webkitAnimationIterationCount", "'1'"); |
| 565 |
| 566 debug("Valid animation-direction values."); |
| 567 // Initial test. |
| 568 shouldBe("computedStyle.animationDirection", "'normal'"); |
| 569 shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| 570 |
| 571 style.animationDirection = "reverse"; |
| 572 shouldNotBe("Object.keys(style).indexOf('animationDirection')", "-1"); |
| 573 shouldNotBe("Object.keys(style).indexOf('webkitAnimationDirection')", "-1"); |
| 574 shouldBe("style.animationDirection", "'reverse'"); |
| 575 // FIXME : https://code.google.com/p/chromium/issues/detail?id=271573 |
| 576 //shouldBe("computedStyle.animationDirection", "'reverse'"); |
| 577 shouldBe("style.webkitAnimationDirection", "'reverse'"); |
| 578 //shouldBe("computedStyle.webkitAnimationDirection", "'reverse'"); |
| 579 |
| 580 style.animationDirection = "normal"; |
| 581 shouldBe("style.animationDirection", "'normal'"); |
| 582 shouldBe("computedStyle.animationDirection", "'normal'"); |
| 583 shouldBe("style.webkitAnimationDirection", "'normal'"); |
| 584 shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| 585 |
| 586 style.animationDirection = "normal, alternate"; |
| 587 shouldBe("style.animationDirection", "'normal, alternate'"); |
| 588 shouldBe("computedStyle.animationDirection", "'normal, alternate'"); |
| 589 shouldBe("style.webkitAnimationDirection", "'normal, alternate'"); |
| 590 shouldBe("computedStyle.webkitAnimationDirection", "'normal, alternate'"); |
| 591 |
| 592 style.animationDirection = "alternate"; |
| 593 shouldBe("style.animationDirection", "'alternate'"); |
| 594 shouldBe("computedStyle.animationDirection", "'alternate'"); |
| 595 shouldBe("style.webkitAnimationDirection", "'alternate'"); |
| 596 shouldBe("computedStyle.webkitAnimationDirection", "'alternate'"); |
| 597 |
| 598 style.animationDirection = "alternate-reverse"; |
| 599 shouldBe("style.animationDirection", "'alternate-reverse'"); |
| 600 // FIXME : https://code.google.com/p/chromium/issues/detail?id=271573 |
| 601 //shouldBe("computedStyle.animationDirection", "'alternate-reverse'"); |
| 602 shouldBe("style.webkitAnimationDirection", "'alternate-reverse'"); |
| 603 //shouldBe("computedStyle.webkitAnimationDirection", "'alternate-reverse'"); |
| 604 |
| 605 debug("Invalid animation-direction values."); |
| 606 style.animationDirection = ""; |
| 607 |
| 608 style.animationDirection = "solid"; |
| 609 shouldBe("style.animationDirection", "''"); |
| 610 shouldBe("computedStyle.animationDirection", "'normal'"); |
| 611 shouldBe("style.webkitAnimationDirection", "''"); |
| 612 shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| 613 |
| 614 style.animationDirection = "0"; |
| 615 shouldBe("style.animationDirection", "''"); |
| 616 shouldBe("computedStyle.animationDirection", "'normal'"); |
| 617 shouldBe("style.webkitAnimationDirection", "''"); |
| 618 shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| 619 |
| 620 style.animationDirection = "3px"; |
| 621 shouldBe("style.animationDirection", "''"); |
| 622 shouldBe("computedStyle.animationDirection", "'normal'"); |
| 623 shouldBe("style.webkitAnimationDirection", "''"); |
| 624 shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| 625 |
| 626 style.animationDirection = "alternate-normal"; |
| 627 shouldBe("style.animationDirection", "''"); |
| 628 shouldBe("computedStyle.animationDirection", "'normal'"); |
| 629 shouldBe("style.webkitAnimationDirection", "''"); |
| 630 shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| 631 |
| 632 style.animationDirection = "3.5"; |
| 633 shouldBe("style.animationDirection", "''"); |
| 634 shouldBe("computedStyle.animationDirection", "'normal'"); |
| 635 shouldBe("style.webkitAnimationDirection", "''"); |
| 636 shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| 637 |
| 638 style.animationDirection = "3.5, reverse"; |
| 639 shouldBe("style.animationDirection", "''"); |
| 640 shouldBe("computedStyle.animationDirection", "'normal'"); |
| 641 shouldBe("style.webkitAnimationDirection", "''"); |
| 642 shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| 643 |
| 644 style.animationDirection = "reverse, solid"; |
| 645 shouldBe("style.animationDirection", "''"); |
| 646 shouldBe("computedStyle.animationDirection", "'normal'"); |
| 647 shouldBe("style.webkitAnimationDirection", "''"); |
| 648 shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| 649 |
| 650 debug("Valid animation-play-state values."); |
| 651 // Initial test. |
| 652 shouldBe("computedStyle.animationPlayState", "'running'"); |
| 653 shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| 654 |
| 655 style.animationPlayState = "paused"; |
| 656 shouldNotBe("Object.keys(style).indexOf('animationPlayState')", "-1"); |
| 657 shouldNotBe("Object.keys(style).indexOf('webkitAnimationPlayState')", "-1"); |
| 658 shouldBe("style.animationPlayState", "'paused'"); |
| 659 shouldBe("computedStyle.animationPlayState", "'paused'"); |
| 660 shouldBe("style.webkitAnimationPlayState", "'paused'"); |
| 661 shouldBe("computedStyle.webkitAnimationPlayState", "'paused'"); |
| 662 |
| 663 style.animationPlayState = "running"; |
| 664 shouldBe("style.animationPlayState", "'running'"); |
| 665 shouldBe("computedStyle.animationPlayState", "'running'"); |
| 666 shouldBe("style.webkitAnimationPlayState", "'running'"); |
| 667 shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| 668 |
| 669 style.animationPlayState = "running, running"; |
| 670 shouldBe("style.animationPlayState", "'running, running'"); |
| 671 shouldBe("computedStyle.animationPlayState", "'running, running'"); |
| 672 shouldBe("style.webkitAnimationPlayState", "'running, running'"); |
| 673 shouldBe("computedStyle.webkitAnimationPlayState", "'running, running'"); |
| 674 |
| 675 style.animationPlayState = "paused, paused"; |
| 676 shouldBe("style.animationPlayState", "'paused, paused'"); |
| 677 shouldBe("computedStyle.animationPlayState", "'paused, paused'"); |
| 678 shouldBe("style.webkitAnimationPlayState", "'paused, paused'"); |
| 679 shouldBe("computedStyle.webkitAnimationPlayState", "'paused, paused'"); |
| 680 |
| 681 style.animationPlayState = "paused, running"; |
| 682 shouldBe("style.animationPlayState", "'paused, running'"); |
| 683 shouldBe("computedStyle.animationPlayState", "'paused, running'"); |
| 684 shouldBe("style.webkitAnimationPlayState", "'paused, running'"); |
| 685 shouldBe("computedStyle.webkitAnimationPlayState", "'paused, running'"); |
| 686 |
| 687 debug("Invalid animation-play-state values."); |
| 688 style.animationPlayState = ""; |
| 689 |
| 690 style.animationPlayState = "running3"; |
| 691 shouldBe("style.animationPlayState", "''"); |
| 692 shouldBe("computedStyle.animationPlayState", "'running'"); |
| 693 shouldBe("style.webkitAnimationPlayState", "''"); |
| 694 shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| 695 |
| 696 style.animationPlayState = "0"; |
| 697 shouldBe("style.animationPlayState", "''"); |
| 698 shouldBe("computedStyle.animationPlayState", "'running'"); |
| 699 shouldBe("style.webkitAnimationPlayState", "''"); |
| 700 shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| 701 |
| 702 style.animationPlayState = "solid"; |
| 703 shouldBe("style.animationPlayState", "''"); |
| 704 shouldBe("computedStyle.animationPlayState", "'running'"); |
| 705 shouldBe("style.webkitAnimationPlayState", "''"); |
| 706 shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| 707 |
| 708 style.animationPlayState = "20px"; |
| 709 shouldBe("style.animationPlayState", "''"); |
| 710 shouldBe("computedStyle.animationPlayState", "'running'"); |
| 711 shouldBe("style.webkitAnimationPlayState", "''"); |
| 712 shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| 713 |
| 714 style.animationPlayState = "all"; |
| 715 shouldBe("style.animationPlayState", "''"); |
| 716 shouldBe("computedStyle.animationPlayState", "'running'"); |
| 717 shouldBe("style.webkitAnimationPlayState", "''"); |
| 718 shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| 719 |
| 720 style.animationPlayState = "running, test"; |
| 721 shouldBe("style.animationPlayState", "''"); |
| 722 shouldBe("computedStyle.animationPlayState", "'running'"); |
| 723 shouldBe("style.webkitAnimationPlayState", "''"); |
| 724 shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| 725 |
| 726 style.animationPlayState = "all, paused"; |
| 727 shouldBe("style.animationPlayState", "''"); |
| 728 shouldBe("computedStyle.animationPlayState", "'running'"); |
| 729 shouldBe("style.webkitAnimationPlayState", "''"); |
| 730 shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| 731 |
| 732 debug("Valid animation-fill-mode values."); |
| 733 // Initial test. |
| 734 shouldBe("computedStyle.animationFillMode", "'none'"); |
| 735 shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| 736 |
| 737 style.animationFillMode = "forwards"; |
| 738 shouldNotBe("Object.keys(style).indexOf('animationFillMode')", "-1"); |
| 739 shouldNotBe("Object.keys(style).indexOf('webkitAnimationFillMode')", "-1"); |
| 740 shouldBe("style.animationFillMode", "'forwards'"); |
| 741 shouldBe("computedStyle.animationFillMode", "'forwards'"); |
| 742 shouldBe("style.webkitAnimationFillMode", "'forwards'"); |
| 743 shouldBe("computedStyle.webkitAnimationFillMode", "'forwards'"); |
| 744 |
| 745 style.animationFillMode = "backwards"; |
| 746 shouldBe("style.animationFillMode", "'backwards'"); |
| 747 shouldBe("computedStyle.animationFillMode", "'backwards'"); |
| 748 shouldBe("style.webkitAnimationFillMode", "'backwards'"); |
| 749 shouldBe("computedStyle.webkitAnimationFillMode", "'backwards'"); |
| 750 |
| 751 style.animationFillMode = "both"; |
| 752 shouldBe("style.animationFillMode", "'both'"); |
| 753 shouldBe("computedStyle.animationFillMode", "'both'"); |
| 754 shouldBe("style.webkitAnimationFillMode", "'both'"); |
| 755 shouldBe("computedStyle.webkitAnimationFillMode", "'both'"); |
| 756 |
| 757 style.animationFillMode = "none"; |
| 758 shouldBe("style.animationFillMode", "'none'"); |
| 759 shouldBe("computedStyle.animationFillMode", "'none'"); |
| 760 shouldBe("style.webkitAnimationFillMode", "'none'"); |
| 761 shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| 762 |
| 763 style.animationFillMode = "none, both"; |
| 764 shouldBe("style.animationFillMode", "'none, both'"); |
| 765 shouldBe("computedStyle.animationFillMode", "'none, both'"); |
| 766 shouldBe("style.webkitAnimationFillMode", "'none, both'"); |
| 767 shouldBe("computedStyle.webkitAnimationFillMode", "'none, both'"); |
| 768 |
| 769 style.animationFillMode = "backwards, forwards"; |
| 770 shouldBe("style.animationFillMode", "'backwards, forwards'"); |
| 771 shouldBe("computedStyle.animationFillMode", "'backwards, forwards'"); |
| 772 shouldBe("style.webkitAnimationFillMode", "'backwards, forwards'"); |
| 773 shouldBe("computedStyle.webkitAnimationFillMode", "'backwards, forwards'"); |
| 774 |
| 775 debug("Invalid animation-fill-mode values."); |
| 776 style.animationFillMode = ""; |
| 777 |
| 778 style.animationFillMode = "foo"; |
| 779 shouldBe("style.animationFillMode", "''"); |
| 780 shouldBe("computedStyle.animationFillMode", "'none'"); |
| 781 shouldBe("style.webkitAnimationFillMode", "''"); |
| 782 shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| 783 |
| 784 style.animationFillMode = "0"; |
| 785 shouldBe("style.animationFillMode", "''"); |
| 786 shouldBe("computedStyle.animationFillMode", "'none'"); |
| 787 shouldBe("style.webkitAnimationFillMode", "''"); |
| 788 shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| 789 |
| 790 style.animationFillMode = "-"; |
| 791 shouldBe("style.animationFillMode", "''"); |
| 792 shouldBe("computedStyle.animationFillMode", "'none'"); |
| 793 shouldBe("style.webkitAnimationFillMode", "''"); |
| 794 shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| 795 |
| 796 style.animationFillMode = "3px"; |
| 797 shouldBe("style.animationFillMode", "''"); |
| 798 shouldBe("computedStyle.animationFillMode", "'none'"); |
| 799 shouldBe("style.webkitAnimationFillMode", "''"); |
| 800 shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| 801 |
| 802 style.animationFillMode = "backwards, test"; |
| 803 shouldBe("style.animationFillMode", "''"); |
| 804 shouldBe("computedStyle.animationFillMode", "'none'"); |
| 805 shouldBe("style.webkitAnimationFillMode", "''"); |
| 806 shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| 807 |
| 808 style.animationFillMode = "test, all"; |
| 809 shouldBe("style.animationFillMode", "''"); |
| 810 shouldBe("computedStyle.animationFillMode", "'none'"); |
| 811 shouldBe("style.webkitAnimationFillMode", "''"); |
| 812 shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| 813 |
| 814 style.animationFillMode = "test, none"; |
| 815 shouldBe("style.animationFillMode", "''"); |
| 816 shouldBe("computedStyle.animationFillMode", "'none'"); |
| 817 shouldBe("style.webkitAnimationFillMode", "''"); |
| 818 shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| 819 |
| 820 // FIXME : Add tests for shorthand parsing. |
| 821 // https://code.google.com/p/chromium/issues/detail?id=234612 |
| 822 |
| 823 document.body.removeChild(testContainer); |
| 824 </script> |
| 825 <script src="../fast/js/resources/js-test-post.js"></script> |
| 826 </body> |
| 827 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 22925002:
Add support to resolve unprefixed CSS animations properties. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk