New issue
Advanced search Search tips

Issue 850004 link

Starred by 5 users
Status: Fixed
Owner:
obru...@igalia.com
Closed: Aug 10
Cc:
r...@igalia.com
obru...@igalia.com
style-bugs@google.com
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug

Blocked on:
issue 850000
issue 873760
issue 901409
Blocking:
issue 538475



Sign in to add a comment

[css-logical] Flow relative values and box model properties

Project Member Reported by r...@igalia.com, Jun 6 2018 

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

Complete support for the following sections of CSS Logical Properties and Values spec:
* 2. Flow-Relative Values: block-start, block-end, inline-start, inline-end
* 4. Flow-Relative Box Model Properties (except 4.6 Four-Directional Shorthand Properties: the margin, padding, border-width, border-style, and border-color shorthands).

Summarizing:
* Implement inline-start and inline-end values for float and clear.
* Implement block and inline values for resize.
* Implement flow-relative offsets longhands and shorthands.
* Implement shorthands margin-block, margin-inline, inset-block, inset-inline, inset, Implement padding-block, padding-inline, border-block-width, border-inline-width, border-block-style, border-inline-style, border-block-color, border-inline-color, border-block and border-inline.

All these are new stuff, so it'd be developed behind a flag.

Comment 1 by r...@igalia.com, Jun 8 2018

Owner: obru...@igalia.com
Status: Assigned (was: Available)
Project Member

Comment 2 by bugdroid1@chromium.org, Jul 4 

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

commit c2ffe93299c49e5d6c6db6d1df34fa1f6c713913
Author: Oriol Brufau <obrufau@igalia.com>
Date: Wed Jul 04 15:29:24 2018

[css-logical] Implement flow-relative margin, padding and border shorthand properties

They are implemented behind the CSSLogical runtime flag.

Intent to Implement:
https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/48OwfwZrbvI/A1XZFGkzAwAJ

Spec: https://drafts.csswg.org/css-logical/#box

BUG= 850004 

TEST=external/wpt/css/css-logical/logical-box-border-shorthands.html
TEST=external/wpt/css/css-logical/logical-box-border-color.html
TEST=external/wpt/css/css-logical/logical-box-border-style.html
TEST=external/wpt/css/css-logical/logical-box-border-width.html
TEST=external/wpt/css/css-logical/logical-box-margin.html
TEST=external/wpt/css/css-logical/logical-box-padding.html

The tests still have some failures because sideways writing modes have
not been implemented yet (http://crbug.com/680331).

Change-Id: Ibe3d7f39e1ce17de465aa635388b3f8510ed82a3
Reviewed-on: https://chromium-review.googlesource.com/1122872
Reviewed-by: Daniel Cheng <dcheng@chromium.org>
Reviewed-by: Manuel Rego Casasnovas <rego@igalia.com>
Reviewed-by: Anders Ruud <andruud@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#572576}
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-border-color-expected.txt
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-border-color.html
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-border-shorthands-expected.txt
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-border-style-expected.txt
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-border-style.html
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-border-width-expected.txt
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-border-width.html
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-inset-expected.txt
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-inset.html
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-margin-expected.txt
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-margin.html
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-padding-expected.txt
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-padding.html
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/resources/test-box-properties.js
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/WebKit/LayoutTests/webexposed/css-properties-as-js-properties-expected.txt
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/WebKit/LayoutTests/webexposed/css-property-listing-expected.txt
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/public/mojom/use_counter/css_property_id.mojom
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/BUILD.gn
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/CSSProperties.json5
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/parser/css_property_parser_helpers.cc
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/parser/css_property_parser_helpers.h
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/parser/css_proto_converter.cc
[add] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/properties/shorthands/border_block_color_custom.cc
[add] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/properties/shorthands/border_block_custom.cc
[add] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/properties/shorthands/border_block_style_custom.cc
[add] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/properties/shorthands/border_block_width_custom.cc
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/properties/shorthands/border_custom.cc
[add] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/properties/shorthands/border_inline_color_custom.cc
[add] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/properties/shorthands/border_inline_custom.cc
[add] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/properties/shorthands/border_inline_style_custom.cc
[add] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/properties/shorthands/border_inline_width_custom.cc
[add] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/properties/shorthands/margin_block_custom.cc
[add] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/properties/shorthands/margin_inline_custom.cc
[add] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/properties/shorthands/padding_block_custom.cc
[add] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/css/properties/shorthands/padding_inline_custom.cc
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/core/frame/use_counter.cc
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/third_party/blink/renderer/platform/runtime_enabled_features.json5
[modify] https://crrev.com/c2ffe93299c49e5d6c6db6d1df34fa1f6c713913/tools/metrics/histograms/enums.xml
Project Member

Comment 3 by bugdroid1@chromium.org, Jul 18 

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

commit 1655037ead023cea3b18757ce10b2a98135a34ed
Author: Oriol Brufau <obrufau@igalia.com>
Date: Wed Jul 18 13:46:46 2018

[css-logical] Implement flow-relative offset properties

They are implemented behind the CSSLogical runtime flag.

Intent to Implement:
https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/48OwfwZrbvI/A1XZFGkzAwAJ

Spec: https://drafts.csswg.org/css-logical/#inset-properties

BUG= 850004 

TEST=external/wpt/css/css-logical/logical-box-inset.html

The test still has some failures because sideways writing modes have
not been implemented yet (http://crbug.com/680331).

Change-Id: I296bf83bb7200f1215b7f088284d34c6c69259c9
Reviewed-on: https://chromium-review.googlesource.com/1138620
Reviewed-by: Anders Ruud <andruud@chromium.org>
Reviewed-by: Daniel Cheng <dcheng@chromium.org>
Reviewed-by: Manuel Rego <rego@igalia.com>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#576024}
[modify] https://crrev.com/1655037ead023cea3b18757ce10b2a98135a34ed/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-inset-expected.txt
[modify] https://crrev.com/1655037ead023cea3b18757ce10b2a98135a34ed/third_party/WebKit/LayoutTests/webexposed/css-properties-as-js-properties-expected.txt
[modify] https://crrev.com/1655037ead023cea3b18757ce10b2a98135a34ed/third_party/WebKit/LayoutTests/webexposed/css-property-listing-expected.txt
[modify] https://crrev.com/1655037ead023cea3b18757ce10b2a98135a34ed/third_party/blink/public/mojom/use_counter/css_property_id.mojom
[modify] https://crrev.com/1655037ead023cea3b18757ce10b2a98135a34ed/third_party/blink/renderer/core/css/BUILD.gn
[modify] https://crrev.com/1655037ead023cea3b18757ce10b2a98135a34ed/third_party/blink/renderer/core/css/CSSProperties.json5
[modify] https://crrev.com/1655037ead023cea3b18757ce10b2a98135a34ed/third_party/blink/renderer/core/css/parser/css_proto_converter.cc
[add] https://crrev.com/1655037ead023cea3b18757ce10b2a98135a34ed/third_party/blink/renderer/core/css/properties/longhands/inset_block_end_custom.cc
[add] https://crrev.com/1655037ead023cea3b18757ce10b2a98135a34ed/third_party/blink/renderer/core/css/properties/longhands/inset_block_start_custom.cc
[add] https://crrev.com/1655037ead023cea3b18757ce10b2a98135a34ed/third_party/blink/renderer/core/css/properties/longhands/inset_inline_end_custom.cc
[add] https://crrev.com/1655037ead023cea3b18757ce10b2a98135a34ed/third_party/blink/renderer/core/css/properties/longhands/inset_inline_start_custom.cc
[add] https://crrev.com/1655037ead023cea3b18757ce10b2a98135a34ed/third_party/blink/renderer/core/css/properties/shorthands/inset_block_custom.cc
[add] https://crrev.com/1655037ead023cea3b18757ce10b2a98135a34ed/third_party/blink/renderer/core/css/properties/shorthands/inset_custom.cc
[add] https://crrev.com/1655037ead023cea3b18757ce10b2a98135a34ed/third_party/blink/renderer/core/css/properties/shorthands/inset_inline_custom.cc
[modify] https://crrev.com/1655037ead023cea3b18757ce10b2a98135a34ed/third_party/blink/renderer/core/frame/use_counter.cc
[modify] https://crrev.com/1655037ead023cea3b18757ce10b2a98135a34ed/tools/metrics/histograms/enums.xml
Project Member

Comment 4 by bugdroid1@chromium.org, Aug 9 

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

commit 502e56bfc1675124aee807d9d1fe4977d972f7d8
Author: Oriol Brufau <obrufau@igalia.com>
Date: Thu Aug 09 21:37:11 2018

[css-logical] Implement flow-relative values for 'float', 'clear' and 'resize' properties

They are implemented behind the CSSLogical runtime flag.

Intent to Implement:
https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/48OwfwZrbvI/A1XZFGkzAwAJ

Spec: https://drafts.csswg.org/css-logical/#directional-keywords

BUG= 850004 

TEST=external/wpt/css/css-logical/logical-values-float-clear.html
TEST=external/wpt/css/css-logical/logical-values-resize.html

The tests still have some failures because sideways writing modes have
not been implemented yet (http://crbug.com/680331).

Change-Id: Ieede2703368a44f3ce9996e917857226795ebaea
Reviewed-on: https://chromium-review.googlesource.com/1163667
Reviewed-by: Anders Ruud <andruud@chromium.org>
Reviewed-by: Yoav Weiss <yoav@yoav.ws>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#581904}
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-border-color.html
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-border-shorthands.html
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-border-style.html
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-border-width.html
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-inset.html
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-margin.html
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-padding.html
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-size.html
[add] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-values-float-clear.html
[add] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-values-resize-expected.txt
[add] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-values-resize.html
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/resources/test-box-properties.js
[add] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/resources/test-logical-values.js
[add] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/WebKit/LayoutTests/external/wpt/css/css-logical/resources/test-shared.js
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/WebKit/LayoutTests/virtual/stable/webexposed/nonstable-css-properties-expected.txt
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/WebKit/LayoutTests/webexposed/nonstable-css-properties-expected.txt
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/WebKit/LayoutTests/webexposed/nonstable-css-properties.html
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/blink/renderer/core/css/CSSProperties.json5
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/blink/renderer/core/css/CSSValueKeywords.json5
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/blink/renderer/core/css/parser/css_parser_fast_paths.cc
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/blink/renderer/core/css/properties/longhands/clear_custom.cc
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/blink/renderer/core/css/properties/longhands/float_custom.cc
[modify] https://crrev.com/502e56bfc1675124aee807d9d1fe4977d972f7d8/third_party/blink/renderer/core/css/properties/longhands/resize_custom.cc

Comment 5 by obru...@igalia.com, Aug 10

Status: Fixed (was: Assigned)

Comment 6 by obru...@igalia.com, Aug 13

Blockedon: 873760

Comment 7 by obru...@igalia.com, Nov 2

Blockedon: 901409
►

Sign in to add a comment