Bug 216170 – myElement.style.cssText exposes the order of the CSSPropertyID enum values to the web

• Component: CSS
• Status: NEW

[Myles C. Maxfield]

let myElement = document.createElement("div");
myElement.style.cssText = "all: unset";
console.log(myElement.style.cssText);

The order of the properties in the result matches the order of the enum values in enum CSSPropertyID in CSSPropertyNames.h

[Radar WebKit Bug Importer]

<rdar://problem/68693537>

[Karl Dubost]

in both Firefox and Chrome, latest versions as of this date, it returns simply:

`all:unset`

in Safari it really returns everything set as unset.

I have the feeling that this is more or less very similar to Bug 190496

[Oriol Brufau]

This is a parsing problem, not a serialization one:

  var myElement = document.createElement("div");
  myElement.style.cssText = "all: unset";
  console.log([...myElement.style]);

In Firefox the order also seems to expose internal details.
Blink doesn't treat 'all' as a shorthand.

[Oriol Brufau]

I'm not sure if the order is actually defined anywhere, I had the impression it should be kinda alphabetical but I can't find that, and https://drafts.csswg.org/css-logical/#box says

> shorthand properties that encompass both logical and physical longhands (such as the all shorthand) set their physical longhands last.

[Karl Dubost]

Created attachment 462667 [details]
developer tools in Safari, Firefox and Chrome

(note to myself)

all is defined in
https://drafts.csswg.org/css-cascade-5/#propdef-all

> The all property is a shorthand that resets all CSS properties except direction and unicode-bidi. It only accepts the CSS-wide keywords. It does not reset custom properties [css-variables-1].

and
https://drafts.csswg.org/css-cascade-5/#shorthand-property

> Some properties are shorthand properties, meaning that they allow authors to specify the values of several properties with a single property. A shorthand property sets all of its longhand sub-properties, exactly as if expanded in place.


and

>This means that a shorthand property declaration always sets all of its sub-properties, even those that are not explicitly set. Carelessly used, this might result in inadvertently resetting some sub-properties. Carefully used, a shorthand can guarantee a “blank slate” by resetting sub-properties inadvertently cascaded from other sources.

[Oriol Brufau]

cssText not serializing the 'all' shorthand is bug 190753.
But as already mentioned, the order will still be exposed regardless of that.