[CSS Grid Layout] Support for Content Alignment in grid layout
https://bugs.webkit.org/show_bug.cgi?id=145520
Reviewed by Darin Adler.
Source/WebCore:
According to CSS Box Alignment specification, Content Distribution
alignment controls alignment of the box's content within the box. The
alignment container is the grid container's content box. The alignment
subjects are the grid tracks.
This patch implements Grid Layout support for Content Distribution
alignment along both block/column and inline/row axis, which are handled
by align-content and justify-content properties respectively.
This patch provides support for overflow handling, similar to what
Self Alignment provides with grid items, and both <content-position>
and <content-distribution> values.
Baseline Alignment is still missing because it requires some additional
behavior to be supported on grids before considering its implementation.
Tests: css3/overwrite-content-alignment.html
css3/overwrite-self-alignment.html
fast/css-grid-layout/grid-align-content-distribution-vertical-lr.html
fast/css-grid-layout/grid-align-content-distribution-vertical-rl.html
fast/css-grid-layout/grid-align-content-distribution.html
fast/css-grid-layout/grid-align-content-vertical-lr.html
fast/css-grid-layout/grid-align-content-vertical-rl.html
fast/css-grid-layout/grid-align-content.html
fast/css-grid-layout/grid-content-alignment-overflow.html
fast/css-grid-layout/grid-content-alignment-with-different-sized-tracks.html
fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html
fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl.html
fast/css-grid-layout/grid-content-alignment-with-span.html
fast/css-grid-layout/grid-justify-content-distribution-vertical-lr.html
fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.html
fast/css-grid-layout/grid-justify-content-distribution.html
fast/css-grid-layout/grid-justify-content-vertical-lr.html
fast/css-grid-layout/grid-justify-content-vertical-rl.html
fast/css-grid-layout/grid-justify-content.html
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
(WebCore::RenderFlexibleBox::layoutColumnReverse):
(WebCore::RenderFlexibleBox::alignFlexLines):
* rendering/RenderGrid.cpp:
(WebCore::ContentAlignmentData::ContentAlignmentData):
(WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
(WebCore::RenderGrid::layoutGridItems):
(WebCore::RenderGrid::gridAreaBreadthForChild):
(WebCore::RenderGrid::populateGridPositions):
(WebCore::resolveContentDistributionFallback):
(WebCore::offsetToStartEdge):
(WebCore::offsetToEndEdge):
(WebCore::contentDistributionOffset):
(WebCore::RenderGrid::computeContentPositionAndDistributionColumnOffset):
(WebCore::RenderGrid::computeContentPositionAndDistributionRowOffset):
(WebCore::RenderGrid::findChildLogicalPosition):
(WebCore::RenderGrid::computePreferredLogicalWidths): Deleted.
(WebCore::RenderGrid::autoPlacementMajorAxisDirection): Deleted.
(WebCore::RenderGrid::autoPlacementMinorAxisDirection): Deleted.
(WebCore::RenderGrid::cachedGridCoordinate): Deleted.
(WebCore::RenderGrid::rowPositionForChild): Deleted.
* rendering/RenderGrid.h:
* rendering/style/RenderStyle.cpp:
(WebCore::RenderStyle::resolvedAlignContentPosition):
(WebCore::RenderStyle::resolvedAlignContentDistribution):
(WebCore::RenderStyle::resolvedJustifyContentPosition):
(WebCore::RenderStyle::resolvedJustifyContentDistribution):
* rendering/style/RenderStyle.h:
LayoutTests:
Content Distribution alignment controls alignment of the box's
content within the box. The alignment container is the grid
container's content box. The alignment subjects are the grid
tracks.
In addition to the tests to verify the new functionality, I've
added some tests to check out that the new complex values are
overwritten properly.
I had to modify the grid-item-margin-auto-columns-rows-horizontal-rtl
test because when using RTL direction the whole grid must flow form
right to left, not only its items, so I rebaselined text expectations
to adapt it to the new behavior.
* css3/overwrite-content-alignment-expected.txt: Added.
* css3/overwrite-content-alignment.html: Added.
* css3/overwrite-self-alignment-expected.txt: Added.
* css3/overwrite-self-alignment.html: Added.
* fast/css-grid-layout/grid-align-content-distribution-expected.txt: Added.
* fast/css-grid-layout/grid-align-content-distribution-vertical-lr-expected.txt: Added.
* fast/css-grid-layout/grid-align-content-distribution-vertical-lr.html: Added.
* fast/css-grid-layout/grid-align-content-distribution-vertical-rl-expected.txt: Added.
* fast/css-grid-layout/grid-align-content-distribution-vertical-rl.html: Added.
* fast/css-grid-layout/grid-align-content-distribution.html: Added.
* fast/css-grid-layout/grid-align-content-expected.txt: Added.
* fast/css-grid-layout/grid-align-content-vertical-lr-expected.txt: Added.
* fast/css-grid-layout/grid-align-content-vertical-lr.html: Added.
* fast/css-grid-layout/grid-align-content-vertical-rl-expected.txt: Added.
* fast/css-grid-layout/grid-align-content-vertical-rl.html: Added.
* fast/css-grid-layout/grid-align-content.html: Added.
* fast/css-grid-layout/grid-content-alignment-overflow-expected.txt: Added.
* fast/css-grid-layout/grid-content-alignment-overflow.html: Added.
* fast/css-grid-layout/grid-content-alignment-with-different-sized-tracks.html: Added.
* fast/css-grid-layout/grid-content-alignment-with-different-sized-tracks-expected.txt: Added.
* fast/css-grid-layout/grid-content-alignment-with-span-expected.txt: Added.
* fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr-expected.txt: Added.
* fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html: Added.
* fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl-expected.txt: Added.
* fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl.html: Added.
* fast/css-grid-layout/grid-content-alignment-with-span.html: Added.
* fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html:
* fast/css-grid-layout/grid-justify-content-distribution-expected.txt: Added.
* fast/css-grid-layout/grid-justify-content-distribution-vertical-lr-expected.txt: Added.
* fast/css-grid-layout/grid-justify-content-distribution-vertical-lr.html: Added.
* fast/css-grid-layout/grid-justify-content-distribution-vertical-rl-expected.txt: Added.
* fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.html: Added.
* fast/css-grid-layout/grid-justify-content-distribution.html: Added.
* fast/css-grid-layout/grid-justify-content-expected.txt: Added.
* fast/css-grid-layout/grid-justify-content-vertical-lr-expected.txt: Added.
* fast/css-grid-layout/grid-justify-content-vertical-lr.html: Added.
* fast/css-grid-layout/grid-justify-content-vertical-rl-expected.txt: Added.
* fast/css-grid-layout/grid-justify-content-vertical-rl.html: Added.
* fast/css-grid-layout/grid-justify-content.html: Added.
* fast/css-grid-layout/resources/grid.css:
(.firstRowThirdColumn):
(.firstRowFourthColumn):
(.secondRowThirdColumn):
(.secondRowFourthColumn):
(.thirdRowFirstColumn):
(.thirdRowSecondColumn):
(.fourthRowFirstColumn):
(.fourthRowSecondColumn):
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@190484
268f45cc-cd09-0410-ab3c-
d52691b4dbfc