- Revision
- 145758
- Author
- [email protected]
- Date
- 2013-03-13 14:50:11 -0700 (Wed, 13 Mar 2013)
Log Message
[CSS Grid Layout] Handle min-width / max-width on the grid element
https://bugs.webkit.org/show_bug.cgi?id=112269
Reviewed by Ojan Vafai.
Source/WebCore:
Test: fast/css-grid-layout/grid-element-min-max-width.html
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::GridIterator::GridIterator):
Added some sanity checks that the starting indexes are in the grid.
(WebCore::RenderGrid::computeIntrinsicLogicalWidths):
Updated the code to use m_grid to iterate: this is the correct way to
go as it will handle implicit rows / columns properly. Added a comment
about the current way being inefficient and incorrect with spanning grid
items.
(WebCore::RenderGrid::computePreferredLogicalWidths):
Updated the comments.
(WebCore::RenderGrid::gridTrackSize):
* rendering/RenderGrid.h:
Constified gridTrackSize.
LayoutTests:
* fast/css-grid-layout/grid-element-min-max-width-expected.txt: Added.
* fast/css-grid-layout/grid-element-min-max-width.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (145757 => 145758)
--- trunk/LayoutTests/ChangeLog 2013-03-13 21:49:35 UTC (rev 145757)
+++ trunk/LayoutTests/ChangeLog 2013-03-13 21:50:11 UTC (rev 145758)
@@ -1,3 +1,13 @@
+2013-03-13 Julien Chaffraix <[email protected]>
+
+ [CSS Grid Layout] Handle min-width / max-width on the grid element
+ https://bugs.webkit.org/show_bug.cgi?id=112269
+
+ Reviewed by Ojan Vafai.
+
+ * fast/css-grid-layout/grid-element-min-max-width-expected.txt: Added.
+ * fast/css-grid-layout/grid-element-min-max-width.html: Added.
+
2013-03-13 Tao Bai <[email protected]>
Add the default video poster if it doesn't exist in video tag
Added: trunk/LayoutTests/fast/css-grid-layout/grid-element-min-max-width-expected.txt (0 => 145758)
--- trunk/LayoutTests/fast/css-grid-layout/grid-element-min-max-width-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-min-max-width-expected.txt 2013-03-13 21:50:11 UTC (rev 145758)
@@ -0,0 +1,34 @@
+Test that min-width and max-width are accounted for when computing the grid element's preferred widths.
+
+PASS
+XXX XXX
+PASS
+PASS
+XXXXXXXXXXX
+PASS
+PASS
+PASS
+XXX XXX XXX
+PASS
+XXX XXX XXX
+PASS
+XXXXX XXXXXX
+PASS
+XXXXX XXXXXX
+PASS
+PASS
+XXX XXX
+PASS
+PASS
+XXXXX XXXXXX
+PASS
+PASS
+PASS
+XXX XXX XXX
+PASS
+XXX XXX XXX
+PASS
+XXXXX XXXXXX
+PASS
+XXXXX XXXXXX
+PASS
Added: trunk/LayoutTests/fast/css-grid-layout/grid-element-min-max-width.html (0 => 145758)
--- trunk/LayoutTests/fast/css-grid-layout/grid-element-min-max-width.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-min-max-width.html 2013-03-13 21:50:11 UTC (rev 145758)
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="" rel="stylesheet">
+<link href="" rel=stylesheet>
+<style>
+.minWidthGrid {
+ min-width: 100px;
+ -webkit-grid-columns: 50px;
+ -webkit-grid-rows: 40px;
+}
+.maxWidthGrid {
+ max-width: 100px;
+ -webkit-grid-columns: 150px 50px;
+ -webkit-grid-rows: 40px;
+}
+
+.minWidthAutoGrid {
+ min-width: 100px;
+}
+
+.maxWidthAutoGrid {
+ max-width: 100px;
+}
+</style>
+<script src=""
+<body _onload_="checkLayout('.grid')">
+
+<p>Test that min-width and max-width are accounted for when computing the grid element's preferred widths.</p>
+
+<div class="constrainedContainer">
+ <div class="grid minWidthGrid" data-expected-height="40" data-expected-width="100"></div>
+ <div class="grid minWidthAutoGrid" data-expected-height="10" data-expected-width="100">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="10" data-expected-width="70">XXX XXX</div>
+ </div>
+ <!-- These 2 grids are sized after their containing block as width is 'auto'. We end up having the content overflow which is weird but the grid shouldn't shrink to fit by default. -->
+ <div class="grid maxWidthGrid" data-expected-height="40" data-expected-width="10"></div>
+ <div class="grid maxWidthAutoGrid" data-expected-height="10" data-expected-width="10">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="10" data-expected-width="110">XXXXXXXXXXX</div>
+ </div>
+
+ <div class="grid fit-content minWidthGrid" data-expected-height="40" data-expected-width="100"></div>
+ <div class="grid fit-content maxWidthGrid" data-expected-height="40" data-expected-width="100"></div>
+
+ <div class="grid max-content minWidthAutoGrid" data-expected-height="10" data-expected-width="110">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="10" data-expected-width="110">XXX XXX XXX</div>
+ </div>
+ <div class="grid min-content minWidthAutoGrid" data-expected-height="20" data-expected-width="100">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="20" data-expected-width="100">XXX XXX XXX</div>
+ </div>
+
+ <div class="grid max-content maxWidthAutoGrid" data-expected-height="20" data-expected-width="100">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="20" data-expected-width="100">XXXXX XXXXXX</div>
+ </div>
+ <div class="grid min-content maxWidthAutoGrid" data-expected-height="20" data-expected-width="60">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="20" data-expected-width="60">XXXXX XXXXXX</div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid minWidthGrid" data-expected-height="40" data-expected-width="1000"></div>
+ <div class="grid minWidthAutoGrid" data-expected-height="10" data-expected-width="1000">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="10" data-expected-width="70">XXX XXX</div>
+ </div>
+ <div class="grid maxWidthGrid" data-expected-height="40" data-expected-width="100"></div>
+ <div class="grid maxWidthAutoGrid" data-expected-height="20" data-expected-width="100">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="20" data-expected-width="100">XXXXX XXXXXX</div>
+ </div>
+ <div class="grid fit-content minWidthGrid" data-expected-height="40" data-expected-width="100"></div>
+ <div class="grid fit-content maxWidthGrid" data-expected-height="40" data-expected-width="100"></div>
+
+ <div class="grid max-content minWidthAutoGrid" data-expected-height="10" data-expected-width="110">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="10" data-expected-width="110">XXX XXX XXX</div>
+ </div>
+ <div class="grid min-content minWidthAutoGrid" data-expected-height="20" data-expected-width="100">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="20" data-expected-width="100">XXX XXX XXX</div>
+ </div>
+
+ <div class="grid max-content maxWidthAutoGrid" data-expected-height="20" data-expected-width="100">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="20" data-expected-width="100">XXXXX XXXXXX</div>
+ </div>
+ <div class="grid min-content maxWidthAutoGrid" data-expected-height="20" data-expected-width="60">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="20" data-expected-width="60">XXXXX XXXXXX</div>
+ </div>
+</div>
+
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (145757 => 145758)
--- trunk/Source/WebCore/ChangeLog 2013-03-13 21:49:35 UTC (rev 145757)
+++ trunk/Source/WebCore/ChangeLog 2013-03-13 21:50:11 UTC (rev 145758)
@@ -1,3 +1,29 @@
+2013-03-13 Julien Chaffraix <[email protected]>
+
+ [CSS Grid Layout] Handle min-width / max-width on the grid element
+ https://bugs.webkit.org/show_bug.cgi?id=112269
+
+ Reviewed by Ojan Vafai.
+
+ Test: fast/css-grid-layout/grid-element-min-max-width.html
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::GridIterator::GridIterator):
+ Added some sanity checks that the starting indexes are in the grid.
+
+ (WebCore::RenderGrid::computeIntrinsicLogicalWidths):
+ Updated the code to use m_grid to iterate: this is the correct way to
+ go as it will handle implicit rows / columns properly. Added a comment
+ about the current way being inefficient and incorrect with spanning grid
+ items.
+
+ (WebCore::RenderGrid::computePreferredLogicalWidths):
+ Updated the comments.
+
+ (WebCore::RenderGrid::gridTrackSize):
+ * rendering/RenderGrid.h:
+ Constified gridTrackSize.
+
2013-03-13 Simon Hausmann <[email protected]>
[Qt] Prospective trivial build fix after r145744
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (145757 => 145758)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2013-03-13 21:49:35 UTC (rev 145757)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2013-03-13 21:50:11 UTC (rev 145758)
@@ -78,6 +78,8 @@
, m_columnIndex((direction == ForColumns) ? fixedTrackIndex : 0)
, m_childIndex(0)
{
+ ASSERT(m_rowIndex < m_grid.size());
+ ASSERT(m_columnIndex < m_grid[0].size());
}
RenderBox* nextGridItem()
@@ -190,10 +192,13 @@
{
const_cast<RenderGrid*>(this)->placeItemsOnGrid();
- const Vector<GridTrackSize>& trackStyles = style()->gridColumns();
- for (size_t i = 0; i < trackStyles.size(); ++i) {
- LayoutUnit minTrackBreadth = computePreferredTrackWidth(trackStyles[i].minTrackBreadth(), i);
- LayoutUnit maxTrackBreadth = computePreferredTrackWidth(trackStyles[i].maxTrackBreadth(), i);
+ // FIXME: This is an inefficient way to fill our sizes as it will try every grid areas, when we would
+ // only want to account for fixed grid tracks and grid items. Also this will be incorrect if we have spanning
+ // grid items.
+ for (size_t i = 0; i < gridColumnCount(); ++i) {
+ const GridTrackSize& trackSize = gridTrackSize(ForColumns, i);
+ LayoutUnit minTrackBreadth = computePreferredTrackWidth(trackSize.minTrackBreadth(), i);
+ LayoutUnit maxTrackBreadth = computePreferredTrackWidth(trackSize.maxTrackBreadth(), i);
maxTrackBreadth = std::max(maxTrackBreadth, minTrackBreadth);
minLogicalWidth += minTrackBreadth;
@@ -212,9 +217,10 @@
m_minPreferredLogicalWidth = 0;
m_maxPreferredLogicalWidth = 0;
- // FIXME: We don't take our own logical width into account.
+ // FIXME: We don't take our own logical width into account. Once we do, we need to make sure
+ // we apply (and test the interaction with) min-width / max-width.
+
computeIntrinsicLogicalWidths(m_minPreferredLogicalWidth, m_maxPreferredLogicalWidth);
- // FIXME: We should account for min / max logical width.
LayoutUnit borderAndPaddingInInlineDirection = borderAndPaddingLogicalWidth();
m_minPreferredLogicalWidth += borderAndPaddingInInlineDirection;
@@ -316,7 +322,7 @@
return valueForLength(trackLength, direction == ForColumns ? logicalWidth() : computeContentLogicalHeight(MainOrPreferredSize, style()->logicalHeight()), view());
}
-const GridTrackSize& RenderGrid::gridTrackSize(TrackSizingDirection direction, size_t i)
+const GridTrackSize& RenderGrid::gridTrackSize(TrackSizingDirection direction, size_t i) const
{
const Vector<GridTrackSize>& trackStyles = (direction == ForColumns) ? style()->gridColumns() : style()->gridRows();
if (i >= trackStyles.size()) {
Modified: trunk/Source/WebCore/rendering/RenderGrid.h (145757 => 145758)
--- trunk/Source/WebCore/rendering/RenderGrid.h 2013-03-13 21:49:35 UTC (rev 145757)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2013-03-13 21:50:11 UTC (rev 145758)
@@ -107,7 +107,7 @@
void resolveContentBasedTrackSizingFunctionsForItems(TrackSizingDirection, Vector<GridTrack>& columnTracks, Vector<GridTrack>& rowTracks, size_t, SizingFunction, AccumulatorGetter, AccumulatorGrowFunction);
void distributeSpaceToTracks(Vector<GridTrack*>&, Vector<GridTrack*>* tracksForGrowthAboveMaxBreadth, AccumulatorGetter, AccumulatorGrowFunction, LayoutUnit& availableLogicalSpace);
- const GridTrackSize& gridTrackSize(TrackSizingDirection, size_t);
+ const GridTrackSize& gridTrackSize(TrackSizingDirection, size_t) const;
size_t maximumIndexInDirection(TrackSizingDirection) const;
LayoutUnit logicalContentHeightForChild(RenderBox*, Vector<GridTrack>&);
