[cssom] Serialization of logical property sub-group

[cdoublev]

In serialize a CSS declaration block:

6. If there’s any declaration in declaration block in between the first and the last longhand in current longhands which belongs to the same logical property group, but has a different mapping logic as any of the longhands in current longhands, and is not in current longhands, continue with the steps labeled shorthand loop.

In a nutshell: skip the shorthand if some logically related property it does not map to has a declaration that is in between the declarations it maps to.

But this step prevents serializing border-color: green; border-block-start-width: 1px; border-top-color: green; to border-color: green; border-top-width: 1px; because:

• the declaration for border-block-start-width is in between the declarations for border-color and all declarations are in the same logical property group, that I would call border
• border-block-start-width has a different mapping logic than the declarations for border-color

But border-block-start-width is not in the logical property group that I would call border-color.

Maybe containing all property names of the declarations in current longhands could be appended after the same logical property group in the above step?

Aside 1: I think that logical property group is a confusing name because it implies that all properties of a group are logical; logically mapped property group seems more accurate (but more verbose, though).

Aside 2: it would be usefull to have an HTML attribute in the property definition table, that w3c/reffy could read to associate the property to the corresponding logical(ly mapped) property group(s).

[cdoublev]

I think that the declaration for border-top-color would have been updated in place in the example I used in my initial comment, therefore border-top-color: green; border-right-color: green; border-bottom-color: green; border-block-start-width: 1px; border-left-color: green; would be a better one.

[Loirooriol]

the declaration for border-block-start-width is in between the declarations for border-color and all declarations are in the same logical property group, that I would call border

Nope, border widths and border colors are in different property groups. I also found it confusing (see #3033).

I'm awaiting #2822 to make the specs clear. Which is basically your aside 2.

[Loirooriol]

I think that the declaration for border-top-color would have been updated in place

It will be updated in place if you do

var el = document.createElement("div");
el.style.borderColor = "green";
el.style.borderBlockStartWidth = "1px";
el.style.borderTopColor = "green";
[...el.style]; // [ "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "border-block-start-width" ]

But it won't if you use

var el = document.createElement("div");
el.style.cssText = "border-color: green; border-block-start-width: 1px; border-top-color: green";
[...el.style]; // [ "border-right-color", "border-bottom-color", "border-left-color", "border-block-start-width", "border-top-color" ]

[cdoublev]

Damn, I did not do my homework, sorry... I also forgot about the specified order requirement when using style.cssText.

This shorthand serialization step looks simple but is a bit tricky to implement (and test) for border!