No subject
Tue Jan 27 15:54:36 PST 2015
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:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssautominsizeexpectedtxt">trunk/LayoutTests/fast/css/auto-min-size-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssautominsizehtml">trunk/LayoutTests/fast/css/auto-min-size.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderBoxcpp">trunk/Source/WebCore/rendering/RenderBox.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminwidthheightautoexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminwidthheightautooverflowexpectedhtml">trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminwidthheightautooverflowhtml">trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminwidthheightautohtml">trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (189707 => 189708)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2015-09-14 10:38:47 UTC (rev 189707)
+++ trunk/LayoutTests/ChangeLog 2015-09-14 10:40:55 UTC (rev 189708)
</span><span class="lines">@@ -1,3 +1,22 @@
</span><ins>+2015-09-09 Sergio Villar Senin <svillar at 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 <rego at 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:
+
</ins><span class="cx"> 2015-09-14 Manuel Rego Casasnovas <rego at igalia.com>
</span><span class="cx">
</span><span class="cx"> [css-grid] Percentage columns should remove scrollbar's width
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssautominsizeexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/auto-min-size-expected.txt (189707 => 189708)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -26,6 +26,20 @@
</span><span class="cx"> PASS getComputedStyle(flexitem).minHeight is "auto"
</span><span class="cx"> PASS flexitem.style.minHeight is "0px"
</span><span class="cx"> PASS getComputedStyle(flexitem)["min-height"] is "0px"
</span><ins>+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"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssautominsizehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/auto-min-size.html (189707 => 189708)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx"> <script src='../../resources/js-test-pre.js'></script>
</span><span class="cx"> <div id=foo></div>
</span><span class="cx"> <div id="flexbox" style="display: flex;"><div id="flexitem"></div></div>
</span><ins>+<div id="grid" style="display: -webkit-grid;"><div id="griditem"></div></div>
</ins><span class="cx"> <script>
</span><span class="cx"> div = document.getElementById('foo');
</span><span class="cx"> shouldBe('div.style.minWidth', '""');
</span><span class="lines">@@ -56,5 +57,32 @@
</span><span class="cx"> flexitem.style.minHeight = 0;
</span><span class="cx"> shouldBe('flexitem.style.minHeight', '"0px"');
</span><span class="cx"> shouldBe('getComputedStyle(flexitem)["min-height"]', '"0px"');
</span><ins>+
+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"');
</ins><span class="cx"> </script>
</span><span class="cx"> <script src='../../resources/js-test-post.js'></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminwidthheightautoexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-expected.txt (0 => 189708)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,18 @@
</span><ins>+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
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-expected.txt
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutminwidthheightautooverflowexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow-expected.html (0 => 189708)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,36 @@
</span><ins>+<!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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow-expected.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutminwidthheightautooverflowhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow.html (0 => 189708)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,38 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" 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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutminwidthheightautohtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto.html (0 => 189708)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,96 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" 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="../../resources/check-layout.js"></script>
+<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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (189707 => 189708)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,32 @@
</span><ins>+2015-09-09 Sergio Villar Senin <svillar at 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 <rego at 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):
+
</ins><span class="cx"> 2015-09-14 Manuel Rego Casasnovas <rego at igalia.com>
</span><span class="cx">
</span><span class="cx"> [css-grid] Percentage columns should remove scrollbar's width
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (189707 => 189708)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -2347,7 +2347,17 @@
</span><span class="cx"> RenderBlock* cb = containingBlock();
</span><span class="cx"> LayoutUnit containerLogicalWidth = std::max<LayoutUnit>(0, containingBlockLogicalWidthForContentInRegion(region));
</span><span class="cx"> bool hasPerpendicularContainingBlock = cb->isHorizontalWritingMode() != isHorizontalWritingMode();
</span><del>-
</del><ins>+
+#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
+
</ins><span class="cx"> if (isInline() && !isInlineBlockOrInlineTable()) {
</span><span class="cx"> // just calculate margins
</span><span class="cx"> computedValues.m_margins.m_start = minimumValueForLength(styleToUse.marginStart(), containerLogicalWidth);
</span><span class="lines">@@ -2738,9 +2748,17 @@
</span><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span><span class="cx"> || parent()->isRenderGrid()
</span><span class="cx"> #endif
</span><del>- ))
- h = Length(overrideLogicalContentHeight(), Fixed);
- else if (treatAsReplaced)
</del><ins>+ )) {
+ 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)
</ins><span class="cx"> h = Length(computeReplacedLogicalHeight(), Fixed);
</span><span class="cx"> else {
</span><span class="cx"> h = style().logicalHeight();
</span></span></pre>
</div>
</div>
</body>
</html>
More information about the webkit-changes
mailing list