- Revision
- 189708
- Author
- svil...@igalia.com
- Date
- 2015-09-14 03:40:55 -0700 (Mon, 14 Sep 2015)
Log Message
min-width/height should default to auto for grid items
https://bugs.webkit.org/show_bug.cgi?id=146021
Reviewed by Darin Adler.
Based on Blink's r194408, r194863 and r194887 by <r...@igalia.com>.
Source/WebCore:
>From the spec (http://dev.w3.org/csswg/css-grid/#grid-items):
"The auto value of min-width and min-height behaves on grid
items in the relevant axis analogously to its behavior on flex
items in the main axis."
>From now on the default value for min-width and min-height for
grid items is auto, meaning that in general, grid items won't
shrink bellow their content.
The change is not exactly the same as the one in Blink because
this one takes into account vertical writting modes, something
that was not well handled in the original one.
Tests: fast/css-grid-layout/min-width-height-auto-overflow.html
fast/css-grid-layout/min-width-height-auto.html
* rendering/RenderBox.cpp:
(WebCore::RenderBox::computeLogicalWidthInRegion):
(WebCore::RenderBox::computeLogicalHeight):
LayoutTests:
Apart from the original tests this includes some extra ones to
verify that we behave correctly with vertical writing modes.
* fast/css-grid-layout/min-width-height-auto-expected.txt: Added.
* fast/css-grid-layout/min-width-height-auto-overflow-expected.html: Added.
* fast/css-grid-layout/min-width-height-auto-overflow.html: Added.
* fast/css-grid-layout/min-width-height-auto.html: Added.
* fast/css/auto-min-size-expected.txt:
* fast/css/auto-min-size.html:
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (189707 => 189708)
--- trunk/LayoutTests/ChangeLog 2015-09-14 10:38:47 UTC (rev 189707)
+++ trunk/LayoutTests/ChangeLog 2015-09-14 10:40:55 UTC (rev 189708)
@@ -1,3 +1,22 @@
+2015-09-09 Sergio Villar Senin <svil...@igalia.com>
+
+ min-width/height should default to auto for grid items
+ https://bugs.webkit.org/show_bug.cgi?id=146021
+
+ Reviewed by Darin Adler.
+
+ Based on Blink's r194408, r194863 and r194887 by <r...@igalia.com>.
+
+ Apart from the original tests this includes some extra ones to
+ verify that we behave correctly with vertical writing modes.
+
+ * fast/css-grid-layout/min-width-height-auto-expected.txt: Added.
+ * fast/css-grid-layout/min-width-height-auto-overflow-expected.html: Added.
+ * fast/css-grid-layout/min-width-height-auto-overflow.html: Added.
+ * fast/css-grid-layout/min-width-height-auto.html: Added.
+ * fast/css/auto-min-size-expected.txt:
+ * fast/css/auto-min-size.html:
+
2015-09-14 Manuel Rego Casasnovas <r...@igalia.com>
[css-grid] Percentage columns should remove scrollbar's width
Modified: trunk/LayoutTests/fast/css/auto-min-size-expected.txt (189707 => 189708)
--- trunk/LayoutTests/fast/css/auto-min-size-expected.txt 2015-09-14 10:38:47 UTC (rev 189707)
+++ trunk/LayoutTests/fast/css/auto-min-size-expected.txt 2015-09-14 10:40:55 UTC (rev 189708)
@@ -26,6 +26,20 @@
PASS getComputedStyle(flexitem).minHeight is "auto"
PASS flexitem.style.minHeight is "0px"
PASS getComputedStyle(flexitem)["min-height"] is "0px"
+PASS griditem.style.minWidth is ""
+PASS getComputedStyle(griditem)["min-width"] is "auto"
+PASS griditem.style.minWidth is "auto"
+PASS griditem.style.maxWidth is ""
+PASS getComputedStyle(griditem).minWidth is "auto"
+PASS griditem.style.minWidth is "0px"
+PASS getComputedStyle(griditem)["min-width"] is "0px"
+PASS griditem.style.minHeight is ""
+PASS getComputedStyle(griditem)["min-height"] is "auto"
+PASS griditem.style.minHeight is "auto"
+PASS griditem.style.maxHeight is ""
+PASS getComputedStyle(griditem).minHeight is "auto"
+PASS griditem.style.minHeight is "0px"
+PASS getComputedStyle(griditem)["min-height"] is "0px"
PASS successfullyParsed is true
TEST COMPLETE
Modified: trunk/LayoutTests/fast/css/auto-min-size.html (189707 => 189708)
--- trunk/LayoutTests/fast/css/auto-min-size.html 2015-09-14 10:38:47 UTC (rev 189707)
+++ trunk/LayoutTests/fast/css/auto-min-size.html 2015-09-14 10:40:55 UTC (rev 189708)
@@ -2,6 +2,7 @@
<script src=''></script>
<div id=foo></div>
<div id="flexbox" style="display: flex;"><div id="flexitem"></div></div>
+<div id="grid" style="display: -webkit-grid;"><div id="griditem"></div></div>
<script>
div = document.getElementById('foo');
shouldBe('div.style.minWidth', '""');
@@ -56,5 +57,32 @@
flexitem.style.minHeight = 0;
shouldBe('flexitem.style.minHeight', '"0px"');
shouldBe('getComputedStyle(flexitem)["min-height"]', '"0px"');
+
+var griditem = document.getElementById("griditem");
+shouldBe('griditem.style.minWidth', '""');
+shouldBe('getComputedStyle(griditem)["min-width"]', '"auto"');
+
+griditem.style.minWidth = 'auto';
+griditem.style.maxWidth = 'auto';
+shouldBe('griditem.style.minWidth', '"auto"');
+shouldBe('griditem.style.maxWidth', '""');
+shouldBe('getComputedStyle(griditem).minWidth', '"auto"');
+
+griditem.style.minWidth = 0;
+shouldBe('griditem.style.minWidth', '"0px"');
+shouldBe('getComputedStyle(griditem)["min-width"]', '"0px"');
+
+shouldBe('griditem.style.minHeight', '""');
+shouldBe('getComputedStyle(griditem)["min-height"]', '"auto"');
+
+griditem.style.minHeight = 'auto';
+griditem.style.maxHeight = 'auto';
+shouldBe('griditem.style.minHeight', '"auto"');
+shouldBe('griditem.style.maxHeight', '""');
+shouldBe('getComputedStyle(griditem).minHeight', '"auto"');
+
+griditem.style.minHeight = 0;
+shouldBe('griditem.style.minHeight', '"0px"');
+shouldBe('getComputedStyle(griditem)["min-height"]', '"0px"');
</script>
<script src=''></script>
Added: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-expected.txt (0 => 189708)
--- trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-expected.txt 2015-09-14 10:40:55 UTC (rev 189708)
@@ -0,0 +1,18 @@
+This test checks min-width|height auto behavior for grids
+
+XXXX
+PASS
+XXXX
+PASS
+XXXX
+PASS
+XXXX
+PASS
+XXXX
+PASS
+XXXX
+PASS
+XXXX
+PASS
+XXXX
+PASS
Property changes on: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow-expected.html (0 => 189708)
--- trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow-expected.html 2015-09-14 10:40:55 UTC (rev 189708)
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<style>
+.item {
+ height: 50px;
+ width: 50px;
+ margin: 50px;
+ font: 50px/1 Ahem;
+}
+
+.overflowVisible {
+ overflow: visible;
+}
+
+.overflowHidden {
+ overflow: hidden;
+}
+
+.overflowScroll {
+ overflow-y: scroll;
+}
+
+.overflowAuto {
+ overflow: auto;
+}
+</style>
+
+<p>This test checks that min-width|height auto behavior for grid items only applies if overflow is visible.</p>
+<p>The test passes if you see three 50x50 squares and one 100x100 square.</p>
+
+<div class="item overflowHidden">XX<br>XX</div>
+
+<div class="item overflowScroll">XX<br>XX</div>
+
+<div class="item overflowAuto">XX<br>XX</div>
+
+<div class="item overflowVisible">XX<br>XX</div>
Property changes on: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow-expected.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow.html (0 => 189708)
--- trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow.html 2015-09-14 10:40:55 UTC (rev 189708)
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<link href="" rel="stylesheet">
+<style>
+.grid {
+ -webkit-grid-template-columns: 50px;
+ -webkit-grid-template-rows: 50px;
+ height: 50px;
+ width: 50px;
+ margin: 50px;
+}
+
+div.grid > div { font: 50px/1 Ahem; }
+
+.overflowVisible { overflow: visible; }
+.overflowHidden { overflow: hidden; }
+.overflowScroll { overflow: scroll; }
+.overflowAuto { overflow: auto; }
+
+</style>
+
+<p>This test checks that min-width|height auto behavior for grid items only applies if overflow is visible.</p>
+<p>The test passes if you see three 50x50 squares and one 100x100 square.</p>
+
+<div class="grid">
+ <div class="overflowHidden">XX<br>XX</div>
+</div>
+
+<div class="grid">
+ <div class="overflowScroll">XX<br>XX</div>
+</div>
+
+<div class="grid">
+ <div class="overflowAuto">XX<br>XX</div>
+</div>
+
+<div class="grid">
+ <div class="overflowVisible">XX<br>XX</div>
+</div>
Property changes on: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto.html (0 => 189708)
--- trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto.html 2015-09-14 10:40:55 UTC (rev 189708)
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<link href="" rel="stylesheet">
+<style>
+.grid {
+ -webkit-grid-template-columns: 5px;
+ -webkit-grid-template-rows: 5px;
+}
+
+.container {
+ width: 200px;
+ height: 100px;
+}
+
+.ahem {
+ font: 25px/1 Ahem;
+}
+
+.minSmaller {
+ min-width: 10px;
+ min-height: 10px;
+}
+
+.minBigger {
+ min-width: 150px;
+ min-height: 75px;
+}
+
+.maxSmaller {
+ max-width: 10px;
+ max-height: 10px;
+}
+
+.maxBigger {
+ max-width: 150px;
+ max-height: 75px;
+}
+
+.minHeightSmaller { min-height: 12px; }
+.minWidthSmaller { min-width: 12px; }
+
+</style>
+<script src=""
+<body _onload_="checkLayout('.grid')">
+
+<p>This test checks min-width|height auto behavior for grids</p>
+
+<div class="container">
+ <div class="grid">
+ <div class="ahem" data-expected-width="100" data-expected-height="25">XXXX</div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="grid">
+ <div class="ahem minSmaller" data-expected-width="10" data-expected-height="10">XXXX</div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="grid">
+ <div class="ahem minBigger" data-expected-width="150" data-expected-height="75">XXXX</div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="grid">
+ <div class="ahem maxSmaller" data-expected-width="10" data-expected-height="10">XXXX</div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="grid">
+ <div class="ahem maxBigger" data-expected-width="100" data-expected-height="25">XXXX</div>
+ </div>
+</div>
+
+<!-- Check that min-width min-height behavior is preserved when using vertical writing modes -->
+<div class="container">
+ <div class="grid verticalLR">
+ <div class="ahem" data-expected-width="25" data-expected-height="100">XXXX</div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="grid verticalLR">
+ <div class="ahem minHeightSmaller" data-expected-width="25" data-expected-height="12">XXXX</div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="grid verticalLR">
+ <div class="ahem minWidthSmaller" data-expected-width="12" data-expected-height="100">XXXX</div>
+ </div>
+</div>
+
+</body>
Property changes on: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:eol-style
Modified: trunk/Source/WebCore/ChangeLog (189707 => 189708)
--- trunk/Source/WebCore/ChangeLog 2015-09-14 10:38:47 UTC (rev 189707)
+++ trunk/Source/WebCore/ChangeLog 2015-09-14 10:40:55 UTC (rev 189708)
@@ -1,3 +1,32 @@
+2015-09-09 Sergio Villar Senin <svil...@igalia.com>
+
+ min-width/height should default to auto for grid items
+ https://bugs.webkit.org/show_bug.cgi?id=146021
+
+ Reviewed by Darin Adler.
+
+ Based on Blink's r194408, r194863 and r194887 by <r...@igalia.com>.
+
+ From the spec (http://dev.w3.org/csswg/css-grid/#grid-items):
+ "The auto value of min-width and min-height behaves on grid
+ items in the relevant axis analogously to its behavior on flex
+ items in the main axis."
+
+ From now on the default value for min-width and min-height for
+ grid items is auto, meaning that in general, grid items won't
+ shrink bellow their content.
+
+ The change is not exactly the same as the one in Blink because
+ this one takes into account vertical writting modes, something
+ that was not well handled in the original one.
+
+ Tests: fast/css-grid-layout/min-width-height-auto-overflow.html
+ fast/css-grid-layout/min-width-height-auto.html
+
+ * rendering/RenderBox.cpp:
+ (WebCore::RenderBox::computeLogicalWidthInRegion):
+ (WebCore::RenderBox::computeLogicalHeight):
+
2015-09-14 Manuel Rego Casasnovas <r...@igalia.com>
[css-grid] Percentage columns should remove scrollbar's width
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (189707 => 189708)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2015-09-14 10:38:47 UTC (rev 189707)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2015-09-14 10:40:55 UTC (rev 189708)
@@ -2347,7 +2347,17 @@
RenderBlock* cb = containingBlock();
LayoutUnit containerLogicalWidth = std::max<LayoutUnit>(0, containingBlockLogicalWidthForContentInRegion(region));
bool hasPerpendicularContainingBlock = cb->isHorizontalWritingMode() != isHorizontalWritingMode();
-
+
+#if ENABLE(CSS_GRID_LAYOUT)
+ if (parent()->isRenderGrid() && style().logicalWidth().isAuto() && style().logicalMinWidth().isAuto() && style().overflowX() == OVISIBLE) {
+ LayoutUnit minLogicalWidth = minPreferredLogicalWidth();
+ if (containerLogicalWidth < minLogicalWidth) {
+ computedValues.m_extent = constrainLogicalWidthInRegionByMinMax(minLogicalWidth, containerLogicalWidth, cb);
+ return;
+ }
+ }
+#endif
+
if (isInline() && !isInlineBlockOrInlineTable()) {
// just calculate margins
computedValues.m_margins.m_start = minimumValueForLength(styleToUse.marginStart(), containerLogicalWidth);
@@ -2738,9 +2748,17 @@
#if ENABLE(CSS_GRID_LAYOUT)
|| parent()->isRenderGrid()
#endif
- ))
- h = Length(overrideLogicalContentHeight(), Fixed);
- else if (treatAsReplaced)
+ )) {
+ LayoutUnit contentHeight = overrideLogicalContentHeight();
+#if ENABLE(CSS_GRID_LAYOUT)
+ if (parent()->isRenderGrid() && style().logicalHeight().isAuto() && style().logicalMinHeight().isAuto() && style().overflowX() == OVISIBLE) {
+ LayoutUnit intrinsicContentHeight = computedValues.m_extent - borderAndPaddingLogicalHeight();
+ if (auto minContentHeight = computeContentLogicalHeight(MinSize, Length(MinContent), intrinsicContentHeight))
+ contentHeight = std::max(contentHeight, constrainLogicalHeightByMinMax(minContentHeight.value(), intrinsicContentHeight));
+ }
+#endif
+ h = Length(contentHeight, Fixed);
+ } else if (treatAsReplaced)
h = Length(computeReplacedLogicalHeight(), Fixed);
else {
h = style().logicalHeight();
