Skip to content
Permalink
Browse files
[css-grid] Use grid-template-areas to determine the explicit grid
https://bugs.webkit.org/show_bug.cgi?id=156575

Reviewed by Darin Adler.

Source/WebCore:

From the spec (https://drafts.csswg.org/css-grid/#grid-definition):
"The size of the explicit grid is determined by the larger of the number
of rows/columns defined by grid-template-areas and the number
of rows/columns sized by grid-template-rows/grid-template-columns."

So we need to take into account the rows/columns defined by
grid-template-areas to determine the size of the explicit grid.

Test: fast/css-grid-layout/explicit-grid-size.html

* rendering/style/GridPositionsResolver.cpp:
(WebCore::GridPositionsResolver::explicitGridColumnCount):
(WebCore::GridPositionsResolver::explicitGridRowCount):

LayoutTests:

Created new test to check the right behavior.

* fast/css-grid-layout/explicit-grid-size-expected.txt: Added.
* fast/css-grid-layout/explicit-grid-size.html: Added.
* fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt:
Small modification as now the columns defined by
grid-tempalte-areas are in the explicit grid.
* fast/css-grid-layout/grid-template-shorthand-get-set.html:
Ditto.


Canonical link: https://commits.webkit.org/174796@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@199661 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
mrego committed Apr 18, 2016
1 parent 8092fc6 commit 191317d5aa3e5697fc5bed15afa3c6bef71b5664
@@ -1,3 +1,20 @@
2016-04-18 Manuel Rego Casasnovas <rego@igalia.com>

[css-grid] Use grid-template-areas to determine the explicit grid
https://bugs.webkit.org/show_bug.cgi?id=156575

Reviewed by Darin Adler.

Created new test to check the right behavior.

* fast/css-grid-layout/explicit-grid-size-expected.txt: Added.
* fast/css-grid-layout/explicit-grid-size.html: Added.
* fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt:
Small modification as now the columns defined by
grid-tempalte-areas are in the explicit grid.
* fast/css-grid-layout/grid-template-shorthand-get-set.html:
Ditto.

2016-04-18 Manuel Rego Casasnovas <rego@igalia.com>

[css-grid] Fix positioned items with content alignment
@@ -0,0 +1,13 @@
Checks that the explicit grid size is set by the maximum of the grid-template-columns|rows properties and grid-template-areas.

PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
@@ -0,0 +1,169 @@
<!DOCTYPE html>
<link href="resources/grid.css" rel="stylesheet">
<style>

.grid {
-webkit-grid-auto-columns: 10px;
-webkit-grid-auto-rows: 10px;
position: relative;
}

.oneColumnOneRow {
-webkit-grid-template-columns: 50px;
-webkit-grid-template-rows: 50px;
}

.twoColumnsOneRow {
-webkit-grid-template-columns: 50px 50px;
-webkit-grid-template-rows: 50px;
}

.oneColumnTwoRows {
-webkit-grid-template-columns: 50px;
-webkit-grid-template-rows: 50px 50px;
}

.twoColumnsTwoRows {
-webkit-grid-template-columns: 50px 50px;
-webkit-grid-template-rows: 50px 50px;
}

.oneColumnOneRowAreas {
-webkit-grid-template-areas: "a";
}

.twoColumnsOneRowAreas {
-webkit-grid-template-areas: "a b";
}

.oneColumnTwoRowsAreas {
-webkit-grid-template-areas: "a"
"b";
}

.twoColumnsTwoRowsAreas {
-webkit-grid-template-areas: "a b"
"c d";
}

</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid')">

<p>Checks that the explicit grid size is set by the maximum of the grid-template-columns|rows properties and grid-template-areas.</p>

<div class="grid">
<div class="autoRowAutoColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
</div>
</div>

<div class="grid oneColumnOneRow">
<div class="autoRowAutoColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
</div>
</div>

<div class="grid oneColumnOneRowAreas">
<div class="autoRowAutoColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
</div>
</div>

<div class="grid oneColumnTwoRows">
<div class="autoRowAutoColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
</div>
<div class="autoRowAutoColumn"
data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">
</div>
</div>

<div class="grid oneColumnTwoRowsAreas">
<div class="autoRowAutoColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
</div>
<div class="autoRowAutoColumn"
data-offset-x="0" data-offset-y="10" data-expected-width="10" data-expected-height="10">
</div>
</div>

<div class="grid twoColumnsOneRow">
<div class="autoRowAutoColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
</div>
<div class="autoRowAutoColumn"
data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">
</div>
</div>

<div class="grid twoColumnsOneRowAreas">
<div class="autoRowAutoColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
</div>
<div class="autoRowAutoColumn"
data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="10">
</div>
</div>

<div class="grid twoColumnsTwoRows">
<div class="autoRowAutoColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
</div>
<div class="autoRowAutoColumn"
data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">
</div>
<div class="autoRowAutoColumn"
data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">
</div>
<div class="autoRowAutoColumn"
data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50">
</div>
</div>

<div class="grid twoColumnsTwoRowsAreas">
<div class="autoRowAutoColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
</div>
<div class="autoRowAutoColumn"
data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="10">
</div>
<div class="autoRowAutoColumn"
data-offset-x="0" data-offset-y="10" data-expected-width="10" data-expected-height="10">
</div>
<div class="autoRowAutoColumn"
data-offset-x="10" data-offset-y="10" data-expected-width="10" data-expected-height="10">
</div>
</div>

<div class="grid oneColumnOneRow twoColumnsTwoRowsAreas">
<div class="autoRowAutoColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
</div>
<div class="autoRowAutoColumn"
data-offset-x="50" data-offset-y="0" data-expected-width="10" data-expected-height="50">
</div>
<div class="autoRowAutoColumn"
data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="10">
</div>
<div class="autoRowAutoColumn"
data-offset-x="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">
</div>
</div>

<div class="grid twoColumnsTwoRows oneColumnOneRowAreas">
<div class="autoRowAutoColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
</div>
<div class="autoRowAutoColumn"
data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">
</div>
<div class="autoRowAutoColumn"
data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">
</div>
<div class="autoRowAutoColumn"
data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50">
</div>
</div>

</body>
@@ -28,10 +28,10 @@ PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getProper
PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesWithoutRowSize, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesWithoutRowSize, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 0px [tail]"
PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesWithoutRowSize, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('-webkit-grid-template-columns') is "10px 20px"
PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 15px [tail]"
PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('-webkit-grid-template-areas') is "\"a b\""
PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize, '').getPropertyValue('-webkit-grid-template-columns') is "10px 20px"
PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 0px [tail]"
PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize, '').getPropertyValue('-webkit-grid-template-areas') is "\"a b\""
PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
@@ -28,10 +28,10 @@
-webkit-grid-template: [head] "a" [tail] / 10px;
}
#gridTemplateComplexFormWithLineNamesMultipleColumns {
-webkit-grid-template: [head] "a b" 15px [tail] / 10px;
-webkit-grid-template: [head] "a b" 15px [tail] / 10px 20px;
}
#gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize {
-webkit-grid-template: [head] "a b" [tail] / 10px;
-webkit-grid-template: [head] "a b" [tail] / 10px 20px;
}
#gridTemplateComplexFormWithLineNamesMultipleRows {
-webkit-grid-template: [head1] "a" 15px [tail1]
@@ -196,8 +196,8 @@
testGridDefinitionsValues(document.getElementById("gridTemplateComplexForm"), "10px", "15px", '"a"');
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNames"), "10px", "[head] 15px [tail]", '"a"');
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesWithoutRowSize"), "10px", "[head] 0px [tail]", '"a"');
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleColumns"), "10px", "[head] 15px [tail]", '"a b"');
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize"), "10px", "[head] 0px [tail]", '"a b"');
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleColumns"), "10px 20px", "[head] 15px [tail]", '"a b"');
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize"), "10px 20px", "[head] 0px [tail]", '"a b"');
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRows"), "10px", "[head1] 15px [tail1 head2] 20px [tail2]", '"a" "b"');
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes"), "10px", "[head1] 0px [tail1 head2] 0px [tail2]", '"a" "b"');
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns"), "[first] 10px [nav nav2] 15px [nav nav2] 15px", "100px [nav nav2] 25px [nav nav2] 25px [last]", '"a b c" "d e f" "g h i"');
@@ -1,3 +1,24 @@
2016-04-18 Manuel Rego Casasnovas <rego@igalia.com>

[css-grid] Use grid-template-areas to determine the explicit grid
https://bugs.webkit.org/show_bug.cgi?id=156575

Reviewed by Darin Adler.

From the spec (https://drafts.csswg.org/css-grid/#grid-definition):
"The size of the explicit grid is determined by the larger of the number
of rows/columns defined by grid-template-areas and the number
of rows/columns sized by grid-template-rows/grid-template-columns."

So we need to take into account the rows/columns defined by
grid-template-areas to determine the size of the explicit grid.

Test: fast/css-grid-layout/explicit-grid-size.html

* rendering/style/GridPositionsResolver.cpp:
(WebCore::GridPositionsResolver::explicitGridColumnCount):
(WebCore::GridPositionsResolver::explicitGridRowCount):

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

[GTK] Menu list button doesn't use the text color from the theme
@@ -104,12 +104,12 @@ static void adjustGridPositionsFromStyle(const RenderStyle& gridContainerStyle,

unsigned GridPositionsResolver::explicitGridColumnCount(const RenderStyle& gridContainerStyle)
{
return std::min<unsigned>(gridContainerStyle.gridColumns().size(), kGridMaxTracks);
return std::min<unsigned>(std::max(gridContainerStyle.gridColumns().size(), gridContainerStyle.namedGridAreaColumnCount()), kGridMaxTracks);
}

unsigned GridPositionsResolver::explicitGridRowCount(const RenderStyle& gridContainerStyle)
{
return std::min<unsigned>(gridContainerStyle.gridRows().size(), kGridMaxTracks);
return std::min<unsigned>(std::max(gridContainerStyle.gridRows().size(), gridContainerStyle.namedGridAreaRowCount()), kGridMaxTracks);
}

static unsigned explicitGridSizeForSide(const RenderStyle& gridContainerStyle, GridPositionSide side)

0 comments on commit 191317d

Please sign in to comment.