Bug 185977 - [css-logical] Implement CSS Logical Properties and Values
Summary: [css-logical] Implement CSS Logical Properties and Values
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on: 188512 218089 218090 218091 218094 188386 188697 189441 216178 218087 218088 218092 218093
  Show dependency treegraph
Reported: 2018-05-25 01:04 PDT by Manuel Rego Casasnovas
Modified: 2020-10-22 10:50 PDT (History)
9 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Manuel Rego Casasnovas 2018-05-25 01:04:38 PDT
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:

The Chromium bug has an interesting analysis of the work required for this:
Comment 1 Jon Lee 2018-08-15 10:05:27 PDT
Comment 2 Simon Fraser (smfr) 2020-10-22 09:31:51 PDT
Orial, did you work in bug 216178 cover all the logical properties?
Comment 3 Simon Fraser (smfr) 2020-10-22 09:46:50 PDT
We also need to makes sure that Web Inspector knows about all these new properties.
Comment 4 Oriol Brufau 2020-10-22 09:55:57 PDT
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"
Comment 5 Oriol Brufau 2020-10-22 10:02:10 PDT
(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