[CSS Grid Layout] Columns set in percentages collapse to auto width
authorrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 14 Apr 2015 04:59:09 +0000 (04:59 +0000)
committerrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 14 Apr 2015 04:59:09 +0000 (04:59 +0000)
https://bugs.webkit.org/show_bug.cgi?id=141435

Reviewed by David Hyatt.

Source/WebCore:

Based on a patch by Sergio Villar Senin  <svillar@igalia.com>.

This patch adds 2 new new methods in RenderBox to determine if the grid
has a definite size or not.

RenderGrid::gridTrackSize() was not checking properly if the grid has or
not an indefinite size.
The condition was including auto which is not indefinite per se. For
example, auto is definite if the containing block is definite.
As the new method is more expensive, we just call it when it's really
needed to avoid performance regressions.

Finally we were setting the override logical width/height to -1 (no
possible resolution) for all the items regardless if they've a relative
width/height or a fixed one.
Added the condition, including not only items with percentage logical
width/height but also relative, to avoid overriding the value for items
with fixed width/height as it's not needed.

Tests: fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html
       fast/css-grid-layout/percent-intrinsic-track-breadth.html
       fast/css-grid-layout/percent-track-breadths-regarding-container-size.html

* rendering/RenderBox.cpp:
(WebCore::logicalWidthIsResolvable):
(WebCore::RenderBox::hasDefiniteLogicalWidth):
(WebCore::RenderBox::percentageLogicalHeightIsResolvableFromBlock):
(WebCore::RenderBox::hasRelativeLogicalWidth):
* rendering/RenderBox.h:
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::hasDefiniteLogicalSize):
(WebCore::RenderGrid::gridTrackSize):
(WebCore::RenderGrid::logicalContentHeightForChild):
(WebCore::RenderGrid::minContentForChild):
(WebCore::RenderGrid::maxContentForChild):
* rendering/RenderGrid.h:

LayoutTests:

Added new tests to check that percentage track breadths are properly
calculated under different sizing conditions.
Modified one test to include relative sizes too.

* fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt:
* fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html:
* fast/css-grid-layout/percent-intrinsic-track-breadth-expected.txt: Added.
* fast/css-grid-layout/percent-intrinsic-track-breadth.html: Added.
* fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt: Added.
* fast/css-grid-layout/percent-track-breadths-regarding-container-size.html: Added.

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

12 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt
LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html
LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBox.cpp
Source/WebCore/rendering/RenderBox.h
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/RenderGrid.h

index d940dad..c987fbd 100644 (file)
@@ -1,3 +1,21 @@
+2015-04-13  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [CSS Grid Layout] Columns set in percentages collapse to auto width
+        https://bugs.webkit.org/show_bug.cgi?id=141435
+
+        Reviewed by David Hyatt.
+
+        Added new tests to check that percentage track breadths are properly
+        calculated under different sizing conditions.
+        Modified one test to include relative sizes too.
+
+        * fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt:
+        * fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html:
+        * fast/css-grid-layout/percent-intrinsic-track-breadth-expected.txt: Added.
+        * fast/css-grid-layout/percent-intrinsic-track-breadth.html: Added.
+        * fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt: Added.
+        * fast/css-grid-layout/percent-track-breadths-regarding-container-size.html: Added.
+
 2015-04-10  Brent Fulgham  <bfulgham@apple.com>
 
         Expand test infrastructure to support scrolling tests
index 99bcf00..a00c12b 100644 (file)
@@ -20,3 +20,23 @@ XXXXX XXXXX XXXXXX
 XXXXX XXXXXX
 XXXXX XXXXX XXXXX XXXXXX
 PASS
+XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
+PASS
+XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
+PASS
+XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
+PASS
+XXXXX XXXXXX
+XXXXX XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXX XXXXX XXXXXX
+PASS
index 7c6f069..a2cff12 100644 (file)
     -webkit-grid-template-columns: 50px 100px;
     -webkit-grid-template-rows: auto auto;
 }
+
+.sizedToGridAreaMinSizes {
+    font: 10px/1 Ahem;
+    min-width: 100%;
+    min-height: 100%;
+}
 </style>
 <script src="../../resources/check-layout.js"></script>
 <body onload="checkLayout('.grid')">
 </div>
 </div>
 
+<div class="unconstrainedContainer" style="position: relative">
+<div class="grid gridMinMaxMinMax">
+    <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
+    <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
+    <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
+    <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
+</div>
+</div>
+
+<div style="position: relative; height: 100px;">
+<div class="grid gridMinMaxMinMax">
+    <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
+    <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
+    <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
+    <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
+</div>
+</div>
+
+<div style="position: relative;">
+<div class="grid gridMinMaxMinMax" style="height: 100px;">
+    <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
+    <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
+    <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="80">XXXXX XXXXXX</div>
+    <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="80">XXXXX XXXXXX</div>
+</div>
+</div>
+
+<div class="unconstrainedContainer" style="position: relative">
+<div class="grid gridAutoAuto">
+    <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
+    <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="30">XXXXX XXXXX XXXXXX</div>
+    <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXXX</div>
+    <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="40">XXXXX XXXXX XXXXX XXXXXX</div>
+</div>
+</div>
+
 </body>
 </html>
diff --git a/LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth-expected.txt b/LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth-expected.txt
new file mode 100644 (file)
index 0000000..ba5bfed
--- /dev/null
@@ -0,0 +1,4 @@
+This test checks that percentage track breadths of intrinsic size are treated as auto.
+
+XXXXX
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth.html b/LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth.html
new file mode 100644 (file)
index 0000000..c38895e
--- /dev/null
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.intrinsic {
+    -webkit-grid-template-rows: max-content;
+    -webkit-grid-template-columns: max-content;
+    height: 500px;
+    width: 500px;
+}
+
+.percentage {
+    -webkit-grid-template-rows: 100%;
+    -webkit-grid-template-columns: 100%;
+    height: 100%;
+    width: 100%;
+}
+</style>
+</head>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.percentage');">
+    <p>This test checks that percentage track breadths of intrinsic size are treated as auto.</p>
+    <div class="grid intrinsic">
+        <div class="grid percentage">
+            <div class="sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt b/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt
new file mode 100644 (file)
index 0000000..58982fd
--- /dev/null
@@ -0,0 +1,42 @@
+This test checks percentage track breadths are resolved properly regarding the container size.
+
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html b/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html
new file mode 100644 (file)
index 0000000..9ebf457
--- /dev/null
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+    -webkit-grid-template-columns: 20% 50% 30%;
+    -webkit-grid-template-rows: 40%;
+}
+
+.fixedSize {
+    width: 400px;
+    height: 400px;
+}
+
+.calculatedSize {
+    width: calc(200px + 20%);
+    height: calc(300px + 10%);
+}
+
+.percentageSize {
+    width: 50%;
+    height: 50%;
+}
+
+.indefiniteSize {
+    width: -webkit-fit-content;
+    height: auto;
+}
+
+.firstRowFirstColumn {
+    color: blue;
+    background-color: cyan;
+}
+
+.firstRowSecondColumn {
+    color: green;
+    background-color: lime;
+}
+
+.firstRowThirdColumn {
+    color: brown;
+    background-color: yellow;
+    -webkit-grid-column: 3;
+    -webkit-grid-row: 1;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+</head>
+<body onload="checkLayout('.grid');">
+    <p>This test checks percentage track breadths are resolved properly regarding the container size.</p>
+    <div class="unconstrainedContainer">
+        <div class="grid">
+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="200" data-expected-height="10">XX</div>
+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="500" data-expected-height="10">XXXXX</div>
+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="300" data-expected-height="10">XXX</div>
+        </div>
+    </div>
+
+    <div class="indefiniteSize">
+        <div class="grid">
+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
+        </div>
+    </div>
+
+    <div class="unconstrainedContainer">
+        <div class="grid fixedSize">
+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
+        </div>
+    </div>
+
+    <div class="indefiniteSize">
+        <div class="grid fixedSize">
+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
+        </div>
+    </div>
+
+    <div class="indefiniteSize">
+        <div class="grid calculatedSize">
+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
+        </div>
+    </div>
+
+    <div class="unconstrainedContainer">
+        <div class="grid calculatedSize">
+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
+        </div>
+    </div>
+
+    <div class="indefiniteSize">
+        <div class="grid percentageSize">
+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
+        </div>
+    </div>
+
+    <div class="unconstrainedContainer">
+        <div class="grid percentageSize">
+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="100" data-expected-height="200">XX</div>
+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="250" data-expected-height="200">XXXXX</div>
+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="150" data-expected-height="200">XXX</div>
+        </div>
+    </div>
+
+    <div class="indefiniteSize">
+        <div class="grid indefiniteSize">
+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
+        </div>
+    </div>
+
+    <div class="unconstrainedContainer">
+        <div class="grid indefiniteSize">
+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
+        </div>
+    </div>
+
+</body>
+</html>
index e167fbc..3e160f0 100644 (file)
@@ -1,3 +1,47 @@
+2015-04-13  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [CSS Grid Layout] Columns set in percentages collapse to auto width
+        https://bugs.webkit.org/show_bug.cgi?id=141435
+
+        Reviewed by David Hyatt.
+
+        Based on a patch by Sergio Villar Senin  <svillar@igalia.com>.
+
+        This patch adds 2 new new methods in RenderBox to determine if the grid
+        has a definite size or not.
+
+        RenderGrid::gridTrackSize() was not checking properly if the grid has or
+        not an indefinite size.
+        The condition was including auto which is not indefinite per se. For
+        example, auto is definite if the containing block is definite.
+        As the new method is more expensive, we just call it when it's really
+        needed to avoid performance regressions.
+
+        Finally we were setting the override logical width/height to -1 (no
+        possible resolution) for all the items regardless if they've a relative
+        width/height or a fixed one.
+        Added the condition, including not only items with percentage logical
+        width/height but also relative, to avoid overriding the value for items
+        with fixed width/height as it's not needed.
+
+        Tests: fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html
+               fast/css-grid-layout/percent-intrinsic-track-breadth.html
+               fast/css-grid-layout/percent-track-breadths-regarding-container-size.html
+
+        * rendering/RenderBox.cpp:
+        (WebCore::logicalWidthIsResolvable):
+        (WebCore::RenderBox::hasDefiniteLogicalWidth):
+        (WebCore::RenderBox::percentageLogicalHeightIsResolvableFromBlock):
+        (WebCore::RenderBox::hasRelativeLogicalWidth):
+        * rendering/RenderBox.h:
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::hasDefiniteLogicalSize):
+        (WebCore::RenderGrid::gridTrackSize):
+        (WebCore::RenderGrid::logicalContentHeightForChild):
+        (WebCore::RenderGrid::minContentForChild):
+        (WebCore::RenderGrid::maxContentForChild):
+        * rendering/RenderGrid.h:
+
 2015-04-13  Chris Dumez  <cdumez@apple.com>
 
         Regression: Scrolling on popsci.com spends too much time in FrameView::viewportsContentsChanged()
index 95764ba..1e169e6 100644 (file)
@@ -4452,6 +4452,39 @@ void RenderBox::clearOverflow()
         flowThread->clearRegionsOverflow(this);
 }
 
+static bool logicalWidthIsResolvable(const RenderBox& renderBox)
+{
+    const RenderBox* box = &renderBox;
+    while (!box->isRenderView() && !box->isOutOfFlowPositioned()
+#if ENABLE(CSS_GRID_LAYOUT)
+        && !box->hasOverrideContainingBlockLogicalWidth()
+#endif
+        && (box->style().logicalWidth().isAuto() || box->isAnonymousBlock()))
+        box = box->containingBlock();
+
+    if (box->style().logicalWidth().isFixed())
+        return true;
+    if (box->isRenderView())
+        return true;
+    // The size of the containing block of an absolutely positioned element is always definite with respect to that
+    // element (http://dev.w3.org/csswg/css-sizing-3/#definite).
+    if (box->isOutOfFlowPositioned())
+        return true;
+#if ENABLE(CSS_GRID_LAYOUT)
+    if (box->hasOverrideContainingBlockLogicalWidth())
+        return box->overrideContainingBlockContentLogicalWidth() != -1;
+#endif
+    if (box->style().logicalWidth().isPercent())
+        return logicalWidthIsResolvable(*box->containingBlock());
+
+    return false;
+}
+
+bool RenderBox::hasDefiniteLogicalWidth() const
+{
+    return logicalWidthIsResolvable(*this);
+}
+
 inline static bool percentageLogicalHeightIsResolvable(const RenderBox* box)
 {
     return RenderBox::percentageLogicalHeightIsResolvableFromBlock(box->containingBlock(), box->isOutOfFlowPositioned());
@@ -4469,6 +4502,11 @@ bool RenderBox::percentageLogicalHeightIsResolvableFromBlock(const RenderBlock*
     while (!cb->isRenderView() && !cb->isBody() && !cb->isTableCell() && !cb->isOutOfFlowPositioned() && cb->style().logicalHeight().isAuto()) {
         if (!inQuirksMode && !cb->isAnonymousBlock())
             break;
+#if ENABLE(CSS_GRID_LAYOUT)
+        if (cb->hasOverrideContainingBlockLogicalHeight())
+            return cb->overrideContainingBlockContentLogicalHeight() != -1;
+#endif
+
         cb = cb->containingBlock();
     }
 
@@ -4501,6 +4539,25 @@ bool RenderBox::percentageLogicalHeightIsResolvableFromBlock(const RenderBlock*
     return false;
 }
 
+bool RenderBox::hasDefiniteLogicalHeight() const
+{
+    const Length& logicalHeight = style().logicalHeight();
+    if (logicalHeight.isIntrinsicOrAuto())
+        return false;
+    if (logicalHeight.isFixed())
+        return true;
+    // The size of the containing block of an absolutely positioned element is always definite with respect to that
+    // element (http://dev.w3.org/csswg/css-sizing-3/#definite).
+    if (isOutOfFlowPositioned())
+        return true;
+#if ENABLE(CSS_GRID_LAYOUT)
+    if (hasOverrideContainingBlockLogicalHeight())
+        return overrideContainingBlockContentLogicalHeight() != -1;
+#endif
+
+    return percentageLogicalHeightIsResolvable(this);
+}
+
 bool RenderBox::hasUnsplittableScrollingOverflow() const
 {
     // We will paginate as long as we don't scroll overflow in the pagination direction.
@@ -4781,6 +4838,13 @@ bool RenderBox::hasRelativeLogicalHeight() const
             || style().logicalMaxHeight().isPercent();
 }
 
+bool RenderBox::hasRelativeLogicalWidth() const
+{
+    return style().logicalWidth().isPercent()
+        || style().logicalMinWidth().isPercent()
+        || style().logicalMaxWidth().isPercent();
+}
+
 static void markBoxForRelayoutAfterSplit(RenderBox& box)
 {
     // FIXME: The table code should handle that automatically. If not,
index e2e257d..34c9f6b 100644 (file)
@@ -442,7 +442,9 @@ public:
     virtual LayoutUnit computeReplacedLogicalWidth(ShouldComputePreferred  = ComputeActual) const;
     virtual LayoutUnit computeReplacedLogicalHeight() const;
 
+    bool hasDefiniteLogicalWidth() const;
     static bool percentageLogicalHeightIsResolvableFromBlock(const RenderBlock* containingBlock, bool outOfFlowPositioned);
+    bool hasDefiniteLogicalHeight() const;
     LayoutUnit computePercentageLogicalHeight(const Length& height) const;
 
     virtual LayoutUnit availableLogicalWidth() const { return contentLogicalWidth(); }
@@ -569,6 +571,7 @@ public:
 
     virtual bool hasRelativeDimensions() const;
     virtual bool hasRelativeLogicalHeight() const;
+    virtual bool hasRelativeLogicalWidth() const;
 
     bool hasHorizontalLayoutOverflow() const
     {
index 3d12eb3..c00df58 100644 (file)
@@ -518,35 +518,44 @@ double RenderGrid::computeNormalizedFractionBreadth(Vector<GridTrack>& tracks, c
     return availableLogicalSpaceIgnoringFractionTracks / accumulatedFractions;
 }
 
+bool RenderGrid::hasDefiniteLogicalSize(GridTrackSizingDirection direction) const
+{
+    return (direction == ForRows) ? hasDefiniteLogicalHeight() : hasDefiniteLogicalWidth();
+}
+
 GridTrackSize RenderGrid::gridTrackSize(GridTrackSizingDirection direction, unsigned i) const
 {
     bool isForColumns = (direction == ForColumns);
     auto& trackStyles =  isForColumns ? style().gridColumns() : style().gridRows();
     auto& trackSize = (i >= trackStyles.size()) ? (isForColumns ? style().gridAutoColumns() : style().gridAutoRows()) : trackStyles[i];
 
-    // If the logical width/height of the grid container is indefinite, percentage values are treated as <auto> (or in
-    // the case of minmax() as min-content for the first position and max-content for the second).
-    Length logicalSize = isForColumns ? style().logicalWidth() : style().logicalHeight();
-    if (logicalSize.isIntrinsicOrAuto()) {
-        const GridLength& oldMinTrackBreadth = trackSize.minTrackBreadth();
-        const GridLength& oldMaxTrackBreadth = trackSize.maxTrackBreadth();
-        return GridTrackSize(oldMinTrackBreadth.isPercentage() ? Length(MinContent) : oldMinTrackBreadth, oldMaxTrackBreadth.isPercentage() ? Length(MaxContent) : oldMaxTrackBreadth);
+    GridLength minTrackBreadth = trackSize.minTrackBreadth();
+    GridLength maxTrackBreadth = trackSize.maxTrackBreadth();
+
+    if (minTrackBreadth.isPercentage() || maxTrackBreadth.isPercentage()) {
+        if (!hasDefiniteLogicalSize(direction)) {
+            if (minTrackBreadth.isPercentage())
+                minTrackBreadth = Length(MinContent);
+            if (maxTrackBreadth.isPercentage())
+                maxTrackBreadth = Length(MaxContent);
+        }
     }
 
-    return trackSize;
+    return GridTrackSize(minTrackBreadth, maxTrackBreadth);
 }
 
 LayoutUnit RenderGrid::logicalContentHeightForChild(RenderBox& child, Vector<GridTrack>& columnTracks)
 {
     LayoutUnit oldOverrideContainingBlockContentLogicalWidth = child.hasOverrideContainingBlockLogicalWidth() ? child.overrideContainingBlockContentLogicalWidth() : LayoutUnit();
     LayoutUnit overrideContainingBlockContentLogicalWidth = gridAreaBreadthForChild(child, ForColumns, columnTracks);
-    if (child.style().logicalHeight().isPercent() || oldOverrideContainingBlockContentLogicalWidth != overrideContainingBlockContentLogicalWidth)
+    if (child.hasRelativeLogicalHeight() || oldOverrideContainingBlockContentLogicalWidth != overrideContainingBlockContentLogicalWidth)
         child.setNeedsLayout(MarkOnlyThis);
 
     child.setOverrideContainingBlockContentLogicalWidth(overrideContainingBlockContentLogicalWidth);
-    // If |child| has a percentage logical height, we shouldn't let it override its intrinsic height, which is
+    // If |child| has a relative logical height, we shouldn't let it override its intrinsic height, which is
     // what we are interested in here. Thus we need to set the override logical height to -1 (no possible resolution).
-    child.setOverrideContainingBlockContentLogicalHeight(-1);
+    if (child.hasRelativeLogicalHeight())
+        child.setOverrideContainingBlockContentLogicalHeight(-1);
     child.layoutIfNeeded();
     return child.logicalHeight() + child.marginLogicalHeight();
 }
@@ -559,6 +568,11 @@ LayoutUnit RenderGrid::minContentForChild(RenderBox& child, GridTrackSizingDirec
         return 0;
 
     if (direction == ForColumns) {
+        // If |child| has a relative logical width, we shouldn't let it override its intrinsic width, which is
+        // what we are interested in here. Thus we need to set the override logical width to -1 (no possible resolution).
+        if (child.hasRelativeLogicalWidth())
+            child.setOverrideContainingBlockContentLogicalWidth(-1);
+
         // FIXME: It's unclear if we should return the intrinsic width or the preferred width.
         // See http://lists.w3.org/Archives/Public/www-style/2013Jan/0245.html
         return child.minPreferredLogicalWidth() + marginIntrinsicLogicalWidthForChild(child);
@@ -575,6 +589,11 @@ LayoutUnit RenderGrid::maxContentForChild(RenderBox& child, GridTrackSizingDirec
         return LayoutUnit();
 
     if (direction == ForColumns) {
+        // If |child| has a relative logical width, we shouldn't let it override its intrinsic width, which is
+        // what we are interested in here. Thus we need to set the override logical width to -1 (no possible resolution).
+        if (child.hasRelativeLogicalWidth())
+            child.setOverrideContainingBlockContentLogicalWidth(-1);
+
         // FIXME: It's unclear if we should return the intrinsic width or the preferred width.
         // See http://lists.w3.org/Archives/Public/www-style/2013Jan/0245.html
         return child.maxPreferredLogicalWidth() + marginIntrinsicLogicalWidthForChild(child);
index f2e0051..dd6ccc9 100644 (file)
@@ -143,6 +143,8 @@ private:
         return m_grid.size();
     }
 
+    bool hasDefiniteLogicalSize(GridTrackSizingDirection) const;
+
     Vector<Vector<Vector<RenderBox*, 1>>> m_grid;
     Vector<LayoutUnit> m_columnPositions;
     Vector<LayoutUnit> m_rowPositions;