[css-grid][css-multicol][css-flexbox][css-tables] Proposal for Various Gap Issues #1696
Labels
Milestone
Comments
Note: We would need to (at least temporarily, possibly permanently) maintain aliases from |
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) ? |
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. |
@bdc-stripe, no, the gap shorthand should work for any layout that accepts gaps |
@atanassov Ok cool (didn't see a proposal for |
@fantasai, does #1036 (comment) mean that the last bullet point regarding tables has just been rejected? |
Yes, at least for now (and probably permanently), we're not going to apply row-gap and column-gap to tables. |
WG resolution: https://logs.csswg.org/irc.w3.org/css/2017-08-04/#e847329 |
Edits checked in, closing issue. :) Expect to republish to /TR at the end of the month. |
This was referenced
Oct 18, 2017
Please start the Flexbox 2 spec as soon as possible. |
chromium-wpt-export-bot pushed 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 pushed 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 pushed 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
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
Hello from 2019! Is there a rough ETA for |
@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
JonWBedard pushed a commit to WebKit/WebKit that referenced this issue
Dec 1, 2022
… 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".
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
We've had some feedback on gaps, the one prompting this discussion being that authors are finding it awkward that the
gridshorthand 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:
grid-gapproperties from thegridshorthand, resolving [css-grid] Setting of gutter properties when using the 'grid' shorthand #1036column-gapandrow-gaptogrid-column-gapandgrid-row-gap.column-gapis shared with multi-col andnormalcomputes to zero except on multi-column elements.column-gapandrow-gapto flex containers, resolving a strong demand from flexbox users to have this spacing control. (See Rachel's message to www-style and [css-flexbox] Make it easier to define margins that only apply between flex-items #592 with special note of erikjung's comment)border-spacing(which inherits, which is weird) by having them defer toborder-spacingwhen specified asnormaland override it otherwise.The text was updated successfully, but these errors were encountered: