[csswg-drafts] [css-logical][css-cascade] `revert`/`revert-layer` with logical properties (#7054)

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-logical][css-cascade] `revert`/`revert-layer` with logical properties ==
When setting a logical property to a [css-wide keyword](https://www.w3.org/TR/css-values-4/#common-keywords),

- [`initial`](https://www.w3.org/TR/css-cascade-5/#valdef-all-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`](https://www.w3.org/TR/css-cascade-5/#valdef-all-inherit): resolved in #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`](https://www.w3.org/TR/css-cascade-5/#valdef-all-unset): currently, all logical properties are non-inherited, so it just behaves as `initial`.

OK, but what about `revert`? Imagine:

- UA origin:
    ```css
    foo {
      margin-inline-start: 100px;
      margin-left: 200px;
    }
    ```

- Author origin:
    ```css
    foo {
      margin-left: 300px;
      margin-inline-start: revert;
    }
    ```
https://www.w3.org/TR/css-cascade-5/#default says:

> Rolls back the [cascaded value](https://www.w3.org/TR/css-cascade-5/#cascaded-value) to the user level, [...]

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

> [...] so that the [specified value](https://www.w3.org/TR/css-cascade-5/#specified-value) is calculated as if no [author-origin](https://www.w3.org/TR/css-cascade-5/#cascade-origin-author) 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).

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7054 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 15 February 2022 16:27:46 UTC