LayoutTests/fast/backgrounds/background-position-parsing-2_t01.dart

/*
 * Copyright (c) 2014, the Dart project authors.  Please see the AUTHORS file
 * for details. All rights reserved. Use of this source code is governed by a
 * BSD-style license that can be found in the LICENSE file.
 */
/**
 * @description Test to make sure background-position is parsed correctly.
 */
import "dart:html";
import "../../testcommon.dart";
import "pwd.dart";

main() {
  var testContainer = document.createElement("div");
  document.body.append(testContainer);

  testContainer.innerHtml = '<div style="width:500px;height:500px"><div id="test">hello</div></div>';

  var e = document.getElementById('test');
  var style = e.style;
  var computedStyle = e.getComputedStyle();

  style.backgroundImage = "url($root/resources/diamond.png)";
  style.backgroundRepeat = "no-repeat";

  debug("background-position with one value");
  // Initial test.
  shouldBe(computedStyle.backgroundPosition, '0% 0%');

  style.backgroundPosition = "70%";
  // Second value is assuming to be 'center'
  shouldBe(style.backgroundPosition, '70% 50%');
  shouldBe(computedStyle.backgroundPosition, '70% 50%');

  style.backgroundPosition = "84px";
  shouldBe(style.backgroundPosition, '84px 50%');
  shouldBe(computedStyle.backgroundPosition, '84px 50%');

  style.backgroundPosition = "left";
  shouldBe(style.backgroundPosition, '0% 50%');
  shouldBe(computedStyle.backgroundPosition, '0% 50%');

  style.backgroundPosition = "right";
  shouldBe(style.backgroundPosition, '100% 50%');
  shouldBe(computedStyle.backgroundPosition, '100% 50%');

  style.backgroundPosition = "bottom";
  shouldBe(style.backgroundPosition, '50% 100%');
  shouldBe(computedStyle.backgroundPosition, '50% 100%');

  style.backgroundPosition = "top";
  shouldBe(style.backgroundPosition, '50% 0%');
  shouldBe(computedStyle.backgroundPosition, '50% 0%');

  style.backgroundPosition = "center";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  debug("background-position with two values");
  style.backgroundPosition = "left bottom";
  shouldBe(style.backgroundPosition, '0% 100%');
  shouldBe(computedStyle.backgroundPosition, '0% 100%');

  style.backgroundPosition = "bottom left";
  shouldBe(style.backgroundPosition, '0% 100%');
  shouldBe(computedStyle.backgroundPosition, '0% 100%');

  style.backgroundPosition = "100% bottom";
  shouldBe(style.backgroundPosition, '100% 100%');
  shouldBe(computedStyle.backgroundPosition, '100% 100%');

  style.backgroundPosition = "100% top";
  shouldBe(style.backgroundPosition, '100% 0%');
  shouldBe(computedStyle.backgroundPosition, '100% 0%');

  style.backgroundPosition = "54px bottom";
  shouldBe(style.backgroundPosition, '54px 100%');
  shouldBe(computedStyle.backgroundPosition, '54px 100%');

  style.backgroundPosition = "center center";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  style.backgroundPosition = "5% bottom";
  shouldBe(style.backgroundPosition, '5% 100%');
  shouldBe(computedStyle.backgroundPosition, '5% 100%');

  style.backgroundPosition = "30pt -20px";
  shouldBe(style.backgroundPosition, '30pt -20px');
  shouldBe(computedStyle.backgroundPosition, '40px -20px');

  style.backgroundPosition = "right center";
  shouldBe(style.backgroundPosition, '100% 50%');
  shouldBe(computedStyle.backgroundPosition, '100% 50%');

  style.backgroundPosition = "100% 0";
  shouldBe(style.backgroundPosition, '100% 0px');
  shouldBe(computedStyle.backgroundPosition, '100% 0px');

  style.backgroundPosition = "center right";
  shouldBe(style.backgroundPosition, '100% 50%');
  shouldBe(computedStyle.backgroundPosition, '100% 50%');

  style.backgroundPosition = "center 50%";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  style.backgroundPosition = "center left";
  shouldBe(style.backgroundPosition, '0% 50%');
  shouldBe(computedStyle.backgroundPosition, '0% 50%');

  style.backgroundPosition = "-20% center";
  shouldBe(style.backgroundPosition, '-20% 50%');
  shouldBe(computedStyle.backgroundPosition, '-20% 50%');

  style.backgroundPosition = "top right";
  shouldBe(style.backgroundPosition, '100% 0%');
  shouldBe(computedStyle.backgroundPosition, '100% 0%');

  style.backgroundPosition = "50% center";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  debug("background-position invalid with one or two values, no change expected");
  style.backgroundPosition = "5 right";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  style.backgroundPosition = "0 right";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  style.backgroundPosition = "0px right";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  style.backgroundPosition = "top 108px";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  style.backgroundPosition = "top 100%";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  style.backgroundPosition = "60 50%";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  style.backgroundPosition = "hidden";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  style.backgroundPosition = "hidden solid";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  style.backgroundPosition = "bottombottom";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  style.backgroundPosition = "left left";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  style.backgroundPosition = "left right";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  style.backgroundPosition = "top top";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  style.backgroundPosition = "50% left";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  style.backgroundPosition = "50";
  shouldBe(style.backgroundPosition, '50% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%');

  style.backgroundPosition = "1px+1px";
  shouldBe(style.backgroundPosition, '1px 1px');
  shouldBe(computedStyle.backgroundPosition, '1px 1px');

  debug("background-position with CSS3 comma separator, one or two values");
  style.backgroundImage = "url($root/resources/diamond.png), url($root/resources/ring.png)";
  style.backgroundRepeat = "no-repeat";

  style.backgroundPosition = "50%, 100%";
  shouldBe(style.backgroundPosition, '50% 50%, 100% 50%');
  shouldBe(computedStyle.backgroundPosition, '50% 50%, 100% 50%');

  style.backgroundPosition = "top, bottom";
  shouldBe(style.backgroundPosition, '50% 0%, 50% 100%');
  shouldBe(computedStyle.backgroundPosition, '50% 0%, 50% 100%');

  style.backgroundPosition = "right center, 5px bottom";
  shouldBe(style.backgroundPosition, '100% 50%, 5px 100%');
  shouldBe(computedStyle.backgroundPosition, '100% 50%, 5px 100%');

  style.backgroundPosition = "top left, bottom right";
  shouldBe(style.backgroundPosition, '0% 0%, 100% 100%');
  shouldBe(computedStyle.backgroundPosition, '0% 0%, 100% 100%');

  debug("background-position with CSS3 comma separator, with invalid one or two values, no change expected");
  style.backgroundPosition = "0 center, right right";
  shouldBe(style.backgroundPosition, '0% 0%, 100% 100%');
  shouldBe(computedStyle.backgroundPosition, '0% 0%, 100% 100%');

  style.backgroundPosition = "center right, right right";
  shouldBe(style.backgroundPosition, '0% 0%, 100% 100%');
  shouldBe(computedStyle.backgroundPosition, '0% 0%, 100% 100%');

  style.backgroundPosition = "center 20px, solid 20px";
  shouldBe(style.backgroundPosition, '0% 0%, 100% 100%');
  shouldBe(computedStyle.backgroundPosition, '0% 0%, 100% 100%');

  debug("background-position with CSS3 four values");
  style.backgroundImage = "url($root/resources/diamond.png)";
  style.backgroundPosition = "left 10px top 15px";
  shouldBe(style.backgroundPosition, 'left 10px top 15px');
  shouldBe(computedStyle.backgroundPosition, 'left 10px top 15px');

  style.backgroundPosition = "left 10% top 30%";
  shouldBe(style.backgroundPosition, 'left 10% top 30%');
  shouldBe(computedStyle.backgroundPosition, 'left 10% top 30%');

  style.backgroundPosition = "top 10% left 30%";
  shouldBe(style.backgroundPosition, 'left 30% top 10%');
  shouldBe(computedStyle.backgroundPosition, 'left 30% top 10%');

  style.backgroundPosition = "right top 15px";
  shouldBe(style.backgroundPosition, 'right 0% top 15px');
  shouldBe(computedStyle.backgroundPosition, 'right 0% top 15px');

  style.backgroundPosition = "left 10px center";
  shouldBe(style.backgroundPosition, 'left 10px top 50%');
  shouldBe(computedStyle.backgroundPosition, 'left 10px top 50%');

  style.backgroundPosition = "center top 20px";
  shouldBe(style.backgroundPosition, 'left 50% top 20px');
  shouldBe(computedStyle.backgroundPosition, 'left 50% top 20px');

  style.backgroundPosition = "top 20px center";
  shouldBe(style.backgroundPosition, 'left 50% top 20px');
  shouldBe(computedStyle.backgroundPosition, 'left 50% top 20px');

  style.backgroundPosition = "center left 30px";
  shouldBe(style.backgroundPosition, 'left 30px top 50%');
  shouldBe(computedStyle.backgroundPosition, 'left 30px top 50%');

  style.backgroundPosition = "";
  shouldBe(style.backgroundPosition, '');
  shouldBe(computedStyle.backgroundPosition, '0% 0%');

  style.backgroundPosition = "left 20% top";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  debug("background-position with CSS3 invalid four values, no change expected");
  style.backgroundPosition = "left center top";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "0px right top";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "left center top center";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "left center top 20%";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "center bottom top 20%";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "right bottom top";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "right bottom solid";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "20px bottom top";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "20px bottom hidden";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "solid dotted bottom top";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "top top top top";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "left 0px right 20%";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "left 30% top 20% center";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "20px 30% bottom";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "top 0px bottom";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "left 0px right";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "top 0px bottom 30px top";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "left 10px center 15px";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "left 10px top center";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "center right top 20px";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "center 10px center 10px";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "top center center";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "center 10px center";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "center center 10px";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "center 0px left 20%";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "left center top";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "center center center";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "top left 50% 50%";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  style.backgroundPosition = "center center center center";
  shouldBe(style.backgroundPosition, 'left 20% top 0%');
  shouldBe(computedStyle.backgroundPosition, 'left 20% top 0%');

  debug("background-position with CSS3 four values and comma");
  style.backgroundImage = "url($root/resources/diamond.png), url($root/resources/ring.png)";

  style.backgroundPosition = "center, left bottom 20px";
  shouldBe(style.backgroundPosition, '50% 50%, left 0% bottom 20px');
  shouldBe(computedStyle.backgroundPosition, '50% 50%, left 0% bottom 20px');

  style.backgroundPosition = "right 20px bottom 20px, center left";
  shouldBe(style.backgroundPosition, 'right 20px bottom 20px, 0% 50%');
  shouldBe(computedStyle.backgroundPosition, 'right 20px bottom 20px, 0% 50%');

  style.backgroundPosition = "left 10px top 15px, right 20% bottom 20px";
  shouldBe(style.backgroundPosition, 'left 10px top 15px, right 20% bottom 20px');
  shouldBe(computedStyle.backgroundPosition, 'left 10px top 15px, right 20% bottom 20px');

  style.backgroundPosition = "left 10% top, top 0px right";
  shouldBe(style.backgroundPosition, 'left 10% top 0%, right 0% top 0px');
  shouldBe(computedStyle.backgroundPosition, 'left 10% top 0%, right 0% top 0px');

  style.backgroundPosition = "right top 15px, bottom right 20px";
  shouldBe(style.backgroundPosition, 'right 0% top 15px, right 20px bottom 0%');
  shouldBe(computedStyle.backgroundPosition, 'right 0% top 15px, right 20px bottom 0%');

  debug("background-position with invalid CSS3 four values and comma, no change expected");
  style.backgroundPosition = "right top 15px, left right 20px";
  shouldBe(style.backgroundPosition, 'right 0% top 15px, right 20px bottom 0%');
  shouldBe(computedStyle.backgroundPosition, 'right 0% top 15px, right 20px bottom 0%');

  style.backgroundPosition = "right left 15px, left bottom 20px";
  shouldBe(style.backgroundPosition, 'right 0% top 15px, right 20px bottom 0%');
  shouldBe(computedStyle.backgroundPosition, 'right 0% top 15px, right 20px bottom 0%');

  style.backgroundPosition = "solid, left bottom 20px";
  shouldBe(style.backgroundPosition, 'right 0% top 15px, right 20px bottom 0%');
  shouldBe(computedStyle.backgroundPosition, 'right 0% top 15px, right 20px bottom 0%');

  debug("background-position inside the background shorthand");
  style.background = "top 10% left 30% / 10em gray round fixed border-box";
  shouldBe(style.background, 'left 30% top 10% / 10em round fixed border-box border-box gray');
  shouldBe(computedStyle.background, 'rgb(128, 128, 128) none round fixed left 30% top 10% / 160px border-box border-box');

  style.background = "right top 15px / 10em gray round fixed border-box";
  shouldBe(style.background, 'right 0% top 15px / 10em round fixed border-box border-box gray');
  shouldBe(computedStyle.background, 'rgb(128, 128, 128) none round fixed right 0% top 15px / 160px border-box border-box');

  style.background = "left 10px center / 10em gray round fixed border-box";
  shouldBe(style.background, 'left 10px top 50% / 10em round fixed border-box border-box gray');
  shouldBe(computedStyle.background, 'rgb(128, 128, 128) none round fixed left 10px top 50% / 160px border-box border-box');

  style.background = "left 10px center round fixed border-box";
  shouldBe(style.background, 'left 10px top 50% round fixed border-box border-box');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none round fixed left 10px top 50% / auto border-box border-box');

  style.background = "center top 20px round fixed border-box";
  shouldBe(style.background, 'left 50% top 20px round fixed border-box border-box');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none round fixed left 50% top 20px / auto border-box border-box');

  style.background = "top 20px center round fixed border-box";
  shouldBe(style.background, 'left 50% top 20px round fixed border-box border-box');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none round fixed left 50% top 20px / auto border-box border-box');

  style.background = "top center round fixed border-box";
  shouldBe(style.background, '50% 0% round fixed border-box border-box');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none round fixed 50% 0% / auto border-box border-box');

  style.background = "50px 60px / 50px round fixed border-box";
  shouldBe(style.background, '50px 60px / 50px round fixed border-box border-box');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none round fixed 50px 60px / 50px border-box border-box');

  style.background = "50px / 50px round fixed border-box";
  shouldBe(style.background, '50px 50% / 50px round fixed border-box border-box');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none round fixed 50px 50% / 50px border-box border-box');

  style.background = "left top 60px / 50px round fixed border-box";
  shouldBe(style.background, 'left 0% top 60px / 50px round fixed border-box border-box');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none round fixed left 0% top 60px / 50px border-box border-box');

  style.background = "left -20px top 60px / 50px round fixed border-box";
  shouldBe(style.background, 'left -20px top 60px / 50px round fixed border-box border-box');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none round fixed left -20px top 60px / 50px border-box border-box');

  style.background = "border-box left 20px top / 50px round fixed";
  shouldBe(style.background, 'left 20px top 0% / 50px round fixed border-box border-box');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none round fixed left 20px top 0% / 50px border-box border-box');

  style.background = "border-box round fixed left 20px top / 50px";
  shouldBe(style.background, 'left 20px top 0% / 50px round fixed border-box border-box');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none round fixed left 20px top 0% / 50px border-box border-box');

  style.background = "border-box round fixed left 20px top 40px / 50px";
  shouldBe(style.background, 'left 20px top 40px / 50px round fixed border-box border-box');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none round fixed left 20px top 40px / 50px border-box border-box');

  style.background = "border-box round fixed left 20px top 40px";
  shouldBe(style.background, 'left 20px top 40px round fixed border-box border-box');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none round fixed left 20px top 40px / auto border-box border-box');

  style.background = "top 10% left 30% gray round fixed border-box";
  shouldBe(style.background, 'left 30% top 10% round fixed border-box border-box gray');
  shouldBe(computedStyle.background, 'rgb(128, 128, 128) none round fixed left 30% top 10% / auto border-box border-box');

  debug("background-position inside the background shorthand, some invalid cases, no changes expected");
  style.background = "";
  style.background = "top 10% left 30% 50% gray round fixed border-box";
  shouldBe(style.background, '');
  // This is the default computed style.
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');

  style.background = "top 10% solid 30% gray round fixed border-box";
  shouldBe(style.background, '');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');

  style.background = "top 10% left round gray round fixed border-box";
  shouldBe(style.background, '');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');

  style.background = "top 10% top 30% gray round fixed border-box";
  shouldBe(style.background, '');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');

  style.background = "center center center / 10em gray round fixed border-box";
  shouldBe(style.background, '');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');

  style.background = "center center 30px / 10em gray round fixed border-box";
  shouldBe(style.background, '');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');

  style.background = "top center left / 10em gray round fixed border-box";
  shouldBe(style.background, '');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');

  style.background = "50% left / 10em gray round fixed border-box";
  shouldBe(style.background, '');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');

  style.background = "solid / 10em gray round fixed border-box";
  shouldBe(style.background, '');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');

  style.background = "top 10% left 20px 50% 50px gray round fixed border-box";
  shouldBe(style.background, '');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');

  style.background = "20px 20px 30px / 40px gray round fixed border-box";
  shouldBe(style.background, '');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');

  style.background = "20px 20px 30px 60px / 40px gray round fixed border-box";
  shouldBe(style.background, '');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');

  style.background = "20px 20px 30px 60px 70px / 40px gray round fixed border-box";
  shouldBe(style.background, '');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');

  style.background = "20px 20px 30px / 40px gray top left round fixed border-box";
  shouldBe(style.background, '');
  shouldBe(computedStyle.background, 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');

  testContainer.remove();
}