min-width/height should default to auto for grid items
authorsvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 14 Sep 2015 10:40:55 +0000 (10:40 +0000)
committersvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 14 Sep 2015 10:40:55 +0000 (10:40 +0000)
https://bugs.webkit.org/show_bug.cgi?id=146021

Reviewed by Darin Adler.

Based on Blink's r194408, r194863 and r194887 by <rego@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:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@189708 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/min-width-height-auto-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/min-width-height-auto.html [new file with mode: 0644]
LayoutTests/fast/css/auto-min-size-expected.txt
LayoutTests/fast/css/auto-min-size.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBox.cpp

index f264b16..c70142c 100644 (file)
@@ -1,3 +1,22 @@
+2015-09-09  Sergio Villar Senin  <svillar@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@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  <rego@igalia.com>
 
         [css-grid] Percentage columns should remove scrollbar's width
diff --git a/LayoutTests/fast/css-grid-layout/min-width-height-auto-expected.txt b/LayoutTests/fast/css-grid-layout/min-width-height-auto-expected.txt
new file mode 100644 (file)
index 0000000..53b5633
--- /dev/null
@@ -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
diff --git a/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow-expected.html b/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow-expected.html
new file mode 100644 (file)
index 0000000..70ea545
--- /dev/null
@@ -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>
diff --git a/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow.html b/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow.html
new file mode 100644 (file)
index 0000000..bbae695
--- /dev/null
@@ -0,0 +1,38 @@
+<!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>
diff --git a/LayoutTests/fast/css-grid-layout/min-width-height-auto.html b/LayoutTests/fast/css-grid-layout/min-width-height-auto.html
new file mode 100644 (file)
index 0000000..4bf9708
--- /dev/null
@@ -0,0 +1,96 @@
+<!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>
index 3278e17..b763e76 100644 (file)
@@ -26,6 +26,20 @@ PASS flexitem.style.maxHeight is ""
 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
index 619ca4e..cd730bd 100644 (file)
@@ -2,6 +2,7 @@
 <script src='../../resources/js-test-pre.js'></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 @@ shouldBe('getComputedStyle(flexitem).minHeight', '"auto"');
 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='../../resources/js-test-post.js'></script>
index 4674a95..528c7c1 100644 (file)
@@ -1,3 +1,32 @@
+2015-09-09  Sergio Villar Senin  <svillar@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@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  <rego@igalia.com>
 
         [css-grid] Percentage columns should remove scrollbar's width
index 75501b3..d18fbbd 100644 (file)
@@ -2347,7 +2347,17 @@ void RenderBox::computeLogicalWidthInRegion(LogicalExtentComputedValues& compute
     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 @@ void RenderBox::computeLogicalHeight(LayoutUnit logicalHeight, LayoutUnit logica
 #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();