Diff
Modified: trunk/LayoutTests/ChangeLog (199660 => 199661)
--- trunk/LayoutTests/ChangeLog 2016-04-18 08:50:21 UTC (rev 199660)
+++ trunk/LayoutTests/ChangeLog 2016-04-18 09:45:30 UTC (rev 199661)
@@ -1,5 +1,22 @@
2016-04-18 Manuel Rego Casasnovas <[email protected]>
+ [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 <[email protected]>
+
[css-grid] Fix positioned items with content alignment
https://bugs.webkit.org/show_bug.cgi?id=156597
Added: trunk/LayoutTests/fast/css-grid-layout/explicit-grid-size-expected.txt (0 => 199661)
--- trunk/LayoutTests/fast/css-grid-layout/explicit-grid-size-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/explicit-grid-size-expected.txt 2016-04-18 09:45:30 UTC (rev 199661)
@@ -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
Added: trunk/LayoutTests/fast/css-grid-layout/explicit-grid-size.html (0 => 199661)
--- trunk/LayoutTests/fast/css-grid-layout/explicit-grid-size.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/explicit-grid-size.html 2016-04-18 09:45:30 UTC (rev 199661)
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<link href="" 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=""
+<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>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt (199660 => 199661)
--- trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt 2016-04-18 08:50:21 UTC (rev 199660)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt 2016-04-18 09:45:30 UTC (rev 199661)
@@ -28,10 +28,10 @@
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"
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html (199660 => 199661)
--- trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html 2016-04-18 08:50:21 UTC (rev 199660)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html 2016-04-18 09:45:30 UTC (rev 199661)
@@ -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"');
Modified: trunk/Source/WebCore/ChangeLog (199660 => 199661)
--- trunk/Source/WebCore/ChangeLog 2016-04-18 08:50:21 UTC (rev 199660)
+++ trunk/Source/WebCore/ChangeLog 2016-04-18 09:45:30 UTC (rev 199661)
@@ -1,3 +1,24 @@
+2016-04-18 Manuel Rego Casasnovas <[email protected]>
+
+ [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 <[email protected]>
[GTK] Menu list button doesn't use the text color from the theme
Modified: trunk/Source/WebCore/rendering/style/GridPositionsResolver.cpp (199660 => 199661)
--- trunk/Source/WebCore/rendering/style/GridPositionsResolver.cpp 2016-04-18 08:50:21 UTC (rev 199660)
+++ trunk/Source/WebCore/rendering/style/GridPositionsResolver.cpp 2016-04-18 09:45:30 UTC (rev 199661)
@@ -104,12 +104,12 @@
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)
