1725495 - [css-multicol][css-grid][css-flexbox] CSS styling of Gaps/Gutters

Status: NEW

(Core :: Layout: Grid, enhancement, P3)

Description

[Mats Palmgren (inactive)]

There's a discussion about extending and generalizing the column-rule feature from Multicol to allow authors to decorate the Gaps/Gutters in Grid/Flexbox layouts too:
https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-621543304
(this is a commonly requested feature from authors)

I intend to experiment with implementing that here and writing up a spec proposal.

As part of this I'll also add support for images, in bug 1636298.

Comment 1

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 1 - Add a FrameGapRuleEnumerator interface for enumerating the gap rule rects in a specific logical axis.

Comment 2

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 2 - Add CSS 'column-rule-image-repeat/slice/source' properties.

Depends on D133518

Comment 3

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 3 - Implement layout for 'column-rule-image-repeat/slice/source'.

Depends on D133519

Comment 4

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 4 - Add the corresponding 'row-*' variants for the CSS 'column-gap/rule' properties.

Depends on D133520

Comment 5

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 5 - Add CSS 'column/row-rule-image' shorthands.

Depends on D133521

Comment 6

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 6 - Replace nsDisplayColumnRule with a generalized GapRuleDisplayItem.

Depends on D133522

Comment 7

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 7 - Add CSS '[column,row]-length' and '[column,row]-[lateral,longitudinal]-inset-[start,end] properties with shorthands.

This part also adds a GapRuleUtils class for sharing various gap rule
related code, and adds ResolveInsetStartAndSize that resolves
a triplet of insets+size style values per:
https://matspalmgren.github.io/css-gap-decorations/Overview.html#resolving-position-and-size-algo
And we update nsColumnSetFrame::ForEachGapRule to use it.

Depends on D133523

Comment 8

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 8 - Add CSS '[column,row]-longitudinal-edge-inset-[start,end] properties with shorthands.

Depends on D133524

Comment 9

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 9 - Add CSS '[column,row]-rule[-edge]*-align' and '[column,row]-rule-extent' properties.

Depends on D133525

Comment 10

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 10 - Add a few GapRuleUtils helpers to deal with rule-extent/align style values.

Depends on D133526

Comment 11

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 11 - Add nsContainerFrame::[Block,Inline]AxisRuleRectsProp frame properties for storing gapo rule nsRects for the corresponding logical axis.

Depends on D133527

Comment 12

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 12 - Add nsStyleColumn::GapRuleStyle accessor to conveniently get all the relevant gap rule style values for an axis.

NOTE: it would be better to have a nsStyleColumn member for each
axis instead but the way the VisitedDependentColor stuff is
implemented (using a pointer-to-member) makes that impossible.

Depends on D133528

Comment 13

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 13 - Implement gap rules for Flexbox containers.

Depends on D133529

Comment 14

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 14 - Implement gap rules for Grid containers (grid and subgrid, but not masonry).

Depends on D133530

Comment 15

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 15 - Implement gap rules for Grid containers with masonry layout.

Depends on D133531

Comment 16

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 16 - Implement gap rules for Table layout.

Depends on D133532

Comment 17

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 17 - Implement gap rules for table-row-group layout.

Depends on D133533

Comment 18

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 18 - Implement 'row-gap' for multi-column layout.

Spec issue: https://github.com/w3c/csswg-drafts/issues/6746

Depends on D133534

Comment 19

[Mats Palmgren (inactive)]

Attachment: WIP: Bug 1725495 part 19 - Implement row gap rules for multi-column layout.

Depends on D133535

Comment 20

[Mats Palmgren (inactive)]

 layout/generic/ColumnSetWrapperFrame.cpp                    |   247 ++++++++++++-
 layout/generic/ColumnSetWrapperFrame.h                      |    13 +-
 layout/generic/FrameGapRuleEnumerator.h                     |    39 +
 layout/generic/GapRuleDisplayItem.cpp                       |   309 +++++++++++++++
 layout/generic/GapRuleDisplayItem.h                         |    65 +++
 layout/generic/GapRuleUtils.cpp                             |    81 ++++
 layout/generic/GapRuleUtils.h                               |   245 ++++++++++++
 layout/generic/moz.build                                    |     5 +
 layout/generic/nsBlockFrame.cpp                             |    36 +-
 layout/generic/nsColumnSetFrame.cpp                         |   231 ++---------
 layout/generic/nsColumnSetFrame.h                           |    15 +-
 layout/generic/nsContainerFrame.h                           |    50 ++
 layout/generic/nsFlexContainerFrame.cpp                     |   498 ++++++++++++++++++++++++-
 layout/generic/nsFlexContainerFrame.h                       |    22 +-
 layout/generic/nsGridContainerFrame.cpp                     |  1089 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 layout/generic/nsGridContainerFrame.h                       |    55 ++-
 layout/generic/nsIFrame.cpp                                 |    33 +
 layout/painting/nsCSSRendering.cpp                          |    19 +-
 layout/painting/nsCSSRenderingBorders.cpp                   |     6 +-
 layout/painting/nsDisplayItemTypesList.h                    |     2 +-
 layout/style/ServoBindings.toml                             |     6 +
 layout/style/nsCSSVisitedDependentPropList.h                |     2 +-
 layout/style/nsComputedDOMStyle.cpp                         |    12 +-
 layout/style/nsStyleConsts.h                                |     7 +
 layout/style/nsStyleStruct.cpp                              |   148 ++++++-
 layout/style/nsStyleStruct.h                                |    87 +++-
 layout/style/nsStyleStructInlines.h                         |    41 ++
 layout/style/res/forms.css                                  |    56 ++-
 layout/style/res/ua.css                                     |    40 +-
 layout/tables/nsCellMap.h                                   |     9 +-
 layout/tables/nsTableFrame.cpp                              |   284 ++++++++++++++
 layout/tables/nsTableFrame.h                                |    17 +-
 layout/tables/nsTableRowGroupFrame.cpp                      |   395 +++++++++++++++++++
 layout/tables/nsTableRowGroupFrame.h                        |    19 +-
 modules/libpref/init/StaticPrefList.yaml                    |     7 +
 servo/components/style/properties/gecko.mako.rs             |     5 +-
 servo/components/style/properties/longhands/column.mako.rs  |   175 +++++++-
 servo/components/style/properties/shorthands/column.mako.rs |   159 ++++++-
 servo/components/style/values/computed/column.rs            |    19 +-
 servo/components/style/values/computed/length.rs            |     8 +
 servo/components/style/values/computed/mod.rs               |     7 +-
 servo/components/style/values/generics/column.rs            |    27 +
 servo/components/style/values/specified/column.rs           |   337 ++++++++++++++++-
 servo/components/style/values/specified/mod.rs              |     7 +-
 servo/ports/geckolib/cbindgen.toml                          |     5 +
 45 files changed, 4607 insertions(+), 332 deletions(-)

Comment 22

[BugBot [:suhaib / :marco/ :calixte]]

The bug assignee is inactive on Bugzilla, so the assignee is being reset.