[csswg-drafts] [css-background] Question about serialization of multiple layers of css background (#9254)

joonghunpark has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-background] Question about serialization of multiple layers of css background ==
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!

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9254 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 28 August 2023 14:43:08 UTC