incorrect handling of multiple values

[ju1ius]

div.main
{
  background-image: url("foo.png") top left no-repeat,
                    url("bar.png") bottom right no-repeat;
}

This rule obviously has two values, themselves consisting of 4 values.

Expected result of CSSDocument::getAllRuleSets():

array(1) {
  [0]=>
  object(CSSDeclarationBlock)#3 (2) {
    ["aSelectors":"CSSDeclarationBlock":private]=>
    array(1) {
      [0]=>
      object(CSSSelector)#4 (2) {
        ["sSelector":"CSSSelector":private]=>
        string(8) "div.main"
        ["iSpecificity":"CSSSelector":private]=>
        NULL
      }
    }
    ["aRules":"CSSRuleSet":private]=>
    array(1) {
      ["background-image"]=>
      object(CSSRule)#5 (3) {
        ["sRule":"CSSRule":private]=>
        string(16) "background-image"
        ["aValues":"CSSRule":private]=>
        array(2) {
          [0]=>
          array(4) {
            [0]=>
            object(CSSURL)#6 (1) {
              ["oURL":"CSSURL":private]=>
              object(CSSString)#7 (1) {
                ["sString":"CSSString":private]=>
                string(7) "foo.png"
              }
            }
            [1]=>
            string(3) "top"
            [2]=>
            string(4) "left"
            [3]=>
            string(9) "no-repeat"
          }
          array(4) {
            [0]=>
            object(CSSURL)#6 (1) {
              ["oURL":"CSSURL":private]=>
              object(CSSString)#7 (1) {
                ["sString":"CSSString":private]=>
                string(7) "bar.png"
              }
            }
            [1]=>
            string(3) "bottom"
            [2]=>
            string(4) "right"
            [3]=>
            string(9) "no-repeat"
          }
        }
        ["bIsImportant":"CSSRule":private]=>
        bool(false)
      }
    }
  }
}

array(1) {
  [0]=>
  object(CSSDeclarationBlock)#3 (2) {
    ["aSelectors":"CSSDeclarationBlock":private]=>
    array(1) {
      [0]=>
      object(CSSSelector)#4 (2) {
        ["sSelector":"CSSSelector":private]=>
        string(8) "div.main"
        ["iSpecificity":"CSSSelector":private]=>
        NULL
      }
    }
    ["aRules":"CSSRuleSet":private]=>
    array(1) {
      ["background-image"]=>
      object(CSSRule)#5 (3) {
        ["sRule":"CSSRule":private]=>
        string(16) "background-image"
        ["aValues":"CSSRule":private]=>
        array(7) {
          [0]=>
          array(1) {
            [0]=>
            object(CSSURL)#6 (1) {
              ["oURL":"CSSURL":private]=>
              object(CSSString)#7 (1) {
                ["sString":"CSSString":private]=>
                string(7) "foo.png"
              }
            }
          }
          [1]=>
          array(1) {
            [0]=>
            string(3) "top"
          }
          [2]=>
          array(1) {
            [0]=>
            string(4) "left"
          }
          [3]=>
          array(2) {
            [0]=>
            string(9) "no-repeat"
            [1]=>
            object(CSSURL)#8 (1) {
              ["oURL":"CSSURL":private]=>
              object(CSSString)#9 (1) {
                ["sString":"CSSString":private]=>
                string(7) "bar.png"
              }
            }
          }
          [4]=>
          array(1) {
            [0]=>
            string(6) "bottom"
          }
          [5]=>
          array(1) {
            [0]=>
            string(5) "right"
          }
          [6]=>
          array(1) {
            [0]=>
            string(9) "no-repeat"
          }
        }
        ["bIsImportant":"CSSRule":private]=>
        bool(false)
      }
    }
  }
}

[ju1ius]

However, this should not apply to the font shorthand property.
Also, this raises an issue with the important keyword.

[sabberworm]

The font-property was the initial reason why space-separated value-parts took precedence over comma-separated parts. I don’t see how else this can be resolved other than hard-coding property names, which is what I actually wanted to avoid at all costs… Also, can you tell me what problem you see with the important keyword?

[ju1ius]

The problem is that the spec is not clear about !important with mutliple values.

div.main
{
  background-image: url("foo.png") top left no-repeat,
                    url("bar.png") bottom right no-repeat !important;
}

Here does !important applies to both sets of values or just the last one ?

[sabberworm]

Considering that using a single statement is the only way to use multiple background images on the same element (anything else would horribly break backwards-compatibility of this new syntax), the !important statement MUST be referring to the whole statement.