-webkit-background-size has behavioural differences to background-size

[alancutter]

-webkit-background-size is listed as a simple alias for background-size when it has different syntactic behaviour. -webkit-background-size: 10px is equivalent to background-size: 10px 10px. background-size: 10px is equivalent to background-size: 10px auto (see https://drafts.csswg.org/css-backgrounds-3/#bg-size).

[miketaylr]

Excellent feedback, thanks.

[zcorpan]

Should this property always be serialized with two values, so that it can roundtrip with both the prefixed and unprefixed variants?

Demo http://software.hixie.ch/utilities/js/live-dom-viewer/saved/7809

Result in chrome

log: getting .style
log: 10px
log: setting .style to gCS
log: 10px
log: getting .style again
log: 10px 10px

[fantasai]

FWIW, I regret making the decision to default the second value to auto. If it were Web-compatible, I'd make the unprefixed property parse like -webkit-background-size.

@zcorpan Particularly given that single-value syntax isn't the same as doubling it, which is the typical pattern in CSS, serializing as two values feels pretty reasonable here.

[karlcow]

I was reviewing the tests in https://github.com/web-platform-tests/wpt/blob/master/compat/

And it doesn't seem to really work.

Safari

> document.body.style.webkitBackgroundSize
< ""
> document.body.style.webkitBackgroundSize = "10px"
< "10px"
> document.body.style.webkitBackgroundSize
< "10px"
> document.body.style.backgroundSize
< ""

Firefox

document.body.style.WebkitBackgroundSize
""
document.body.style.WebkitBackgroundSize = "10px"
"10px"
document.body.style.WebkitBackgroundSize
"10px"
document.body.style.backgroundSize
"10px" 

Chrome

document.body.style.webkitBackgroundSize
''
document.body.style.webkitBackgroundSize = "10px"
'10px'
document.body.style.webkitBackgroundSize
'10px 10px'
document.body.style.backgroundSize
'10px 10px'

fun!

I need to add more tests on the compat tests enumeration to test the behaviors of the values of the properties.

[karlcow]

I'm taking care of this in https://github.com/web-platform-tests/wpt/issues/34493

[nt1m]

cc @Loirooriol who did work on this in WebKit

[Loirooriol]

In WebKit -webkit-background-size and background-size are different longhands that share a computed value. It seems the only difference is in the parsing, so it should be easy to turn -webkit-background-size into a legacy shorthand of background-size, which would be the standard approach.

gCS should round-trip, so either serialize -webkit-background-size and background-size differently, or always use 2 values.

[zcorpan]

If they're parsed differently, always serializing two values seems better.

Is there interest in trying to change the unprefixed property to match the -webkit- prefixed property as @fantasai suggested in https://github.com/whatwg/compat/issues/28#issuecomment-700427017 ?

[karlcow]

see https://github.com/WebKit/WebKit/pull/3372

[pxlcoder]

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

[pxlcoder]

There are two WPTs that current assume single-value serialization:

css/css-animations/KeyframeEffect-getKeyframes.tentative.html
quirks/unitless-length/excluded-properties-002.html

I would like to update these tests as part of the WebKit change.

@zcorpan @karlcow Do we have consensus from other engines on:

Always serialize `background-size` as two values.

[zcorpan]

I filed an issue for the CSS WG for those questions: https://github.com/w3c/csswg-drafts/issues/7802