New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 26 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Feature

Blocked on:
issue 873101
issue 812918
issue 850000
issue 850004



Sign in to add a comment

[css-logical] Implement CSS Logical Properties and Values Level 1, https://drafts.csswg.org/css-logical-1/

Project Member Reported by timloh@chromium.org, Oct 2 2015

Issue description

We should implement CSS Logical Properties Level 1, from https://drafts.csswg.org/css-logical-props/. We already support some of these with different names, prefixed. This is shipping in FF41, but not other browsers.

The prefixed logical properties we have currently depend on the prefixed -webkit-writing-mode. Unprefixing of writing-mode is in progress (https://groups.google.com/a/chromium.org/d/msg/blink-dev/TJjdFSfSDCE/697sP-KTAgAJ). We also support the prefixed -webkit-text-orientation but not the unprefixed text-orientation, which several logical properties are supposed to depend on.

A lot of this is just making properties which do the same as the prefixed properties, but there are some missing properties and values, as well as dependencies that need to be changed:

1 Logical Directional Values: block-start, block-end, inline-start, inline-end
1.1 - caption-side needs to accept values (block,inline)-(start,end)
1.2 - float and clear need to accept inline-(start,end)
1.3 - already implemented
1.4 - resize needs to support block and inline

2 Logical Page Classifications
- page-break-(after,before) need to support recto and verso
- @page needs to support :recto, :verso

3 Logical Box Model Properties
3.1 - (min-,max-,)(block,inline)-size are implemented as -webkit-(min-,max-,)logical-(width,height)
3.2
- margin-(block,inline)-(start,end) are implemented as -webkit-margin-(before,after,start,end). These currently depend on the current element’s writing-mode and direction, but should depend on the parent elements writing-mode, direction and text-orientation.
- offset-(block,inline)-(start,end) don't have a prefixed version
3.3
- padding-(block,inline)-(start,end) are implemented as -webkit-padding-(before,after,start,end)
- border-(block,inline)-(start,end)(-width,-style,-color,) are implemented as -webkit-border-(before,after,start,end)(-width,-style,-color,)
- These need to also depend on the current element’s text-orientation
3.4 - The properties margin, padding, border-color, border-style, border-width need to accept the logical keyword

4 Logical Background and Border Images
4.1 - We need to implement background-image-transform
4.2 - background-repeat needs to accept the logical keyword
4.3 - We need to implement border-image-transform

A lot of Chrome UI currently depends on the prefixed properties, we should update those to use the standard properties once they are available.
 
Project Member

Comment 1 by sheriffbot@chromium.org, Oct 1 2016

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
This issue has been available for more than 365 days, and should be re-evaluated. Please re-triage this issue.
The Hotlist-Recharge-Cold label is applied for tracking purposes, and should not be removed after re-triaging the issue.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Cc: meade@chromium.org
Status: Available (was: Untriaged)
Eddy - is this on the Style backlog?

Comment 3 by meade@chromium.org, Oct 6 2016

It is! On the agenda for this week already :)

Comment 4 by r...@igalia.com, Oct 10 2016

Cc: r...@igalia.com

Comment 5 by xing...@intel.com, Dec 16 2016

Cc: xing...@intel.com
Project Member

Comment 6 by bugdroid1@chromium.org, Jan 6 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/27fa89644b9c8ea68e0445ff6f170acdc3eb0933

commit 27fa89644b9c8ea68e0445ff6f170acdc3eb0933
Author: xing.xu <xing.xu@intel.com>
Date: Fri Jan 06 18:20:21 2017

Implement CSS Logical Properties: inline/block size

These properties provide the author with the ability to control layout through logical,
rather than physical, direction and dimension mappings.

Intent to Implement and Ship: CSS Logical Properties, Inline/Block size,
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/4qEXWptfVHs. This intent
is a followup for "Intent to Deprecate and Remove: -webkit-{min-,max-}logical-{width,height}",
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/VbPI65jBMIc.

When entire css-logical-props are implemented, will review these
-webkit-{min-,max-}logical-{width,height} and see if it is necessary to remove them.

Spec:
https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties
https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical

BUG=538475

Review-Url: https://codereview.chromium.org/2577363002
Cr-Commit-Position: refs/heads/master@{#441979}

[add] https://crrev.com/27fa89644b9c8ea68e0445ff6f170acdc3eb0933/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-block-size-vlr.html
[add] https://crrev.com/27fa89644b9c8ea68e0445ff6f170acdc3eb0933/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-block-size.html
[add] https://crrev.com/27fa89644b9c8ea68e0445ff6f170acdc3eb0933/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-inline-size-vlr.html
[add] https://crrev.com/27fa89644b9c8ea68e0445ff6f170acdc3eb0933/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-inline-size.html
[add] https://crrev.com/27fa89644b9c8ea68e0445ff6f170acdc3eb0933/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-quirklength.html
[add] https://crrev.com/27fa89644b9c8ea68e0445ff6f170acdc3eb0933/third_party/WebKit/LayoutTests/css3/logical-props/resources/style-check.js
[modify] https://crrev.com/27fa89644b9c8ea68e0445ff6f170acdc3eb0933/third_party/WebKit/LayoutTests/virtual/stable/webexposed/css-properties-as-js-properties-expected.txt
[modify] https://crrev.com/27fa89644b9c8ea68e0445ff6f170acdc3eb0933/third_party/WebKit/LayoutTests/webexposed/css-properties-as-js-properties-expected.txt
[modify] https://crrev.com/27fa89644b9c8ea68e0445ff6f170acdc3eb0933/third_party/WebKit/Source/core/css/CSSProperties.in
[modify] https://crrev.com/27fa89644b9c8ea68e0445ff6f170acdc3eb0933/third_party/WebKit/Source/core/css/CSSProperty.cpp
[modify] https://crrev.com/27fa89644b9c8ea68e0445ff6f170acdc3eb0933/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
[modify] https://crrev.com/27fa89644b9c8ea68e0445ff6f170acdc3eb0933/third_party/WebKit/Source/core/css/parser/CSSParserFastPaths.cpp
[modify] https://crrev.com/27fa89644b9c8ea68e0445ff6f170acdc3eb0933/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp
[modify] https://crrev.com/27fa89644b9c8ea68e0445ff6f170acdc3eb0933/third_party/WebKit/Source/core/frame/UseCounter.cpp
[modify] https://crrev.com/27fa89644b9c8ea68e0445ff6f170acdc3eb0933/tools/metrics/histograms/histograms.xml

Comment 7 by xing...@intel.com, Jan 10 2017

As to "3.2 - margin-(block,inline)-(start,end)", the bug description mentioned "but should depend on the parent elements writing-mode, direction and text-orientation."
I didn't find any parent dependence info from here https://drafts.csswg.org/css-logical-props-1/#logical-prop.  Do you know where is it from? 

Comment 9 by meade@chromium.org, Jan 25 2017

Owner: timloh@chromium.org
Status: Assigned (was: Available)
Hey Tim, could you please answer Xing's question? Thanks!

This was changed in 2016. Discussion at https://lists.w3.org/Archives/Public/www-style/2016May/0105.html, resolution at https://logs.csswg.org/irc.w3.org/css/2016-05-11/#e685444. It doesn't look like there have been any other changes since I originally opened this issue.
Cc: -xing...@intel.com
Owner: xing...@intel.com
Unassigning myself, I think xing.xu@intel.com is working on this?
Labels: Update-Quarterly
Labels: -Update-Quarterly
Blockedon: 812918
Blockedon: 850000
Cc: obru...@igalia.com
Summary: [css-logical] Implement CSS Logical Properties and Values Level 1, https://drafts.csswg.org/css-logical-1/ (was: Implement CSS Logical Properties Level 1, https://drafts.csswg.org/css-logical-props/)
Blockedon: 850004
Blockedon: 873101

Sign in to add a comment