nephele
/
haikuwebkit
1
0
Fork 0
Code Issues Releases Activity
haikuwebkit/LayoutTests/fast/css-grid-layout/grid-justify-content-distri...

75 lines
1.4 KiB
Plaintext
Raw Permalink Normal View History

[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): Canonical link: https://commits.webkit.org/167862@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@190484 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2015-10-02 12:14:49 +00:00
This test checks that the justify-content property is applied correctly when using content-distribution values.
direction: LTR | justify-content: 'space-between'
PASS
direction: LTR | justify-content: 'space-around'
PASS
direction: LTR | justify-content: 'space-evenly'
PASS
direction: LTR | justify-content: 'stretch'
PASS
direction: LTR | justify-content: 'space-between'
PASS
direction: LTR | justify-content: 'space-around'
PASS
direction: LTR | justify-content: 'space-evenly'
PASS
direction: LTR | justify-content: 'stretch'
PASS
direction: LTR | justify-content: 'space-between'
PASS
direction: LTR | justify-content: 'space-around'
PASS
direction: LTR | justify-content: 'space-evenly'
PASS
direction: LTR | justify-content: 'stretch'
PASS
direction: RTL | justify-content: 'space-between'
PASS
direction: RTL | justify-content: 'space-around'
PASS
direction: RTL | justify-content: 'space-evenly'
PASS
direction: RTL | justify-content: 'stretch'
PASS
direction: RTL | justify-content: 'space-between'
PASS
direction: RTL | justify-content: 'space-around'
PASS
direction: RTL | justify-content: 'space-evenly'
PASS
direction: RTL | justify-content: 'stretch'
PASS
direction: RTL | justify-content: 'space-between'
PASS
direction: RTL | justify-content: 'space-around'
PASS
direction: RTL | justify-content: 'space-evenly'
PASS
direction: RTL | justify-content: 'stretch'
PASS