third_party/WebKit/LayoutTests/fast/backgrounds/background-position-parsing-2.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 to make sure background-position is parsed correctly.")
   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 style.backgroundImage = "url(resources/diamond.png)";
  20 style.backgroundRepeat = "no-repeat";
  21
  22 debug("background-position with one value");
  23 // Initial test.
  24 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
  25
  26 style.backgroundPosition = "70%";
  27 // Second value is assuming to be 'center'
  28 shouldBe("style.backgroundPosition", "'70% 50%'");
  29 shouldBe("computedStyle.backgroundPosition", "'70% 50%'");
  30
  31 style.backgroundPosition = "84px";
  32 shouldBe("style.backgroundPosition", "'84px 50%'");
  33 shouldBe("computedStyle.backgroundPosition", "'84px 50%'");
  34
  35 style.backgroundPosition = "left";
  36 shouldBe("style.backgroundPosition", "'0% 50%'");
  37 shouldBe("computedStyle.backgroundPosition", "'0% 50%'");
  38
  39 style.backgroundPosition = "right";
  40 shouldBe("style.backgroundPosition", "'100% 50%'");
  41 shouldBe("computedStyle.backgroundPosition", "'100% 50%'");
  42
  43 style.backgroundPosition = "bottom";
  44 shouldBe("style.backgroundPosition", "'50% 100%'");
  45 shouldBe("computedStyle.backgroundPosition", "'50% 100%'");
  46
  47 style.backgroundPosition = "top";
  48 shouldBe("style.backgroundPosition", "'50% 0%'");
  49 shouldBe("computedStyle.backgroundPosition", "'50% 0%'");
  50
  51 style.backgroundPosition = "center";
  52 shouldBe("style.backgroundPosition", "'50% 50%'");
  53 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
  54
  55 debug("background-position with two values");
  56 style.backgroundPosition = "left bottom";
  57 shouldBe("style.backgroundPosition", "'0% 100%'");
  58 shouldBe("computedStyle.backgroundPosition", "'0% 100%'");
  59
  60 style.backgroundPosition = "bottom left";
  61 shouldBe("style.backgroundPosition", "'0% 100%'");
  62 shouldBe("computedStyle.backgroundPosition", "'0% 100%'");
  63
  64 style.backgroundPosition = "100% bottom";
  65 shouldBe("style.backgroundPosition", "'100% 100%'");
  66 shouldBe("computedStyle.backgroundPosition", "'100% 100%'");
  67
  68 style.backgroundPosition = "100% top";
  69 shouldBe("style.backgroundPosition", "'100% 0%'");
  70 shouldBe("computedStyle.backgroundPosition", "'100% 0%'");
  71
  72 style.backgroundPosition = "54px bottom";
  73 shouldBe("style.backgroundPosition", "'54px 100%'");
  74 shouldBe("computedStyle.backgroundPosition", "'54px 100%'");
  75
  76 style.backgroundPosition = "center center";
  77 shouldBe("style.backgroundPosition", "'50% 50%'");
  78 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
  79
  80 style.backgroundPosition = "5% bottom";
  81 shouldBe("style.backgroundPosition", "'5% 100%'");
  82 shouldBe("computedStyle.backgroundPosition", "'5% 100%'");
  83
  84 style.backgroundPosition = "30pt -20px";
  85 shouldBe("style.backgroundPosition", "'30pt -20px'");
  86 shouldBe("computedStyle.backgroundPosition", "'40px -20px'");
  87
  88 style.backgroundPosition = "right center";
  89 shouldBe("style.backgroundPosition", "'100% 50%'");
  90 shouldBe("computedStyle.backgroundPosition", "'100% 50%'");
  91
  92 style.backgroundPosition = "100% 0";
  93 shouldBe("style.backgroundPosition", "'100% 0px'");
  94 shouldBe("computedStyle.backgroundPosition", "'100% 0px'");
  95
  96 style.backgroundPosition = "center right";
  97 shouldBe("style.backgroundPosition", "'100% 50%'");
  98 shouldBe("computedStyle.backgroundPosition", "'100% 50%'");
  99
 100 style.backgroundPosition = "center 50%";
 101 shouldBe("style.backgroundPosition", "'50% 50%'");
 102 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
 103
 104 style.backgroundPosition = "center left";
 105 shouldBe("style.backgroundPosition", "'0% 50%'");
 106 shouldBe("computedStyle.backgroundPosition", "'0% 50%'");
 107
 108 style.backgroundPosition = "-20% center";
 109 shouldBe("style.backgroundPosition", "'-20% 50%'");
 110 shouldBe("computedStyle.backgroundPosition", "'-20% 50%'");
 111
 112 style.backgroundPosition = "top right";
 113 shouldBe("style.backgroundPosition", "'100% 0%'");
 114 shouldBe("computedStyle.backgroundPosition", "'100% 0%'");
 115
 116 style.backgroundPosition = "50% center";
 117 shouldBe("style.backgroundPosition", "'50% 50%'");
 118 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
 119
 120 debug("background-position invalid with one or two values, no change expected");
 121 style.backgroundPosition = "5 right";
 122 shouldBe("style.backgroundPosition", "'50% 50%'");
 123 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
 124
 125 style.backgroundPosition = "0 right";
 126 shouldBe("style.backgroundPosition", "'50% 50%'");
 127 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
 128
 129 style.backgroundPosition = "0px right";
 130 shouldBe("style.backgroundPosition", "'50% 50%'");
 131 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
 132
 133 style.backgroundPosition = "top 108px";
 134 shouldBe("style.backgroundPosition", "'50% 50%'");
 135 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
 136
 137 style.backgroundPosition = "top 100%";
 138 shouldBe("style.backgroundPosition", "'50% 50%'");
 139 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
 140
 141 style.backgroundPosition = "60 50%";
 142 shouldBe("style.backgroundPosition", "'50% 50%'");
 143 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
 144
 145 style.backgroundPosition = "hidden";
 146 shouldBe("style.backgroundPosition", "'50% 50%'");
 147 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
 148
 149 style.backgroundPosition = "hidden solid";
 150 shouldBe("style.backgroundPosition", "'50% 50%'");
 151 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
 152
 153 style.backgroundPosition = "bottombottom";
 154 shouldBe("style.backgroundPosition", "'50% 50%'");
 155 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
 156
 157 style.backgroundPosition = "left left";
 158 shouldBe("style.backgroundPosition", "'50% 50%'");
 159 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
 160
 161 style.backgroundPosition = "left right";
 162 shouldBe("style.backgroundPosition", "'50% 50%'");
 163 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
 164
 165 style.backgroundPosition = "top top";
 166 shouldBe("style.backgroundPosition", "'50% 50%'");
 167 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
 168
 169 style.backgroundPosition = "50% left";
 170 shouldBe("style.backgroundPosition", "'50% 50%'");
 171 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
 172
 173 style.backgroundPosition = "50";
 174 shouldBe("style.backgroundPosition", "'50% 50%'");
 175 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
 176
 177 style.backgroundPosition = "1px+1px";
 178 shouldBe("style.backgroundPosition", "'1px 1px'");
 179 shouldBe("computedStyle.backgroundPosition", "'1px 1px'");
 180
 181 debug("background-position with CSS3 comma separator, one or two values");
 182 style.backgroundImage = "url(resources/diamond.png), url(resources/ring.png)";
 183 style.backgroundRepeat = "no-repeat";
 184
 185 style.backgroundPosition = "50%, 100%";
 186 shouldBe("style.backgroundPosition", "'50% 50%, 100% 50%'");
 187 shouldBe("computedStyle.backgroundPosition", "'50% 50%, 100% 50%'");
 188
 189 style.backgroundPosition = "top, bottom";
 190 shouldBe("style.backgroundPosition", "'50% 0%, 50% 100%'");
 191 shouldBe("computedStyle.backgroundPosition", "'50% 0%, 50% 100%'");
 192
 193 style.backgroundPosition = "right center, 5px bottom";
 194 shouldBe("style.backgroundPosition", "'100% 50%, 5px 100%'");
 195 shouldBe("computedStyle.backgroundPosition", "'100% 50%, 5px 100%'");
 196
 197 style.backgroundPosition = "top left, bottom right";
 198 shouldBe("style.backgroundPosition", "'0% 0%, 100% 100%'");
 199 shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'");
 200
 201 debug("background-position with CSS3 comma separator, with invalid one or two values, no change expected");
 202 style.backgroundPosition = "0 center, right right";
 203 shouldBe("style.backgroundPosition", "'0% 0%, 100% 100%'");
 204 shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'");
 205
 206 style.backgroundPosition = "center right, right right";
 207 shouldBe("style.backgroundPosition", "'0% 0%, 100% 100%'");
 208 shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'");
 209
 210 style.backgroundPosition = "center 20px, solid 20px";
 211 shouldBe("style.backgroundPosition", "'0% 0%, 100% 100%'");
 212 shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'");
 213
 214 debug("background-position with CSS3 four values");
 215 style.backgroundImage = "url(resources/diamond.png)";
 216 style.backgroundPosition = "left 10px top 15px";
 217 shouldBe("style.backgroundPosition", "'left 10px top 15px'");
 218 shouldBe("computedStyle.backgroundPosition", "'left 10px top 15px'");
 219
 220 style.backgroundPosition = "left 10% top 30%";
 221 shouldBe("style.backgroundPosition", "'left 10% top 30%'");
 222 shouldBe("computedStyle.backgroundPosition", "'left 10% top 30%'");
 223
 224 style.backgroundPosition = "top 10% left 30%";
 225 shouldBe("style.backgroundPosition", "'left 30% top 10%'");
 226 shouldBe("computedStyle.backgroundPosition", "'left 30% top 10%'");
 227
 228 style.backgroundPosition = "right top 15px";
 229 shouldBe("style.backgroundPosition", "'right 0% top 15px'");
 230 shouldBe("computedStyle.backgroundPosition", "'right 0% top 15px'");
 231
 232 style.backgroundPosition = "left 10px center";
 233 shouldBe("style.backgroundPosition", "'left 10px top 50%'");
 234 shouldBe("computedStyle.backgroundPosition", "'left 10px top 50%'");
 235
 236 style.backgroundPosition = "center top 20px";
 237 shouldBe("style.backgroundPosition", "'left 50% top 20px'");
 238 shouldBe("computedStyle.backgroundPosition", "'left 50% top 20px'");
 239
 240 style.backgroundPosition = "top 20px center";
 241 shouldBe("style.backgroundPosition", "'left 50% top 20px'");
 242 shouldBe("computedStyle.backgroundPosition", "'left 50% top 20px'");
 243
 244 style.backgroundPosition = "center left 30px";
 245 shouldBe("style.backgroundPosition", "'left 30px top 50%'");
 246 shouldBe("computedStyle.backgroundPosition", "'left 30px top 50%'");
 247
 248 style.backgroundPosition = "";
 249 shouldBe("style.backgroundPosition", "''");
 250 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
 251
 252 style.backgroundPosition = "left 20% top";
 253 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 254 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 255
 256 debug("background-position with CSS3 invalid four values, no change expected");
 257 style.backgroundPosition = "left center top";
 258 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 259 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 260
 261 style.backgroundPosition = "0px right top";
 262 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 263 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 264
 265 style.backgroundPosition = "left center top center";
 266 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 267 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 268
 269 style.backgroundPosition = "left center top 20%";
 270 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 271 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 272
 273 style.backgroundPosition = "center bottom top 20%";
 274 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 275 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 276
 277 style.backgroundPosition = "right bottom top";
 278 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 279 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 280
 281 style.backgroundPosition = "right bottom solid";
 282 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 283 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 284
 285 style.backgroundPosition = "20px bottom top";
 286 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 287 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 288
 289 style.backgroundPosition = "20px bottom hidden";
 290 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 291 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 292
 293 style.backgroundPosition = "solid dotted bottom top";
 294 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 295 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 296
 297 style.backgroundPosition = "top top top top";
 298 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 299 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 300
 301 style.backgroundPosition = "left 0px right 20%";
 302 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 303 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 304
 305 style.backgroundPosition = "left 30% top 20% center";
 306 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 307 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 308
 309 style.backgroundPosition = "20px 30% bottom";
 310 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 311 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 312
 313 style.backgroundPosition = "top 0px bottom";
 314 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 315 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 316
 317 style.backgroundPosition = "left 0px right";
 318 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 319 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 320
 321 style.backgroundPosition = "top 0px bottom 30px top";
 322 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 323 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 324
 325 style.backgroundPosition = "left 10px center 15px";
 326 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 327 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 328
 329 style.backgroundPosition = "left 10px top center";
 330 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 331 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 332
 333 style.backgroundPosition = "center right top 20px";
 334 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 335 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 336
 337 style.backgroundPosition = "center 10px center 10px";
 338 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 339 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 340
 341 style.backgroundPosition = "top center center";
 342 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 343 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 344
 345 style.backgroundPosition = "center 10px center";
 346 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 347 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 348
 349 style.backgroundPosition = "center center 10px";
 350 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 351 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 352
 353 style.backgroundPosition = "center 0px left 20%";
 354 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 355 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 356
 357 style.backgroundPosition = "left center top";
 358 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 359 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 360
 361 style.backgroundPosition = "center center center";
 362 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 363 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 364
 365 style.backgroundPosition = "top left 50% 50%";
 366 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 367 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 368
 369 style.backgroundPosition = "center center center center";
 370 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
 371 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
 372
 373 debug("background-position with CSS3 four values and comma");
 374 style.backgroundImage = "url(resources/diamond.png), url(resources/ring.png)";
 375
 376 style.backgroundPosition = "center, left bottom 20px";
 377 shouldBe("style.backgroundPosition", "'50% 50%, left 0% bottom 20px'");
 378 shouldBe("computedStyle.backgroundPosition", "'50% 50%, left 0% bottom 20px'");
 379
 380 style.backgroundPosition = "right 20px bottom 20px, center left";
 381 shouldBe("style.backgroundPosition", "'right 20px bottom 20px, 0% 50%'");
 382 shouldBe("computedStyle.backgroundPosition", "'right 20px bottom 20px, 0% 50%'");
 383
 384 style.backgroundPosition = "left 10px top 15px, right 20% bottom 20px";
 385 shouldBe("style.backgroundPosition", "'left 10px top 15px, right 20% bottom 20px'");
 386 shouldBe("computedStyle.backgroundPosition", "'left 10px top 15px, right 20% bottom 20px'");
 387
 388 style.backgroundPosition = "left 10% top, top 0px right";
 389 shouldBe("style.backgroundPosition", "'left 10% top 0%, right 0% top 0px'");
 390 shouldBe("computedStyle.backgroundPosition", "'left 10% top 0%, right 0% top 0px'");
 391
 392 style.backgroundPosition = "right top 15px, bottom right 20px";
 393 shouldBe("style.backgroundPosition", "'right 0% top 15px, right 20px bottom 0%'");
 394 shouldBe("computedStyle.backgroundPosition", "'right 0% top 15px, right 20px bottom 0%'");
 395
 396 debug("background-position with invalid CSS3 four values and comma, no change expected");
 397 style.backgroundPosition = "right top 15px, left right 20px";
 398 shouldBe("style.backgroundPosition", "'right 0% top 15px, right 20px bottom 0%'");
 399 shouldBe("computedStyle.backgroundPosition", "'right 0% top 15px, right 20px bottom 0%'");
 400
 401 style.backgroundPosition = "right left 15px, left bottom 20px";
 402 shouldBe("style.backgroundPosition", "'right 0% top 15px, right 20px bottom 0%'");
 403 shouldBe("computedStyle.backgroundPosition", "'right 0% top 15px, right 20px bottom 0%'");
 404
 405 style.backgroundPosition = "solid, left bottom 20px";
 406 shouldBe("style.backgroundPosition", "'right 0% top 15px, right 20px bottom 0%'");
 407 shouldBe("computedStyle.backgroundPosition", "'right 0% top 15px, right 20px bottom 0%'");
 408
 409 debug("background-position inside the background shorthand");
 410 style.background = "top 10% left 30% / 10em gray round fixed border-box";
 411 shouldBe("style.background", "'left 30% top 10% / 10em round fixed border-box border-box gray'");
 412 shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed left 30% top 10% / 160px border-box border-box'");
 413
 414 style.background = "right top 15px / 10em gray round fixed border-box";
 415 shouldBe("style.background", "'right 0% top 15px / 10em round fixed border-box border-box gray'");
 416 shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed right 0% top 15px / 160px border-box border-box'");
 417
 418 style.background = "left 10px center / 10em gray round fixed border-box";
 419 shouldBe("style.background", "'left 10px top 50% / 10em round fixed border-box border-box gray'");
 420 shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed left 10px top 50% / 160px border-box border-box'");
 421
 422 style.background = "left 10px center round fixed border-box";
 423 shouldBe("style.background", "'left 10px top 50% round fixed border-box border-box'");
 424 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 10px top 50% / auto border-box border-box'");
 425
 426 style.background = "center top 20px round fixed border-box";
 427 shouldBe("style.background", "'left 50% top 20px round fixed border-box border-box'");
 428 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 50% top 20px / auto border-box border-box'");
 429
 430 style.background = "top 20px center round fixed border-box";
 431 shouldBe("style.background", "'left 50% top 20px round fixed border-box border-box'");
 432 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 50% top 20px / auto border-box border-box'");
 433
 434 style.background = "top center round fixed border-box";
 435 shouldBe("style.background", "'50% 0% round fixed border-box border-box'");
 436 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50% 0% / auto border-box border-box'");
 437
 438 style.background = "50px 60px / 50px round fixed border-box";
 439 shouldBe("style.background", "'50px 60px / 50px round fixed border-box border-box'");
 440 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50px 60px / 50px border-box border-box'");
 441
 442 style.background = "50px / 50px round fixed border-box";
 443 shouldBe("style.background", "'50px 50% / 50px round fixed border-box border-box'");
 444 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50px 50% / 50px border-box border-box'");
 445
 446 style.background = "left top 60px / 50px round fixed border-box";
 447 shouldBe("style.background", "'left 0% top 60px / 50px round fixed border-box border-box'");
 448 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 0% top 60px / 50px border-box border-box'");
 449
 450 style.background = "left -20px top 60px / 50px round fixed border-box";
 451 shouldBe("style.background", "'left -20px top 60px / 50px round fixed border-box border-box'");
 452 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left -20px top 60px / 50px border-box border-box'");
 453
 454 style.background = "border-box left 20px top / 50px round fixed";
 455 shouldBe("style.background", "'left 20px top 0% / 50px round fixed border-box border-box'");
 456 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 20px top 0% / 50px border-box border-box'");
 457
 458 style.background = "border-box round fixed left 20px top / 50px";
 459 shouldBe("style.background", "'left 20px top 0% / 50px round fixed border-box border-box'");
 460 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 20px top 0% / 50px border-box border-box'");
 461
 462 style.background = "border-box round fixed left 20px top 40px / 50px";
 463 shouldBe("style.background", "'left 20px top 40px / 50px round fixed border-box border-box'");
 464 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 20px top 40px / 50px border-box border-box'");
 465
 466 style.background = "border-box round fixed left 20px top 40px";
 467 shouldBe("style.background", "'left 20px top 40px round fixed border-box border-box'");
 468 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 20px top 40px / auto border-box border-box'");
 469
 470 style.background = "top 10% left 30% gray round fixed border-box";
 471 shouldBe("style.background", "'left 30% top 10% round fixed border-box border-box gray'");
 472 shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed left 30% top 10% / auto border-box border-box'");
 473
 474 debug("background-position inside the background shorthand, some invalid cases, no changes expected");
 475 style.background = "";
 476 style.background = "top 10% left 30% 50% gray round fixed border-box";
 477 shouldBe("style.background", "''");
 478 // This is the default computed style.
 479 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 480
 481 style.background = "top 10% solid 30% gray round fixed border-box";
 482 shouldBe("style.background", "''");
 483 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 484
 485 style.background = "top 10% left round gray round fixed border-box";
 486 shouldBe("style.background", "''");
 487 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 488
 489 style.background = "top 10% top 30% gray round fixed border-box";
 490 shouldBe("style.background", "''");
 491 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 492
 493 style.background = "center center center / 10em gray round fixed border-box";
 494 shouldBe("style.background", "''");
 495 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 496
 497 style.background = "center center 30px / 10em gray round fixed border-box";
 498 shouldBe("style.background", "''");
 499 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 500
 501 style.background = "top center left / 10em gray round fixed border-box";
 502 shouldBe("style.background", "''");
 503 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 504
 505 style.background = "50% left / 10em gray round fixed border-box";
 506 shouldBe("style.background", "''");
 507 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 508
 509 style.background = "solid / 10em gray round fixed border-box";
 510 shouldBe("style.background", "''");
 511 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 512
 513 style.background = "top 10% left 20px 50% 50px gray round fixed border-box";
 514 shouldBe("style.background", "''");
 515 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 516
 517 style.background = "20px 20px 30px / 40px gray round fixed border-box";
 518 shouldBe("style.background", "''");
 519 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 520
 521 style.background = "20px 20px 30px 60px / 40px gray round fixed border-box";
 522 shouldBe("style.background", "''");
 523 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 524
 525 style.background = "20px 20px 30px 60px 70px / 40px gray round fixed border-box";
 526 shouldBe("style.background", "''");
 527 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 528
 529 style.background = "20px 20px 30px / 40px gray top left round fixed border-box";
 530 shouldBe("style.background", "''");
 531 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 532
 533 document.body.removeChild(testContainer);
 534 </script>
 535 </body>
 536 </html>