[CSS Grid Layout] Support for Content Alignment in grid layout
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 2 Oct 2015 12:14:49 +0000 (12:14 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 2 Oct 2015 12:14:49 +0000 (12:14 +0000)
commit6f9c33153d9a406d8ae505ef0551d3ed1478709c
tree5c11229ff242d582e08e8d4a764f2a04d9e4b1ac
parent25229c98ea9a21614f545c10e22cd7312d73cd41
[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
51 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/overwrite-content-alignment-expected.txt [new file with mode: 0644]
LayoutTests/css3/overwrite-content-alignment.html [new file with mode: 0644]
LayoutTests/css3/overwrite-self-alignment-expected.txt [new file with mode: 0644]
LayoutTests/css3/overwrite-self-alignment.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align-content-distribution-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align-content-distribution-vertical-lr-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align-content-distribution-vertical-lr.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align-content-distribution-vertical-rl-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align-content-distribution-vertical-rl.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align-content-distribution.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align-content-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align-content-vertical-lr-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align-content-vertical-lr.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align-content-vertical-rl-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align-content-vertical-rl.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align-content.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-content-alignment-stretch-only-valid-for-auto-sized-tracks-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-content-alignment-stretch-only-valid-for-auto-sized-tracks.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-content-alignment-stretch-with-different-sized-tracks-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-content-alignment-stretch-with-different-sized-tracks.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html
LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-lr-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-lr.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-rl-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-justify-content-distribution.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-justify-content-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-lr-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-lr.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-rl-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-rl.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-justify-content.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/resources/grid.css
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderFlexibleBox.cpp
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/RenderGrid.h
Source/WebCore/rendering/style/RenderStyle.cpp
Source/WebCore/rendering/style/RenderStyle.h