[css-background] Question about serialization of multiple layers of css background

[joonghunpark]

I was looking into the bugs of chromium, https://bugs.chromium.org/p/chromium/issues/detail?id=1473894,
and found that Firefox and chrome shows a different behavior for serialization of background shorthand
when they are used with its longhand properties in a mixed way.

FF: Serialize background shorthand + its longhand => longhands only
Chrome: Serialize background shorthand + its longhand => background shorthand only.

And as a result, chrome's serialization result is not matched with the result of its specified original statements.

For example, for style rule below, FF and chrome shows the different CSSStyleDeclaration result.

<style> input { background: #00ee00 no-repeat; background-image: linear-gradient(to bottom, #8ab73e, #8ab73e), linear-gradient(to bottom, #353535, #353535); background-size: 0 1px, 100% 1px; background-position: 50% 50%, 50% 100%; border: none; } </style>

1. FF CSSStyleDeclaration
   input { background-color: rgb(0, 238, 0); background-repeat: no-repeat; background-attachment: scroll; background-origin: padding-box; background-clip: border-box; background-image: linear-gradient(rgb(138, 183, 62), rgb(138, 183, 62)), linear-gradient(rgb(53, 53, 53), rgb(53, 53, 53)); background-size: 0px 1px, 100% 1px; background-position: 50% 50%, 50% 100%; border: medium; }

2. Chrome CSSStyleDeclaration
   input { background: linear-gradient(rgb(138, 183, 62), rgb(138, 183, 62)) 50% 50% / 0px 1px no-repeat, linear-gradient(rgb(53, 53, 53), rgb(53, 53, 53)) 50% 100% / 100% 1px rgb(0, 238, 0); border: none; }

Because 'background' shorthand's omitted properties uses their default values, meanwhile longhand properties repeats the list of values until there are enough if a property doesn’t have enough comma-separated values to match the number of layers,
so chrome's shorthand presentation of serialization result seems like a buggy behavior.

If we want to keep chrome's current behavior, it seems that we need to manipulate the shorthand 'background' serialization result to include the repeated value list(https://www.w3.org/TR/css-backgrounds-3/#layering),
but I'm not sure which way is the right one between the current FF and Chrome behaviors.

Is there a spec for 'background' shorthand property's serialization result?

I'd like to ask about it before I proceed the chromium bug further.

Thank you for your help!

[emilio]

I don't think you can write that background property combination as a shorthand right now. So Firefox is right per https://drafts.csswg.org/cssom/#serialize-a-css-declaration-block. You get to step 8 because https://drafts.csswg.org/cssom/#serialize-a-css-value has:

If there is no such shorthand or shorthand cannot exactly represent the values of all the properties in list, return the empty string.

[joonghunpark]

Thank you for your kind explanation, Emilio. It clarified which steps are proceeded in serialization process and helped me a lot to find out which direction I should go on.
I think Blink should process it in the same way as specified in the spec you commented above.
I will proceed in the way.

Thank you for your help!