nephele
/
haikuwebkit
1
0
Fork 0
Code Issues Releases Activity
haikuwebkit/LayoutTests/css3/overwrite-content-alignment...

14 lines
600 B
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
Test overwriting justify-content and align-content works as expected
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
[css-align] 'overflow' keyword must precede the self-position and content-position value https://bugs.webkit.org/show_bug.cgi?id=181793 Reviewed by Antti Koivisto. Source/WebCore: There were several discussions to avoid ambiguities with the complex values, specially when it comes to define the place-xxx shorthands. One of the sources of problems is the 'overflow-position' keyword. The CSS WG has decided to change the syntax of all the CSS Box Alignment properties so that the 'overflow-position' keyword always precede the 'self-position' or the 'content-position' keywords. https://github.com/w3c/csswg-drafts/issues/1446#event-1125715434 In order to apply this change to the Content Distribution properties' (align-content and justify-content) syntax I had to completely re-implement their parsing function. Thanks to this I addressed also the issue with the content-distribution fallback, which cannot be specified explicitly now. https://github.com/w3c/csswg-drafts/issues/1002#ref-commit-c38cac4 No new tests, just rebaselined the expected results of the test cases affected. Despite the so many layout tests affected by this change, it's unlikely that it might break any content in current web sites. This patch changes the new CSS syntax, obviously backward compatible, defined by the new CSS Box Alignment. The 'overflow-position' keyword is only used by the layout models implementing the new spec, so far only CSS Grid Layout. Considering that CSS Grid has been shipped last year, it's unlikely that many sites are using the new CSS values. * css/CSSComputedStyleDeclaration.cpp: (WebCore::valueForItemPositionWithOverflowAlignment): (WebCore::valueForContentPositionAndDistributionWithOverflowAlignment): * css/CSSContentDistributionValue.cpp: (WebCore::CSSContentDistributionValue::customCSSText const): * css/StyleBuilderConverter.h: (WebCore::StyleBuilderConverter::convertSelfOrDefaultAlignmentData): * css/parser/CSSPropertyParser.cpp: (WebCore::consumeOverflowPositionKeyword): (WebCore::consumeContentPositionKeyword): (WebCore::consumeContentDistributionOverflowPosition): (WebCore::consumeSelfPositionOverflowPosition): LayoutTests: Rebaseline expected results of the test cases affected by this change. * css3/parse-align-content.html: * css3/parse-align-items.html: * css3/parse-align-self.html: * css3/parse-justify-content.html: * css3/overwrite-self-alignment.html: * css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled.html: * css3/overwrite-content-alignment.html: * fast/css-grid-layout/grid-content-alignment-overflow.html: * fast/css-grid-layout/grid-align-justify-overflow.html: * fast/css/parse-justify-items.html: * fast/css/parse-justify-self.html: * fast/repaint/align-items-overflow-change.html: * fast/repaint/align-self-overflow-change.html: * fast/repaint/justify-items-overflow-change.html: * fast/repaint/justify-self-overflow-change.html: Canonical link: https://commits.webkit.org/197764@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@227297 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2018-01-22 17:01:51 +00:00
PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-content') is "unsafe flex-end"
PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-content') is "safe center"
[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
PASS getComputedStyle(childOfParentId, '').getPropertyValue('justify-content') is "space-between"
PASS getComputedStyle(childOfParentId, '').getPropertyValue('align-content') is "space-around"
PASS successfullyParsed is true
TEST COMPLETE