w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.51k stars 668 forks source link

[cssom] How to serialize 0% in translate property? #7722

Open nt1m opened 2 years ago

nt1m commented 2 years ago

Gecko currently serializes 0% as specified in the translate property whereas Blink and WebKit omit it.

I think omitting it makes sense to follow the shortest form rule and to be consistent with how 0px is handled.

Though Gecko's motivation for the change was to be consistent with the translate() function for transform, see: https://bugzilla.mozilla.org/show_bug.cgi?id=1566167#c7

This affects a few WPT:

Loirooriol commented 2 years ago

From https://drafts.csswg.org/css-transforms-2/#individual-transforms

The resolved value of the translate property is the computed value, and thus getComputedStyle() includes percentage values in its results.

Also:

When the second or third values are missing, they default to 0px.

So omitting 0% would be like turning it into 0px.

nt1m commented 2 years ago

I guess the question is how do we serialize translate: 200px 0% ? is it translate: 200px (matches Chrome & WebKit) or translate: 200px 0% (matches Firefox)?

Loirooriol commented 2 years ago

From the quotes above, Firefox seems right to me.

The shortest serialization principle may shorten 200px 0px to just 200px, but not 200px 0% to 200px.