Bug 185977
| Summary: | [css-logical] Implement CSS Logical Properties and Values | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Manuel Rego Casasnovas <rego> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | 709922234, dev, jonlee, koivisto, obrufau, sam, simon.fraser, webkit-bug-importer, zalan, zcorpan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| See Also: | https://bugs.chromium.org/p/chromium/issues/detail?id=538475 | ||
| Bug Depends on: | 218089, 218094, 188386, 188512, 188697, 189441, 216178, 218087, 218088, 218090, 218091, 218092, 218093 | ||
| Bug Blocks: | |||
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
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
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