[css-backgrounds] Always serialize 'background-size' and mask-size as two values

@pxlcoder

That change is now implemented in WebKit: WebKit/WebKit#3372

Relevant CSS specs: https://drafts.csswg.org/css-backgrounds-3/#background-size and https://drafts.csswg.org/cssom/#serialize-a-css-value

@pxlcoder asked

Do we have consensus from other engines on:

Always serialize background-size as two values.

CSSOM says

If component values can be omitted or replaced with a shorter representation without changing the meaning of the value, omit/replace them.

If either of the above syntactic translations would be less backwards-compatible, do not perform them.

The last bullet point seems to apply here, as it impacts -webkit-background-size if implemented as a legacy shorthand. But maybe we can include each known property with special serialization, and what that serialization should be, so it's not ambiguous for those properties.

@pxlcoder also asked:

Should we also change the serialization of mask-size to always use two values, for consistency?

Since mask-size also has a -webkit- prefixed variant and also uses <bg-size># value grammar, I think it makes sense to use the same serialization rule as for background-size.

css/css-backgrounds/background-size-001.html is wrong

Update background-332.html

fixes background-size tests for two values serialization (#49388)

Bug 1933627 [wpt PR 49388] - fixes background-size tests for two valu…

@karlcow

I don't really think this makes sense (background-size is not -webkit-background-size), and I don't think we should change WPT to that extent; neither Firefox nor we serialize background-size as such, and there's really no backwards compat to worry about when the property is a different one.

@karlcow, would you please consider reverting your WPT changes?

@sesse

@sesse this was put on the agenda of the CSS WG by @nt1m last week.

I'm just harmonizing the tests.
Some WPT tests are set as two values, some are set as one value.

The two I modified:
http://wpt.fyi/css/css-backgrounds/background-size-001.html
https://wpt.fyi/css/css-backgrounds/parsing/background-size-computed.html

and the one which I didn't but was already giving two values.
https://wpt.fyi/results/css/css-backgrounds/background-332.html

See also the initial discussions in WebKit/WebKit#3372 (review)

but I let @nt1m @pxlcoder chime in

With the CSS WG resolution we should have a form which is consistent and fix all tests in that sense.

@pxlcoder

and the one which I didn't but was already giving two values.
https://wpt.fyi/results/css/css-backgrounds/background-332.html

Surely you changed that into giving two values?

web-platform-tests/wpt@bcd4441

I guess background-size.html was the one that was a bit odd already, added by @pxlcoder in web-platform-tests/wpt@3872d99 . If you want things to be consistent in lieu of consensus, surely the right thing to do is to bring the lone test that was different into agreement with the majority of browsers and tests, not to change everything else the other way?

@sesse

@sesse

I don't really think this makes sense (background-size is not -webkit-background-size), and I don't think we should change WPT to that extent; neither Firefox nor we serialize background-size as such, and there's really no backwards compat to worry about when the property is a different one.

This makes sense if you want to implement -webkit-background-size as a legacy alias of background-size instead of a separate property (like most things are in the compat specification: whatwg/compat#28). It was made a legacy alias in WebKit to fix a different WPT fwiw: https://bugs.webkit.org/show_bug.cgi?id=243562#c2

It's generally lower cost to handle prefixes as legacy aliases rather than separate properties, so this is why I'd like this change to be made.

there's really no backwards compat to worry about when the property is a different one.

There shouldn't be with this change either, we haven't received any breakage reports for the past 2 years we've shipped this change, and most frameworks need to be able to parse both values anyway.

Fix background-shorthand-serialization.html WPT expectations

Single length/percentage background-size and mask-size must serialize…

@weinig

Seems like the assertions about what webkit does are different from the WPTs, when the mask-size or background-size is auto.
https://github.com/web-platform-tests/wpt/blob/master/css/css-masking/parsing/mask-size-valid.html#L19 asserts that auto auto serializes to auto rather than to auto auto.

So IMO the correct wording would be to serialize to two values when they are not identical, even if the second one is the default.

@weinig @nt1m

In my opinion, background-size and mask-size should serialize with two values when they are identical, except if they are auto, while webkit-background-size should serialize with two values when the second is auto (edit) except if the first is also auto.

In my opinion, background-size and mask-size should serialize with two values when they are identical, except if they are auto, while webkit-background-size should serialize with two values when the second is auto (edit) except if the first is also auto.

Note that we can't serialize -webkit-background-size and background-size as they're aliased.

Seems like the assertions about what webkit does are different from the WPTs, when the mask-size or background-size is auto.
https://github.com/web-platform-tests/wpt/blob/master/css/css-masking/parsing/mask-size-valid.html#L19 asserts that auto auto serializes to auto rather than to auto auto.

Ah, there's no ambiguity in this case I think (though I could be wrong), so hence the single value. I haven't looked at this in a while tbh

Note that we can't serialize -webkit-background-size and background-size as they're aliased.

I meant to say this, if that needed to be clarified:

style.webkitBackgroundSize = '1px'
style.webkitBackgroundSize; // 1px
style.backgroundSize; // 1px 1px
style.webkitBackgroundSize = '1px auto'
style.webkitBackgroundSize; // 1px auto
style.backgroundSize; // 1px

But I had forgotten that the definition of the aliasing mechanism requires converting the alias transparently. I.e. parsing and serialization cannot know that an alias has been used. Although technically possible, this is probably not worth the complexity it would add. So nevermind! ^^

Serialize background-size and mask-size as two values.

Hi, I would like to ask about the effect on CSSOM/Typed OM.

For example:

element.style.backgroundSize = '1px';

const cssom_value = element.style.backgroundSize;

const typed_om_value = element.attributeStyleMap.get('background-size');

What should be the value of cssom_value and typed_om_value?

Should we also update tests like css/css-typed-om/the-stylepropertymap/properties/background-size.html to mark <length> and <percentage> as unsupported?

Always serialize background-size and mask-size with two values

Serialize background-size/mask-size with implicit "auto" height

test(css): require canonical background size heights

fix(css): preserve effective background size heights

Navigation Menu

Repository navigation

[css-backgrounds] Always serialize 'background-size' and `mask-size` as two values #7802

16 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[css-backgrounds] Always serialize 'background-size' and mask-size as two values #7802

Description

Activity

sesse commented on Dec 3, 2024

karlcow commented on Dec 3, 2024

sesse commented on Dec 3, 2024

nt1m commented on Dec 3, 2024

16 remaining items

noamr commented on Jan 27, 2026

cdoublev commented on Jan 27, 2026

nt1m commented on Jan 27, 2026

cdoublev commented on Jan 27, 2026

felipeerias commented on Mar 4, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

[css-backgrounds] Always serialize 'background-size' and `mask-size` as two values #7802