[css-logical][css-cascade] `revert`/`revert-layer` with logical properties

[Loirooriol]

When setting a logical property to a css-wide keyword,

• initial: currently, all the properties in every logical property group have the same initial values, so this just behaves as setting that value. It doesn't matter if it's first resolved into a physical property or not.
• inherit: resolved in [css-logical-1] Order of inheritance vs. mapping in logical properties #3029 that logical properties inherit from the same logical property in the parent, even if they map to different physical properties. Note that Blink, Firefox and WebKit don't do that: they resolve into physical, and then inherit the physical.
• unset: currently, all logical properties are non-inherited, so it just behaves as initial.

OK, but what about revert? Imagine:

• UA origin:

  foo {
    margin-inline-start: 100px;
    margin-left: 200px;
  }

• Author origin:

  foo {
    margin-left: 300px;
    margin-inline-start: revert;
  }

https://www.w3.org/TR/css-cascade-5/#default says:

Rolls back the cascaded value to the user level, [...]

So do we use margin-inline-start: 100px?

[...] so that the specified value is calculated as if no author-origin rules were specified for this property on this element.

So do we drop margin-inline-start and use margin-left: 300px from author origin?

Actually, browsers use margin-inline-start: 200px.

Blink has dialog {left: 0; right: 0} in UA origin. Then, in horizontal ltr, left: auto; inset-inline-start: revert behaves like inset-inline-start: 0, using the UA value for left.

Analogously, Firefox and WebKit have dialog {inset-inline-start: 0; inset-inline-end: 0} in UA origin. Then, in horizontal ltr, inset-inline-start: auto; left: revert behaves like left: 0, using the UA value for inset-inline-end.

Similar for revert-layer, which actually allows more comprehensive tests: https://software.hixie.ch/utilities/js/live-dom-viewer/saved/10046. It seems that what browser do is:

1. Find the final writing mode.
2. Use it to resolve logical all property declarations into physical ones, in all origins/layers.
3. Revert as usual.

Not unreasonable, but probably not much consistent with inherit using the same property instead of resolving into a physical property first (no browser has implemented that yet).

[Loirooriol]

Need to be careful with all: revert. I don't understand the spec (#7057), but from the example I guess that physical properties are set last, like ...; inset-inline-start: revert; ...; left: revert; .... But then, if the UA sets inset-inline-start but not left, it seems wrong if the inset is reset to the initial value instead of the UA one just because the expansion happened in that order.

[fantasai]

I think the behavior you describe that browsers have for this case makes sense, and we should just spec it. The goal of revert is to remove what the author did in the author origin as if nothing was declared, and reverting to the previous origin's values for the reverted side, whether they came from physical or logical properties in that origin, makes sense.

[Loirooriol]

Yes, and BTW Blink has the concept of surrogate properties, which are basically pairs of properties where one should actually be a legacy shorthand of the other (e.g. it has a -webkit- prefix with slightly different syntax or something), but instead of a shorthand it's implemented as an independent longhand that shares a computed value. They kinda behave like logical/physical properties in the sense that order matters, and the last one wins. For these, revert and revert-layer don't care which one was specified in the previous origin/layer. This seems reasonable to me:

@layer { #target { -webkit-text-orientation: sideways } }
@layer { #target { text-orientation: revert-layer } }

getComputedStyle(target).textOrientation; // "sideways"

WebKit has a similar concept of properties like that. Currently revert and revert-layer only roll back to the same exact property, but I plan to change this in https://bugs.webkit.org/show_bug.cgi?id=238125

[css-meeting-bot]

The CSS Working Group just discussed [css-logical][css-cascade] revert/revert-layer with logical properties, and agreed to the following:

• RESOLVED: specify what browsers currently do

The full IRC log of that discussion

<dael> Topic: [css-logical][css-cascade] revert/revert-layer with logical properties
<dael> github: https://github.com//issues/7054
<dael> fantasai: Prop: Spec what's implemented
<dael> astearns: Is that the whole things?
<dael> oriol: The thing is what happens if you have mix of logicial and physical and set one to revert-layer do you roll back to same ignoring pairing property?
<dael> oriol: I looked at impl and all agree that first they run the escape and when have final writing mode turn them phsyical ones. Logical and physical properties convert into same mapping. Once resolved you revert into resolved property
<dael> oriol: If you have margin-left and revert-layer and previously you set margin-start you revert to that.
<dael> oriol: Prop is revert after resolving the properties
<dael> fantasai: Makes sense to user. revert is rolling back value on this property to what would have been if UA stylesheet didn't exist and this has that effect
<dael> astearns: Thanks oriol
<dael> astearns: Obj to specify what browsers currently do
<fantasai> s/UA/author/
<dael> RESOLVED: specify what browsers currently do

[fantasai]

@Loirooriol Edited in, please review and let us know if the edits are satisfactory! (And feel free to close out if they are.)