Attachment #245069 for bug #140720

View Details Raw Unified Return to Bug 140720



2015-01-21  Sergio Villar Senin  <svillar@igalia.com>

        [CSS Grid Layout] Skip items spanning flex tracks when sizing content based tracks
        https://bugs.webkit.org/show_bug.cgi?id=140720

        Reviewed by NOBODY (OOPS!).

        Section "11.5. Resolve Intrinsic Track Sizes" of the specs forces
        us to ignore items spanning tracks with flex sizing functions when
        resolving the content-based track sizing functions. Items with
        span < 2 are not affected by this rule (as they will belong to a
        single track). This way the algorithm ensures that min-content and
        max-content restrictions are fulfilled before distributing the
        extra space.

        Test: fast/css-grid-layout/flex-and-content-sized-resolution-columns.html

        * rendering/RenderGrid.cpp:
        (WebCore::RenderGrid::spanningItemCrossesFlexibleSizedTracks):
        (WebCore::integerSpanForDirection):
        (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctions):
        * rendering/RenderGrid.h:

2015-01-19  Sergio Villar Senin  <svillar@igalia.com>

        [CSS Grid Layout] Size tracks using a list of all items sorted by span



    unsigned m_span;
};

bool RenderGrid::spanningItemCrossesFlexibleSizedTracks(const GridCoordinate& coordinate, GridTrackSizingDirection direction) const
{
    const GridSpan itemSpan = (direction == ForColumns) ? coordinate.columns : coordinate.rows;
    for (auto trackPosition : itemSpan) {
        const GridTrackSize& trackSize = gridTrackSize(direction, trackPosition.toInt());
        if (trackSize.minTrackBreadth().isFlex() || trackSize.maxTrackBreadth().isFlex())
            return true;
    }

    return false;
}

static inline unsigned integerSpanForDirection(const GridCoordinate& coordinate, GridTrackSizingDirection direction)
{
    return (direction == ForRows) ? coordinate.rows.integerSpan() : coordinate.columns.integerSpan();
}

void RenderGrid::resolveContentBasedTrackSizingFunctions(GridTrackSizingDirection direction, GridSizingData& sizingData)
{
    // FIXME: Split the grid tracks into groups that doesn't overlap a <flex> grid track.
    sizingData.itemsSortedByIncreasingSpan.shrink(0);
    HashSet<RenderBox*> itemsSet;
    for (auto trackIndex : sizingData.contentSizedTracksIndex) {
        GridIterator iterator(m_grid, direction, trackIndex);

        while (RenderBox* gridItem = iterator.nextGridItem()) {
            if (itemsSet.add(gridItem).isNewEntry) {
                const GridCoordinate& coordinate = cachedGridCoordinate(*gridItem);
                // We should not include items spanning more than one track that span tracks with flexible sizing functions.
                if (integerSpanForDirection(coordinate, direction) == 1 || !spanningItemCrossesFlexibleSizedTracks(coordinate, direction))
                    sizingData.itemsSortedByIncreasingSpan.append(GridItemWithSpan(*gridItem, coordinate, direction));
            }
        }
    }
    std::sort(sizingData.itemsSortedByIncreasingSpan.begin(), sizingData.itemsSortedByIncreasingSpan.end());

Lines 114-119 private: a/Source/WebCore/rendering/RenderGrid.h_sec1
- a/Source/WebCore/rendering/RenderGrid.h +2 lines
114		114
115	bool gridWasPopulated() const { return !m_grid.isEmpty() && !m_grid[0].isEmpty(); }	115	bool gridWasPopulated() const { return !m_grid.isEmpty() && !m_grid[0].isEmpty(); }
116		116
		117	bool spanningItemCrossesFlexibleSizedTracks(const GridCoordinate&, GridTrackSizingDirection) const;
		118
117	unsigned gridColumnCount() const	119	unsigned gridColumnCount() const
118	{	120	{
119	ASSERT(gridWasPopulated());	121	ASSERT(gridWasPopulated());



2015-01-21  Sergio Villar Senin  <svillar@igalia.com>

        [CSS Grid Layout] Skip items spanning flex tracks when sizing content based tracks
        https://bugs.webkit.org/show_bug.cgi?id=140720

        Reviewed by NOBODY (OOPS!).

        * fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt: Added.
        * fast/css-grid-layout/flex-and-content-sized-resolution-columns.html: Added.

2015-01-19  Sergio Villar Senin  <svillar@igalia.com>

        [CSS Grid Layout] Size tracks using a list of all items sorted by span



PASS window.getComputedStyle(gridFixedAndMinContentAndFlex, '').getPropertyValue('-webkit-grid-template-columns') is "20px 30px 50px"
PASS window.getComputedStyle(gridFixedAndMinContentAndFlexMultipleOverlap, '').getPropertyValue('-webkit-grid-template-columns') is "20px 10px 70px"
PASS window.getComputedStyle(gridMinMaxFixedFlexAndMaxContentAndAuto, '').getPropertyValue('-webkit-grid-template-columns') is "60px 20px 20px"
PASS window.getComputedStyle(gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems, '').getPropertyValue('-webkit-grid-template-columns') is "100px 0px 0px"
PASS window.getComputedStyle(gridMinMaxFlexFixedAndMinContentAndFixed, '').getPropertyValue('-webkit-grid-template-columns') is "35px 5px 25px"
PASS window.getComputedStyle(gridMinContentAndMinMaxFixedMinContentAndFlex, '').getPropertyValue('-webkit-grid-template-columns') is "20px 20px 60px"
PASS window.getComputedStyle(gridMaxContentAndMinMaxFixedMaxContentAndFlex, '').getPropertyValue('-webkit-grid-template-columns') is "70px 20px 10px"
PASS successfullyParsed is true

TEST COMPLETE
Test that resolving auto tracks on grid items works properly.

XXXXXXXX
XXXXX
XXX XXX
XXXX
XXX XXX
XXXX
XXX XXX
XXXX XXXX
XXXX XXXX
XXX XXX
XXXXX XXXXX
XX XX XX XX
XXXXX
XXX XXX XXX
XXXX XXXX
XXXXX
XXX XXX XXX
XXXX XXXX



<!DOCTYPE html>
<html>
<head>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
     font: 10px/1 Ahem;
}

.gridFixedAndMinContentAndFlex {
     -webkit-grid-template-columns: 20px -webkit-min-content 1fr;
}

.gridMinMaxFixedFlexAndMaxContentAndAuto {
     -webkit-grid-template-columns: minmax(20px, 1fr) -webkit-max-content auto;
}

.gridMinMaxFlexFixedAndMinContentAndFixed {
     -webkit-grid-template-columns: minmax(0.5fr, 35px) -webkit-min-content 25px;
}

.gridMinContentAndMinMaxFixedMinContentAndFlex {
     -webkit-grid-template-columns: -webkit-min-content minmax(20px, -webkit-min-content) 2fr;
}

.gridMaxContentAndMinMaxFixedMaxContentAndFlex {
     -webkit-grid-template-columns: -webkit-max-content minmax(20px, -webkit-max-content) 1fr;
}

</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>

<p>Test that resolving auto tracks on grid items works properly.</p>

<div style="position: relative; width: 100px;">
    <div id="gridFixedAndMinContentAndFlex" class="grid gridFixedAndMinContentAndFlex">
	<div style="-webkit-grid-column: 2 / span 2;">XXXXXXXX</div>
	<div style="-webkit-grid-column: 1 / span 2; -webkit-grid-row: 2;">XXXXX</div>
    </div>
</div>

<div style="position: relative; width: 100px;">
    <div id="gridFixedAndMinContentAndFlexMultipleOverlap" class="grid gridFixedAndMinContentAndFlex">
	<div style="-webkit-grid-column: 1 / span 2;">XXX XXX</div>
	<div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 2;">XXXX</div>
    </div>
</div>

<div style="position: relative; width: 100px;">
    <div id="gridMinMaxFixedFlexAndMaxContentAndAuto" class="grid gridMinMaxFixedFlexAndMaxContentAndAuto">
	<div style="-webkit-grid-column: 1 / span 2;">XXX XXX</div>
	<div style="-webkit-grid-column: 2 / span 2; -webkit-grid-row: 2;">XXXX</div>
    </div>
</div>

<div style="position: relative; width: 100px;">
    <div id="gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems" class="grid gridMinMaxFixedFlexAndMaxContentAndAuto">
	<div style="-webkit-grid-column: 1 / -1;">XXX XXX</div>
	<div style="-webkit-grid-column: 1 / span 2; -webkit-grid-row: 2;">XXXX XXXX</div>
    </div>
</div>

<div style="position: relative; width: 100px;">
    <div id="gridMinMaxFlexFixedAndMinContentAndFixed" class="grid gridMinMaxFlexFixedAndMinContentAndFixed">
	<div style="-webkit-grid-column: 1 / span 2;">XXXX XXXX</div>
	<div style="-webkit-grid-column: 2 / span 2; -webkit-grid-row: 2;">XXX XXX</div>
	<div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 3;">XXXXX XXXXX</div>
	<div style="-webkit-grid-column: 2 / span 2; -webkit-grid-row: 4;">XX XX XX XX</div>
    </div>
</div>

<div style="position: relative; width: 100px;">
    <div id="gridMinContentAndMinMaxFixedMinContentAndFlex" class="grid gridMinContentAndMinMaxFixedMinContentAndFlex">
	<div style="-webkit-grid-column: 2 / span 2;">XXXXX</div>
	<div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 2;">XXX XXX XXX</div>
	<div style="-webkit-grid-column: 1 / span 2; -webkit-grid-row: 3;">XXXX XXXX</div>
    </div>
</div>

<div style="position: relative; width: 100px;">
    <div id="gridMaxContentAndMinMaxFixedMaxContentAndFlex" class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex">
	<div style="-webkit-grid-column: 2 / span 2;">XXXXX</div>
	<div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 2;">XXX XXX XXX</div>
	<div style="-webkit-grid-column: 1 / span 2; -webkit-grid-row: 3;">XXXX XXXX</div>
    </div>
</div>

</body>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script>
function checkColumns(gridId, columnValue)
{
     window.gridElement = document.getElementById(gridId);
     shouldBeEqualToString("window.getComputedStyle(" + gridId + ", '').getPropertyValue('-webkit-grid-template-columns')", columnValue);
}

checkColumns("gridFixedAndMinContentAndFlex", "20px 30px 50px");
checkColumns("gridFixedAndMinContentAndFlexMultipleOverlap", "20px 10px 70px");
checkColumns("gridMinMaxFixedFlexAndMaxContentAndAuto", "60px 20px 20px");
checkColumns("gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems", "100px 0px 0px");
checkColumns("gridMinMaxFlexFixedAndMinContentAndFixed", "35px 5px 25px");
checkColumns("gridMinContentAndMinMaxFixedMinContentAndFlex", "20px 20px 60px");
checkColumns("gridMaxContentAndMinMaxFixedMaxContentAndFlex", "70px 20px 10px");

</script>
</html>

Return to Bug 140720

Lines 559-575 private: a/Source/WebCore/rendering/RenderGrid.cpp_sec1
- a/Source/WebCore/rendering/RenderGrid.cpp -3 / +23 lines
559	unsigned m_span;	559	unsigned m_span;
560	};	560	};
561		561
		562	bool RenderGrid::spanningItemCrossesFlexibleSizedTracks(const GridCoordinate& coordinate, GridTrackSizingDirection direction) const
		563	{
		564	const GridSpan itemSpan = (direction == ForColumns) ? coordinate.columns : coordinate.rows;
		565	for (auto trackPosition : itemSpan) {
		566	const GridTrackSize& trackSize = gridTrackSize(direction, trackPosition.toInt());
		567	if (trackSize.minTrackBreadth().isFlex() \|\| trackSize.maxTrackBreadth().isFlex())
		568	return true;
		569	}
		570
		571	return false;
		572	}
		573
		574	static inline unsigned integerSpanForDirection(const GridCoordinate& coordinate, GridTrackSizingDirection direction)
		575	{
		576	return (direction == ForRows) ? coordinate.rows.integerSpan() : coordinate.columns.integerSpan();
		577	}
		578
562	void RenderGrid::resolveContentBasedTrackSizingFunctions(GridTrackSizingDirection direction, GridSizingData& sizingData)	579	void RenderGrid::resolveContentBasedTrackSizingFunctions(GridTrackSizingDirection direction, GridSizingData& sizingData)
563	{	580	{
564	// FIXME: Split the grid tracks into groups that doesn't overlap a <flex> grid track.
565	sizingData.itemsSortedByIncreasingSpan.shrink(0);	581	sizingData.itemsSortedByIncreasingSpan.shrink(0);
566	HashSet<RenderBox*> itemsSet;	582	HashSet<RenderBox*> itemsSet;
567	for (auto trackIndex : sizingData.contentSizedTracksIndex) {	583	for (auto trackIndex : sizingData.contentSizedTracksIndex) {
568	GridIterator iterator(m_grid, direction, trackIndex);	584	GridIterator iterator(m_grid, direction, trackIndex);
569		585
570	while (RenderBox* gridItem = iterator.nextGridItem()) {	586	while (RenderBox* gridItem = iterator.nextGridItem()) {
571	if (itemsSet.add(gridItem).isNewEntry)	587	if (itemsSet.add(gridItem).isNewEntry) {
572	sizingData.itemsSortedByIncreasingSpan.append(GridItemWithSpan(gridItem, cachedGridCoordinate(gridItem), direction));	588	const GridCoordinate& coordinate = cachedGridCoordinate(*gridItem);
		589	// We should not include items spanning more than one track that span tracks with flexible sizing functions.
		590	if (integerSpanForDirection(coordinate, direction) == 1 \|\| !spanningItemCrossesFlexibleSizedTracks(coordinate, direction))
		591	sizingData.itemsSortedByIncreasingSpan.append(GridItemWithSpan(*gridItem, coordinate, direction));
		592	}
573	}	593	}
574	}	594	}
575	std::sort(sizingData.itemsSortedByIncreasingSpan.begin(), sizingData.itemsSortedByIncreasingSpan.end());	595	std::sort(sizingData.itemsSortedByIncreasingSpan.begin(), sizingData.itemsSortedByIncreasingSpan.end());

Lines 1-3 a/Source/WebCore/ChangeLog_sec1
- a/Source/WebCore/ChangeLog +23 lines
		1	2015-01-21 Sergio Villar Senin <svillar@igalia.com>
		2
		3	[CSS Grid Layout] Skip items spanning flex tracks when sizing content based tracks
		4	https://bugs.webkit.org/show_bug.cgi?id=140720
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	Section "11.5. Resolve Intrinsic Track Sizes" of the specs forces
		9	us to ignore items spanning tracks with flex sizing functions when
		10	resolving the content-based track sizing functions. Items with
		11	span < 2 are not affected by this rule (as they will belong to a
		12	single track). This way the algorithm ensures that min-content and
		13	max-content restrictions are fulfilled before distributing the
		14	extra space.
		15
		16	Test: fast/css-grid-layout/flex-and-content-sized-resolution-columns.html
		17
		18	* rendering/RenderGrid.cpp:
		19	(WebCore::RenderGrid::spanningItemCrossesFlexibleSizedTracks):
		20	(WebCore::integerSpanForDirection):
		21	(WebCore::RenderGrid::resolveContentBasedTrackSizingFunctions):
		22	* rendering/RenderGrid.h:
		23
1	2015-01-19 Sergio Villar Senin <svillar@igalia.com>	24	2015-01-19 Sergio Villar Senin <svillar@igalia.com>
2		25
3	[CSS Grid Layout] Size tracks using a list of all items sorted by span	26	[CSS Grid Layout] Size tracks using a list of all items sorted by span

Lines 1-3 a/LayoutTests/ChangeLog_sec1
- a/LayoutTests/ChangeLog +10 lines
		1	2015-01-21 Sergio Villar Senin <svillar@igalia.com>
		2
		3	[CSS Grid Layout] Skip items spanning flex tracks when sizing content based tracks
		4	https://bugs.webkit.org/show_bug.cgi?id=140720
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	* fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt: Added.
		9	* fast/css-grid-layout/flex-and-content-sized-resolution-columns.html: Added.
		10
1	2015-01-19 Sergio Villar Senin <svillar@igalia.com>	11	2015-01-19 Sergio Villar Senin <svillar@igalia.com>
2		12
3	[CSS Grid Layout] Size tracks using a list of all items sorted by span	13	[CSS Grid Layout] Size tracks using a list of all items sorted by span

Line 0 a/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt_sec1
- a/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt +30 lines
	1	PASS window.getComputedStyle(gridFixedAndMinContentAndFlex, '').getPropertyValue('-webkit-grid-template-columns') is "20px 30px 50px"
	2	PASS window.getComputedStyle(gridFixedAndMinContentAndFlexMultipleOverlap, '').getPropertyValue('-webkit-grid-template-columns') is "20px 10px 70px"
	3	PASS window.getComputedStyle(gridMinMaxFixedFlexAndMaxContentAndAuto, '').getPropertyValue('-webkit-grid-template-columns') is "60px 20px 20px"
	4	PASS window.getComputedStyle(gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems, '').getPropertyValue('-webkit-grid-template-columns') is "100px 0px 0px"
	5	PASS window.getComputedStyle(gridMinMaxFlexFixedAndMinContentAndFixed, '').getPropertyValue('-webkit-grid-template-columns') is "35px 5px 25px"
	6	PASS window.getComputedStyle(gridMinContentAndMinMaxFixedMinContentAndFlex, '').getPropertyValue('-webkit-grid-template-columns') is "20px 20px 60px"
	7	PASS window.getComputedStyle(gridMaxContentAndMinMaxFixedMaxContentAndFlex, '').getPropertyValue('-webkit-grid-template-columns') is "70px 20px 10px"
	8	PASS successfullyParsed is true
	9
	10	TEST COMPLETE
	11	Test that resolving auto tracks on grid items works properly.
	12
	13	XXXXXXXX
	14	XXXXX
	15	XXX XXX
	16	XXXX
	17	XXX XXX
	18	XXXX
	19	XXX XXX
	20	XXXX XXXX
	21	XXXX XXXX
	22	XXX XXX
	23	XXXXX XXXXX
	24	XX XX XX XX
	25	XXXXX
	26	XXX XXX XXX
	27	XXXX XXXX
	28	XXXXX
	29	XXX XXX XXX
	30	XXXX XXXX

Line 0 a/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns.html_sec1
- a/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns.html +108 lines
		1	<!DOCTYPE html>
		2	<html>
		3	<head>
		4	<link href="resources/grid.css" rel="stylesheet">
		5	<style>
		6	.grid {
		7	font: 10px/1 Ahem;
		8	}
		9
		10	.gridFixedAndMinContentAndFlex {
		11	-webkit-grid-template-columns: 20px -webkit-min-content 1fr;
		12	}
		13
		14	.gridMinMaxFixedFlexAndMaxContentAndAuto {
		15	-webkit-grid-template-columns: minmax(20px, 1fr) -webkit-max-content auto;
		16	}
		17
		18	.gridMinMaxFlexFixedAndMinContentAndFixed {
		19	-webkit-grid-template-columns: minmax(0.5fr, 35px) -webkit-min-content 25px;
		20	}
		21
		22	.gridMinContentAndMinMaxFixedMinContentAndFlex {
		23	-webkit-grid-template-columns: -webkit-min-content minmax(20px, -webkit-min-content) 2fr;
		24	}
		25
		26	.gridMaxContentAndMinMaxFixedMaxContentAndFlex {
		27	-webkit-grid-template-columns: -webkit-max-content minmax(20px, -webkit-max-content) 1fr;
		28	}
		29
		30	</style>
		31	<script src="../../resources/js-test.js"></script>
		32	</head>
		33	<body>
		34
		35	<p>Test that resolving auto tracks on grid items works properly.</p>
		36
		37	<div style="position: relative; width: 100px;">
		38	<div id="gridFixedAndMinContentAndFlex" class="grid gridFixedAndMinContentAndFlex">
		39	<div style="-webkit-grid-column: 2 / span 2;">XXXXXXXX</div>
		40	<div style="-webkit-grid-column: 1 / span 2; -webkit-grid-row: 2;">XXXXX</div>
		41	</div>
		42	</div>
		43
		44	<div style="position: relative; width: 100px;">
		45	<div id="gridFixedAndMinContentAndFlexMultipleOverlap" class="grid gridFixedAndMinContentAndFlex">
		46	<div style="-webkit-grid-column: 1 / span 2;">XXX XXX</div>
		47	<div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 2;">XXXX</div>
		48	</div>
		49	</div>
		50
		51	<div style="position: relative; width: 100px;">
		52	<div id="gridMinMaxFixedFlexAndMaxContentAndAuto" class="grid gridMinMaxFixedFlexAndMaxContentAndAuto">
		53	<div style="-webkit-grid-column: 1 / span 2;">XXX XXX</div>
		54	<div style="-webkit-grid-column: 2 / span 2; -webkit-grid-row: 2;">XXXX</div>
		55	</div>
		56	</div>
		57
		58	<div style="position: relative; width: 100px;">
		59	<div id="gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems" class="grid gridMinMaxFixedFlexAndMaxContentAndAuto">
		60	<div style="-webkit-grid-column: 1 / -1;">XXX XXX</div>
		61	<div style="-webkit-grid-column: 1 / span 2; -webkit-grid-row: 2;">XXXX XXXX</div>
		62	</div>
		63	</div>
		64
65	<div style="position: relative; width: 100px;">
66	<div id="gridMinMaxFlexFixedAndMinContentAndFixed" class="grid gridMinMaxFlexFixedAndMinContentAndFixed">
67	<div style="-webkit-grid-column: 1 / span 2;">XXXX XXXX</div>
68	<div style="-webkit-grid-column: 2 / span 2; -webkit-grid-row: 2;">XXX XXX</div>
69	<div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 3;">XXXXX XXXXX</div>
70	<div style="-webkit-grid-column: 2 / span 2; -webkit-grid-row: 4;">XX XX XX XX</div>
71	</div>
72	</div>
73
74	<div style="position: relative; width: 100px;">
75	<div id="gridMinContentAndMinMaxFixedMinContentAndFlex" class="grid gridMinContentAndMinMaxFixedMinContentAndFlex">
76	<div style="-webkit-grid-column: 2 / span 2;">XXXXX</div>
77	<div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 2;">XXX XXX XXX</div>
78	<div style="-webkit-grid-column: 1 / span 2; -webkit-grid-row: 3;">XXXX XXXX</div>
79	</div>
80	</div>
81
82	<div style="position: relative; width: 100px;">
83	<div id="gridMaxContentAndMinMaxFixedMaxContentAndFlex" class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex">
84	<div style="-webkit-grid-column: 2 / span 2;">XXXXX</div>
85	<div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 2;">XXX XXX XXX</div>
86	<div style="-webkit-grid-column: 1 / span 2; -webkit-grid-row: 3;">XXXX XXXX</div>
87	</div>
88	</div>
89
90	</body>
91	<script src="resources/grid-definitions-parsing-utils.js"></script>
92	<script>
93	function checkColumns(gridId, columnValue)
94	{
95	window.gridElement = document.getElementById(gridId);
96	shouldBeEqualToString("window.getComputedStyle(" + gridId + ", '').getPropertyValue('-webkit-grid-template-columns')", columnValue);
97	}
98
99	checkColumns("gridFixedAndMinContentAndFlex", "20px 30px 50px");
100	checkColumns("gridFixedAndMinContentAndFlexMultipleOverlap", "20px 10px 70px");
101	checkColumns("gridMinMaxFixedFlexAndMaxContentAndAuto", "60px 20px 20px");
102	checkColumns("gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems", "100px 0px 0px");
103	checkColumns("gridMinMaxFlexFixedAndMinContentAndFixed", "35px 5px 25px");
104	checkColumns("gridMinContentAndMinMaxFixedMinContentAndFlex", "20px 20px 60px");
105	checkColumns("gridMaxContentAndMinMaxFixedMaxContentAndFlex", "70px 20px 10px");
106
107	</script>
108	</html>