Changeset 199661 in webkit

Timestamp:

Apr 18, 2016 2:45:30 AM (8 years ago)

Author:

Manuel Rego Casasnovas

Message:

[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.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/fast/css-grid-layout/explicit-grid-size-expected.txt (added)
• LayoutTests/fast/css-grid-layout/explicit-grid-size.html (added)
• LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt (modified) (1 diff)
• LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html (modified) (2 diffs)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/rendering/style/GridPositionsResolver.cpp (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+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>
 

trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt

@@ -29 +29 @@
 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\""

trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html

@@ -29 +29 @@
 }
 #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 {
@@ -197 +197 @@
     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"');

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+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>
 

trunk/Source/WebCore/rendering/style/GridPositionsResolver.cpp

@@ -105 +105 @@
 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);
 }