third_party/WebKit/LayoutTests/transitions/transitions-parsing.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <script>
   8 description("Test the parsing and the computed style values of the transitions properties.")
   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.transition and verifies WebKit can parse it.
  20 function checkTransitionShorthandValue() {
  21     var before = computedStyle.getPropertyValue('transition');
  22     e.style.transition = '';
  23     e.style.transition = before;
  24     return (computedStyle.getPropertyValue('transition') == before);
  25 }
  26
  27 debug("Valid transition-property values.");
  28 // Initial test.
  29 shouldBe("computedStyle.transitionProperty", "'all'");
  30 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
  31
  32 style.transitionProperty = "none";
  33 shouldNotBe("Object.keys(style).indexOf('transitionProperty')", "-1");
  34 shouldBe("Object.keys(style).indexOf('webkitTransitionProperty')", "-1");
  35 shouldBe("style.transitionProperty", "'none'");
  36 shouldBe("computedStyle.transitionProperty", "'none'");
  37 shouldBe("style.webkitTransitionProperty", "'none'");
  38 shouldBe("computedStyle.webkitTransitionProperty", "'none'");
  39
  40 style.transitionProperty = "all";
  41 shouldBe("style.transitionProperty", "'all'");
  42 shouldBe("computedStyle.transitionProperty", "'all'");
  43 shouldBe("style.webkitTransitionProperty", "'all'");
  44 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
  45
  46 style.transitionProperty = "all, all";
  47 shouldBe("style.transitionProperty", "'all, all'");
  48 shouldBe("computedStyle.transitionProperty", "'all, all'");
  49 shouldBe("style.webkitTransitionProperty", "'all, all'");
  50 shouldBe("computedStyle.webkitTransitionProperty", "'all, all'");
  51
  52 style.transitionProperty = "-webkit-transform-origin";
  53 shouldBe("style.transitionProperty", "'-webkit-transform-origin'");
  54 shouldBe("computedStyle.transitionProperty", "'-webkit-transform-origin'");
  55
  56 style.transitionProperty = "background-position";
  57 shouldBe("style.transitionProperty", "'background-position'");
  58 shouldBe("computedStyle.transitionProperty", "'background-position'");
  59 shouldBe("style.webkitTransitionProperty", "'background-position'");
  60 shouldBe("computedStyle.webkitTransitionProperty", "'background-position'");
  61
  62 style.transitionProperty = "background-position, font-size";
  63 shouldBe("style.transitionProperty", "'background-position, font-size'");
  64 shouldBe("computedStyle.transitionProperty", "'background-position, font-size'");
  65 shouldBe("style.webkitTransitionProperty", "'background-position, font-size'");
  66 shouldBe("computedStyle.webkitTransitionProperty", "'background-position, font-size'");
  67
  68 style.transitionProperty = "background-position, font-size, color";
  69 shouldBe("style.transitionProperty", "'background-position, font-size, color'");
  70 shouldBe("computedStyle.transitionProperty", "'background-position, font-size, color'");
  71 shouldBe("style.webkitTransitionProperty", "'background-position, font-size, color'");
  72 shouldBe("computedStyle.webkitTransitionProperty", "'background-position, font-size, color'");
  73
  74 style.transitionProperty = "all, font-size, color";
  75 shouldBe("style.transitionProperty", "'all, font-size, color'");
  76 shouldBe("computedStyle.transitionProperty", "'all, font-size, color'");
  77 shouldBe("style.webkitTransitionProperty", "'all, font-size, color'");
  78 shouldBe("computedStyle.webkitTransitionProperty", "'all, font-size, color'");
  79
  80 style.transitionProperty = "font-size, color, all";
  81 shouldBe("style.transitionProperty", "'font-size, color, all'");
  82 shouldBe("computedStyle.transitionProperty", "'font-size, color, all'");
  83 shouldBe("style.webkitTransitionProperty", "'font-size, color, all'");
  84 shouldBe("computedStyle.webkitTransitionProperty", "'font-size, color, all'");
  85
  86 style.transitionProperty = "font-size, all, color";
  87 shouldBe("style.transitionProperty", "'font-size, all, color'");
  88 shouldBe("computedStyle.transitionProperty", "'font-size, all, color'");
  89 shouldBe("style.webkitTransitionProperty", "'font-size, all, color'");
  90 shouldBe("computedStyle.webkitTransitionProperty", "'font-size, all, color'");
  91
  92 debug("Unknown transition-property values.");
  93
  94 style.transitionProperty = "solid, font-size";
  95 shouldBe("style.transitionProperty", "'solid, font-size'");
  96 shouldBe("computedStyle.transitionProperty", "'solid, font-size'");
  97 shouldBe("style.webkitTransitionProperty", "'solid, font-size'");
  98 shouldBe("computedStyle.webkitTransitionProperty", "'solid, font-size'");
  99
 100 style.transitionProperty = "solid, left";
 101 shouldBe("style.transitionProperty", "'solid, left'");
 102 shouldBe("computedStyle.transitionProperty", "'solid, left'");
 103 shouldBe("style.webkitTransitionProperty", "'solid, left'");
 104 shouldBe("computedStyle.webkitTransitionProperty", "'solid, left'");
 105
 106 style.transitionProperty = "solid";
 107 shouldBe("style.transitionProperty", "'solid'");
 108 shouldBe("computedStyle.transitionProperty", "'solid'");
 109 shouldBe("style.webkitTransitionProperty", "'solid'");
 110 shouldBe("computedStyle.webkitTransitionProperty", "'solid'");
 111
 112 debug("Invalid transition-property values.");
 113 style.transitionProperty = "";
 114
 115 style.transitionProperty = "20px";
 116 shouldBe("style.transitionProperty", "''");
 117 shouldBe("computedStyle.transitionProperty", "'all'");
 118 shouldBe("style.webkitTransitionProperty", "''");
 119 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
 120
 121 style.transitionProperty = "0";
 122 shouldBe("style.transitionProperty", "''");
 123 shouldBe("computedStyle.transitionProperty", "'all'");
 124 shouldBe("style.webkitTransitionProperty", "''");
 125 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
 126
 127 style.transitionProperty = "'font-size'";
 128 shouldBe("style.transitionProperty", "''");
 129 shouldBe("computedStyle.transitionProperty", "'all'");
 130 shouldBe("style.webkitTransitionProperty", "''");
 131 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
 132
 133 style.transitionProperty = "all none";
 134 shouldBe("style.transitionProperty", "''");
 135 shouldBe("computedStyle.transitionProperty", "'all'");
 136 shouldBe("style.webkitTransitionProperty", "''");
 137 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
 138
 139 style.transitionProperty = "opacity width";
 140 shouldBe("style.transitionProperty", "''");
 141 shouldBe("computedStyle.transitionProperty", "'all'");
 142 shouldBe("style.webkitTransitionProperty", "''");
 143 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
 144
 145 style.transitionProperty = "all, none";
 146 shouldBe("style.transitionProperty", "''");
 147 shouldBe("computedStyle.transitionProperty", "'all'");
 148 shouldBe("style.webkitTransitionProperty", "''");
 149 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
 150
 151 style.transitionProperty = "none, none";
 152 shouldBe("style.transitionProperty", "''");
 153 shouldBe("computedStyle.transitionProperty", "'all'");
 154 shouldBe("style.webkitTransitionProperty", "''");
 155 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
 156
 157 style.transitionProperty = "none, all";
 158 shouldBe("style.transitionProperty", "''");
 159 shouldBe("computedStyle.transitionProperty", "'all'");
 160 shouldBe("style.webkitTransitionProperty", "''");
 161 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
 162
 163 style.transitionProperty = "width, none";
 164 shouldBe("style.transitionProperty", "''");
 165 shouldBe("computedStyle.transitionProperty", "'all'");
 166 shouldBe("style.webkitTransitionProperty", "''");
 167 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
 168
 169 style.transitionProperty = "none, width";
 170 shouldBe("style.transitionProperty", "''");
 171 shouldBe("computedStyle.transitionProperty", "'all'");
 172 shouldBe("style.webkitTransitionProperty", "''");
 173 shouldBe("computedStyle.webkitTransitionProperty", "'all'");
 174
 175 style.transitionProperty = "";
 176
 177 debug("Valid transition-duration values.");
 178 // Initial test.
 179 shouldBe("computedStyle.transitionDuration", "'0s'");
 180 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
 181
 182 style.transitionDuration = "0s";
 183 shouldNotBe("Object.keys(style).indexOf('transitionDuration')", "-1");
 184 shouldBe("Object.keys(style).indexOf('webkitTransitionDuration')", "-1");
 185 shouldBe("style.transitionDuration", "'0s'");
 186 shouldBe("computedStyle.transitionDuration", "'0s'");
 187 shouldBe("style.webkitTransitionDuration", "'0s'");
 188 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
 189
 190 style.transitionDuration = "5s";
 191 shouldBe("style.transitionDuration", "'5s'");
 192 shouldBe("computedStyle.transitionDuration", "'5s'");
 193 shouldBe("style.webkitTransitionDuration", "'5s'");
 194 shouldBe("computedStyle.webkitTransitionDuration", "'5s'");
 195
 196 style.transitionDuration = "10ms";
 197 shouldBe("style.transitionDuration", "'10ms'");
 198 shouldBe("computedStyle.transitionDuration", "'0.01s'");
 199 shouldBe("style.webkitTransitionDuration", "'10ms'");
 200 shouldBe("computedStyle.webkitTransitionDuration", "'0.01s'");
 201
 202 style.transitionProperty = "opacity, width";
 203
 204 style.transitionDuration = "10ms, 20s";
 205 shouldBe("style.transitionDuration", "'10ms, 20s'");
 206 shouldBe("computedStyle.transitionDuration", "'0.01s, 20s'");
 207 shouldBe("style.webkitTransitionDuration", "'10ms, 20s'");
 208 shouldBe("computedStyle.webkitTransitionDuration", "'0.01s, 20s'");
 209
 210 debug("Invalid transition-duration values.");
 211 style.transitionProperty = "opacity";
 212 style.transitionDuration = "";
 213
 214 // Negative values are invalid.
 215 style.transitionDuration = "-10ms";
 216 shouldBe("style.transitionDuration", "''");
 217 shouldBe("computedStyle.transitionDuration", "'0s'");
 218 shouldBe("style.webkitTransitionDuration", "''");
 219 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
 220
 221 style.transitionDuration = "'5ms'";
 222 shouldBe("style.transitionDuration", "''");
 223 shouldBe("computedStyle.transitionDuration", "'0s'");
 224 shouldBe("style.webkitTransitionDuration", "''");
 225 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
 226
 227 style.transitionDuration = "30px";
 228 shouldBe("style.transitionDuration", "''");
 229 shouldBe("computedStyle.transitionDuration", "'0s'");
 230 shouldBe("style.webkitTransitionDuration", "''");
 231 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
 232
 233 style.transitionDuration = "solid";
 234 shouldBe("style.transitionDuration", "''");
 235 shouldBe("computedStyle.transitionDuration", "'0s'");
 236 shouldBe("style.webkitTransitionDuration", "''");
 237 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
 238
 239 style.transitionDuration = "20";
 240 shouldBe("style.transitionDuration", "''");
 241 shouldBe("computedStyle.transitionDuration", "'0s'");
 242 shouldBe("style.webkitTransitionDuration", "''");
 243 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
 244
 245 style.transitionDuration = "20%";
 246 shouldBe("style.transitionDuration", "''");
 247 shouldBe("computedStyle.transitionDuration", "'0s'");
 248 shouldBe("style.webkitTransitionDuration", "''");
 249 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
 250
 251 style.transitionDuration = "0s, 20px";
 252 shouldBe("style.transitionDuration", "''");
 253 shouldBe("computedStyle.transitionDuration", "'0s'");
 254 shouldBe("style.webkitTransitionDuration", "''");
 255 shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
 256
 257 debug("Valid transition-timing-function values.");
 258 // Initial test.
 259 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
 260 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
 261
 262 style.transitionTimingFunction = "linear";
 263 shouldNotBe("Object.keys(style).indexOf('transitionTimingFunction')", "-1");
 264 shouldBe("Object.keys(style).indexOf('webkitTransitionTimingFunction')", "-1");
 265 shouldBe("style.transitionTimingFunction", "'linear'");
 266 shouldBe("computedStyle.transitionTimingFunction", "'linear'");
 267 shouldBe("style.webkitTransitionTimingFunction", "'linear'");
 268 shouldBe("computedStyle.webkitTransitionTimingFunction", "'linear'");
 269
 270 style.transitionTimingFunction = "ease";
 271 shouldBe("style.transitionTimingFunction", "'ease'");
 272 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
 273 shouldBe("style.webkitTransitionTimingFunction", "'ease'");
 274 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
 275
 276 style.transitionTimingFunction = "ease-in";
 277 shouldBe("style.transitionTimingFunction", "'ease-in'");
 278 shouldBe("computedStyle.transitionTimingFunction", "'ease-in'");
 279 shouldBe("style.webkitTransitionTimingFunction", "'ease-in'");
 280 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in'");
 281
 282 style.transitionTimingFunction = "ease-out";
 283 shouldBe("style.transitionTimingFunction", "'ease-out'");
 284 shouldBe("computedStyle.transitionTimingFunction", "'ease-out'");
 285 shouldBe("style.webkitTransitionTimingFunction", "'ease-out'");
 286 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-out'");
 287
 288 style.transitionTimingFunction = "ease-in-out";
 289 shouldBe("style.transitionTimingFunction", "'ease-in-out'");
 290 shouldBe("computedStyle.transitionTimingFunction", "'ease-in-out'");
 291 shouldBe("style.webkitTransitionTimingFunction", "'ease-in-out'");
 292 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in-out'");
 293
 294 style.transitionTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1)";
 295 shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'");
 296 shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'");
 297 shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'");
 298 shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'");
 299
 300 style.transitionTimingFunction = "cubic-bezier(0.1, 0, 0.23, 0.4)";
 301 shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'");
 302 shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'");
 303 shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'");
 304 shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'");
 305
 306 style.transitionTimingFunction = "cubic-bezier(0.1, 0, 0.23, 3)";
 307 shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'");
 308 shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'");
 309 shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'");
 310 shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'");
 311
 312 style.transitionTimingFunction = "cubic-bezier(0.1, 5, 0.23, 3)";
 313 shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'");
 314 shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'");
 315 shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'");
 316 shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'");
 317
 318 style.transitionTimingFunction = "cubic-bezier(0.1, 5, 0.23, 0)";
 319 shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'");
 320 shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'");
 321 shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'");
 322 shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'");
 323
 324 style.transitionTimingFunction = "cubic-bezier(0.2, 2, 0.2, -0.4)";
 325 shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'");
 326 shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'");
 327 shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'");
 328 shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'");
 329
 330 style.transitionTimingFunction = "cubic-bezier(0.2, -2, 0.2, 0.4)";
 331 shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'");
 332 shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'");
 333 shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'");
 334 shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'");
 335
 336 style.transitionTimingFunction = "step-start";
 337 shouldBe("style.transitionTimingFunction", "'step-start'");
 338 shouldBe("computedStyle.transitionTimingFunction", "'step-start'");
 339 shouldBe("style.webkitTransitionTimingFunction", "'step-start'");
 340 shouldBe("computedStyle.webkitTransitionTimingFunction", "'step-start'");
 341
 342 style.transitionTimingFunction = "step-end";
 343 shouldBe("style.transitionTimingFunction", "'step-end'");
 344 shouldBe("computedStyle.transitionTimingFunction", "'step-end'");
 345 shouldBe("style.webkitTransitionTimingFunction", "'step-end'");
 346 shouldBe("computedStyle.webkitTransitionTimingFunction", "'step-end'");
 347
 348 style.transitionTimingFunction = "steps(3)";
 349 shouldBe("style.transitionTimingFunction", "'steps(3, end)'");
 350 shouldBe("computedStyle.transitionTimingFunction", "'steps(3, end)'");
 351 shouldBe("style.webkitTransitionTimingFunction", "'steps(3, end)'");
 352 shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(3, end)'");
 353
 354 style.transitionTimingFunction = "steps(4, end)";
 355 shouldBe("style.transitionTimingFunction", "'steps(4, end)'");
 356 shouldBe("computedStyle.transitionTimingFunction", "'steps(4, end)'");
 357 shouldBe("style.webkitTransitionTimingFunction", "'steps(4, end)'");
 358 shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(4, end)'");
 359
 360 style.transitionTimingFunction = "steps(5, start)";
 361 shouldBe("style.transitionTimingFunction", "'steps(5, start)'");
 362 shouldBe("computedStyle.transitionTimingFunction", "'steps(5, start)'");
 363 shouldBe("style.webkitTransitionTimingFunction", "'steps(5, start)'");
 364 shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(5, start)'");
 365
 366 style.transitionProperty = "opacity, width";
 367
 368 style.transitionTimingFunction = "ease-in-out, ease-in";
 369 shouldBe("style.transitionTimingFunction", "'ease-in-out, ease-in'");
 370 shouldBe("computedStyle.transitionTimingFunction", "'ease-in-out, ease-in'");
 371 shouldBe("style.webkitTransitionTimingFunction", "'ease-in-out, ease-in'");
 372 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in-out, ease-in'");
 373
 374 style.transitionTimingFunction = "ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)";
 375 shouldBe("style.transitionTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
 376 shouldBe("computedStyle.transitionTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
 377 shouldBe("style.webkitTransitionTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
 378 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
 379
 380 style.transitionTimingFunction = "steps(3, start), ease-in-out";
 381 shouldBe("style.transitionTimingFunction", "'steps(3, start), ease-in-out'");
 382 shouldBe("computedStyle.transitionTimingFunction", "'steps(3, start), ease-in-out'");
 383 shouldBe("style.webkitTransitionTimingFunction", "'steps(3, start), ease-in-out'");
 384 shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(3, start), ease-in-out'");
 385
 386 debug("Invalid transition-timing-function values.");
 387 style.transitionProperty = "";
 388 style.transitionTimingFunction = "";
 389
 390 style.transitionTimingFunction = "cubic-bezier(3, 0.1, 4, 1)";
 391 shouldBe("style.transitionTimingFunction", "''");
 392 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
 393 shouldBe("style.webkitTransitionTimingFunction", "''");
 394 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
 395
 396 style.transitionTimingFunction = "cubic-bezier(1, 0.1, 3, 1)";
 397 shouldBe("style.transitionTimingFunction", "''");
 398 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
 399 shouldBe("style.webkitTransitionTimingFunction", "''");
 400 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
 401
 402 style.transitionTimingFunction = "cubic-bezier(0.1, 0, 4, 0.4)";
 403 shouldBe("style.transitionTimingFunction", "''");
 404 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
 405 shouldBe("style.webkitTransitionTimingFunction", "''");
 406 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
 407
 408 style.transitionTimingFunction = "cubic-bezier(3, 0, 4, 0.4)";
 409 shouldBe("style.transitionTimingFunction", "''");
 410 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
 411 shouldBe("style.webkitTransitionTimingFunction", "''");
 412 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
 413
 414 style.transitionTimingFunction = "cubic-bezier(3, 0, 0.2, 0.4)";
 415 shouldBe("style.transitionTimingFunction", "''");
 416 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
 417 shouldBe("style.webkitTransitionTimingFunction", "''");
 418 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
 419
 420 style.transitionTimingFunction = "cubic-bezier(-0.2, 0, 0.2, 0.4)";
 421 shouldBe("style.transitionTimingFunction", "''");
 422 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
 423 shouldBe("style.webkitTransitionTimingFunction", "''");
 424 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
 425
 426 style.transitionTimingFunction = "cubic-bezier(0.2, 2, -0.2, 0.4)";
 427 shouldBe("style.transitionTimingFunction", "''");
 428 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
 429 shouldBe("style.webkitTransitionTimingFunction", "''");
 430 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
 431
 432 style.transitionTimingFunction = "steps(5, 3)";
 433 shouldBe("style.transitionTimingFunction", "''");
 434 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
 435 shouldBe("style.webkitTransitionTimingFunction", "''");
 436 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
 437
 438 style.transitionTimingFunction = "steps(-5, start)";
 439 shouldBe("style.transitionTimingFunction", "''");
 440 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
 441 shouldBe("style.webkitTransitionTimingFunction", "''");
 442 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
 443
 444 style.transitionTimingFunction = "steps(5, start, end)";
 445 shouldBe("style.transitionTimingFunction", "''");
 446 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
 447 shouldBe("style.webkitTransitionTimingFunction", "''");
 448 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
 449
 450 style.transitionTimingFunction = "step(5)";
 451 shouldBe("style.transitionTimingFunction", "''");
 452 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
 453 shouldBe("style.webkitTransitionTimingFunction", "''");
 454 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
 455
 456 style.transitionTimingFunction = "red";
 457 shouldBe("style.transitionTimingFunction", "''");
 458 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
 459 shouldBe("style.webkitTransitionTimingFunction", "''");
 460 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
 461
 462 style.transitionTimingFunction = "cubic-bezier(0.25, 0.1, 0.25)";
 463 shouldBe("style.transitionTimingFunction", "''");
 464 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
 465 shouldBe("style.webkitTransitionTimingFunction", "''");
 466 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
 467
 468 style.transitionTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1, 2)";
 469 shouldBe("style.transitionTimingFunction", "''");
 470 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
 471 shouldBe("style.webkitTransitionTimingFunction", "''");
 472 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
 473
 474 style.transitionTimingFunction = "cubic-foo(0.25, 0.1, 0.25, 1)";
 475 shouldBe("style.transitionTimingFunction", "''");
 476 shouldBe("computedStyle.transitionTimingFunction", "'ease'");
 477 shouldBe("style.webkitTransitionTimingFunction", "''");
 478 shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
 479
 480 debug("Valid transition-delay values.");
 481 // Initial test.
 482 shouldBe("computedStyle.transitionDelay", "'0s'");
 483 shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
 484
 485 style.transitionDelay = "0s";
 486 shouldNotBe("Object.keys(style).indexOf('transitionDelay')", "-1");
 487 shouldBe("Object.keys(style).indexOf('webkitTransitionDelay')", "-1");
 488 shouldBe("style.transitionDelay", "'0s'");
 489 shouldBe("computedStyle.transitionDelay", "'0s'");
 490 shouldBe("style.webkitTransitionDelay", "'0s'");
 491 shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
 492
 493 style.transitionDelay = "5s";
 494 shouldBe("style.transitionDelay", "'5s'");
 495 shouldBe("computedStyle.transitionDelay", "'5s'");
 496 shouldBe("style.webkitTransitionDelay", "'5s'");
 497 shouldBe("computedStyle.webkitTransitionDelay", "'5s'");
 498
 499 style.transitionDelay = "10ms";
 500 shouldBe("style.transitionDelay", "'10ms'");
 501 shouldBe("computedStyle.transitionDelay", "'0.01s'");
 502 shouldBe("style.webkitTransitionDelay", "'10ms'");
 503 shouldBe("computedStyle.webkitTransitionDelay", "'0.01s'");
 504
 505 style.transitionDelay = "-10ms";
 506 shouldBe("style.transitionDelay", "'-10ms'");
 507 shouldBe("computedStyle.transitionDelay", "'-0.01s'");
 508 shouldBe("style.webkitTransitionDelay", "'-10ms'");
 509 shouldBe("computedStyle.webkitTransitionDelay", "'-0.01s'");
 510
 511 style.transitionProperty = "opacity, width";
 512
 513 style.transitionDelay = "-10ms, 20s";
 514 shouldBe("style.transitionDelay", "'-10ms, 20s'");
 515 shouldBe("computedStyle.transitionDelay", "'-0.01s, 20s'");
 516 shouldBe("style.webkitTransitionDelay", "'-10ms, 20s'");
 517 shouldBe("computedStyle.webkitTransitionDelay", "'-0.01s, 20s'");
 518
 519 debug("Invalid transition-duration values.");
 520 style.transitionProperty = "opacity";
 521 style.transitionDelay = "";
 522
 523 style.transitionDelay = "'5ms'";
 524 shouldBe("style.transitionDelay", "''");
 525 shouldBe("computedStyle.transitionDelay", "'0s'");
 526 shouldBe("style.webkitTransitionDelay", "''");
 527 shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
 528
 529 style.transitionDelay = "30px";
 530 shouldBe("style.transitionDelay", "''");
 531 shouldBe("computedStyle.transitionDelay", "'0s'");
 532 shouldBe("style.webkitTransitionDelay", "''");
 533 shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
 534
 535 style.transitionDelay = "solid";
 536 shouldBe("style.transitionDelay", "''");
 537 shouldBe("computedStyle.transitionDelay", "'0s'");
 538 shouldBe("style.webkitTransitionDelay", "''");
 539 shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
 540
 541 style.transitionDelay = "20";
 542 shouldBe("style.transitionDelay", "''");
 543 shouldBe("computedStyle.transitionDelay", "'0s'");
 544 shouldBe("style.webkitTransitionDelay", "''");
 545 shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
 546
 547 style.transitionDelay = "20%";
 548 shouldBe("style.transitionDelay", "''");
 549 shouldBe("computedStyle.transitionDelay", "'0s'");
 550 shouldBe("style.webkitTransitionDelay", "''");
 551 shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
 552
 553 style.transitionDelay = "0s, 20px";
 554 shouldBe("style.transitionDelay", "''");
 555 shouldBe("computedStyle.transitionDelay", "'0s'");
 556 shouldBe("style.webkitTransitionDelay", "''");
 557 shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
 558
 559 debug("Valid transition shorthand values.");
 560 style.transition = "";
 561 // Initial test.
 562 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
 563 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
 564
 565 style.transition = "none";
 566 shouldNotBe("Object.keys(style).indexOf('transition')", "-1");
 567 shouldBe("Object.keys(style).indexOf('webkitTransition')", "-1");
 568 shouldBe("style.transition", "'none'");
 569 shouldBe("computedStyle.transition", "'none 0s ease 0s'");
 570 shouldBe("style.webkitTransition", "'none'");
 571 shouldBe("computedStyle.webkitTransition", "'none 0s ease 0s'");
 572 shouldBe("checkTransitionShorthandValue()", "true");
 573
 574 style.transition = "none 20s";
 575 shouldBe("style.transition", "'none 20s'");
 576 shouldBe("computedStyle.transition", "'none 20s ease 0s'");
 577 shouldBe("style.webkitTransition", "'none 20s'");
 578 shouldBe("computedStyle.webkitTransition", "'none 20s ease 0s'");
 579 shouldBe("checkTransitionShorthandValue()", "true");
 580
 581 style.transition = "ease-in none 20s";
 582 shouldBe("style.transition", "'none 20s ease-in'");
 583 shouldBe("computedStyle.transition", "'none 20s ease-in 0s'");
 584 shouldBe("style.webkitTransition", "'none 20s ease-in'");
 585 shouldBe("computedStyle.webkitTransition", "'none 20s ease-in 0s'");
 586 shouldBe("checkTransitionShorthandValue()", "true");
 587
 588 style.transition = "ease-in opacity 20s";
 589 shouldBe("style.transition", "'opacity 20s ease-in'");
 590 shouldBe("computedStyle.transition", "'opacity 20s ease-in 0s'");
 591 shouldBe("style.webkitTransition", "'opacity 20s ease-in'");
 592 shouldBe("computedStyle.webkitTransition", "'opacity 20s ease-in 0s'");
 593 shouldBe("checkTransitionShorthandValue()", "true");
 594
 595 style.transition = "ease-in opacity 20s 10s";
 596 shouldBe("style.transition", "'opacity 20s ease-in 10s'");
 597 shouldBe("computedStyle.transition", "'opacity 20s ease-in 10s'");
 598 shouldBe("style.webkitTransition", "'opacity 20s ease-in 10s'");
 599 shouldBe("computedStyle.webkitTransition", "'opacity 20s ease-in 10s'");
 600 // Let's double check here the delay and duration. As stated in the spec the first value parsed
 601 // is assigned to the duration.
 602 shouldBe("computedStyle.transitionDuration", "'20s'");
 603 shouldBe("computedStyle.webkitTransitionDuration", "'20s'");
 604 shouldBe("computedStyle.transitionDelay", "'10s'");
 605 shouldBe("computedStyle.webkitTransitionDelay", "'10s'");
 606 shouldBe("checkTransitionShorthandValue()", "true");
 607
 608 style.transition = "20s ease-in opacity 10s";
 609 shouldBe("style.transition", "'opacity 20s ease-in 10s'");
 610 shouldBe("computedStyle.transition", "'opacity 20s ease-in 10s'");
 611 shouldBe("style.webkitTransition", "'opacity 20s ease-in 10s'");
 612 shouldBe("computedStyle.webkitTransition", "'opacity 20s ease-in 10s'");
 613 shouldBe("computedStyle.transitionDuration", "'20s'");
 614 shouldBe("computedStyle.webkitTransitionDuration", "'20s'");
 615 shouldBe("computedStyle.transitionDelay", "'10s'");
 616 shouldBe("computedStyle.webkitTransitionDelay", "'10s'");
 617 shouldBe("checkTransitionShorthandValue()", "true");
 618
 619 style.transition = "ease-in opacity 20s 10s, cubic-bezier(0.32, 0, 1, 1) 10s width 20s";
 620 shouldBe("style.transition", "'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
 621 shouldBe("computedStyle.transition", "'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
 622 shouldBe("style.webkitTransition", "'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
 623 shouldBe("computedStyle.webkitTransition", "'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
 624 // Let's double check here the delay and duration. As stated in the spec the first value parsed
 625 // is assigned to the duration.
 626 shouldBe("computedStyle.transitionDuration", "'20s, 10s'");
 627 shouldBe("computedStyle.webkitTransitionDuration", "'20s, 10s'");
 628 shouldBe("computedStyle.transitionDelay", "'10s, 20s'");
 629 shouldBe("computedStyle.webkitTransitionDelay", "'10s, 20s'");
 630 shouldBe("checkTransitionShorthandValue()", "true");
 631
 632 style.transition = "all, all";
 633 shouldBe("style.transition", "'all, all'");
 634 shouldBe("computedStyle.transition", "'all 0s ease 0s, all 0s ease 0s'");
 635 shouldBe("style.webkitTransition", "'all, all'");
 636 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s, all 0s ease 0s'");
 637
 638 style.transition = "all 20s 10s ease-in, all ease-out 20s";
 639 shouldBe("style.transition", "'all 20s ease-in 10s, all 20s ease-out'");
 640 shouldBe("computedStyle.transition", "'all 20s ease-in 10s, all 20s ease-out 0s'");
 641 shouldBe("style.webkitTransition", "'all 20s ease-in 10s, all 20s ease-out'");
 642 shouldBe("computedStyle.webkitTransition", "'all 20s ease-in 10s, all 20s ease-out 0s'");
 643
 644 style.transition = "ease-in opacity 20s 10s, all ease-out 20s";
 645 shouldBe("style.transition", "'opacity 20s ease-in 10s, all 20s ease-out'");
 646 shouldBe("computedStyle.transition", "'opacity 20s ease-in 10s, all 20s ease-out 0s'");
 647 shouldBe("style.webkitTransition", "'opacity 20s ease-in 10s, all 20s ease-out'");
 648 shouldBe("computedStyle.webkitTransition", "'opacity 20s ease-in 10s, all 20s ease-out 0s'");
 649 shouldBe("checkTransitionShorthandValue()", "true");
 650
 651 style.transition = " all ease-out 20s, ease-in opacity 20s 10s";
 652 shouldBe("style.transition", "'all 20s ease-out, opacity 20s ease-in 10s'");
 653 shouldBe("computedStyle.transition", "'all 20s ease-out 0s, opacity 20s ease-in 10s'");
 654 shouldBe("style.webkitTransition", "'all 20s ease-out, opacity 20s ease-in 10s'");
 655 shouldBe("computedStyle.webkitTransition", "'all 20s ease-out 0s, opacity 20s ease-in 10s'");
 656 shouldBe("checkTransitionShorthandValue()", "true");
 657
 658 debug("Invalid transition shorthand values.");
 659 style.transition = "";
 660
 661 style.transition = "20";
 662 shouldBe("style.transition", "''");
 663 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
 664 shouldBe("style.webkitTransition", "''");
 665 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
 666
 667 style.transition = "20, 20";
 668 shouldBe("style.transition", "''");
 669 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
 670 shouldBe("style.webkitTransition", "''");
 671 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
 672
 673 style.transition = "all 30s width ease-in";
 674 shouldBe("style.transition", "''");
 675 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
 676 shouldBe("style.webkitTransition", "''");
 677 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
 678
 679 style.transition = "all 30s ease-in 20px";
 680 shouldBe("style.transition", "''");
 681 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
 682 shouldBe("style.webkitTransition", "''");
 683 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
 684
 685 style.transition = "all 30s ease-in 20s, 20px";
 686 shouldBe("style.transition", "''");
 687 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
 688 shouldBe("style.webkitTransition", "''");
 689 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
 690
 691 style.transition = "all 30s ease-in 20s, step-start(2)";
 692 shouldBe("style.transition", "''");
 693 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
 694 shouldBe("style.webkitTransition", "''");
 695 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
 696
 697 style.transition = "ease-in opacity 20s 10s, none";
 698 shouldBe("style.transition", "''");
 699 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
 700 shouldBe("style.webkitTransition", "''");
 701 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
 702
 703 style.transition = "none, ease-in opacity 20s 10s, none";
 704 shouldBe("style.transition", "''");
 705 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
 706 shouldBe("style.webkitTransition", "''");
 707 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
 708
 709 style.transition = "none, ease-in opacity 20s 10s";
 710 shouldBe("style.transition", "''");
 711 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
 712 shouldBe("style.webkitTransition", "''");
 713 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
 714
 715 style.transition = "ease-in opacity 20s 10s, all 20s ease-out 0s, none";
 716 shouldBe("style.transition", "''");
 717 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
 718 shouldBe("style.webkitTransition", "''");
 719 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
 720
 721 style.transition = "ease-in opacity 20s 10s, ease-in width 20s 10s, none";
 722 shouldBe("style.transition", "''");
 723 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
 724 shouldBe("style.webkitTransition", "''");
 725 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
 726
 727 style.transition = "none, none";
 728 shouldBe("style.transition", "''");
 729 shouldBe("computedStyle.transition", "'all 0s ease 0s'");
 730 shouldBe("style.webkitTransition", "''");
 731 shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
 732
 733 debug("Ambiguous shorthand values.");
 734
 735 style.transition = "ease";
 736 shouldBe("style.transitionProperty", "'all'");
 737 shouldBe("style.transitionTimingFunction", "'ease'");
 738
 739 style.transition = "ease-in ease-out";
 740 shouldBe("style.transitionProperty", "'ease-out'");
 741 shouldBe("style.transitionTimingFunction", "'ease-in'");
 742
 743 style.transition = "20s 10s";
 744 shouldBe("style.transitionDelay", "'10s'");
 745 shouldBe("style.transitionDuration", "'20s'");
 746
 747 style.transition = "-10s 10s";
 748 shouldBe("style.transitionDelay", "'-10s'");
 749 shouldBe("style.transitionDuration", "'10s'");
 750
 751 document.body.removeChild(testContainer);
 752 </script>
 753 </body>
 754 </html>