[css-logical-1] Interaction of shorthands and logical properties

[fantasai]

Relevant www-style threads:
https://lists.w3.org/Archives/Public/www-style/2014Dec/0319.html
https://lists.w3.org/Archives/Public/www-style/2014Dec/0369.html

[FremyCompany]

Proposal:

During parsing of a css declaration block, shorthands (like margin and all) expands only to the set of longhand (grouped by mapping logic: so either logical or physical) required to describe their value, and by default resort to use physical properties if both sets are possible. Note that they can only expand if they do not contain var() substitutions.

During serialization, each logical property group is considered, and shorthand values can be emitted instead of the longhands only if the all the longhands of the same mapping logic are present and consecutive (ignoring all properties that are not in the group). Otherwise, the shorthand is not used when serializing the properties in the group.

During serialization, a specific rule should be added in case all longhand properties of one mapping logic are defined, and are followed by all longhand properties of the other mapping logic (this would result in the shorthand being emitted twice, in which case the rule would discard its first appearance)

ex:

margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px;
margin-inline-start: 10px; margin-block-start: 10px; margin-inline-end: 10px; margin-inline-end: 10px

should serialize as margin: logical 10px (if supported) or just margin-inline-start: 10px; margin-block-start: 10px; margin-inline-end: 10px; margin-inline-end: 10px (otherwise), ignoring the set of longhand properties of physical mapping logic whose all values are to be ignored in the end.

When removing a shorthand property, all the longhand associated with that shorthand should be removed, regardless of their mapping kind.

[FremyCompany]

(all not setting the logical properties only works however if margin-inline-start: inherit has the exact same behavior as margin-left: inherit and does not inherit from margin-inline-start from the parent if that parent has a different writing mode)

[FremyCompany]

proposed text for the statement above would be something like:

logical properties cannot inherit.
when a logical property should inherit, the physical property it maps to must inherit instead

[dbaron]

I'm reasonably happy with @FremyCompany's proposal above. One thought about another option is that we could say that appending a shorthand property could set all of its constituent shorthands of one mapping logic and also remove all of the constituent shorthands of the other. We could even go further and do that same removal during serialization.

I'd also note that we need to consider shorthands (e.g., border) where some of the longhands form logical property groups but some do not (the longhands of border-image). (border is also special because its longhands include three logical property groups, for border-color, border-style, and border-width.)