Commit da340247 authored by rego's avatar rego Committed by Commit bot

[css-grid] Stretch should grow and shrink items to fit its grid area

After some discussions the CSS WG agreed that stretch should not only
grow items, but also stretch them to fit its grid area.
That way the "min-width|height: auto" is somehow ignored for grid items.
More info at: https://github.com/w3c/csswg-drafts/issues/283

The good part is that this allows us to remove some ugly code we've
in LayoutBox that was only used by Grid Layout.

The tests have been updated according to the new expected behavior.

For images, we'll be stretching on both axis right nos, so the aspect
ratio won't be preserved. The default behavior might change in those
cases, but that should be implemented in a different patch.

BUG=653433

Review-Url: https://codereview.chromium.org/2398043002
Cr-Commit-Position: refs/heads/master@{#423839}
parent 61850259
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
<div class="wrapper"> <div class="wrapper">
<div class="grid min-content oneColumn50" data-expected-width="20" data-expected-height="20"> <div class="grid min-content oneColumn50" data-expected-width="20" data-expected-height="20">
<div class="firstRowFirstColumn" <div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20"> data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="20">
XX X XX X
</div> </div>
</div> </div>
......
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
<p>Stretching allowed in both axis | column smaller than content-box, row bigger than margin-box</p> <p>Stretching allowed in both axis | column smaller than content-box, row bigger than margin-box</p>
<div class="container"> <div class="container">
<div class="grid columnsSmallerThanContentBox rowsBiggerThanMarginBox"> <div class="grid columnsSmallerThanContentBox rowsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div> <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="40" data-expected-height="60">XXXX</div>
</div> </div>
</div> </div>
...@@ -115,7 +115,7 @@ ...@@ -115,7 +115,7 @@
<p>Stretching allowed in both axis | row smaller than content-box, column bigger than margin-box</p> <p>Stretching allowed in both axis | row smaller than content-box, column bigger than margin-box</p>
<div class="container"> <div class="container">
<div class="grid rowsSmallerThanContentBox columnsBiggerThanMarginBox"> <div class="grid rowsSmallerThanContentBox columnsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div> <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="0">XXXX</div>
</div> </div>
</div> </div>
...@@ -129,7 +129,7 @@ ...@@ -129,7 +129,7 @@
<p>Stretching allowed in both axis | row bigger than content-box, column bigger column margin-box</p> <p>Stretching allowed in both axis | row bigger than content-box, column bigger column margin-box</p>
<div class="container"> <div class="container">
<div class="grid rowsBiggerThanContentBox columnsBiggerThanMarginBox"> <div class="grid rowsBiggerThanContentBox columnsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div> <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="10">XXXX</div>
</div> </div>
</div> </div>
......
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="ahem" data-expected-width="100" data-expected-height="25">XXXX</div> <div class="ahem" data-expected-width="5" data-expected-height="5">XXXX</div>
</div> </div>
</div> </div>
...@@ -65,13 +65,13 @@ ...@@ -65,13 +65,13 @@
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="ahem maxSmaller" data-expected-width="10" data-expected-height="10">XXXX</div> <div class="ahem maxSmaller" data-expected-width="5" data-expected-height="5">XXXX</div>
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="ahem maxBigger" data-expected-width="100" data-expected-height="25">XXXX</div> <div class="ahem maxBigger" data-expected-width="5" data-expected-height="5">XXXX</div>
</div> </div>
</div> </div>
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
<!-- Verify we are applying correctly the min-content size. --> <!-- Verify we are applying correctly the min-content size. -->
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="ahem" data-expected-width="75" data-expected-height="50">XXX X</div> <div class="ahem" data-expected-width="5" data-expected-height="5">XXX X</div>
</div> </div>
</div> </div>
...@@ -122,19 +122,19 @@ ...@@ -122,19 +122,19 @@
<!-- Check that min-width min-height behavior is preserved when using vertical writing modes --> <!-- Check that min-width min-height behavior is preserved when using vertical writing modes -->
<div class="container"> <div class="container">
<div class="grid verticalLR"> <div class="grid verticalLR">
<div class="ahem" data-expected-width="25" data-expected-height="100">XXXX</div> <div class="ahem" data-expected-width="5" data-expected-height="5">XXXX</div>
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="grid verticalLR"> <div class="grid verticalLR">
<div class="ahem minHeightSmaller" data-expected-width="25" data-expected-height="12">XXXX</div> <div class="ahem minHeightSmaller" data-expected-width="5" data-expected-height="12">XXXX</div>
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="grid verticalLR"> <div class="grid verticalLR">
<div class="ahem minWidthSmaller" data-expected-width="12" data-expected-height="100">XXXX</div> <div class="ahem minWidthSmaller" data-expected-width="12" data-expected-height="5">XXXX</div>
</div> </div>
</div> </div>
......
...@@ -2554,14 +2554,6 @@ void LayoutBox::computeLogicalWidth( ...@@ -2554,14 +2554,6 @@ void LayoutBox::computeLogicalWidth(
if (treatAsReplaced) { if (treatAsReplaced) {
computedValues.m_extent = computedValues.m_extent =
LayoutUnit(logicalWidthLength.value()) + borderAndPaddingLogicalWidth(); LayoutUnit(logicalWidthLength.value()) + borderAndPaddingLogicalWidth();
} else if (parent()->isLayoutGrid() && style()->logicalWidth().isAuto() &&
style()->logicalMinWidth().isAuto() &&
style()->overflowInlineDirection() == OverflowVisible &&
containerWidthInInlineDirection < minPreferredLogicalWidth()) {
// TODO (lajava) Move this logic to the LayoutGrid class.
// Implied minimum size of Grid items.
computedValues.m_extent = constrainLogicalWidthByMinMax(
minPreferredLogicalWidth(), containerWidthInInlineDirection, cb);
} else { } else {
LayoutUnit preferredWidth = LayoutUnit preferredWidth =
computeLogicalWidthUsing(MainOrPreferredSize, styleToUse.logicalWidth(), computeLogicalWidthUsing(MainOrPreferredSize, styleToUse.logicalWidth(),
...@@ -2994,20 +2986,7 @@ void LayoutBox::computeLogicalHeight( ...@@ -2994,20 +2986,7 @@ void LayoutBox::computeLogicalHeight(
// FIXME: Account for writing-mode in flexible boxes. // FIXME: Account for writing-mode in flexible boxes.
// https://bugs.webkit.org/show_bug.cgi?id=46418 // https://bugs.webkit.org/show_bug.cgi?id=46418
if (hasOverrideLogicalContentHeight()) { if (hasOverrideLogicalContentHeight()) {
LayoutUnit contentHeight = overrideLogicalContentHeight(); h = Length(overrideLogicalContentHeight(), Fixed);
if (parent()->isLayoutGrid() && style()->logicalMinHeight().isAuto() &&
style()->overflowY() == OverflowVisible) {
ASSERT(style()->logicalHeight().isAuto());
LayoutUnit minContentHeight = computeContentLogicalHeight(
MinSize, Length(MinContent),
computedValues.m_extent - borderAndPaddingLogicalHeight());
contentHeight = std::max(
contentHeight,
constrainContentBoxLogicalHeightByMinMax(
minContentHeight,
computedValues.m_extent - borderAndPaddingLogicalHeight()));
}
h = Length(contentHeight, Fixed);
} else if (treatAsReplaced) { } else if (treatAsReplaced) {
h = Length(computeReplacedLogicalHeight(), Fixed); h = Length(computeReplacedLogicalHeight(), Fixed);
} else { } else {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment