[cssom] Serialization of `initial` longhand within shorthand for specified style

[nt1m]

list-style-type: circle; list-style-position: inside; list-style-image: initial;

Should that serialize to list-style: inside circle; or list-style-type: circle; list-style-position: inside; list-style-image: initial;?

It's obvious that list-style-type: circle; list-style-position: inside; list-style-image: none; can serialize to list-style: inside circle;, but less obvious for the initial case.

Given initial and none have different meanings when it comes to author intent, I'm tempted to think that list-style-type: circle; list-style-position: inside; list-style-image: initial; is the more valid option.

cc @Loirooriol @darinadler

[nt1m]

cc @emilio @lilles too

[emilio]

Should that serialize to list-style: inside circle; or list-style-type: circle; list-style-position: inside; list-style-image: initial;?

The later. Otherwise it doesn't round-trip, because list-style: inside circle should expand to none, not initial. They are different values (even though in this case they compute to the same thing).

[Loirooriol]

Yes, it's not explicitly stated for list-style, but shorthands reset omitted longhands to their initial value (not literally initial). The initial value for list-style-image is none.

[darinadler]

Does that mean that setting list-style to an image URL resets list-style-type to disc rather than resetting it to none?

[Loirooriol]

That's the case in Firefox:

var {style} = document.createElement("div");
style.listStyle = "url()";
style.listStyleType; // Firefox: "disc". Blink/WebKit: "initial"

If the image is valid it doesn't matter since list-style-type will be ignored. If the image is invalid, falling back to disc doesn't sound bad. But only Blink seems to fall back to list-style-type for invalid images.

[darinadler]

Sure, I am not talking about practical considerations as much as I am trying to make sure there are no unnecessary differences between browsers for people to trip up on. For example:

var {style} = document.createElement("div");
style.listStyle = "url()";
style.listStyleType = "disc";
style.listStyle; // Should be "url()"?
style.listStyleType = "none";
style.listStyle; // Should be ""?

[Loirooriol]

Assuming omitted longhands are reset to their initial values as usual,

var {style} = document.createElement("div");
style.listStyle = "url()";
style.listStyleType = "disc";
style.listStyle; // 'url("")'
style.listStyleType = "none";
style.listStyle; // 'url("") none'