Attachment #276650 for bug #156711

View Details Raw Unified Return to Bug 156711



2016-04-18  Sergio Villar Senin  <svillar@igalia.com>

        [css-grid] Use the margin box for non-auto minimum sizes
        https://bugs.webkit.org/show_bug.cgi?id=156711

        Reviewed by NOBODY (OOPS!).

        When computing the min-size of items with non-auto minimum height/width we are incorrectly
        returning the size of the border box, and thus incorrectly ignoring the margins of the item.

        This is a follow up patch of r199153 were we added the missing border and paddings for
        heights. Contrary to that, we were not including margins for both axis.

        This CL requires 3 different interrelated changes:
        - Add the margins to the min-size returned by minSizeForChild (might require a layout).
        - Refactor and extract width computations from logicalHeightForChild(); not totally
        mandatory but pretty logical and helpful.
        - Use a new update function to isolate the computation of the override width.

        Test: fast/css-grid-layout/min-width-margin-box.html

        * rendering/RenderBox.cpp:
        (WebCore::RenderBox::computeInlineDirectionMargins): Added const to a parameter.
        * rendering/RenderBox.h:
        * rendering/RenderGrid.cpp:
        (WebCore::RenderGrid::computeTrackSizesForDirection): Initialize the sizingOperation.
        (WebCore::RenderGrid::computeIntrinsicLogicalWidths): Ditto.
        (WebCore::RenderGrid::computeIntrinsicLogicalHeight): Ditto.
        (WebCore::RenderGrid::logicalHeightForChild): Renamed from logicalContentHeightForChild as
        it no longer returns the content size but the outer size.
        (WebCore::RenderGrid::minSizeForChild):
        (WebCore::RenderGrid::updateOverrideContainingBlockContentLogicalWidthForChild): Extracted
        from logicalHeightForChild().
        (WebCore::RenderGrid::minContentForChild): Update override width if needed.
        (WebCore::RenderGrid::maxContentForChild): Ditto.
        (WebCore::RenderGrid::computeMarginLogicalSizeForChild): Generalized from
        computeMarginLogicalHeightForChild(), it can now compute also margins for the inline
        direction.
        (WebCore::RenderGrid::availableAlignmentSpaceForChildBeforeStretching):
        (WebCore::RenderGrid::logicalContentHeightForChild): Deleted.
        (WebCore::RenderGrid::computeMarginLogicalHeightForChild): Deleted.
        * rendering/RenderGrid.h:

2016-04-15  Chris Dumez  <cdumez@apple.com>

        Rename [GlobalContext] extended attribute to [Exposed] and align with WebIDL

Lines 2614-2620 bool RenderBox::sizesLogicalWidthToFitContent(SizeType widthType) const a/Source/WebCore/rendering/RenderBox.cpp_sec1
- a/Source/WebCore/rendering/RenderBox.cpp -1 / +1 lines
2614	return false;	2614	return false;
2615	}	2615	}
2616		2616
2617	void RenderBox::computeInlineDirectionMargins(RenderBlock& containingBlock, LayoutUnit containerWidth, LayoutUnit childWidth, LayoutUnit& marginStart, LayoutUnit& marginEnd) const	2617	void RenderBox::computeInlineDirectionMargins(const RenderBlock& containingBlock, LayoutUnit containerWidth, LayoutUnit childWidth, LayoutUnit& marginStart, LayoutUnit& marginEnd) const
2618	{	2618	{
2619	const RenderStyle& containingBlockStyle = containingBlock.style();	2619	const RenderStyle& containingBlockStyle = containingBlock.style();
2620	Length marginStartLength = style().marginStartUsing(&containingBlockStyle);	2620	Length marginStartLength = style().marginStartUsing(&containingBlockStyle);

Lines 366-372 public: a/Source/WebCore/rendering/RenderBox.h_sec1
- a/Source/WebCore/rendering/RenderBox.h -1 / +1 lines
366	};	366	};
367	// Resolve auto margins in the inline direction of the containing block so that objects can be pushed to the start, middle or end	367	// Resolve auto margins in the inline direction of the containing block so that objects can be pushed to the start, middle or end
368	// of the containing block.	368	// of the containing block.
369	void computeInlineDirectionMargins(RenderBlock& containingBlock, LayoutUnit containerWidth, LayoutUnit childWidth, LayoutUnit& marginStart, LayoutUnit& marginEnd) const;	369	void computeInlineDirectionMargins(const RenderBlock& containingBlock, LayoutUnit containerWidth, LayoutUnit childWidth, LayoutUnit& marginStart, LayoutUnit& marginEnd) const;
370		370
371	// Used to resolve margins in the containing block's block-flow direction.	371	// Used to resolve margins in the containing block's block-flow direction.
372	void computeBlockDirectionMargins(const RenderBlock& containingBlock, LayoutUnit& marginBefore, LayoutUnit& marginAfter) const;	372	void computeBlockDirectionMargins(const RenderBlock& containingBlock, LayoutUnit& marginBefore, LayoutUnit& marginAfter) const;

Lines 229-234 public: a/Source/WebCore/rendering/RenderGrid.cpp_sec1
- a/Source/WebCore/rendering/RenderGrid.cpp -13 / +41 lines
229	Optional<LayoutUnit> freeSpaceForDirection(GridTrackSizingDirection direction) { return direction == ForColumns ? freeSpaceForColumns : freeSpaceForRows; }	229	Optional<LayoutUnit> freeSpaceForDirection(GridTrackSizingDirection direction) { return direction == ForColumns ? freeSpaceForColumns : freeSpaceForRows; }
230	void setFreeSpaceForDirection(GridTrackSizingDirection, Optional<LayoutUnit> freeSpace);	230	void setFreeSpaceForDirection(GridTrackSizingDirection, Optional<LayoutUnit> freeSpace);
231		231
		232	enum SizingOperation { TrackSizing, IntrinsicSizeComputation };
		233	SizingOperation sizingOperation { TrackSizing };
		234
232	private:	235	private:
233	Optional<LayoutUnit> freeSpaceForColumns;	236	Optional<LayoutUnit> freeSpaceForColumns;
234	Optional<LayoutUnit> freeSpaceForRows;	237	Optional<LayoutUnit> freeSpaceForRows;
Lines 331-336 void RenderGrid::computeTrackSizesForDirection(GridTrackSizingDirection directio a/Source/WebCore/rendering/RenderGrid.cpp_sec2
331	{	334	{
332	LayoutUnit totalGuttersSize = guttersSize(direction, direction == ForRows ? gridRowCount() : gridColumnCount());	335	LayoutUnit totalGuttersSize = guttersSize(direction, direction == ForRows ? gridRowCount() : gridColumnCount());
333	sizingData.setFreeSpaceForDirection(direction, freeSpace - totalGuttersSize);	336	sizingData.setFreeSpaceForDirection(direction, freeSpace - totalGuttersSize);
		337	sizingData.sizingOperation = GridSizingData::TrackSizing;
334		338
335	LayoutUnit baseSizes, growthLimits;	339	LayoutUnit baseSizes, growthLimits;
336	computeUsedBreadthOfGridTracks(direction, sizingData, baseSizes, growthLimits);	340	computeUsedBreadthOfGridTracks(direction, sizingData, baseSizes, growthLimits);
Lines 432-437 void RenderGrid::computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, Layo a/Source/WebCore/rendering/RenderGrid.cpp_sec3
432		436
433	GridSizingData sizingData(gridColumnCount(), gridRowCount());	437	GridSizingData sizingData(gridColumnCount(), gridRowCount());
434	sizingData.setFreeSpaceForDirection(ForColumns, Nullopt);	438	sizingData.setFreeSpaceForDirection(ForColumns, Nullopt);
		439	sizingData.sizingOperation = GridSizingData::IntrinsicSizeComputation;
435	const_cast<RenderGrid*>(this)->computeUsedBreadthOfGridTracks(ForColumns, sizingData, minLogicalWidth, maxLogicalWidth);	440	const_cast<RenderGrid*>(this)->computeUsedBreadthOfGridTracks(ForColumns, sizingData, minLogicalWidth, maxLogicalWidth);
436		441
437	LayoutUnit totalGuttersSize = guttersSize(ForColumns, sizingData.columnTracks.size());	442	LayoutUnit totalGuttersSize = guttersSize(ForColumns, sizingData.columnTracks.size());
Lines 450-455 void RenderGrid::computeIntrinsicLogicalHeight(GridSizingData& sizingData) a/Source/WebCore/rendering/RenderGrid.cpp_sec4
450	{	455	{
451	ASSERT(tracksAreWiderThanMinTrackBreadth(ForColumns, sizingData));	456	ASSERT(tracksAreWiderThanMinTrackBreadth(ForColumns, sizingData));
452	sizingData.setFreeSpaceForDirection(ForRows, Nullopt);	457	sizingData.setFreeSpaceForDirection(ForRows, Nullopt);
		458	sizingData.sizingOperation = GridSizingData::IntrinsicSizeComputation;
453	LayoutUnit minHeight, maxHeight;	459	LayoutUnit minHeight, maxHeight;
454	computeUsedBreadthOfGridTracks(ForRows, sizingData, minHeight, maxHeight);	460	computeUsedBreadthOfGridTracks(ForRows, sizingData, minHeight, maxHeight);
455		461
Lines 713-719 GridTrackSize RenderGrid::gridTrackSize(GridTrackSizingDirection direction, unsi a/Source/WebCore/rendering/RenderGrid.cpp_sec5
713	return GridTrackSize(minTrackBreadth, maxTrackBreadth);	719	return GridTrackSize(minTrackBreadth, maxTrackBreadth);
714	}	720	}
715		721
716	LayoutUnit RenderGrid::logicalContentHeightForChild(RenderBox& child, GridSizingData& sizingData)	722	LayoutUnit RenderGrid::logicalHeightForChild(RenderBox& child, GridSizingData& sizingData)
717	{	723	{
718	Optional<LayoutUnit> oldOverrideContainingBlockContentLogicalWidth = child.hasOverrideContainingBlockLogicalWidth() ? child.overrideContainingBlockContentLogicalWidth() : LayoutUnit();	724	Optional<LayoutUnit> oldOverrideContainingBlockContentLogicalWidth = child.hasOverrideContainingBlockLogicalWidth() ? child.overrideContainingBlockContentLogicalWidth() : LayoutUnit();
719	LayoutUnit overrideContainingBlockContentLogicalWidth = gridAreaBreadthForChild(child, ForColumns, sizingData.columnTracks);	725	LayoutUnit overrideContainingBlockContentLogicalWidth = gridAreaBreadthForChild(child, ForColumns, sizingData.columnTracks);
Lines 724-730 LayoutUnit RenderGrid::logicalContentHeightForChild(RenderBox& child, GridSizing a/Source/WebCore/rendering/RenderGrid.cpp_sec6
724	if (child.needsLayout())	730	if (child.needsLayout())
725	child.clearOverrideLogicalContentHeight();	731	child.clearOverrideLogicalContentHeight();
726		732
727	child.setOverrideContainingBlockContentLogicalWidth(overrideContainingBlockContentLogicalWidth);
728	// If \|child\| has a relative logical height, we shouldn't let it override its intrinsic height, which is	733	// If \|child\| has a relative logical height, we shouldn't let it override its intrinsic height, which is
729	// what we are interested in here. Thus we need to set the override logical height to Nullopt (no possible resolution).	734	// what we are interested in here. Thus we need to set the override logical height to Nullopt (no possible resolution).
730	if (child.hasRelativeLogicalHeight())	735	if (child.hasRelativeLogicalHeight())
Lines 747-756 LayoutUnit RenderGrid::minSizeForChild(RenderBox& child, GridTrackSizingDirectio a/Source/WebCore/rendering/RenderGrid.cpp_sec7
747	if (!childSize.isAuto() \|\| childMinSize.isAuto())	752	if (!childSize.isAuto() \|\| childMinSize.isAuto())
748	return minContentForChild(child, direction, sizingData);	753	return minContentForChild(child, direction, sizingData);
749		754
750	if (isRowAxis)	755	bool overrideLogicalWidthHasChanged = updateOverrideContainingBlockContentLogicalWidthForChild(child, sizingData);
751	return child.computeLogicalWidthInRegionUsing(MinSize, childMinSize, contentLogicalWidth(), *this, nullptr);	756	if (isRowAxis) {
		757	LayoutUnit marginLogicalWidth = sizingData.sizingOperation == GridSizingData::TrackSizing ? computeMarginLogicalSizeForChild(ForColumns, child) : marginIntrinsicLogicalWidthForChild(child);
		758	return child.computeLogicalWidthInRegionUsing(MinSize, childMinSize, child.overrideContainingBlockContentLogicalWidth().valueOr(0), *this, nullptr) + marginLogicalWidth;
		759	}
		760
		761	if (overrideLogicalWidthHasChanged)
		762	child.setNeedsLayout(MarkOnlyThis);
		763	child.layoutIfNeeded();
		764	return child.computeLogicalHeightUsing(MinSize, childMinSize, Nullopt).valueOr(0) + child.marginLogicalHeight() + child.scrollbarLogicalHeight();
		765	}
		766
		767	bool RenderGrid::updateOverrideContainingBlockContentLogicalWidthForChild(RenderBox& child, GridSizingData& sizingData)
		768	{
		769	LayoutUnit overrideWidth = gridAreaBreadthForChild(child, ForColumns, sizingData.columnTracks);
		770	if (child.hasOverrideContainingBlockLogicalWidth() && child.overrideContainingBlockContentLogicalWidth() == overrideWidth)
		771	return false;
752		772
753	return child.computeLogicalHeightUsing(MinSize, childMinSize, Nullopt).valueOr(0);	773	child.setOverrideContainingBlockContentLogicalWidth(overrideWidth);
		774	return true;
754	}	775	}
755		776
756	LayoutUnit RenderGrid::minContentForChild(RenderBox& child, GridTrackSizingDirection direction, GridSizingData& sizingData)	777	LayoutUnit RenderGrid::minContentForChild(RenderBox& child, GridTrackSizingDirection direction, GridSizingData& sizingData)
Lines 771-777 LayoutUnit RenderGrid::minContentForChild(RenderBox& child, GridTrackSizingDirec a/Source/WebCore/rendering/RenderGrid.cpp_sec8
771	return child.minPreferredLogicalWidth() + marginIntrinsicLogicalWidthForChild(child);	792	return child.minPreferredLogicalWidth() + marginIntrinsicLogicalWidthForChild(child);
772	}	793	}
773		794
774	return logicalContentHeightForChild(child, sizingData);	795	if (updateOverrideContainingBlockContentLogicalWidthForChild(child, sizingData))
		796	child.setNeedsLayout(MarkOnlyThis);
		797	return logicalHeightForChild(child, sizingData);
775	}	798	}
776		799
777	LayoutUnit RenderGrid::maxContentForChild(RenderBox& child, GridTrackSizingDirection direction, GridSizingData& sizingData)	800	LayoutUnit RenderGrid::maxContentForChild(RenderBox& child, GridTrackSizingDirection direction, GridSizingData& sizingData)
Lines 792-798 LayoutUnit RenderGrid::maxContentForChild(RenderBox& child, GridTrackSizingDirec a/Source/WebCore/rendering/RenderGrid.cpp_sec9
792	return child.maxPreferredLogicalWidth() + marginIntrinsicLogicalWidthForChild(child);	815	return child.maxPreferredLogicalWidth() + marginIntrinsicLogicalWidthForChild(child);
793	}	816	}
794		817
795	return logicalContentHeightForChild(child, sizingData);	818	if (updateOverrideContainingBlockContentLogicalWidthForChild(child, sizingData))
		819	child.setNeedsLayout(MarkOnlyThis);
		820	return logicalHeightForChild(child, sizingData);
796	}	821	}
797		822
798	class GridItemWithSpan {	823	class GridItemWithSpan {
Lines 1676-1691 LayoutUnit RenderGrid::marginLogicalHeightForChild(const RenderBox& child) const a/Source/WebCore/rendering/RenderGrid.cpp_sec10
1676	return isHorizontalWritingMode() ? child.verticalMarginExtent() : child.horizontalMarginExtent();	1701	return isHorizontalWritingMode() ? child.verticalMarginExtent() : child.horizontalMarginExtent();
1677	}	1702	}
1678		1703
1679	LayoutUnit RenderGrid::computeMarginLogicalHeightForChild(const RenderBox& child) const	1704	LayoutUnit RenderGrid::computeMarginLogicalSizeForChild(GridTrackSizingDirection direction, const RenderBox& child) const
1680	{	1705	{
1681	if (!child.style().hasMargin())	1706	if (!child.style().hasMargin())
1682	return 0;	1707	return 0;
1683		1708
1684	LayoutUnit marginBefore;	1709	LayoutUnit marginStart;
1685	LayoutUnit marginAfter;	1710	LayoutUnit marginEnd;
1686	child.computeBlockDirectionMargins(*this, marginBefore, marginAfter);	1711	if (direction == ForColumns)
		1712	child.computeInlineDirectionMargins(*this, child.containingBlockLogicalWidthForContentInRegion(nullptr), child.logicalWidth(), marginStart, marginEnd);
		1713	else
		1714	child.computeBlockDirectionMargins(*this, marginStart, marginEnd);
1687		1715
1688	return marginBefore + marginAfter;	1716	return marginStart + marginEnd;
1689	}	1717	}
1690		1718
1691	LayoutUnit RenderGrid::availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox& child) const	1719	LayoutUnit RenderGrid::availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox& child) const
Lines 1693-1699 LayoutUnit RenderGrid::availableAlignmentSpaceForChildBeforeStretching(LayoutUni a/Source/WebCore/rendering/RenderGrid.cpp_sec11
1693	// Because we want to avoid multiple layouts, stretching logic might be performed before	1721	// Because we want to avoid multiple layouts, stretching logic might be performed before
1694	// children are laid out, so we can't use the child cached values. Hence, we need to	1722	// children are laid out, so we can't use the child cached values. Hence, we need to
1695	// compute margins in order to determine the available height before stretching.	1723	// compute margins in order to determine the available height before stretching.
1696	return gridAreaBreadthForChild - (child.needsLayout() ? computeMarginLogicalHeightForChild(child) : marginLogicalHeightForChild(child));	1724	return gridAreaBreadthForChild - (child.needsLayout() ? computeMarginLogicalSizeForChild(ForRows, child) : marginLogicalHeightForChild(child));
1697	}	1725	}
1698		1726
1699	// FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.	1727	// FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.




    GridTrackSize gridTrackSize(GridTrackSizingDirection, unsigned) const;

    bool updateOverrideContainingBlockContentLogicalWidthForChild(RenderBox&, GridSizingData&);
    LayoutUnit logicalHeightForChild(RenderBox&, GridSizingData&);
    LayoutUnit minSizeForChild(RenderBox&, GridTrackSizingDirection, GridSizingData&);
    LayoutUnit minContentForChild(RenderBox&, GridTrackSizingDirection, GridSizingData&);
    LayoutUnit maxContentForChild(RenderBox&, GridTrackSizingDirection, GridSizingData&);

    void paintChildren(PaintInfo& forSelf, const LayoutPoint& paintOffset, PaintInfo& forChild, bool usePrintRect) override;
    bool needToStretchChildLogicalHeight(const RenderBox&) const;
    LayoutUnit marginLogicalHeightForChild(const RenderBox&) const;
    LayoutUnit computeMarginLogicalSizeForChild(GridTrackSizingDirection, const RenderBox&) const;
    LayoutUnit availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox&) const;
    void applyStretchAlignmentToChildIfNeeded(RenderBox&);
    bool hasAutoMarginsInColumnAxis(const RenderBox&) const;



2016-04-18  Sergio Villar Senin  <svillar@igalia.com>

        [css-grid] Use the margin box for non-auto minimum sizes
        https://bugs.webkit.org/show_bug.cgi?id=156711

        Reviewed by NOBODY (OOPS!).

        * fast/css-grid-layout/min-height-border-box.html:
        * fast/css-grid-layout/min-width-margin-box-expected.txt: Added.
        * fast/css-grid-layout/min-width-margin-box.html: Added.

2016-04-15  Carlos Garcia Campos  <cgarcia@igalia.com>

        Selection.deleteFromDocument should not leave a selection character



}

.container { width: 150px; }
.borderPaddingMargin {
    border-width: 2px 3px 5px 9px;
    border-color: blue;
    border-style: solid;
    padding: 4px 9px 12px 20px;
    margin: 7px 10px 12px 14px;
}

</style>

</div>

<div class="container">
    <div class="grid" data-expected-width="150" data-expected-height="77">
        <div class="item borderPaddingMargin" data-expected-width="116" data-expected-height="48">XXX</div>
    </div>
</div>


</div>

<div class="container">
    <div class="grid" data-expected-width="150" data-expected-height="52">
        <div class="item borderPaddingMargin" style="min-height: 0px;" data-expected-width="116" data-expected-height="23">XXX</div>
    </div>
</div>


</div>

<div class="container">
    <div class="grid" data-expected-width="150" data-expected-height="52">
        <div class="item alignSelfStart borderPaddingMargin" style="min-height: 0px;" data-expected-width="116" data-expected-height="48">XXX</div>
    </div>
</div>



<div class="container">
    <div class="grid" style="height: 15px;" data-expected-width="150" data-expected-height="25">
        <div class="item borderPaddingMargin" style="min-height: 0px;" data-expected-width="116" data-expected-height="23">XXX</div>
    </div>
</div>



<div class="container">
    <div class="grid" style="height: 15px;" data-expected-width="150" data-expected-height="25">
        <div class="item alignSelfStart borderPaddingMargin" style="min-height: 0px;" data-expected-width="116" data-expected-height="48">XXX</div>
    </div>
</div>


</div>

<div class="container">
    <div class="grid" data-expected-width="150" data-expected-height="82">
        <div class="item borderPaddingMargin" style="min-height: 30px;" data-expected-width="116" data-expected-height="53">XXX</div>
    </div>
</div>


</div>

<div class="container">
    <div class="grid" data-expected-width="150" data-expected-height="82">
        <div class="item alignSelfStart borderPaddingMargin" style="min-height: 30px;" data-expected-width="116" data-expected-height="53">XXX</div>
    </div>
</div>




grid width: auto

XXXX
PASS
XXXX
PASS
min-width: 0px. grid height: auto

XXXX
PASS
XXXX
PASS
min-width: 0px. grid height: 15px

XXXX
PASS
XXXX
PASS
min-width: 125px. grid height: auto

XXXX
PASS
XXXX
PASS
min-width: 50%. grid height: auto

XXX XX
PASS
XXX XX
PASS
min-width: min-content. grid height: auto

XXX XX
PASS
XXX XX
PASS
min-width: max-content. grid height: auto

XXX XX
PASS
XXX XX
PASS



<!DOCTYPE html>
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
<style>
.grid {
    border: 5px solid magenta;
    margin-bottom: 60px;
    -webkit-grid-template-columns: minmax(auto, 0px);
}

.item {
    font: 25px/1 Ahem;
}

.stretchedItem {
    background-color: green;
    -webkit-grid-row: 2;
    height: 15px;
}

.container { width: 150px; }

.borderPaddingMargin {
    margin: 7px 10px 12px 14px;
    border-width: 2px 3px 5px 9px;
    border-style: solid;
    border-color: blue;
    padding: 4px 9px 12px 20px;
}

</style>

<script src="../../resources/check-layout.js"></script>

<body onload="checkLayout('.grid')">

<h3>grid width: auto</h3>
<div class="container">
    <div class="grid" data-expected-width="150" data-expected-height="50">
        <div class="item" data-expected-width="100" data-expected-height="25">XXXX</div>
        <div class="stretchedItem" data-expected-width="100" data-expected-height="15"></div>
    </div>
</div>

<div class="container">
    <div class="grid" data-expected-width="150" data-expected-height="92">
        <div class="item borderPaddingMargin" data-expected-width="141" data-expected-height="48">XXXX</div>
        <div class="stretchedItem" data-expected-width="165" data-expected-height="15"></div>
    </div>
</div>

<h3>min-width: 0px. grid height: auto</h3>
<div class="container">
    <div class="grid" data-expected-width="150" data-expected-height="50">
        <div class="item" style="min-width: 0px;" data-expected-width="0" data-expected-height="25">XXXX</div>
        <div class="stretchedItem" data-expected-width="0" data-expected-height="15"></div>
    </div>
</div>

<div class="container">
    <div class="grid" data-expected-width="150" data-expected-height="92">
        <div class="item borderPaddingMargin" style="min-width: 0px;" data-expected-width="41" data-expected-height="48">XXXX</div>
        <div class="stretchedItem" data-expected-width="65" data-expected-height="15"></div>
    </div>
</div>

<h3>min-width: 0px. grid height: 15px</h3>
<div class="container">
    <div class="grid" style="height: 15px;" data-expected-width="150" data-expected-height="25">
        <div class="item" style="min-width: 0px;" data-expected-width="0" data-expected-height="25">XXXX</div>
        <div class="stretchedItem" data-expected-width="0" data-expected-height="15"></div>
    </div>
</div>

<div class="container">
    <div class="grid" style="height: 15px;" data-expected-width="150" data-expected-height="25">
        <div class="item border borderPaddingMargin" style="min-width: 0px;" data-expected-width="41" data-expected-height="48">XXXX</div>
        <div class="stretchedItem" data-expected-width="65" data-expected-height="15"></div>
    </div>
</div>

<h3>min-width: 125px. grid height: auto</h3>
<div class="container">
    <div class="grid" data-expected-width="150" data-expected-height="50">
        <div class="item" style="min-width: 125px;" data-expected-width="125" data-expected-height="25">XXXX</div>
        <div class="stretchedItem" data-expected-width="125" data-expected-height="15"></div>
    </div>
</div>

<div class="container">
    <div class="grid" data-expected-width="150" data-expected-height="92">
        <div class="item borderPaddingMargin" style="min-width: 125px;" data-expected-width="166" data-expected-height="48">XXXX</div>
        <div class="stretchedItem" data-expected-width="190" data-expected-height="15"></div>
    </div>
</div>

<h3>min-width: 50%. grid height: auto</h3>
<div class="container">
    <div class="grid" data-expected-width="150" data-expected-height="75">
        <div class="item" style="min-width: 50%;" data-expected-width="0" data-expected-height="50">XXX XX</div>
        <div class="stretchedItem" data-expected-width="0" data-expected-height="15"></div>
    </div>
</div>

<div class="container">
    <div class="grid" data-expected-width="150" data-expected-height="117">
        <div class="item borderPaddingMargin" style="min-width: 50%;" data-expected-width="74" data-expected-height="73">XXX XX</div>
        <div class="stretchedItem" data-expected-width="65" data-expected-height="15"></div>
    </div>
</div>


<h3>min-width: min-content. grid height: auto</h3>
<div class="container">
    <div class="grid" data-expected-width="150" data-expected-height="75">
        <div class="item min-width-min-content" data-expected-width="75" data-expected-height="50">XXX XX</div>
        <div class="stretchedItem" data-expected-width="75" data-expected-height="15"></div>
    </div>
</div>

<div class="container">
    <div class="grid" data-expected-width="150" data-expected-height="117">
        <div class="item borderPaddingMargin min-width-min-content" data-expected-width="116" data-expected-height="73">XXX XX</div>
        <div class="stretchedItem" data-expected-width="140" data-expected-height="15"></div>
    </div>
</div>

<h3>min-width: max-content. grid height: auto</h3>
<div class="container">
    <div class="grid" data-expected-width="150" data-expected-height="50">
        <div class="item alignSelfStart min-width-max-content" data-expected-width="150" data-expected-height="25">XXX XX</div>
        <div class="stretchedItem" data-expected-width="150" data-expected-height="15"></div>
    </div>
</div>

<div class="container">
    <div class="grid" data-expected-width="150" data-expected-height="92">
        <div class="item alignSelfStart borderPaddingMargin min-width-max-content" data-expected-width="191" data-expected-height="48">XXX XX</div>
        <div class="stretchedItem" data-expected-width="215" data-expected-height="15"></div>
    </div>
</div>

</body>

Return to Bug 156711

Lines 1-3 a/Source/WebCore/ChangeLog_sec1
- a/Source/WebCore/ChangeLog +43 lines
		1	2016-04-18 Sergio Villar Senin <svillar@igalia.com>
		2
		3	[css-grid] Use the margin box for non-auto minimum sizes
		4	https://bugs.webkit.org/show_bug.cgi?id=156711
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	When computing the min-size of items with non-auto minimum height/width we are incorrectly
		9	returning the size of the border box, and thus incorrectly ignoring the margins of the item.
		10
		11	This is a follow up patch of r199153 were we added the missing border and paddings for
		12	heights. Contrary to that, we were not including margins for both axis.
		13
		14	This CL requires 3 different interrelated changes:
		15	- Add the margins to the min-size returned by minSizeForChild (might require a layout).
		16	- Refactor and extract width computations from logicalHeightForChild(); not totally
		17	mandatory but pretty logical and helpful.
		18	- Use a new update function to isolate the computation of the override width.
		19
		20	Test: fast/css-grid-layout/min-width-margin-box.html
		21
		22	* rendering/RenderBox.cpp:
		23	(WebCore::RenderBox::computeInlineDirectionMargins): Added const to a parameter.
		24	* rendering/RenderBox.h:
		25	* rendering/RenderGrid.cpp:
		26	(WebCore::RenderGrid::computeTrackSizesForDirection): Initialize the sizingOperation.
		27	(WebCore::RenderGrid::computeIntrinsicLogicalWidths): Ditto.
		28	(WebCore::RenderGrid::computeIntrinsicLogicalHeight): Ditto.
		29	(WebCore::RenderGrid::logicalHeightForChild): Renamed from logicalContentHeightForChild as
		30	it no longer returns the content size but the outer size.
		31	(WebCore::RenderGrid::minSizeForChild):
		32	(WebCore::RenderGrid::updateOverrideContainingBlockContentLogicalWidthForChild): Extracted
		33	from logicalHeightForChild().
		34	(WebCore::RenderGrid::minContentForChild): Update override width if needed.
		35	(WebCore::RenderGrid::maxContentForChild): Ditto.
		36	(WebCore::RenderGrid::computeMarginLogicalSizeForChild): Generalized from
		37	computeMarginLogicalHeightForChild(), it can now compute also margins for the inline
		38	direction.
		39	(WebCore::RenderGrid::availableAlignmentSpaceForChildBeforeStretching):
		40	(WebCore::RenderGrid::logicalContentHeightForChild): Deleted.
		41	(WebCore::RenderGrid::computeMarginLogicalHeightForChild): Deleted.
		42	* rendering/RenderGrid.h:
		43
1	2016-04-15 Chris Dumez <cdumez@apple.com>	44	2016-04-15 Chris Dumez <cdumez@apple.com>
2		45
3	Rename [GlobalContext] extended attribute to [Exposed] and align with WebIDL	46	Rename [GlobalContext] extended attribute to [Exposed] and align with WebIDL

Lines 130-136 private: a/Source/WebCore/rendering/RenderGrid.h_sec1
- a/Source/WebCore/rendering/RenderGrid.h -2 / +3 lines
130		130
131	GridTrackSize gridTrackSize(GridTrackSizingDirection, unsigned) const;	131	GridTrackSize gridTrackSize(GridTrackSizingDirection, unsigned) const;
132		132
133	LayoutUnit logicalContentHeightForChild(RenderBox&, GridSizingData&);	133	bool updateOverrideContainingBlockContentLogicalWidthForChild(RenderBox&, GridSizingData&);
		134	LayoutUnit logicalHeightForChild(RenderBox&, GridSizingData&);
134	LayoutUnit minSizeForChild(RenderBox&, GridTrackSizingDirection, GridSizingData&);	135	LayoutUnit minSizeForChild(RenderBox&, GridTrackSizingDirection, GridSizingData&);
135	LayoutUnit minContentForChild(RenderBox&, GridTrackSizingDirection, GridSizingData&);	136	LayoutUnit minContentForChild(RenderBox&, GridTrackSizingDirection, GridSizingData&);
136	LayoutUnit maxContentForChild(RenderBox&, GridTrackSizingDirection, GridSizingData&);	137	LayoutUnit maxContentForChild(RenderBox&, GridTrackSizingDirection, GridSizingData&);
Lines 152-158 private: a/Source/WebCore/rendering/RenderGrid.h_sec2
152	void paintChildren(PaintInfo& forSelf, const LayoutPoint& paintOffset, PaintInfo& forChild, bool usePrintRect) override;	153	void paintChildren(PaintInfo& forSelf, const LayoutPoint& paintOffset, PaintInfo& forChild, bool usePrintRect) override;
153	bool needToStretchChildLogicalHeight(const RenderBox&) const;	154	bool needToStretchChildLogicalHeight(const RenderBox&) const;
154	LayoutUnit marginLogicalHeightForChild(const RenderBox&) const;	155	LayoutUnit marginLogicalHeightForChild(const RenderBox&) const;
155	LayoutUnit computeMarginLogicalHeightForChild(const RenderBox&) const;	156	LayoutUnit computeMarginLogicalSizeForChild(GridTrackSizingDirection, const RenderBox&) const;
156	LayoutUnit availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox&) const;	157	LayoutUnit availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox&) const;
157	void applyStretchAlignmentToChildIfNeeded(RenderBox&);	158	void applyStretchAlignmentToChildIfNeeded(RenderBox&);
158	bool hasAutoMarginsInColumnAxis(const RenderBox&) const;	159	bool hasAutoMarginsInColumnAxis(const RenderBox&) const;

Lines 1-3 a/LayoutTests/ChangeLog_sec1
- a/LayoutTests/ChangeLog +11 lines
		1	2016-04-18 Sergio Villar Senin <svillar@igalia.com>
		2
		3	[css-grid] Use the margin box for non-auto minimum sizes
		4	https://bugs.webkit.org/show_bug.cgi?id=156711
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	* fast/css-grid-layout/min-height-border-box.html:
		9	* fast/css-grid-layout/min-width-margin-box-expected.txt: Added.
		10	* fast/css-grid-layout/min-width-margin-box.html: Added.
		11
1	2016-04-15 Carlos Garcia Campos <cgarcia@igalia.com>	12	2016-04-15 Carlos Garcia Campos <cgarcia@igalia.com>
2		13
3	Selection.deleteFromDocument should not leave a selection character	14	Selection.deleteFromDocument should not leave a selection character

Lines 13-23 a/LayoutTests/fast/css-grid-layout/min-height-border-box.html_sec1
- a/LayoutTests/fast/css-grid-layout/min-height-border-box.html -13 / +14 lines
13	}	13	}
14		14
15	.container { width: 150px; }	15	.container { width: 150px; }
16	.borderPadding {	16	.borderPaddingMargin {
17	border-width: 2px 3px 5px 9px;	17	border-width: 2px 3px 5px 9px;
18	border-color: blue;	18	border-color: blue;
19	border-style: solid;	19	border-style: solid;
20	padding: 4px 9px 12px 20px;	20	padding: 4px 9px 12px 20px;
		21	margin: 7px 10px 12px 14px;
21	}	22	}
22		23
23	</style>	24	</style>
Lines 34-41 a/LayoutTests/fast/css-grid-layout/min-height-border-box.html_sec2
34	</div>	35	</div>
35		36
36	<div class="container">	37	<div class="container">
37	<div class="grid" data-expected-width="150" data-expected-height="58">	38	<div class="grid" data-expected-width="150" data-expected-height="77">
38	<div class="item borderPadding" data-expected-width="140" data-expected-height="48">XXX</div>	39	<div class="item borderPaddingMargin" data-expected-width="116" data-expected-height="48">XXX</div>
39	</div>	40	</div>
40	</div>	41	</div>
41		42
Lines 47-54 a/LayoutTests/fast/css-grid-layout/min-height-border-box.html_sec3
47	</div>	48	</div>
48		49
49	<div class="container">	50	<div class="container">
50	<div class="grid" data-expected-width="150" data-expected-height="33">	51	<div class="grid" data-expected-width="150" data-expected-height="52">
51	<div class="item borderPadding" style="min-height: 0px;" data-expected-width="140" data-expected-height="23">XXX</div>	52	<div class="item borderPaddingMargin" style="min-height: 0px;" data-expected-width="116" data-expected-height="23">XXX</div>
52	</div>	53	</div>
53	</div>	54	</div>
54		55
Lines 60-67 a/LayoutTests/fast/css-grid-layout/min-height-border-box.html_sec4
60	</div>	61	</div>
61		62
62	<div class="container">	63	<div class="container">
63	<div class="grid" data-expected-width="150" data-expected-height="33">	64	<div class="grid" data-expected-width="150" data-expected-height="52">
64	<div class="item alignSelfStart borderPadding" style="min-height: 0px;" data-expected-width="140" data-expected-height="48">XXX</div>	65	<div class="item alignSelfStart borderPaddingMargin" style="min-height: 0px;" data-expected-width="116" data-expected-height="48">XXX</div>
65	</div>	66	</div>
66	</div>	67	</div>
67		68
Lines 74-80 a/LayoutTests/fast/css-grid-layout/min-height-border-box.html_sec5
74		75
75	<div class="container">	76	<div class="container">
76	<div class="grid" style="height: 15px;" data-expected-width="150" data-expected-height="25">	77	<div class="grid" style="height: 15px;" data-expected-width="150" data-expected-height="25">
77	<div class="item borderPadding" style="min-height: 0px;" data-expected-width="140" data-expected-height="23">XXX</div>	78	<div class="item borderPaddingMargin" style="min-height: 0px;" data-expected-width="116" data-expected-height="23">XXX</div>
78	</div>	79	</div>
79	</div>	80	</div>
80		81
Lines 87-93 a/LayoutTests/fast/css-grid-layout/min-height-border-box.html_sec6
87		88
88	<div class="container">	89	<div class="container">
89	<div class="grid" style="height: 15px;" data-expected-width="150" data-expected-height="25">	90	<div class="grid" style="height: 15px;" data-expected-width="150" data-expected-height="25">
90	<div class="item alignSelfStart borderPadding" style="min-height: 0px;" data-expected-width="140" data-expected-height="48">XXX</div>	91	<div class="item alignSelfStart borderPaddingMargin" style="min-height: 0px;" data-expected-width="116" data-expected-height="48">XXX</div>
91	</div>	92	</div>
92	</div>	93	</div>
93		94
Lines 99-106 a/LayoutTests/fast/css-grid-layout/min-height-border-box.html_sec7
99	</div>	100	</div>
100		101
101	<div class="container">	102	<div class="container">
102	<div class="grid" data-expected-width="150" data-expected-height="63">	103	<div class="grid" data-expected-width="150" data-expected-height="82">
103	<div class="item borderPadding" style="min-height: 30px;" data-expected-width="140" data-expected-height="53">XXX</div>	104	<div class="item borderPaddingMargin" style="min-height: 30px;" data-expected-width="116" data-expected-height="53">XXX</div>
104	</div>	105	</div>
105	</div>	106	</div>
106		107
Lines 112-119 a/LayoutTests/fast/css-grid-layout/min-height-border-box.html_sec8
112	</div>	113	</div>
113		114
114	<div class="container">	115	<div class="container">
115	<div class="grid" data-expected-width="150" data-expected-height="63">	116	<div class="grid" data-expected-width="150" data-expected-height="82">
116	<div class="item alignSelfStart borderPadding" style="min-height: 30px;" data-expected-width="140" data-expected-height="53">XXX</div>	117	<div class="item alignSelfStart borderPaddingMargin" style="min-height: 30px;" data-expected-width="116" data-expected-height="53">XXX</div>
117	</div>	118	</div>
118	</div>	119	</div>
119		120

Line 0 a/LayoutTests/fast/css-grid-layout/min-width-margin-box-expected.txt_sec1
- a/LayoutTests/fast/css-grid-layout/min-width-margin-box-expected.txt +42 lines
	1	grid width: auto
	2
	3	XXXX
	4	PASS
	5	XXXX
	6	PASS
	7	min-width: 0px. grid height: auto
	8
	9	XXXX
	10	PASS
	11	XXXX
	12	PASS
	13	min-width: 0px. grid height: 15px
	14
	15	XXXX
	16	PASS
	17	XXXX
	18	PASS
	19	min-width: 125px. grid height: auto
	20
	21	XXXX
	22	PASS
	23	XXXX
	24	PASS
	25	min-width: 50%. grid height: auto
	26
	27	XXX XX
	28	PASS
	29	XXX XX
	30	PASS
	31	min-width: min-content. grid height: auto
	32
	33	XXX XX
	34	PASS
	35	XXX XX
	36	PASS
	37	min-width: max-content. grid height: auto
	38
	39	XXX XX
	40	PASS
	41	XXX XX
	42	PASS

Line 0 a/LayoutTests/fast/css-grid-layout/min-width-margin-box.html_sec1
- a/LayoutTests/fast/css-grid-layout/min-width-margin-box.html +144 lines
		1	<!DOCTYPE html>
		2	<link href="resources/grid.css" rel="stylesheet">
		3	<link href="resources/grid-alignment.css" rel="stylesheet">
		4	<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
		5	<style>
		6	.grid {
		7	border: 5px solid magenta;
		8	margin-bottom: 60px;
		9	-webkit-grid-template-columns: minmax(auto, 0px);
		10	}
		11
		12	.item {
		13	font: 25px/1 Ahem;
		14	}
		15
		16	.stretchedItem {
		17	background-color: green;
		18	-webkit-grid-row: 2;
		19	height: 15px;
		20	}
		21
		22	.container { width: 150px; }
		23
		24	.borderPaddingMargin {
		25	margin: 7px 10px 12px 14px;
		26	border-width: 2px 3px 5px 9px;
		27	border-style: solid;
		28	border-color: blue;
		29	padding: 4px 9px 12px 20px;
		30	}
		31
		32	</style>
		33
		34	<script src="../../resources/check-layout.js"></script>
		35
		36	<body onload="checkLayout('.grid')">
		37
		38	<h3>grid width: auto</h3>
		39	<div class="container">
		40	<div class="grid" data-expected-width="150" data-expected-height="50">
		41	<div class="item" data-expected-width="100" data-expected-height="25">XXXX</div>
		42	<div class="stretchedItem" data-expected-width="100" data-expected-height="15"></div>
		43	</div>
		44	</div>
		45
		46	<div class="container">
		47	<div class="grid" data-expected-width="150" data-expected-height="92">
		48	<div class="item borderPaddingMargin" data-expected-width="141" data-expected-height="48">XXXX</div>
		49	<div class="stretchedItem" data-expected-width="165" data-expected-height="15"></div>
		50	</div>
		51	</div>
		52
		53	<h3>min-width: 0px. grid height: auto</h3>
		54	<div class="container">
		55	<div class="grid" data-expected-width="150" data-expected-height="50">
		56	<div class="item" style="min-width: 0px;" data-expected-width="0" data-expected-height="25">XXXX</div>
		57	<div class="stretchedItem" data-expected-width="0" data-expected-height="15"></div>
		58	</div>
		59	</div>
		60
		61	<div class="container">
		62	<div class="grid" data-expected-width="150" data-expected-height="92">
		63	<div class="item borderPaddingMargin" style="min-width: 0px;" data-expected-width="41" data-expected-height="48">XXXX</div>
		64	<div class="stretchedItem" data-expected-width="65" data-expected-height="15"></div>
65	</div>
66	</div>
67
68	<h3>min-width: 0px. grid height: 15px</h3>
69	<div class="container">
70	<div class="grid" style="height: 15px;" data-expected-width="150" data-expected-height="25">
71	<div class="item" style="min-width: 0px;" data-expected-width="0" data-expected-height="25">XXXX</div>
72	<div class="stretchedItem" data-expected-width="0" data-expected-height="15"></div>
73	</div>
74	</div>
75
76	<div class="container">
77	<div class="grid" style="height: 15px;" data-expected-width="150" data-expected-height="25">
78	<div class="item border borderPaddingMargin" style="min-width: 0px;" data-expected-width="41" data-expected-height="48">XXXX</div>
79	<div class="stretchedItem" data-expected-width="65" data-expected-height="15"></div>
80	</div>
81	</div>
82
83	<h3>min-width: 125px. grid height: auto</h3>
84	<div class="container">
85	<div class="grid" data-expected-width="150" data-expected-height="50">
86	<div class="item" style="min-width: 125px;" data-expected-width="125" data-expected-height="25">XXXX</div>
87	<div class="stretchedItem" data-expected-width="125" data-expected-height="15"></div>
88	</div>
89	</div>
90
91	<div class="container">
92	<div class="grid" data-expected-width="150" data-expected-height="92">
93	<div class="item borderPaddingMargin" style="min-width: 125px;" data-expected-width="166" data-expected-height="48">XXXX</div>
94	<div class="stretchedItem" data-expected-width="190" data-expected-height="15"></div>
95	</div>
96	</div>
97
98	<h3>min-width: 50%. grid height: auto</h3>
99	<div class="container">
100	<div class="grid" data-expected-width="150" data-expected-height="75">
101	<div class="item" style="min-width: 50%;" data-expected-width="0" data-expected-height="50">XXX XX</div>
102	<div class="stretchedItem" data-expected-width="0" data-expected-height="15"></div>
103	</div>
104	</div>
105
106	<div class="container">
107	<div class="grid" data-expected-width="150" data-expected-height="117">
108	<div class="item borderPaddingMargin" style="min-width: 50%;" data-expected-width="74" data-expected-height="73">XXX XX</div>
109	<div class="stretchedItem" data-expected-width="65" data-expected-height="15"></div>
110	</div>
111	</div>
112
113
114	<h3>min-width: min-content. grid height: auto</h3>
115	<div class="container">
116	<div class="grid" data-expected-width="150" data-expected-height="75">
117	<div class="item min-width-min-content" data-expected-width="75" data-expected-height="50">XXX XX</div>
118	<div class="stretchedItem" data-expected-width="75" data-expected-height="15"></div>
119	</div>
120	</div>
121
122	<div class="container">
123	<div class="grid" data-expected-width="150" data-expected-height="117">
124	<div class="item borderPaddingMargin min-width-min-content" data-expected-width="116" data-expected-height="73">XXX XX</div>
125	<div class="stretchedItem" data-expected-width="140" data-expected-height="15"></div>
126	</div>
127	</div>
128
129	<h3>min-width: max-content. grid height: auto</h3>
130	<div class="container">
131	<div class="grid" data-expected-width="150" data-expected-height="50">
132	<div class="item alignSelfStart min-width-max-content" data-expected-width="150" data-expected-height="25">XXX XX</div>
133	<div class="stretchedItem" data-expected-width="150" data-expected-height="15"></div>
134	</div>
135	</div>
136
137	<div class="container">
138	<div class="grid" data-expected-width="150" data-expected-height="92">
139	<div class="item alignSelfStart borderPaddingMargin min-width-max-content" data-expected-width="191" data-expected-height="48">XXX XX</div>
140	<div class="stretchedItem" data-expected-width="215" data-expected-height="15"></div>
141	</div>
142	</div>
143
144	</body>