Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-grid][css-multicol][css-flexbox][css-tables] Proposal for Various Gap Issues #1696

Closed
fantasai opened this issue Aug 4, 2017 · 12 comments
Closed

Comments

@fantasai
Copy link
Collaborator

@fantasai fantasai commented Aug 4, 2017

We've had some feedback on gaps, the one prompting this discussion being that authors are finding it awkward that the grid shorthand resets the gaps, preferring that it does not and that it is treated similar to spacing controls such as grid container padding and grid item margins. (#1036)

Unwinding the threads of discussions and resolutions, and discussing with several people at the F2F here, we have the following proposal:

  • Disconnect the grid-gap properties from the grid shorthand, resolving #1036
  • Undo the resolution changing column-gap and row-gap to grid-column-gap and grid-row-gap.
    • As before that resolution, column-gap is shared with multi-col and normal computes to zero except on multi-column elements.
  • Apply column-gap and row-gap to flex containers, resolving a strong demand from flexbox users to have this spacing control. (See Rachel's message to www-style and #592 with special note of erikjung's comment)
  • As a clean-up measure, have these properties obsolete border-spacing (which inherits, which is weird) by having them defer to border-spacing when specified as normal and override it otherwise.
@fantasai
Copy link
Collaborator Author

@fantasai fantasai commented Aug 4, 2017

Note: We would need to (at least temporarily, possibly permanently) maintain aliases from grid-*-gap to the unprefixed properties like we do for page-break-*, since grid layouts are deployed already.

@bdc-stripe
Copy link

@bdc-stripe bdc-stripe commented Aug 4, 2017

I'm very sympathetic to that idea. Nitpick: does that mean we'd only have a shorthand gap property for grid (assuming we keep the aliases) ?

@rachelandrew
Copy link
Contributor

@rachelandrew rachelandrew commented Aug 4, 2017

I'd be happy with that as long as we have the aliasing and I think authors would be very keen with getting these for flex.

@atanassov
Copy link
Collaborator

@atanassov atanassov commented Aug 4, 2017

@bdc-stripe, no, the gap shorthand should work for any layout that accepts gaps

@bdc-stripe
Copy link

@bdc-stripe bdc-stripe commented Aug 4, 2017

@atanassov Ok cool (didn't see a proposal for gap).

@SelenIT
Copy link
Collaborator

@SelenIT SelenIT commented Aug 4, 2017

@fantasai, does #1036 (comment) mean that the last bullet point regarding tables has just been rejected?

@tabatkins
Copy link
Member

@tabatkins tabatkins commented Aug 4, 2017

Yes, at least for now (and probably permanently), we're not going to apply row-gap and column-gap to tables.

@fantasai
Copy link
Collaborator Author

@fantasai fantasai commented Aug 9, 2017

WG resolution: https://logs.csswg.org/irc.w3.org/css/2017-08-04/#e847329
Proposal has been accepted, minus the tables part because nobody wants to deal with tables.

@fantasai
Copy link
Collaborator Author

@fantasai fantasai commented Aug 11, 2017

Edits checked in, closing issue. :) Expect to republish to /TR at the end of the month.

@yisibl
Copy link

@yisibl yisibl commented Nov 17, 2017

Please start the Flexbox 2 spec as soon as possible.

chromium-wpt-export-bot added a commit to web-platform-tests/wpt that referenced this issue Jan 29, 2018
This patch applies the resoultion of the CSS WG to unprefix
the CSS Grid Layout gutter properties:
w3c/csswg-drafts#1696

That is:
* grid-column-gap => column-gap
* grid-row-gap => row-gap
* grid-gap => gap

column-gap already existed before, as it's part of Multicol,
and it already has an alias -webkit-column-gap.
For that reason it's not possible to implement another alias
for grid-column-gap, so it was done with a shorthand.
To follow the same pattern the shorthand approach was used for
grid-row-gap and grid-gap too.

As column-gap was already animatable, this change takes advantage
to make animatable row-gap too.

Intent to Implement and Ship thread:
https://groups.google.com/a/chromium.org/d/msg/blink-dev/UViBfJuuIq8/w7_2W7lLAgAJ

Converted grid-gutters-get-set.html in some WPT tests covering
a few extra cases.
Added WPT test to verify the animation of these properties too.

BUG=761904
TEST=external/wpt/css/css-align/gaps/

Change-Id: If49ec34116eff0b3b745fc89b01b15b14c71d4a9
chromium-wpt-export-bot added a commit to web-platform-tests/wpt that referenced this issue Feb 5, 2018
This patch applies the resoultion of the CSS WG to unprefix
the CSS Grid Layout gutter properties:
w3c/csswg-drafts#1696

That is:
* grid-column-gap => column-gap
* grid-row-gap => row-gap
* grid-gap => gap

column-gap already existed before, as it's part of Multicol,
and it already has an alias -webkit-column-gap.
For that reason it's not possible to implement another alias
for grid-column-gap, so it was done with a shorthand.
To follow the same pattern the shorthand approach was used for
grid-row-gap and grid-gap too.

As column-gap was already animatable, this change takes advantage
to make animatable row-gap too.

Intent to Implement and Ship thread:
https://groups.google.com/a/chromium.org/d/msg/blink-dev/UViBfJuuIq8/w7_2W7lLAgAJ

Converted grid-gutters-get-set.html in some WPT tests covering
a few extra cases.
Added WPT test to verify the animation of these properties too.

BUG=761904
TEST=external/wpt/css/css-align/gaps/

Change-Id: If49ec34116eff0b3b745fc89b01b15b14c71d4a9
Reviewed-on: https://chromium-review.googlesource.com/890446
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#534351}
chromium-wpt-export-bot added a commit to web-platform-tests/wpt that referenced this issue Feb 5, 2018
This patch applies the resoultion of the CSS WG to unprefix
the CSS Grid Layout gutter properties:
w3c/csswg-drafts#1696

That is:
* grid-column-gap => column-gap
* grid-row-gap => row-gap
* grid-gap => gap

column-gap already existed before, as it's part of Multicol,
and it already has an alias -webkit-column-gap.
For that reason it's not possible to implement another alias
for grid-column-gap, so it was done with a shorthand.
To follow the same pattern the shorthand approach was used for
grid-row-gap and grid-gap too.

As column-gap was already animatable, this change takes advantage
to make animatable row-gap too.

Intent to Implement and Ship thread:
https://groups.google.com/a/chromium.org/d/msg/blink-dev/UViBfJuuIq8/w7_2W7lLAgAJ

Converted grid-gutters-get-set.html in some WPT tests covering
a few extra cases.
Added WPT test to verify the animation of these properties too.

BUG=761904
TEST=external/wpt/css/css-align/gaps/

Change-Id: If49ec34116eff0b3b745fc89b01b15b14c71d4a9
Reviewed-on: https://chromium-review.googlesource.com/890446
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#534351}
bertogg pushed a commit to Igalia/webkit that referenced this issue Feb 5, 2018
https://bugs.webkit.org/show_bug.cgi?id=180290

Reviewed by Javier Fernandez.

LayoutTests/imported/w3c:

Imported WPT tests from css/css-align/gaps/.
And also update the tests on css/css-grid/alignment/ gutter tests.

* web-platform-tests/css/css-align/gaps/column-gap-animation-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/column-gap-animation-001.html: Added.
* web-platform-tests/css/css-align/gaps/column-gap-animation-002-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/column-gap-animation-002.html: Added.
* web-platform-tests/css/css-align/gaps/column-gap-animation-003-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/column-gap-animation-003.html: Added.
* web-platform-tests/css/css-align/gaps/column-gap-parsing-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/column-gap-parsing-001.html: Added.
* web-platform-tests/css/css-align/gaps/gap-animation-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/gap-animation-001.html: Added.
* web-platform-tests/css/css-align/gaps/gap-animation-002-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/gap-animation-002.html: Added.
* web-platform-tests/css/css-align/gaps/gap-animation-003-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/gap-animation-003.html: Added.
* web-platform-tests/css/css-align/gaps/gap-animation-004-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/gap-animation-004.html: Added.
* web-platform-tests/css/css-align/gaps/gap-parsing-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/gap-parsing-001.html: Added.
* web-platform-tests/css/css-align/gaps/grid-column-gap-parsing-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/grid-column-gap-parsing-001.html: Added.
* web-platform-tests/css/css-align/gaps/grid-gap-parsing-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/grid-gap-parsing-001.html: Added.
* web-platform-tests/css/css-align/gaps/grid-row-gap-parsing-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/grid-row-gap-parsing-001.html: Added.
* web-platform-tests/css/css-align/gaps/row-gap-animation-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/row-gap-animation-001.html: Added.
* web-platform-tests/css/css-align/gaps/row-gap-animation-002-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/row-gap-animation-002.html: Added.
* web-platform-tests/css/css-align/gaps/row-gap-animation-003-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/row-gap-animation-003.html: Added.
* web-platform-tests/css/css-align/gaps/row-gap-parsing-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/row-gap-parsing-001.html: Added.
* web-platform-tests/css/css-align/gaps/w3c-import.log: Added.
* web-platform-tests/css/css-grid/alignment/grid-gutters-001-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-002-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-003-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-004-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-005-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-006-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-007-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-008-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-009-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-010-expected.html:

Source/WebCore:

This patch applies the resoultion of the CSS WG to unprefix
the CSS Grid Layout gutter properties:
w3c/csswg-drafts#1696

column-gap already existed before, as it's part of Multicol.
The patch adds the new properties row-gap and gap, and keep the legacy ones
as aliases:
- grid-column-gap => column-gap
- grid-row-gap => row-gap
- grid-gap => gap

As column-gap was already animatable, this change takes advantage
to make animatable row-gap too.

Tests: imported/w3c/web-platform-tests/css/css-align/gaps/

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::ComputedStyleExtractor::valueForPropertyinStyle):
* css/CSSProperties.json:
* css/StyleProperties.cpp:
* css/parser/CSSParserFastPaths.cpp:
(WebCore::isSimpleLengthPropertyID):
* css/parser/CSSPropertyParser.cpp:
(WebCore::CSSPropertyParser::parseSingleValue):
(WebCore::CSSPropertyParser::parseShorthand):
* page/animation/CSSPropertyAnimation.cpp:
(WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::availableSpaceForGutters const):
(WebCore::RenderGrid::gridGap const):
* rendering/style/RenderStyle.h:
(WebCore::RenderStyle::gridAutoRows const):
(WebCore::RenderStyle::columnGap const):
(WebCore::RenderStyle::rowGap const):
(WebCore::RenderStyle::setGridItemRowEnd):
(WebCore::RenderStyle::setColumnGap):
(WebCore::RenderStyle::setRowGap):
(WebCore::RenderStyle::initialRowGap):
* rendering/style/StyleGridData.cpp:
(WebCore::StyleGridData::StyleGridData):
* rendering/style/StyleGridData.h:
(WebCore::StyleGridData::operator== const):
* rendering/style/StyleMultiColData.cpp:
(WebCore::StyleMultiColData::StyleMultiColData):
(WebCore::StyleMultiColData::operator== const):
* rendering/style/StyleMultiColData.h:
* rendering/style/StyleRareNonInheritedData.cpp:
(WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData):
(WebCore::StyleRareNonInheritedData::operator== const):
* rendering/style/StyleRareNonInheritedData.h:

LayoutTests:

* TestExpectations: We're now passing some gutters tests,
so removing them from TestExpectations.
* fast/css-grid-layout/grid-gutters-get-set.html: Removed. This is now covered by WPT tests.
* fast/css-grid-layout/grid-shorthand-get-set-expected.txt: Update results for gutter properties
as default value is now "normal".
* fast/css-grid-layout/grid-shorthand-get-set.html: Update checks for gutter properties
as default value is now "normal".


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@228095 268f45cc-cd09-0410-ab3c-d52691b4dbfc
ardalanamini pushed a commit to siliconjs/chromium that referenced this issue Feb 5, 2018
This patch applies the resoultion of the CSS WG to unprefix
the CSS Grid Layout gutter properties:
w3c/csswg-drafts#1696

That is:
* grid-column-gap => column-gap
* grid-row-gap => row-gap
* grid-gap => gap

column-gap already existed before, as it's part of Multicol,
and it already has an alias -webkit-column-gap.
For that reason it's not possible to implement another alias
for grid-column-gap, so it was done with a shorthand.
To follow the same pattern the shorthand approach was used for
grid-row-gap and grid-gap too.

As column-gap was already animatable, this change takes advantage
to make animatable row-gap too.

Intent to Implement and Ship thread:
https://groups.google.com/a/chromium.org/d/msg/blink-dev/UViBfJuuIq8/w7_2W7lLAgAJ

Converted grid-gutters-get-set.html in some WPT tests covering
a few extra cases.
Added WPT test to verify the animation of these properties too.

BUG=761904
TEST=external/wpt/css/css-align/gaps/

Change-Id: If49ec34116eff0b3b745fc89b01b15b14c71d4a9
Reviewed-on: https://chromium-review.googlesource.com/890446
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#534351}
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Mar 1, 2018
…testonly

Automatic update from web-platform-tests
This patch applies the resoultion of the CSS WG to unprefix
the CSS Grid Layout gutter properties:
w3c/csswg-drafts#1696

That is:
* grid-column-gap => column-gap
* grid-row-gap => row-gap
* grid-gap => gap

column-gap already existed before, as it's part of Multicol,
and it already has an alias -webkit-column-gap.
For that reason it's not possible to implement another alias
for grid-column-gap, so it was done with a shorthand.
To follow the same pattern the shorthand approach was used for
grid-row-gap and grid-gap too.

As column-gap was already animatable, this change takes advantage
to make animatable row-gap too.

Intent to Implement and Ship thread:
https://groups.google.com/a/chromium.org/d/msg/blink-dev/UViBfJuuIq8/w7_2W7lLAgAJ

Converted grid-gutters-get-set.html in some WPT tests covering
a few extra cases.
Added WPT test to verify the animation of these properties too.

BUG=761904
TEST=external/wpt/css/css-align/gaps/

Change-Id: If49ec34116eff0b3b745fc89b01b15b14c71d4a9
Reviewed-on: https://chromium-review.googlesource.com/890446
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#534351}

<!-- Reviewable:start -->

<!-- Reviewable:end -->

wpt-commits: 147afee64f7df1bbb2b22451c2d479e5495f2405
wpt-pr: 9227
reapplied-commits: 370e267e160568862f1fd9ec246ab5bb840f586e, fe4514c84e7ad28e46bad5da93381deb99b177f3, 7806af854343c043a2645a4034fdc7812f65daad, 9ddfd21554293dec5a4bf2e5375ae4f3c9f2ded0, 75f63c4d1ebc949647184fd60972fc7b9fd4affb, 1f3a5b496acd2288cc8cf0c32af86cb35157ea4e, 88b42bd5847abac58a62c4d6b33c1509bfce5f3d, 15c2e4c690700c6c115f8afe5e44ded10d943538, c8d461ef1437641ae7d4ea1d21e1e60cd62910b0, a6088a5f48ee299386a84d2f771902267d7355b1, 0634cd8f08ebe0905a9188fb1398c7b5f889c5dc, c8ee4a012dae506ae06bb5b2ad50942b04c1aaaa, c2c352456a4cf62dcc12f851138b04397675a445, b93a8879555d2fa7e7d4e00a275513a3a6338b35, b86e1331cb36634fd33677043b61fc0c1d8485bc, 44ddf14fd3346658c3223f13652073fafbfa48fa, a1a5840a6bb53e305ba02bcbeb215659342d0edb, 7465cb110ae5ec2e2ca73182caf5293f0efc8fd5, aad5349b3458bc3414e274b33fa86a1123901ff2, eca0907980d2769c449894a6277c60c1a306792f, 38626987c0cfd6e715cfcc6f4f1a1209191a03c5, e4a67f7ddcde6cd99348e9104bd7ed07074da44a, bb3c9990840a0fae2afc840b5952d7874785b112, 042d7adef0bdb9dc80e825c3997ace7519477c42, 99f1ea44fc7915b8b7b33bce4732fa8765fd3ac2
bertogg pushed a commit to Igalia/webkit that referenced this issue Mar 6, 2018
… prefix

https://bugs.webkit.org/show_bug.cgi?id=180290

Reviewed by Javier Fernandez.

LayoutTests/imported/w3c:

Imported WPT tests from css/css-align/gaps/.
And also update the tests on css/css-grid/alignment/ gutter tests.

* web-platform-tests/css/css-align/gaps/column-gap-animation-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/column-gap-animation-001.html: Added.
* web-platform-tests/css/css-align/gaps/column-gap-animation-002-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/column-gap-animation-002.html: Added.
* web-platform-tests/css/css-align/gaps/column-gap-animation-003-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/column-gap-animation-003.html: Added.
* web-platform-tests/css/css-align/gaps/column-gap-parsing-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/column-gap-parsing-001.html: Added.
* web-platform-tests/css/css-align/gaps/gap-animation-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/gap-animation-001.html: Added.
* web-platform-tests/css/css-align/gaps/gap-animation-002-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/gap-animation-002.html: Added.
* web-platform-tests/css/css-align/gaps/gap-animation-003-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/gap-animation-003.html: Added.
* web-platform-tests/css/css-align/gaps/gap-animation-004-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/gap-animation-004.html: Added.
* web-platform-tests/css/css-align/gaps/gap-parsing-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/gap-parsing-001.html: Added.
* web-platform-tests/css/css-align/gaps/grid-column-gap-parsing-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/grid-column-gap-parsing-001.html: Added.
* web-platform-tests/css/css-align/gaps/grid-gap-parsing-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/grid-gap-parsing-001.html: Added.
* web-platform-tests/css/css-align/gaps/grid-row-gap-parsing-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/grid-row-gap-parsing-001.html: Added.
* web-platform-tests/css/css-align/gaps/row-gap-animation-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/row-gap-animation-001.html: Added.
* web-platform-tests/css/css-align/gaps/row-gap-animation-002-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/row-gap-animation-002.html: Added.
* web-platform-tests/css/css-align/gaps/row-gap-animation-003-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/row-gap-animation-003.html: Added.
* web-platform-tests/css/css-align/gaps/row-gap-parsing-001-expected.txt: Added.
* web-platform-tests/css/css-align/gaps/row-gap-parsing-001.html: Added.
* web-platform-tests/css/css-align/gaps/w3c-import.log: Added.
* web-platform-tests/css/css-grid/alignment/grid-gutters-001-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-002-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-003-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-004-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-005-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-006-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-007-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-008-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-009-expected.html:
* web-platform-tests/css/css-grid/alignment/grid-gutters-010-expected.html:

Source/WebCore:

This patch applies the resoultion of the CSS WG to unprefix
the CSS Grid Layout gutter properties:
w3c/csswg-drafts#1696

column-gap already existed before, as it's part of Multicol.
The patch adds the new properties row-gap and gap, and keep the legacy ones
as aliases:
- grid-column-gap => column-gap
- grid-row-gap => row-gap
- grid-gap => gap

As column-gap was already animatable, this change takes advantage
to make animatable row-gap too.

Tests: imported/w3c/web-platform-tests/css/css-align/gaps/

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::ComputedStyleExtractor::valueForPropertyinStyle):
* css/CSSProperties.json:
* css/StyleProperties.cpp:
* css/parser/CSSParserFastPaths.cpp:
(WebCore::isSimpleLengthPropertyID):
* css/parser/CSSPropertyParser.cpp:
(WebCore::CSSPropertyParser::parseSingleValue):
(WebCore::CSSPropertyParser::parseShorthand):
* page/animation/CSSPropertyAnimation.cpp:
(WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::availableSpaceForGutters const):
(WebCore::RenderGrid::gridGap const):
* rendering/style/RenderStyle.h:
(WebCore::RenderStyle::gridAutoRows const):
(WebCore::RenderStyle::columnGap const):
(WebCore::RenderStyle::rowGap const):
(WebCore::RenderStyle::setGridItemRowEnd):
(WebCore::RenderStyle::setColumnGap):
(WebCore::RenderStyle::setRowGap):
(WebCore::RenderStyle::initialRowGap):
* rendering/style/StyleGridData.cpp:
(WebCore::StyleGridData::StyleGridData):
* rendering/style/StyleGridData.h:
(WebCore::StyleGridData::operator== const):
* rendering/style/StyleMultiColData.cpp:
(WebCore::StyleMultiColData::StyleMultiColData):
(WebCore::StyleMultiColData::operator== const):
* rendering/style/StyleMultiColData.h:
* rendering/style/StyleRareNonInheritedData.cpp:
(WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData):
(WebCore::StyleRareNonInheritedData::operator== const):
* rendering/style/StyleRareNonInheritedData.h:

LayoutTests:

* TestExpectations: We're now passing some gutters tests,
so removing them from TestExpectations.
* fast/css-grid-layout/grid-gutters-get-set.html: Removed. This is now covered by WPT tests.
* fast/css-grid-layout/grid-shorthand-get-set-expected.txt: Update results for gutter properties
as default value is now "normal".
* fast/css-grid-layout/grid-shorthand-get-set.html: Update checks for gutter properties
as default value is now "normal".

git-svn-id: http://svn.webkit.org/repository/webkit/releases/WebKitGTK/webkit-2.20@228611 268f45cc-cd09-0410-ab3c-d52691b4dbfc
@zxti
Copy link

@zxti zxti commented Apr 26, 2019

Hello from 2019! Is there a rough ETA for gap in flexbox?

@rachelandrew
Copy link
Contributor

@rachelandrew rachelandrew commented Apr 26, 2019

@zxti gap has been specified for Flexbox. It is part of the Box Alignment specification. https://www.w3.org/TR/css-align-3/#gaps

If you are referring to browser implementation then Firefox has already implemented this. Other browsers have not as yet, but this isn't the place to chase that. The bug for Chrome is for example here https://bugs.chromium.org/p/chromium/issues/detail?id=762679

gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified-and-comments-removed that referenced this issue Oct 2, 2019
…testonly

Automatic update from web-platform-tests
This patch applies the resoultion of the CSS WG to unprefix
the CSS Grid Layout gutter properties:
w3c/csswg-drafts#1696

That is:
* grid-column-gap => column-gap
* grid-row-gap => row-gap
* grid-gap => gap

column-gap already existed before, as it's part of Multicol,
and it already has an alias -webkit-column-gap.
For that reason it's not possible to implement another alias
for grid-column-gap, so it was done with a shorthand.
To follow the same pattern the shorthand approach was used for
grid-row-gap and grid-gap too.

As column-gap was already animatable, this change takes advantage
to make animatable row-gap too.

Intent to Implement and Ship thread:
https://groups.google.com/a/chromium.org/d/msg/blink-dev/UViBfJuuIq8/w7_2W7lLAgAJ

Converted grid-gutters-get-set.html in some WPT tests covering
a few extra cases.
Added WPT test to verify the animation of these properties too.

BUG=761904
TEST=external/wpt/css/css-align/gaps/

Change-Id: If49ec34116eff0b3b745fc89b01b15b14c71d4a9
Reviewed-on: https://chromium-review.googlesource.com/890446
Reviewed-by: Javier Fernandez <jfernandezigalia.com>
Reviewed-by: Rune Lillesveen <futharkchromium.org>
Reviewed-by: Kent Tamura <tkentchromium.org>
Commit-Queue: Manuel Rego Casasnovas <regoigalia.com>
Cr-Commit-Position: refs/heads/master{#534351}

<!-- Reviewable:start -->

<!-- Reviewable:end -->

wpt-commits: 147afee64f7df1bbb2b22451c2d479e5495f2405
wpt-pr: 9227
reapplied-commits: 370e267e160568862f1fd9ec246ab5bb840f586e, fe4514c84e7ad28e46bad5da93381deb99b177f3, 7806af854343c043a2645a4034fdc7812f65daad, 9ddfd21554293dec5a4bf2e5375ae4f3c9f2ded0, 75f63c4d1ebc949647184fd60972fc7b9fd4affb, 1f3a5b496acd2288cc8cf0c32af86cb35157ea4e, 88b42bd5847abac58a62c4d6b33c1509bfce5f3d, 15c2e4c690700c6c115f8afe5e44ded10d943538, c8d461ef1437641ae7d4ea1d21e1e60cd62910b0, a6088a5f48ee299386a84d2f771902267d7355b1, 0634cd8f08ebe0905a9188fb1398c7b5f889c5dc, c8ee4a012dae506ae06bb5b2ad50942b04c1aaaa, c2c352456a4cf62dcc12f851138b04397675a445, b93a8879555d2fa7e7d4e00a275513a3a6338b35, b86e1331cb36634fd33677043b61fc0c1d8485bc, 44ddf14fd3346658c3223f13652073fafbfa48fa, a1a5840a6bb53e305ba02bcbeb215659342d0edb, 7465cb110ae5ec2e2ca73182caf5293f0efc8fd5, aad5349b3458bc3414e274b33fa86a1123901ff2, eca0907980d2769c449894a6277c60c1a306792f, 38626987c0cfd6e715cfcc6f4f1a1209191a03c5, e4a67f7ddcde6cd99348e9104bd7ed07074da44a, bb3c9990840a0fae2afc840b5952d7874785b112, 042d7adef0bdb9dc80e825c3997ace7519477c42, 99f1ea44fc7915b8b7b33bce4732fa8765fd3ac2

UltraBlame original commit: 876af931e6f498fc873415494de12100a8b51b90
gecko-dev-updater pushed a commit to marco-c/gecko-dev-comments-removed that referenced this issue Oct 2, 2019
…testonly

Automatic update from web-platform-tests
This patch applies the resoultion of the CSS WG to unprefix
the CSS Grid Layout gutter properties:
w3c/csswg-drafts#1696

That is:
* grid-column-gap => column-gap
* grid-row-gap => row-gap
* grid-gap => gap

column-gap already existed before, as it's part of Multicol,
and it already has an alias -webkit-column-gap.
For that reason it's not possible to implement another alias
for grid-column-gap, so it was done with a shorthand.
To follow the same pattern the shorthand approach was used for
grid-row-gap and grid-gap too.

As column-gap was already animatable, this change takes advantage
to make animatable row-gap too.

Intent to Implement and Ship thread:
https://groups.google.com/a/chromium.org/d/msg/blink-dev/UViBfJuuIq8/w7_2W7lLAgAJ

Converted grid-gutters-get-set.html in some WPT tests covering
a few extra cases.
Added WPT test to verify the animation of these properties too.

BUG=761904
TEST=external/wpt/css/css-align/gaps/

Change-Id: If49ec34116eff0b3b745fc89b01b15b14c71d4a9
Reviewed-on: https://chromium-review.googlesource.com/890446
Reviewed-by: Javier Fernandez <jfernandezigalia.com>
Reviewed-by: Rune Lillesveen <futharkchromium.org>
Reviewed-by: Kent Tamura <tkentchromium.org>
Commit-Queue: Manuel Rego Casasnovas <regoigalia.com>
Cr-Commit-Position: refs/heads/master{#534351}

<!-- Reviewable:start -->

<!-- Reviewable:end -->

wpt-commits: 147afee64f7df1bbb2b22451c2d479e5495f2405
wpt-pr: 9227
reapplied-commits: 370e267e160568862f1fd9ec246ab5bb840f586e, fe4514c84e7ad28e46bad5da93381deb99b177f3, 7806af854343c043a2645a4034fdc7812f65daad, 9ddfd21554293dec5a4bf2e5375ae4f3c9f2ded0, 75f63c4d1ebc949647184fd60972fc7b9fd4affb, 1f3a5b496acd2288cc8cf0c32af86cb35157ea4e, 88b42bd5847abac58a62c4d6b33c1509bfce5f3d, 15c2e4c690700c6c115f8afe5e44ded10d943538, c8d461ef1437641ae7d4ea1d21e1e60cd62910b0, a6088a5f48ee299386a84d2f771902267d7355b1, 0634cd8f08ebe0905a9188fb1398c7b5f889c5dc, c8ee4a012dae506ae06bb5b2ad50942b04c1aaaa, c2c352456a4cf62dcc12f851138b04397675a445, b93a8879555d2fa7e7d4e00a275513a3a6338b35, b86e1331cb36634fd33677043b61fc0c1d8485bc, 44ddf14fd3346658c3223f13652073fafbfa48fa, a1a5840a6bb53e305ba02bcbeb215659342d0edb, 7465cb110ae5ec2e2ca73182caf5293f0efc8fd5, aad5349b3458bc3414e274b33fa86a1123901ff2, eca0907980d2769c449894a6277c60c1a306792f, 38626987c0cfd6e715cfcc6f4f1a1209191a03c5, e4a67f7ddcde6cd99348e9104bd7ed07074da44a, bb3c9990840a0fae2afc840b5952d7874785b112, 042d7adef0bdb9dc80e825c3997ace7519477c42, 99f1ea44fc7915b8b7b33bce4732fa8765fd3ac2

UltraBlame original commit: 876af931e6f498fc873415494de12100a8b51b90
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified that referenced this issue Oct 2, 2019
…testonly

Automatic update from web-platform-tests
This patch applies the resoultion of the CSS WG to unprefix
the CSS Grid Layout gutter properties:
w3c/csswg-drafts#1696

That is:
* grid-column-gap => column-gap
* grid-row-gap => row-gap
* grid-gap => gap

column-gap already existed before, as it's part of Multicol,
and it already has an alias -webkit-column-gap.
For that reason it's not possible to implement another alias
for grid-column-gap, so it was done with a shorthand.
To follow the same pattern the shorthand approach was used for
grid-row-gap and grid-gap too.

As column-gap was already animatable, this change takes advantage
to make animatable row-gap too.

Intent to Implement and Ship thread:
https://groups.google.com/a/chromium.org/d/msg/blink-dev/UViBfJuuIq8/w7_2W7lLAgAJ

Converted grid-gutters-get-set.html in some WPT tests covering
a few extra cases.
Added WPT test to verify the animation of these properties too.

BUG=761904
TEST=external/wpt/css/css-align/gaps/

Change-Id: If49ec34116eff0b3b745fc89b01b15b14c71d4a9
Reviewed-on: https://chromium-review.googlesource.com/890446
Reviewed-by: Javier Fernandez <jfernandezigalia.com>
Reviewed-by: Rune Lillesveen <futharkchromium.org>
Reviewed-by: Kent Tamura <tkentchromium.org>
Commit-Queue: Manuel Rego Casasnovas <regoigalia.com>
Cr-Commit-Position: refs/heads/master{#534351}

<!-- Reviewable:start -->

<!-- Reviewable:end -->

wpt-commits: 147afee64f7df1bbb2b22451c2d479e5495f2405
wpt-pr: 9227
reapplied-commits: 370e267e160568862f1fd9ec246ab5bb840f586e, fe4514c84e7ad28e46bad5da93381deb99b177f3, 7806af854343c043a2645a4034fdc7812f65daad, 9ddfd21554293dec5a4bf2e5375ae4f3c9f2ded0, 75f63c4d1ebc949647184fd60972fc7b9fd4affb, 1f3a5b496acd2288cc8cf0c32af86cb35157ea4e, 88b42bd5847abac58a62c4d6b33c1509bfce5f3d, 15c2e4c690700c6c115f8afe5e44ded10d943538, c8d461ef1437641ae7d4ea1d21e1e60cd62910b0, a6088a5f48ee299386a84d2f771902267d7355b1, 0634cd8f08ebe0905a9188fb1398c7b5f889c5dc, c8ee4a012dae506ae06bb5b2ad50942b04c1aaaa, c2c352456a4cf62dcc12f851138b04397675a445, b93a8879555d2fa7e7d4e00a275513a3a6338b35, b86e1331cb36634fd33677043b61fc0c1d8485bc, 44ddf14fd3346658c3223f13652073fafbfa48fa, a1a5840a6bb53e305ba02bcbeb215659342d0edb, 7465cb110ae5ec2e2ca73182caf5293f0efc8fd5, aad5349b3458bc3414e274b33fa86a1123901ff2, eca0907980d2769c449894a6277c60c1a306792f, 38626987c0cfd6e715cfcc6f4f1a1209191a03c5, e4a67f7ddcde6cd99348e9104bd7ed07074da44a, bb3c9990840a0fae2afc840b5952d7874785b112, 042d7adef0bdb9dc80e825c3997ace7519477c42, 99f1ea44fc7915b8b7b33bce4732fa8765fd3ac2

UltraBlame original commit: 876af931e6f498fc873415494de12100a8b51b90
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants
You can’t perform that action at this time.