[css-logical] Implement CSS Logical Properties and Values

• Component: CSS
• Status: NEW ---

[Manuel Rego Casasnovas]

Spec: https://drafts.csswg.org/css-logical-1/

Firefox has shipped a bunch of them long time ago, and Blink has shipped a few already.
It'd be nice if WebKit could catch up too.
Note that some of these properties are already supported under prefixed names.
Current support:
https://developer.mozilla.org/es/docs/Web/CSS/CSS_Logical_Properties#Browser_compatibility

The Chromium bug has an interesting analysis of the work required for this:
https://bugs.chromium.org/p/chromium/issues/detail?id=538475

[Jon Lee]

rdar://problem/25324117

[Simon Fraser (smfr)]

Orial, did you work in bug 216178 cover all the logical properties?

[Simon Fraser (smfr)]

We also need to makes sure that Web Inspector knows about all these new properties.

[Oriol Brufau]

I didn't implement the logical corner radius: https://drafts.csswg.org/css-logical/#border-radius-properties

Also note some logical properties are defined outside of css-logical, like `overflow-block` and `overflow-inline` (https://drafts.csswg.org/css-overflow/#logical). I didn't implement these either.

Some other work that needs to be done:

 - Support animating logical properties (via CSS Animations, CSS Transitions or Web Animations). Bug 188512.
 - Add logical values for 'float', 'clear' and 'resize'.
 - Replace uses of prefixed properties with standard ones.
 - Resolve logical border colors in :visited using the :link's writing mode instead of :visited's one (see Chromium's fast/css/logical-box-border-color-visited-link-003.html)
 - Fix CSSOM problems like:
    document.documentElement.style.marginLeft = "1px";
    getComputedStyle(document.documentElement).marginLeft; // "1px", good
    document.documentElement.style.marginInlineStart = "2px";
    getComputedStyle(document.documentElement).marginLeft; // "2px", good
    document.documentElement.style.marginLeft = "3px";
    getComputedStyle(document.documentElement).marginLeft; // "2px", bad, should be "3px"

[Oriol Brufau]

(In reply to Oriol Brufau from comment #4)
>  - Resolve logical border colors in :visited using the :link's writing mode instead of :visited's one (see Chromium's fast/css/logical-box-border-color-visited-link-003.html)

Well that's what Chromium and Firefox do, but the CSSWG hasn't resolved what should happen: https://github.com/w3c/csswg-drafts/issues/2844