[CSS Grid Layout] getComputedStyle() is wrong for grid-definition-{columns|rows}
authorsvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 6 Feb 2014 18:13:30 +0000 (18:13 +0000)
committersvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 6 Feb 2014 18:13:30 +0000 (18:13 +0000)
https://bugs.webkit.org/show_bug.cgi?id=127033

Reviewed by Andreas Kling.

Source/WebCore:

Tests: fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.html
       fast/css-grid-layout/non-grid-columns-rows-get-set.html
       fast/css-grid-layout/non-grid-element-repeat-get-set.html
       fast/css-grid-layout/non-named-grid-line-get-set.html

According to the specs getComputedStyle() should return the used
values instead of the resolved values for compatibility with early
implementations. This means that grid-definition-{columns|rows}
are now layout dependent as we need to compute the used values for
grid track sizes.

Updated the outcome of existing tests and added a bunch of new
ones that check the behavior of the different properties outside
grid containers.

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::specifiedValueForGridTrackSize):
(WebCore::valueForGridTrackList):
(WebCore::isLayoutDependent):
(WebCore::ComputedStyleExtractor::propertyValue):
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::GridIterator::GridIterator):
(WebCore::RenderGrid::computedUsedBreadthOfGridTracks):
(WebCore::RenderGrid::computeUsedBreadthOfMinLength):
(WebCore::RenderGrid::computeUsedBreadthOfMaxLength):
(WebCore::RenderGrid::computeUsedBreadthOfSpecifiedLength):
(WebCore::RenderGrid::computeNormalizedFractionBreadth):
(WebCore::RenderGrid::gridTrackSize):
(WebCore::RenderGrid::minContentForChild):
(WebCore::RenderGrid::maxContentForChild):
(WebCore::RenderGrid::resolveContentBasedTrackSizingFunctions):
(WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForItems):
(WebCore::RenderGrid::tracksAreWiderThanMinTrackBreadth):
(WebCore::RenderGrid::growGrid):
(WebCore::RenderGrid::autoPlacementMajorAxisDirection):
(WebCore::RenderGrid::autoPlacementMinorAxisDirection):
(WebCore::RenderGrid::layoutGridItems):
(WebCore::RenderGrid::resolveGridPositionsFromAutoPlacementPosition):
(WebCore::RenderGrid::resolveGridPositionsFromStyle):
(WebCore::RenderGrid::gridAreaBreadthForChild):
(WebCore::RenderGrid::populateGridPositions):
(WebCore::RenderGrid::findChildLogicalPosition):
* rendering/RenderGrid.h:

LayoutTests:

Updated the expected results of many tests, as we should expect
the used values instead of the resolved ones when asking for
getComputedStyle().

* fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
* fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt:
* fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
* fast/css-grid-layout/grid-columns-rows-get-set.html:
* fast/css-grid-layout/grid-element-repeat-get-set-expected.txt:
* fast/css-grid-layout/grid-element-repeat-get-set.html:
* fast/css-grid-layout/named-grid-line-get-set-expected.txt:
* fast/css-grid-layout/named-grid-line-get-set.html:
* fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt: Copied from LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt.
* fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt: Copied from LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt.
* fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.html: Copied from LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html.
* fast/css-grid-layout/non-grid-columns-rows-get-set.html: Copied from LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html.
* fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt: Copied from LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set-expected.txt.
* fast/css-grid-layout/non-grid-element-repeat-get-set.html: Copied from LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html.
* fast/css-grid-layout/non-named-grid-line-get-set-expected.txt: Copied from LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt.
* fast/css-grid-layout/non-named-grid-line-get-set.html: Added.
* fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js:
(testInherit):
(testInitial):
* fast/css-grid-layout/resources/grid-columns-rows-get-set.js:
(testInherit):
(testInitial):
* fast/css-grid-layout/resources/grid-definitions-parsing-utils.js:
(testGridDefinitionsValues):
(checkGridDefinitionsSetJSValues):
* fast/css-grid-layout/resources/non-grid-columns-rows-get-set-multiple.js: Copied from LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js.
(testInherit):
(testInitial):
* fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js: Copied from LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js.
(testInherit):
(testInitial):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@163547 268f45cc-cd09-0410-ab3c-d52691b4dbfc

26 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt
LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt
LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html
LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html
LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set-expected.txt
LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html
LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt
LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html [changed mode: 0644->0755]
LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js
LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js
LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js
LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set-multiple.js [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/RenderGrid.h

index f8b7b33..cd0481e 100644 (file)
@@ -1,3 +1,46 @@
+2014-01-29  Sergio Villar Senin  <svillar@igalia.com>
+
+        [CSS Grid Layout] getComputedStyle() is wrong for grid-definition-{columns|rows}
+        https://bugs.webkit.org/show_bug.cgi?id=127033
+
+        Reviewed by Andreas Kling.
+
+        Updated the expected results of many tests, as we should expect
+        the used values instead of the resolved ones when asking for
+        getComputedStyle().
+
+        * fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
+        * fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt:
+        * fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
+        * fast/css-grid-layout/grid-columns-rows-get-set.html:
+        * fast/css-grid-layout/grid-element-repeat-get-set-expected.txt:
+        * fast/css-grid-layout/grid-element-repeat-get-set.html:
+        * fast/css-grid-layout/named-grid-line-get-set-expected.txt:
+        * fast/css-grid-layout/named-grid-line-get-set.html:
+        * fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt: Copied from LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt.
+        * fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt: Copied from LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt.
+        * fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.html: Copied from LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html.
+        * fast/css-grid-layout/non-grid-columns-rows-get-set.html: Copied from LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html.
+        * fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt: Copied from LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set-expected.txt.
+        * fast/css-grid-layout/non-grid-element-repeat-get-set.html: Copied from LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html.
+        * fast/css-grid-layout/non-named-grid-line-get-set-expected.txt: Copied from LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt.
+        * fast/css-grid-layout/non-named-grid-line-get-set.html: Added.
+        * fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js:
+        (testInherit):
+        (testInitial):
+        * fast/css-grid-layout/resources/grid-columns-rows-get-set.js:
+        (testInherit):
+        (testInitial):
+        * fast/css-grid-layout/resources/grid-definitions-parsing-utils.js:
+        (testGridDefinitionsValues):
+        (checkGridDefinitionsSetJSValues):
+        * fast/css-grid-layout/resources/non-grid-columns-rows-get-set-multiple.js: Copied from LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js.
+        (testInherit):
+        (testInitial):
+        * fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js: Copied from LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js.
+        (testInherit):
+        (testInitial):
+
 2014-02-06  Alexey Proskuryakov  <ap@apple.com>
 
         editing/caret/caret-color.html is flaky on WK2
index afc7ca2..2587afd 100644 (file)
@@ -8,22 +8,28 @@ PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-
 PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
 PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-columns') is "10px"
 PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-rows') is "15px"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-columns') is "53%"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-rows') is "27%"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-rows') is "auto"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-columns') is "424px"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-rows') is "162px"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-columns') is "0px"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-rows') is "0px"
+PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('-webkit-grid-definition-columns') is "7px"
+PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('-webkit-grid-definition-rows') is "11px"
 PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-definition-columns') is "100px"
 PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-definition-rows') is "150px"
 PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-definition-columns') is "64px"
 PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-definition-rows') is "60px"
-PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(10%, 15px)"
-PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(20px, 50%)"
-PASS window.getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-definition-columns') is "-webkit-min-content"
-PASS window.getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-definition-rows') is "-webkit-min-content"
-PASS window.getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-definition-columns') is "-webkit-max-content"
-PASS window.getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-definition-rows') is "-webkit-max-content"
-PASS window.getComputedStyle(gridWithFraction, '').getPropertyValue('-webkit-grid-definition-columns') is "1fr"
-PASS window.getComputedStyle(gridWithFraction, '').getPropertyValue('-webkit-grid-definition-rows') is "2fr"
+PASS window.getComputedStyle(gridWithMinMaxElement, '').getPropertyValue('-webkit-grid-definition-columns') is "80px"
+PASS window.getComputedStyle(gridWithMinMaxElement, '').getPropertyValue('-webkit-grid-definition-rows') is "300px"
+PASS window.getComputedStyle(gridWithMinContentElement, '').getPropertyValue('-webkit-grid-definition-columns') is "0px"
+PASS window.getComputedStyle(gridWithMinContentElement, '').getPropertyValue('-webkit-grid-definition-rows') is "0px"
+PASS window.getComputedStyle(gridWithMinContentWithChildrenElement, '').getPropertyValue('-webkit-grid-definition-columns') is "17px"
+PASS window.getComputedStyle(gridWithMinContentWithChildrenElement, '').getPropertyValue('-webkit-grid-definition-rows') is "11px"
+PASS window.getComputedStyle(gridWithMaxContentElement, '').getPropertyValue('-webkit-grid-definition-columns') is "0px"
+PASS window.getComputedStyle(gridWithMaxContentElement, '').getPropertyValue('-webkit-grid-definition-rows') is "0px"
+PASS window.getComputedStyle(gridWithMaxContentWithChildrenElement, '').getPropertyValue('-webkit-grid-definition-columns') is "17px"
+PASS window.getComputedStyle(gridWithMaxContentWithChildrenElement, '').getPropertyValue('-webkit-grid-definition-rows') is "11px"
+PASS window.getComputedStyle(gridWithFractionElement, '').getPropertyValue('-webkit-grid-definition-columns') is "800px"
+PASS window.getComputedStyle(gridWithFractionElement, '').getPropertyValue('-webkit-grid-definition-rows') is "600px"
 
 Test getting wrong values for -webkit-grid-definition-columns and -webkit-grid-definition-rows through CSS (they should resolve to the default: 'none')
 PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
@@ -40,59 +46,59 @@ PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-col
 PASS element.style.webkitGridDefinitionColumns is "18px"
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "66px"
 PASS element.style.webkitGridDefinitionRows is "66px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "55%"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "440px"
 PASS element.style.webkitGridDefinitionColumns is "55%"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "40%"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "240px"
 PASS element.style.webkitGridDefinitionRows is "40%"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "0px"
 PASS element.style.webkitGridDefinitionColumns is "auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "0px"
 PASS element.style.webkitGridDefinitionRows is "auto"
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "80px"
 PASS element.style.webkitGridDefinitionColumns is "10vw"
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "150px"
 PASS element.style.webkitGridDefinitionRows is "25vh"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "-webkit-min-content"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "0px"
 PASS element.style.webkitGridDefinitionColumns is "-webkit-min-content"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "-webkit-min-content"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "0px"
 PASS element.style.webkitGridDefinitionRows is "-webkit-min-content"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "-webkit-max-content"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "0px"
 PASS element.style.webkitGridDefinitionColumns is "-webkit-max-content"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "-webkit-max-content"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "0px"
 PASS element.style.webkitGridDefinitionRows is "-webkit-max-content"
 
 Test getting and setting -webkit-grid-definition-columns and -webkit-grid-definition-rows to minmax() values through JS
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(55%, 45px)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "440px"
 PASS element.style.webkitGridDefinitionColumns is "minmax(55%, 45px)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(30px, 40%)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "240px"
 PASS element.style.webkitGridDefinitionRows is "minmax(30px, 40%)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(220px, 48px)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "220px"
 PASS element.style.webkitGridDefinitionColumns is "minmax(22em, 8vh)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(80px, 50px)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "80px"
 PASS element.style.webkitGridDefinitionRows is "minmax(10vw, 5em)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(-webkit-min-content, 48px)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "48px"
 PASS element.style.webkitGridDefinitionColumns is "minmax(-webkit-min-content, 8vh)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(80px, -webkit-min-content)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "80px"
 PASS element.style.webkitGridDefinitionRows is "minmax(10vw, -webkit-min-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(220px, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "220px"
 PASS element.style.webkitGridDefinitionColumns is "minmax(22em, -webkit-max-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(-webkit-max-content, 50px)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "50px"
 PASS element.style.webkitGridDefinitionRows is "minmax(-webkit-max-content, 5em)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(-webkit-min-content, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "0px"
 PASS element.style.webkitGridDefinitionColumns is "minmax(-webkit-min-content, -webkit-max-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(-webkit-max-content, -webkit-min-content)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "0px"
 PASS element.style.webkitGridDefinitionRows is "minmax(-webkit-max-content, -webkit-min-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "3600fr"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "800px"
 PASS element.style.webkitGridDefinitionColumns is "3600fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "154fr"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "600px"
 PASS element.style.webkitGridDefinitionRows is "154fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "3.1459fr"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "800px"
 PASS element.style.webkitGridDefinitionColumns is "3.1459fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "2.718fr"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "600px"
 PASS element.style.webkitGridDefinitionRows is "2.718fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "3fr"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "800px"
 PASS element.style.webkitGridDefinitionColumns is "3fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "4fr"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "600px"
 PASS element.style.webkitGridDefinitionRows is "4fr"
 
 Test setting grid-definition-columns and grid-definition-rows to bad values through JS
@@ -131,11 +137,11 @@ PASS element.style.webkitGridDefinitionRows is "none"
 
 Test setting grid-definition-columns and grid-definition-rows to 'inherit' through JS
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is '50px last'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'first 101%'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'first 20px'
 
 Test setting grid-definition-columns and grid-definition-rows to 'initial' through JS
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is '150% last'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'first 1fr'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is '450px last'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'first 150px'
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'none'
 PASS successfullyParsed is true
index 758275d..5b49fb4 100644 (file)
@@ -6,28 +6,30 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 Test getting |grid-definition-columns| and |grid-definition-rows| set through CSS
 PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-columns') is "7px 11px"
 PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-rows') is "17px 2px"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-columns') is "53% 99%"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-rows') is "27% 52%"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-columns') is "auto auto"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-rows') is "auto auto"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-columns') is "424px 792px"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-rows') is "162px 312px"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-columns') is "0px 17px"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-rows') is "0px 3px"
 PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-definition-columns') is "100px 120px"
 PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-definition-rows') is "150px 170px"
-PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('-webkit-grid-definition-columns') is "15px auto 100px"
-PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('-webkit-grid-definition-rows') is "120px 18px auto"
-PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('-webkit-grid-definition-columns') is "50% 120px"
-PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('-webkit-grid-definition-rows') is "35% 168px"
+PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('-webkit-grid-definition-columns') is "15px 0px 100px"
+PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('-webkit-grid-definition-rows') is "120px 18px 0px"
+PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('-webkit-grid-definition-columns') is "400px 120px"
+PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('-webkit-grid-definition-rows') is "210px 168px"
 PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
 PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
-PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('-webkit-grid-definition-columns') is "-webkit-min-content -webkit-max-content"
-PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('-webkit-grid-definition-rows') is "-webkit-max-content -webkit-min-content"
-PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(45px, 30%) 15px"
-PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('-webkit-grid-definition-rows') is "120px minmax(35%, 10px)"
-PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(-webkit-min-content, 30%) 15px"
-PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-definition-rows') is "120px minmax(35%, -webkit-max-content)"
-PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('-webkit-grid-definition-columns') is "1fr 2fr"
-PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('-webkit-grid-definition-rows') is "3fr 4fr"
-PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(-webkit-min-content, 45px) 2fr"
-PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('-webkit-grid-definition-rows') is "3fr minmax(14px, -webkit-max-content)"
+PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('-webkit-grid-definition-columns') is "0px 0px"
+PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('-webkit-grid-definition-rows') is "0px 0px"
+PASS window.getComputedStyle(gridWithMinMaxContentWithChildrenElement, '').getPropertyValue('-webkit-grid-definition-columns') is "7px 17px"
+PASS window.getComputedStyle(gridWithMinMaxContentWithChildrenElement, '').getPropertyValue('-webkit-grid-definition-rows') is "11px 3px"
+PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('-webkit-grid-definition-columns') is "240px 15px"
+PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('-webkit-grid-definition-rows') is "120px 210px"
+PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-definition-columns') is "240px 15px"
+PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-definition-rows') is "120px 210px"
+PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('-webkit-grid-definition-columns') is "320px 480px"
+PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('-webkit-grid-definition-rows') is "225px 375px"
+PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('-webkit-grid-definition-columns') is "45px 755px"
+PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('-webkit-grid-definition-rows') is "586px 14px"
 
 Test the initial value
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'
@@ -38,25 +40,25 @@ PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-col
 PASS element.style.webkitGridDefinitionColumns is "18px 22px"
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "66px 70px"
 PASS element.style.webkitGridDefinitionRows is "66px 70px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "55% 80%"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "440px 640px"
 PASS element.style.webkitGridDefinitionColumns is "55% 80%"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "40% 63%"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "240px 378px"
 PASS element.style.webkitGridDefinitionRows is "40% 63%"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "auto auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "0px 0px"
 PASS element.style.webkitGridDefinitionColumns is "auto auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "auto auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "0px 0px"
 PASS element.style.webkitGridDefinitionRows is "auto auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "auto 160px 22px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "0px 160px 22px"
 PASS element.style.webkitGridDefinitionColumns is "auto 16em 22px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "56% 100px auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "336px 100px 0px"
 PASS element.style.webkitGridDefinitionRows is "56% 10em auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "160px minmax(16px, 20px)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "160px 20px"
 PASS element.style.webkitGridDefinitionColumns is "16em minmax(16px, 20px)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(10%, 15%) auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "90px 0px"
 PASS element.style.webkitGridDefinitionRows is "minmax(10%, 15%) auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "160px 2fr"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "160px 640px"
 PASS element.style.webkitGridDefinitionColumns is "16em 2fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "14fr auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "600px 0px"
 PASS element.style.webkitGridDefinitionRows is "14fr auto"
 
 Test getting wrong values set from CSS
@@ -86,12 +88,12 @@ PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definit
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
 
 Test setting grid-definition-columns and grid-definition-rows to 'inherit' through JS
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "50px 1fr last"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "101% middle 45px"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "50px 750px last"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "20px middle 45px"
 
 Test setting grid-definition-columns and grid-definition-rows to 'initial' through JS
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "150% middle 55px"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "1fr line 2fr line"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "1200px middle 55px"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "200px line 400px line"
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
 PASS successfullyParsed is true
index 4508579..6b2733f 100755 (executable)
@@ -7,11 +7,27 @@ if (window.testRunner)
 </script>
 <link href="resources/grid.css" rel="stylesheet">
 <style>
+.grid {
+    /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
+    width: 800px;
+    height: 600px;
+}
+.gridItem {
+    -webkit-grid-column: 1;
+    -webkit-grid-row: 1;
+    width: 7px;
+    height: 11px;
+}
+.gridItem2 {
+    -webkit-grid-column: 2;
+    -webkit-grid-row: 2;
+    width: 17px;
+    height: 3px;
+}
 .gridWithFixed {
     -webkit-grid-definition-columns: 7px 11px;
     -webkit-grid-definition-rows: 17px 2px;
 }
-
 .gridWithPercent {
     -webkit-grid-definition-columns: 53% 99%;
     -webkit-grid-definition-rows: 27% 52%;
@@ -61,8 +77,8 @@ if (window.testRunner)
     font: 10px Ahem;
 }
 .gridWithFractionFraction {
-    -webkit-grid-definition-columns: 1fr 2fr;
-    -webkit-grid-definition-rows: 3fr 4fr;
+    -webkit-grid-definition-columns: 2fr 3fr;
+    -webkit-grid-definition-rows: 3fr 5fr;
 }
 .gridWithFractionMinMax {
     -webkit-grid-definition-columns: minmax(-webkit-min-content, 45px) 2fr;
@@ -74,7 +90,9 @@ if (window.testRunner)
 <body>
 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>
 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>
-<div class="grid gridWithAuto" id="gridWithAutoElement"></div>
+<div class="grid gridWithAuto" id="gridWithAutoElement">
+  <div class="gridItem2"></div>
+</div>
 <div class="grid gridWithEM" id="gridWithEMElement"></div>
 <div class="grid gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
 <div class="grid gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
@@ -82,6 +100,10 @@ if (window.testRunner)
 <div class="grid gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
 <div class="grid gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
 <div class="grid gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
+<div class="grid gridWithMinMaxContent" id="gridWithMinMaxContentWithChildrenElement">
+  <div class="gridItem"></div>
+  <div class="gridItem2"></div>
+</div>
 <div class="grid gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
 <div class="grid gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
 <div class="grid gridWithFractionFraction" id="gridWithFractionFraction"></div>
index a1cf3f3..14d9a45 100755 (executable)
@@ -7,6 +7,23 @@ if (window.testRunner)
 </script>
 <link href="resources/grid.css" rel="stylesheet">
 <style>
+.grid {
+    /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
+    width: 800px;
+    height: 600px;
+}
+.gridItem {
+    -webkit-grid-column: 1;
+    -webkit-grid-row: 1;
+    width: 7px;
+    height: 11px;
+}
+.gridItem2 {
+    -webkit-grid-column: 1;
+    -webkit-grid-row: 1;
+    width: 17px;
+    height: 3px;
+}
 .gridWithNone {
     -webkit-grid-definition-columns: none;
     -webkit-grid-definition-rows: none;
@@ -64,14 +81,25 @@ if (window.testRunner)
 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>
 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>
 <div class="grid gridWithAuto" id="gridWithAutoElement"></div>
+<div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement">
+  <div class="gridItem"></div>
+</div>
 <div class="grid gridWithEM" id="gridWithEMElement"></div>
 <div class="grid gridWithViewPortPercentage" id="gridWithViewPortPercentageElement"></div>
 <div class="grid gridWithFitContent" id="gridWithFitContentElement"></div>
 <div class="grid gridWithFitAvailable" id="gridWithFitAvailableElement"></div>
-<div class="grid gridWithMinMax" id="gridWithMinMax"></div>
-<div class="grid gridWithMinContent" id="gridWithMinContent"></div>
-<div class="grid gridWithMaxContent" id="gridWithMaxContent"></div>
-<div class="grid gridWithFraction" id="gridWithFraction"></div>
+<div class="grid gridWithMinMax" id="gridWithMinMaxElement"></div>
+<div class="grid gridWithMinContent" id="gridWithMinContentElement"></div>
+<div class="grid gridWithMinContent" id="gridWithMinContentWithChildrenElement">
+    <div class="gridItem"></div>
+    <div class="gridItem2"></div>
+</div>
+<div class="grid gridWithMaxContent" id="gridWithMaxContentElement"></div>
+<div class="grid gridWithMaxContent" id="gridWithMaxContentWithChildrenElement">
+    <div class="gridItem"></div>
+    <div class="gridItem2"></div>
+</div>
+<div class="grid gridWithFraction" id="gridWithFractionElement"></div>
 <script src="resources/grid-definitions-parsing-utils.js"></script>
 <script src="resources/grid-columns-rows-get-set.js"></script>
 <script src="../../resources/js-test-post.js"></script>
index 1bd29df..c44b85a 100644 (file)
@@ -4,24 +4,26 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 
 Test getting grid-definition-columns and grid-definition-rows set through CSS
-PASS window.getComputedStyle(singleSingleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "15%"
-PASS window.getComputedStyle(singleSingleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "18px"
-PASS window.getComputedStyle(twoSingleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(15px, 50%) minmax(15px, 50%)"
-PASS window.getComputedStyle(twoSingleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "auto auto"
-PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "auto minmax(100px, 120px) auto minmax(100px, 120px)"
-PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(5px, 10px) auto minmax(5px, 10px) auto"
-PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "auto middle 250px end auto middle 250px end"
-PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "10px start auto end 10px start auto end"
-PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "before auto before auto"
+PASS window.getComputedStyle(singleSingleTrackRepeatWithSize, '').getPropertyValue('-webkit-grid-definition-columns') is "120px"
+PASS window.getComputedStyle(singleSingleTrackRepeatWithSize, '').getPropertyValue('-webkit-grid-definition-rows') is "18px"
+PASS window.getComputedStyle(twoSingleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "400px 400px"
+PASS window.getComputedStyle(twoSingleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "0px 0px"
+PASS window.getComputedStyle(twoSingleTrackRepeatWithChildren, '').getPropertyValue('-webkit-grid-definition-columns') is "400px 400px"
+PASS window.getComputedStyle(twoSingleTrackRepeatWithChildren, '').getPropertyValue('-webkit-grid-definition-rows') is "44px 77px"
+PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "33px 120px 0px 120px"
+PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "10px 77px 10px 0px"
+PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "33px middle 250px end 0px middle 250px end"
+PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "10px start 77px end 10px start 0px end"
+PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "before 0px before 0px"
 PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "before 10px before 10px"
 PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "250px end"
 PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "10px end"
 PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "start 250px 250px"
 PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "start 10px 10px"
 PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "start 140px 250px 250px"
-PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "auto 10px 10px"
-PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "250px 250px 15% last"
-PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "10px 10px end auto"
+PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "44px 10px 10px"
+PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "250px 250px 120px last"
+PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "10px 10px end 0px"
 
 Test invalid repeat syntax.
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
index 68018d6..7d93b0e 100644 (file)
@@ -7,47 +7,67 @@ if (window.testRunner)
 </script>
 <link href="resources/grid.css" rel="stylesheet">
 <style>
-#singleSingleTrackRepeat {
+.grid {
+    /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
+    width: 800px;
+    height: 600px;
+}
+
+.gridItem {
+    -webkit-grid-column: 1;
+    -webkit-grid-row: 1;
+    width: 33px;
+    height: 44px;
+}
+
+.gridItem2 {
+    -webkit-grid-column: 2;
+    -webkit-grid-row: 2;
+    width: 66px;
+    height: 77px;
+}
+
+.singleSingleTrackRepeat {
     -webkit-grid-definition-rows: repeat(1, 18px);
     -webkit-grid-definition-columns: repeat(1, 15%);
 }
 
-#twoSingleTrackRepeat {
+.twoSingleTrackRepeat {
     -webkit-grid-definition-rows: repeat(2, auto);
     -webkit-grid-definition-columns: repeat(2, minmax(15px, 50%));
 }
 
-#twoDoubleTrackRepeat {
+.twoDoubleTrackRepeat {
     -webkit-grid-definition-rows: repeat(2, minmax(5px, 10px)  auto);
     -webkit-grid-definition-columns: repeat(2, auto minmax(100px, 120px));
 }
 
-#twoDoubleTrackWithNamedGridLineRepeat {
+.twoDoubleTrackWithNamedGridLineRepeat {
     -webkit-grid-definition-rows: repeat(2, 10px 'start' auto 'end');
     -webkit-grid-definition-columns: repeat(2, auto 'middle' 250px 'end');
 }
 
-#twoDoubleTrackWithTrailingNamedGridLineRepeat {
+.twoDoubleTrackWithTrailingNamedGridLineRepeat {
     -webkit-grid-definition-rows: repeat(2, 'before' 10px);
     -webkit-grid-definition-columns: repeat(2, 'before' auto);
 }
 
-#trailingNamedGridLineRepeat {
+.trailingNamedGridLineRepeat {
     -webkit-grid-definition-rows: repeat(1, 10px) 'end';
     -webkit-grid-definition-columns: repeat(1, 250px) 'end';
 }
 
-#leadingNamedGridLineRepeat {
+.leadingNamedGridLineRepeat {
     -webkit-grid-definition-rows: 'start' repeat(2, 10px);
     -webkit-grid-definition-columns: 'start' repeat(2, 250px);
 }
 
-#mixRepeatAfterNonRepeat {
+.mixRepeatAfterNonRepeat {
     -webkit-grid-definition-rows: auto repeat(2, 10px);
     -webkit-grid-definition-columns: 'start' 140px repeat(2, 250px);
 }
 
-#mixNonRepeatAfterRepeat {
+.mixNonRepeatAfterRepeat {
     -webkit-grid-definition-rows: repeat(2, 10px) 'end' auto;
     -webkit-grid-definition-columns: repeat(2, 250px) 15% 'last';
 }
@@ -55,36 +75,43 @@ if (window.testRunner)
 <script src="../../resources/js-test-pre.js"></script>
 </head>
 <body>
-<div class="grid" id="singleSingleTrackRepeat"></div>
-<div class="grid" id="twoSingleTrackRepeat"></div>
-<div class="grid" id="twoDoubleTrackRepeat"></div>
-<div class="grid" id="twoDoubleTrackWithNamedGridLineRepeat"></div>
-<div class="grid" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
-<div class="grid" id="trailingNamedGridLineRepeat"></div>
-<div class="grid" id="leadingNamedGridLineRepeat"></div>
-<div class="grid" id="mixRepeatAfterNonRepeat"></div>
-<div class="grid" id="mixNonRepeatAfterRepeat"></div>
+<div class="grid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize"></div>
+<div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div>
+<div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeatWithChildren">
+    <div class="gridItem"></div>
+    <div class="gridItem2"></div>
+</div>
+<div class="grid twoDoubleTrackRepeat" id="twoDoubleTrackRepeat">
+    <div class="gridItem"></div>
+    <div class="gridItem2"></div>
+</div>
+<div class="grid twoDoubleTrackWithNamedGridLineRepeat" id="twoDoubleTrackWithNamedGridLineRepeat">
+    <div class="gridItem"></div>
+    <div class="gridItem2"></div>
+</div>
+<div class="grid twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
+<div class="grid trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div>
+<div class="grid leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div>
+<div class="grid mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat">
+    <div class="gridItem"></div>
+</div>
+<div class="grid mixNonRepeatAfterRepeat" id="mixNonRepeatAfterRepeat"></div>
+
+<script src="resources/grid-definitions-parsing-utils.js"></script>
 <script>
     description('Test that setting and getting grid-definition-columns and grid-definition-rows with repeat() works as expected');
 
-    function testGridDefinitionsValues(element, columnValue, rowValue)
-    {
-        window.element = element;
-        var elementID = element.id || "element";
-        shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-definition-columns')", columnValue);
-        shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-definition-rows')", rowValue);
-    }
-
     debug("Test getting grid-definition-columns and grid-definition-rows set through CSS");
-    testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeat"), "15%", "18px");
-    testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), "minmax(15px, 50%) minmax(15px, 50%)", "auto auto");
-    testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), "auto minmax(100px, 120px) auto minmax(100px, 120px)", "minmax(5px, 10px) auto minmax(5px, 10px) auto");
-    testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGridLineRepeat"), "auto middle 250px end auto middle 250px end", "10px start auto end 10px start auto end");
-    testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailingNamedGridLineRepeat"), "before auto before auto", "before 10px before 10px");
+    testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWithSize"), "120px", "18px");
+    testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), "400px 400px", "0px 0px");
+    testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeatWithChildren"), "400px 400px", "44px 77px");
+    testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), "33px 120px 0px 120px", "10px 77px 10px 0px");
+    testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGridLineRepeat"), "33px middle 250px end 0px middle 250px end", "10px start 77px end 10px start 0px end");
+    testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailingNamedGridLineRepeat"), "before 0px before 0px", "before 10px before 10px");
     testGridDefinitionsValues(document.getElementById("trailingNamedGridLineRepeat"), "250px end", "10px end");
     testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepeat"), "start 250px 250px", "start 10px 10px");
-    testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat"), "start 140px 250px 250px", "auto 10px 10px");
-    testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat"), "250px 250px 15% last", "10px 10px end auto");
+    testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat"), "start 140px 250px 250px", "44px 10px 10px");
+    testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat"), "250px 250px 120px last", "10px 10px end 0px");
 
     debug("");
     debug("Test invalid repeat syntax.");
index bfb57ff..092138d 100644 (file)
@@ -6,65 +6,67 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 Test getting -webkit-grid-definition-columns and -webkit-grid-definition-rows set through CSS
 PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-columns') is "first 10px"
 PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-rows') is "first 15px"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-columns') is "53% last"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-rows') is "27% last"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-columns') is "first auto"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-rows') is "auto last"
-PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-definition-columns') is "first minmax(10%, 15px)"
-PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(20px, 50%) last"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-columns') is "424px last"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-rows') is "162px last"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-columns') is "first 0px"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-rows') is "0px last"
+PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('-webkit-grid-definition-columns') is "first 77px"
+PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('-webkit-grid-definition-rows') is "22px last"
+PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-definition-columns') is "first 80px"
+PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-definition-rows') is "300px last"
 PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('-webkit-grid-definition-columns') is "nav first 10px last"
 PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('-webkit-grid-definition-rows') is "nav first 15px last"
-PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-definition-columns') is "nav first 10% nav 15% last"
-PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-definition-rows') is "first nav2 25% nav2 75% last"
+PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-definition-columns') is "nav first 80px nav 120px last"
+PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-definition-rows') is "first nav2 150px nav2 450px last"
 
 Test getting and setting -webkit-grid-definition-columns and -webkit-grid-definition-rows through JS
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first 18px"
 PASS element.style.webkitGridDefinitionColumns is "first 18px"
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "66px last"
 PASS element.style.webkitGridDefinitionRows is "66px last"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first 55%"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first 440px"
 PASS element.style.webkitGridDefinitionColumns is "first 55%"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "40% last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "240px last"
 PASS element.style.webkitGridDefinitionRows is "40% last"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first 0px"
 PASS element.style.webkitGridDefinitionColumns is "first auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "auto last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "0px last"
 PASS element.style.webkitGridDefinitionRows is "auto last"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first -webkit-min-content"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first 0px"
 PASS element.style.webkitGridDefinitionColumns is "first -webkit-min-content"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "-webkit-min-content last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "0px last"
 PASS element.style.webkitGridDefinitionRows is "-webkit-min-content last"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first -webkit-max-content"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first 0px"
 PASS element.style.webkitGridDefinitionColumns is "first -webkit-max-content"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "-webkit-max-content last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "0px last"
 PASS element.style.webkitGridDefinitionRows is "-webkit-max-content last"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first minmax(55%, 45px)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first 440px"
 PASS element.style.webkitGridDefinitionColumns is "first minmax(55%, 45px)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(30px, 40%) last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "240px last"
 PASS element.style.webkitGridDefinitionRows is "minmax(30px, 40%) last"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first minmax(220px, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first 220px"
 PASS element.style.webkitGridDefinitionColumns is "first minmax(22em, -webkit-max-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(-webkit-max-content, 50px) last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "50px last"
 PASS element.style.webkitGridDefinitionRows is "minmax(-webkit-max-content, 5em) last"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first minmax(220px, -webkit-min-content)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first 220px"
 PASS element.style.webkitGridDefinitionColumns is "first minmax(22em, -webkit-min-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(-webkit-min-content, 50px) last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "50px last"
 PASS element.style.webkitGridDefinitionRows is "minmax(-webkit-min-content, 5em) last"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first minmax(-webkit-min-content, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first 0px"
 PASS element.style.webkitGridDefinitionColumns is "first minmax(-webkit-min-content, -webkit-max-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(-webkit-max-content, -webkit-min-content) last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "0px last"
 PASS element.style.webkitGridDefinitionRows is "minmax(-webkit-max-content, -webkit-min-content) last"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "nav first minmax(-webkit-min-content, -webkit-max-content) last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "nav first 0px last"
 PASS element.style.webkitGridDefinitionColumns is "first nav minmax(-webkit-min-content, -webkit-max-content) last"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "nav first minmax(-webkit-max-content, -webkit-min-content) last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "nav first 0px last"
 PASS element.style.webkitGridDefinitionRows is "first nav minmax(-webkit-max-content, -webkit-min-content) last"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "nav first minmax(-webkit-min-content, -webkit-max-content) nav auto last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "nav first 0px nav 0px last"
 PASS element.style.webkitGridDefinitionColumns is "first nav minmax(-webkit-min-content, -webkit-max-content) nav auto last"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "first nav2 minmax(-webkit-max-content, -webkit-min-content) nav2 minmax(10px, 15px) last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "first nav2 0px nav2 15px last"
 PASS element.style.webkitGridDefinitionRows is "first nav2 minmax(-webkit-max-content, -webkit-min-content) nav2 minmax(10px, 15px) last"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "foo bar auto foo auto bar"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "foo bar 0px foo 0px bar"
 PASS element.style.webkitGridDefinitionColumns is "foo bar auto foo auto bar"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "foo bar auto foo auto bar"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "foo bar 0px foo 0px bar"
 PASS element.style.webkitGridDefinitionRows is "foo bar auto foo auto bar"
 
 Test getting and setting invalid -webkit-grid-definition-columns and -webkit-grid-definition-rows through JS
old mode 100644 (file)
new mode 100755 (executable)
index 09ec894..881e538
@@ -7,6 +7,17 @@ if (window.testRunner)
 </script>
 <link href="resources/grid.css" rel="stylesheet">
 <style>
+.grid {
+    /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
+    width: 800px;
+    height: 600px;
+}
+.gridItem {
+    -webkit-grid-column: 1;
+    -webkit-grid-row: 1;
+    height: 22px;
+    width: 77px;
+}
 .gridWithFixed {
     -webkit-grid-definition-columns: "first" 10px;
     -webkit-grid-definition-rows: "first" 15px;
@@ -38,6 +49,9 @@ if (window.testRunner)
 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>
 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>
 <div class="grid gridWithAuto" id="gridWithAutoElement"></div>
+<div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement">
+    <div class="gridItem"></div>
+</div>
 <div class="grid gridWithMinMax" id="gridWithMinMax"></div>
 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
@@ -47,26 +61,27 @@ if (window.testRunner)
 
     debug("Test getting -webkit-grid-definition-columns and -webkit-grid-definition-rows set through CSS");
     testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "first 10px", "first 15px");
-    testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% last", "27% last");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "first auto", "auto last");
-    testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "first minmax(10%, 15px)", "minmax(20px, 50%) last");
+    testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px last", "162px last");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "first 0px", "0px last");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenElement"), "first 77px", "22px last");
+    testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "first 80px", "300px last");
     testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "nav first 10px last", "nav first 15px last");
-    testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "nav first 10% nav 15% last", "first nav2 25% nav2 75% last");
+    testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "nav first 80px nav 120px last", "first nav2 150px nav2 450px last");
 
     debug("");
     debug("Test getting and setting -webkit-grid-definition-columns and -webkit-grid-definition-rows through JS");
     testGridDefinitionsSetJSValues("'first' 18px", "66px 'last'", "first 18px", "66px last", "first 18px", "66px last");
-    testGridDefinitionsSetJSValues("'first' 55%", "40% 'last'", "first 55%", "40% last", "first 55%", "40% last");
-    testGridDefinitionsSetJSValues("'first' auto", "auto 'last'", "first auto", "auto last", "first auto", "auto last");
-    testGridDefinitionsSetJSValues("'first' -webkit-min-content", "-webkit-min-content 'last'", "first -webkit-min-content", "-webkit-min-content last", "first -webkit-min-content", "-webkit-min-content last");
-    testGridDefinitionsSetJSValues("'first' -webkit-max-content", "-webkit-max-content 'last'", "first -webkit-max-content", "-webkit-max-content last", "first -webkit-max-content", "-webkit-max-content last");
-    testGridDefinitionsSetJSValues("'first' minmax(55%, 45px)", "minmax(30px, 40%) 'last'", "first minmax(55%, 45px)", "minmax(30px, 40%) last", "first minmax(55%, 45px)", "minmax(30px, 40%) last");
-    testGridDefinitionsSetJSValues("'first' minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em) 'last'", "first minmax(220px, -webkit-max-content)" ,"minmax(-webkit-max-content, 50px) last", "first minmax(22em, -webkit-max-content)" ,"minmax(-webkit-max-content, 5em) last");
-    testGridDefinitionsSetJSValues("'first' minmax(22em, -webkit-min-content)", "minmax(-webkit-min-content, 5em) 'last'", "first minmax(220px, -webkit-min-content)", "minmax(-webkit-min-content, 50px) last", "first minmax(22em, -webkit-min-content)", "minmax(-webkit-min-content, 5em) last");
-    testGridDefinitionsSetJSValues("'first' minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) 'last'", "first minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) last", "first minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) last");
-    testGridDefinitionsSetJSValues("'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'last'", "'first' 'nav' minmax(-webkit-max-content, -webkit-min-content) 'last'", "nav first minmax(-webkit-min-content, -webkit-max-content) last", "nav first minmax(-webkit-max-content, -webkit-min-content) last", "first nav minmax(-webkit-min-content, -webkit-max-content) last", "first nav minmax(-webkit-max-content, -webkit-min-content) last");
-    testGridDefinitionsSetJSValues("'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'nav' auto 'last'", "'first' 'nav2' minmax(-webkit-max-content, -webkit-min-content) 'nav2' minmax(10px, 15px) 'last'", "nav first minmax(-webkit-min-content, -webkit-max-content) nav auto last", "first nav2 minmax(-webkit-max-content, -webkit-min-content) nav2 minmax(10px, 15px) last", "first nav minmax(-webkit-min-content, -webkit-max-content) nav auto last", "first nav2 minmax(-webkit-max-content, -webkit-min-content) nav2 minmax(10px, 15px) last");
-    testGridDefinitionsSetJSValues("'foo' 'bar' auto 'foo' auto 'bar'", "'foo' 'bar' auto 'foo' auto 'bar'", "foo bar auto foo auto bar", "foo bar auto foo auto bar", "foo bar auto foo auto bar", "foo bar auto foo auto bar");
+    testGridDefinitionsSetJSValues("'first' 55%", "40% 'last'", "first 440px", "240px last", "first 55%", "40% last");
+    testGridDefinitionsSetJSValues("'first' auto", "auto 'last'", "first 0px", "0px last", "first auto", "auto last");
+    testGridDefinitionsSetJSValues("'first' -webkit-min-content", "-webkit-min-content 'last'", "first 0px", "0px last", "first -webkit-min-content", "-webkit-min-content last");
+    testGridDefinitionsSetJSValues("'first' -webkit-max-content", "-webkit-max-content 'last'", "first 0px", "0px last", "first -webkit-max-content", "-webkit-max-content last");
+    testGridDefinitionsSetJSValues("'first' minmax(55%, 45px)", "minmax(30px, 40%) 'last'", "first 440px", "240px last", "first minmax(55%, 45px)", "minmax(30px, 40%) last");
+    testGridDefinitionsSetJSValues("'first' minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em) 'last'", "first 220px", "50px last", "first minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em) last");
+    testGridDefinitionsSetJSValues("'first' minmax(22em, -webkit-min-content)", "minmax(-webkit-min-content, 5em) 'last'", "first 220px", "50px last", "first minmax(22em, -webkit-min-content)", "minmax(-webkit-min-content, 5em) last");
+    testGridDefinitionsSetJSValues("'first' minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) 'last'", "first 0px", "0px last", "first minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) last");
+    testGridDefinitionsSetJSValues("'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'last'", "'first' 'nav' minmax(-webkit-max-content, -webkit-min-content) 'last'", "nav first 0px last", "nav first 0px last", "first nav minmax(-webkit-min-content, -webkit-max-content) last", "first nav minmax(-webkit-max-content, -webkit-min-content) last");
+    testGridDefinitionsSetJSValues("'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'nav' auto 'last'", "'first' 'nav2' minmax(-webkit-max-content, -webkit-min-content) 'nav2' minmax(10px, 15px) 'last'", "nav first 0px nav 0px last", "first nav2 0px nav2 15px last", "first nav minmax(-webkit-min-content, -webkit-max-content) nav auto last", "first nav2 minmax(-webkit-max-content, -webkit-min-content) nav2 minmax(10px, 15px) last");
+    testGridDefinitionsSetJSValues("'foo' 'bar' auto 'foo' auto 'bar'", "'foo' 'bar' auto 'foo' auto 'bar'", "foo bar 0px foo 0px bar", "foo bar 0px foo 0px bar", "foo bar auto foo auto bar", "foo bar auto foo auto bar");
 
     debug("");
     debug("Test getting and setting invalid -webkit-grid-definition-columns and -webkit-grid-definition-rows through JS");
diff --git a/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt b/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt
new file mode 100644 (file)
index 0000000..44d1052
--- /dev/null
@@ -0,0 +1,146 @@
+Test that setting and getting grid-definition-columns and grid-definition-rows works as expected
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Test getting grid-definition-columns and grid-definition-rows set through CSS
+PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-columns') is "10px"
+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-rows') is "15px"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-columns') is "53%"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-rows') is "27%"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-rows') is "auto"
+PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-definition-columns') is "100px"
+PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-definition-rows') is "150px"
+PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-definition-columns') is "64px"
+PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-definition-rows') is "60px"
+PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(10%, 15px)"
+PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(20px, 50%)"
+PASS window.getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-definition-columns') is "-webkit-min-content"
+PASS window.getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-definition-rows') is "-webkit-min-content"
+PASS window.getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-definition-columns') is "-webkit-max-content"
+PASS window.getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-definition-rows') is "-webkit-max-content"
+PASS window.getComputedStyle(gridWithFraction, '').getPropertyValue('-webkit-grid-definition-columns') is "1fr"
+PASS window.getComputedStyle(gridWithFraction, '').getPropertyValue('-webkit-grid-definition-rows') is "2fr"
+
+Test getting wrong values for grid-definition-columns and grid-definition-rows through CSS (they should resolve to the default: 'none')
+PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+
+Test the initial value
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'none'
+
+Test getting and setting grid-definition-columns and grid-definition-rows through JS
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "18px"
+PASS element.style.webkitGridDefinitionColumns is "18px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "66px"
+PASS element.style.webkitGridDefinitionRows is "66px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "55%"
+PASS element.style.webkitGridDefinitionColumns is "55%"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "40%"
+PASS element.style.webkitGridDefinitionRows is "40%"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "auto"
+PASS element.style.webkitGridDefinitionColumns is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "auto"
+PASS element.style.webkitGridDefinitionRows is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "80px"
+PASS element.style.webkitGridDefinitionColumns is "10vw"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "150px"
+PASS element.style.webkitGridDefinitionRows is "25vh"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "-webkit-min-content"
+PASS element.style.webkitGridDefinitionColumns is "-webkit-min-content"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "-webkit-min-content"
+PASS element.style.webkitGridDefinitionRows is "-webkit-min-content"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "-webkit-max-content"
+PASS element.style.webkitGridDefinitionColumns is "-webkit-max-content"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "-webkit-max-content"
+PASS element.style.webkitGridDefinitionRows is "-webkit-max-content"
+
+Test getting and setting grid-definition-columns and grid-definition-rows to minmax() values through JS
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(55%, 45px)"
+PASS element.style.webkitGridDefinitionColumns is "minmax(55%, 45px)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(30px, 40%)"
+PASS element.style.webkitGridDefinitionRows is "minmax(30px, 40%)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(220px, 48px)"
+PASS element.style.webkitGridDefinitionColumns is "minmax(22em, 8vh)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(80px, 50px)"
+PASS element.style.webkitGridDefinitionRows is "minmax(10vw, 5em)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(-webkit-min-content, 48px)"
+PASS element.style.webkitGridDefinitionColumns is "minmax(-webkit-min-content, 8vh)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(80px, -webkit-min-content)"
+PASS element.style.webkitGridDefinitionRows is "minmax(10vw, -webkit-min-content)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(220px, -webkit-max-content)"
+PASS element.style.webkitGridDefinitionColumns is "minmax(22em, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(-webkit-max-content, 50px)"
+PASS element.style.webkitGridDefinitionRows is "minmax(-webkit-max-content, 5em)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(-webkit-min-content, -webkit-max-content)"
+PASS element.style.webkitGridDefinitionColumns is "minmax(-webkit-min-content, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(-webkit-max-content, -webkit-min-content)"
+PASS element.style.webkitGridDefinitionRows is "minmax(-webkit-max-content, -webkit-min-content)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "3600fr"
+PASS element.style.webkitGridDefinitionColumns is "3600fr"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "154fr"
+PASS element.style.webkitGridDefinitionRows is "154fr"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "3.1459fr"
+PASS element.style.webkitGridDefinitionColumns is "3.1459fr"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "2.718fr"
+PASS element.style.webkitGridDefinitionRows is "2.718fr"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "3fr"
+PASS element.style.webkitGridDefinitionColumns is "3fr"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "4fr"
+PASS element.style.webkitGridDefinitionRows is "4fr"
+
+Test setting grid-definition-columns and grid-definition-rows to bad values through JS
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+
+Test setting grid-definition-columns and grid-definition-rows back to 'none' through JS
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "18px"
+PASS element.style.webkitGridDefinitionColumns is "18px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "66px"
+PASS element.style.webkitGridDefinitionRows is "66px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS element.style.webkitGridDefinitionColumns is "none"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS element.style.webkitGridDefinitionRows is "none"
+
+Test setting grid-definition-columns and grid-definition-rows to 'inherit' through JS
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is '50px last'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'first 101%'
+
+Test setting grid-definition-columns and grid-definition-rows to 'initial' through JS
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is '150% last'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'first 1fr'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'none'
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt b/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt
new file mode 100644 (file)
index 0000000..2261780
--- /dev/null
@@ -0,0 +1,106 @@
+Test that setting and getting grid-definition-columns and grid-definition-rows works as expected
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Test getting |grid-definition-columns| and |grid-definition-rows| set through CSS
+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-columns') is "7px 11px"
+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-rows') is "17px 2px"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-columns') is "53% 99%"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-rows') is "27% 52%"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-columns') is "auto auto"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-rows') is "auto auto"
+PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-definition-columns') is "100px 120px"
+PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-definition-rows') is "150px 170px"
+PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('-webkit-grid-definition-columns') is "15px auto 100px"
+PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('-webkit-grid-definition-rows') is "120px 18px auto"
+PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('-webkit-grid-definition-columns') is "50% 120px"
+PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('-webkit-grid-definition-rows') is "35% 168px"
+PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('-webkit-grid-definition-columns') is "-webkit-min-content -webkit-max-content"
+PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('-webkit-grid-definition-rows') is "-webkit-max-content -webkit-min-content"
+PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(45px, 30%) 15px"
+PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('-webkit-grid-definition-rows') is "120px minmax(35%, 10px)"
+PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(-webkit-min-content, 30%) 15px"
+PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-definition-rows') is "120px minmax(35%, -webkit-max-content)"
+PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('-webkit-grid-definition-columns') is "1fr 2fr"
+PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('-webkit-grid-definition-rows') is "3fr 4fr"
+PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(-webkit-min-content, 45px) 2fr"
+PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('-webkit-grid-definition-rows') is "3fr minmax(14px, -webkit-max-content)"
+
+Test the initial value
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'none'
+
+Test getting and setting grid-definition-rows and grid-definition-columns through JS
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "18px 22px"
+PASS element.style.webkitGridDefinitionColumns is "18px 22px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "66px 70px"
+PASS element.style.webkitGridDefinitionRows is "66px 70px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "55% 80%"
+PASS element.style.webkitGridDefinitionColumns is "55% 80%"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "40% 63%"
+PASS element.style.webkitGridDefinitionRows is "40% 63%"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "auto auto"
+PASS element.style.webkitGridDefinitionColumns is "auto auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "auto auto"
+PASS element.style.webkitGridDefinitionRows is "auto auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "auto 160px 22px"
+PASS element.style.webkitGridDefinitionColumns is "auto 16em 22px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "56% 100px auto"
+PASS element.style.webkitGridDefinitionRows is "56% 10em auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "160px minmax(16px, 20px)"
+PASS element.style.webkitGridDefinitionColumns is "16em minmax(16px, 20px)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(10%, 15%) auto"
+PASS element.style.webkitGridDefinitionRows is "minmax(10%, 15%) auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "160px 2fr"
+PASS element.style.webkitGridDefinitionColumns is "16em 2fr"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "14fr auto"
+PASS element.style.webkitGridDefinitionRows is "14fr auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "50% 96px"
+PASS element.style.webkitGridDefinitionColumns is "50% 12vw"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "5% 510px"
+PASS element.style.webkitGridDefinitionRows is "5% 85vh"
+
+Test getting wrong values set from CSS
+PASS getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'
+PASS getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('-webkit-grid-definition-rows') is 'none'
+PASS getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'
+PASS getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('-webkit-grid-definition-rows') is 'none'
+
+Test setting and getting wrong values from JS
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+
+Test setting grid-definition-columns and grid-definition-rows to 'inherit' through JS
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "50px 1fr last"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "101% middle 45px"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "50px 1fr last"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "101% middle 45px"
+
+Test setting grid-definition-columns and grid-definition-rows to 'initial' through JS
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "150% middle 55px"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "1fr line 2fr line"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'none'
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.html b/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.html
new file mode 100644 (file)
index 0000000..ecc9730
--- /dev/null
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+if (window.testRunner)
+    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.gridWithFixed {
+    -webkit-grid-definition-columns: 7px 11px;
+    -webkit-grid-definition-rows: 17px 2px;
+}
+
+.gridWithPercent {
+    -webkit-grid-definition-columns: 53% 99%;
+    -webkit-grid-definition-rows: 27% 52%;
+}
+.gridWithAuto {
+    -webkit-grid-definition-columns: auto auto;
+    -webkit-grid-definition-rows: auto auto;
+}
+.gridWithEM {
+    -webkit-grid-definition-columns: 10em 12em;
+    -webkit-grid-definition-rows: 15em 17em;
+    font: 10px Ahem;
+}
+.gridWithNoneAndAuto {
+    -webkit-grid-definition-columns: none auto;
+    -webkit-grid-definition-rows: none auto;
+}
+.gridNoneWithAndFixed {
+    -webkit-grid-definition-columns: none 15px;
+    -webkit-grid-definition-rows: none 22px;
+}
+.gridWithThreeItems {
+    -webkit-grid-definition-columns: 15px auto 10em;
+    -webkit-grid-definition-rows: 12em 18px auto;
+    font: 10px Ahem;
+}
+.gridWithPercentAndViewportPercent {
+    -webkit-grid-definition-columns: 50% 15vw;
+    -webkit-grid-definition-rows: 35% 28vh;
+}
+.gridWithFitContentAndFitAvailable {
+    -webkit-grid-definition-columns: -webkit-content-available;
+    -webkit-grid-definition-rows: -webkit-fit-content -webkit-fit-available;
+}
+.gridWithMinMaxContent {
+    -webkit-grid-definition-columns: -webkit-min-content -webkit-max-content;
+    -webkit-grid-definition-rows: -webkit-max-content -webkit-min-content;
+}
+.gridWithMinMaxAndFixed {
+    -webkit-grid-definition-columns: minmax(45px, 30%) 15px;
+    -webkit-grid-definition-rows: 12em minmax(35%, 10px);
+    font: 10px Ahem;
+}
+.gridWithMinMaxAndMinMaxContent {
+    -webkit-grid-definition-columns: minmax(-webkit-min-content, 30%) 15px;
+    -webkit-grid-definition-rows: 12em minmax(35%, -webkit-max-content);
+    font: 10px Ahem;
+}
+.gridWithFractionFraction {
+    -webkit-grid-definition-columns: 1fr 2fr;
+    -webkit-grid-definition-rows: 3fr 4fr;
+}
+.gridWithFractionMinMax {
+    -webkit-grid-definition-columns: minmax(-webkit-min-content, 45px) 2fr;
+    -webkit-grid-definition-rows: 3fr minmax(14px, -webkit-max-content);
+}
+</style>
+<script src="../../resources/js-test-pre.js"></script>
+</head>
+<body>
+<div class="gridWithFixed" id="gridWithFixedElement"></div>
+<div class="gridWithPercent" id="gridWithPercentElement"></div>
+<div class="gridWithAuto" id="gridWithAutoElement"></div>
+<div class="gridWithEM" id="gridWithEMElement"></div>
+<div class="gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
+<div class="gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
+<div class="gridWithThreeItems" id="gridWithThreeItems"></div>
+<div class="gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
+<div class="gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
+<div class="gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
+<div class="gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
+<div class="gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
+<div class="gridWithFractionFraction" id="gridWithFractionFraction"></div>
+<div class="gridWithFractionMinMax" id="gridWithFractionMinMax"></div>
+<script src="resources/grid-definitions-parsing-utils.js"></script>
+<script src="resources/non-grid-columns-rows-get-set-multiple.js"></script>
+<script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set.html b/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set.html
new file mode 100644 (file)
index 0000000..4eb2b18
--- /dev/null
@@ -0,0 +1,79 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<head>
+<script>
+if (window.testRunner)
+    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.gridWithNone {
+    -webkit-grid-definition-columns: none;
+    -webkit-grid-definition-rows: none;
+}
+.gridWithFixed {
+    -webkit-grid-definition-columns: 10px;
+    -webkit-grid-definition-rows: 15px;
+}
+.gridWithPercent {
+    -webkit-grid-definition-columns: 53%;
+    -webkit-grid-definition-rows: 27%;
+}
+.gridWithAuto {
+    -webkit-grid-definition-columns: auto;
+    -webkit-grid-definition-rows: auto;
+}
+.gridWithEM {
+    -webkit-grid-definition-columns: 10em;
+    -webkit-grid-definition-rows: 15em;
+    font: 10px Ahem;
+}
+.gridWithViewPortPercentage {
+    -webkit-grid-definition-columns: 8vw;
+    -webkit-grid-definition-rows: 10vh;
+}
+.gridWithFitContent {
+    -webkit-grid-definition-columns: -webkit-fit-content;
+    -webkit-grid-definition-rows: -webkit-fit-content;
+}
+.gridWithFitAvailable {
+    -webkit-grid-definition-columns: -webkit-fit-available;
+    -webkit-grid-definition-rows: -webkit-fit-available;
+}
+.gridWithMinMax {
+    -webkit-grid-definition-columns: minmax(10%, 15px);
+    -webkit-grid-definition-rows: minmax(20px, 50%);
+}
+.gridWithMinContent {
+    -webkit-grid-definition-columns: -webkit-min-content;
+    -webkit-grid-definition-rows: -webkit-min-content;
+}
+.gridWithMaxContent {
+    -webkit-grid-definition-columns: -webkit-max-content;
+    -webkit-grid-definition-rows: -webkit-max-content;
+}
+.gridWithFraction {
+    -webkit-grid-definition-columns: 1fr;
+    -webkit-grid-definition-rows: 2fr;
+}
+</style>
+<script src="../../resources/js-test-pre.js"></script>
+</head>
+<body>
+<div class="gridWithNone" id="gridWithNoneElement"></div>
+<div class="gridWithFixed" id="gridWithFixedElement"></div>
+<div class="gridWithPercent" id="gridWithPercentElement"></div>
+<div class="gridWithAuto" id="gridWithAutoElement"></div>
+<div class="gridWithEM" id="gridWithEMElement"></div>
+<div class="gridWithViewPortPercentage" id="gridWithViewPortPercentageElement"></div>
+<div class="gridWithFitContent" id="gridWithFitContentElement"></div>
+<div class="gridWithFitAvailable" id="gridWithFitAvailableElement"></div>
+<div class="gridWithMinMax" id="gridWithMinMax"></div>
+<div class="gridWithMinContent" id="gridWithMinContent"></div>
+<div class="gridWithMaxContent" id="gridWithMaxContent"></div>
+<div class="gridWithFraction" id="gridWithFraction"></div>
+<script src="resources/grid-definitions-parsing-utils.js"></script>
+<script src="resources/non-grid-columns-rows-get-set.js"></script>
+<script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt b/LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt
new file mode 100644 (file)
index 0000000..1bd29df
--- /dev/null
@@ -0,0 +1,37 @@
+Test that setting and getting grid-definition-columns and grid-definition-rows with repeat() works as expected
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Test getting grid-definition-columns and grid-definition-rows set through CSS
+PASS window.getComputedStyle(singleSingleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "15%"
+PASS window.getComputedStyle(singleSingleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "18px"
+PASS window.getComputedStyle(twoSingleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "minmax(15px, 50%) minmax(15px, 50%)"
+PASS window.getComputedStyle(twoSingleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "auto auto"
+PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "auto minmax(100px, 120px) auto minmax(100px, 120px)"
+PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(5px, 10px) auto minmax(5px, 10px) auto"
+PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "auto middle 250px end auto middle 250px end"
+PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "10px start auto end 10px start auto end"
+PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "before auto before auto"
+PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "before 10px before 10px"
+PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "250px end"
+PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "10px end"
+PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "start 250px 250px"
+PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "start 10px 10px"
+PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "start 140px 250px 250px"
+PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "auto 10px 10px"
+PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "250px 250px 15% last"
+PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "10px 10px end auto"
+
+Test invalid repeat syntax.
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set.html b/LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set.html
new file mode 100644 (file)
index 0000000..f29cb9c
--- /dev/null
@@ -0,0 +1,103 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<head>
+<script>
+if (window.testRunner)
+    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.singleSingleTrackRepeat {
+    -webkit-grid-definition-rows: repeat(1, 18px);
+    -webkit-grid-definition-columns: repeat(1, 15%);
+}
+
+.twoSingleTrackRepeat {
+    -webkit-grid-definition-rows: repeat(2, auto);
+    -webkit-grid-definition-columns: repeat(2, minmax(15px, 50%));
+}
+
+.twoDoubleTrackRepeat {
+    -webkit-grid-definition-rows: repeat(2, minmax(5px, 10px)  auto);
+    -webkit-grid-definition-columns: repeat(2, auto minmax(100px, 120px));
+}
+
+.twoDoubleTrackWithNamedGridLineRepeat {
+    -webkit-grid-definition-rows: repeat(2, 10px 'start' auto 'end');
+    -webkit-grid-definition-columns: repeat(2, auto 'middle' 250px 'end');
+}
+
+.twoDoubleTrackWithTrailingNamedGridLineRepeat {
+    -webkit-grid-definition-rows: repeat(2, 'before' 10px);
+    -webkit-grid-definition-columns: repeat(2, 'before' auto);
+}
+
+.trailingNamedGridLineRepeat {
+    -webkit-grid-definition-rows: repeat(1, 10px) 'end';
+    -webkit-grid-definition-columns: repeat(1, 250px) 'end';
+}
+
+.leadingNamedGridLineRepeat {
+    -webkit-grid-definition-rows: 'start' repeat(2, 10px);
+    -webkit-grid-definition-columns: 'start' repeat(2, 250px);
+}
+
+.mixRepeatAfterNonRepeat {
+    -webkit-grid-definition-rows: auto repeat(2, 10px);
+    -webkit-grid-definition-columns: 'start' 140px repeat(2, 250px);
+}
+
+.mixNonRepeatAfterRepeat {
+    -webkit-grid-definition-rows: repeat(2, 10px) 'end' auto;
+    -webkit-grid-definition-columns: repeat(2, 250px) 15% 'last';
+}
+</style>
+<script src="../../resources/js-test-pre.js"></script>
+</head>
+<body>
+<div class="singleSingleTrackRepeat" id="singleSingleTrackRepeat"></div>
+<div class="twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div>
+<div class="twoDoubleTrackRepeat" id="twoDoubleTrackRepeat"></div>
+<div class="twoDoubleTrackWithNamedGridLineRepeat" id="twoDoubleTrackWithNamedGridLineRepeat"></div>
+<div class="twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
+<div class="trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div>
+<div class="leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div>
+<div class="mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat"></div>
+<div class="mixNonRepeatAfterRepeat" id="mixNonRepeatAfterRepeat"></div>
+
+<script src="resources/grid-definitions-parsing-utils.js"></script>
+<script>
+    description('Test that setting and getting grid-definition-columns and grid-definition-rows with repeat() works as expected');
+
+    debug("Test getting grid-definition-columns and grid-definition-rows set through CSS");
+    testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeat"), "15%", "18px");
+    testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), "minmax(15px, 50%) minmax(15px, 50%)", "auto auto");
+    testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), "auto minmax(100px, 120px) auto minmax(100px, 120px)", "minmax(5px, 10px) auto minmax(5px, 10px) auto");
+    testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGridLineRepeat"), "auto middle 250px end auto middle 250px end", "10px start auto end 10px start auto end");
+    testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailingNamedGridLineRepeat"), "before auto before auto", "before 10px before 10px");
+    testGridDefinitionsValues(document.getElementById("trailingNamedGridLineRepeat"), "250px end", "10px end");
+    testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepeat"), "start 250px 250px", "start 10px 10px");
+    testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat"), "start 140px 250px 250px", "auto 10px 10px");
+    testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat"), "250px 250px 15% last", "10px 10px end auto");
+
+    debug("");
+    debug("Test invalid repeat syntax.");
+    function testInvalidSyntax(gridColumn) {
+        element = document.createElement("div");
+        document.body.appendChild(element);
+        element.style.gridDefinitionColumns = gridColumn;
+        shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "none");
+        document.body.removeChild(element);
+    }
+    testInvalidSyntax("repeat(");
+    testInvalidSyntax("repeat()");
+    testInvalidSyntax("repeat(3 / auto)");
+    testInvalidSyntax("repeat(3 , ,)");
+    testInvalidSyntax("repeat(0, 15px)");
+    testInvalidSyntax("repeat(-1, auto)");
+    // Nesting is no allowed.
+    testInvalidSyntax("repeat(2, repeat(1, auto))");
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set-expected.txt b/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set-expected.txt
new file mode 100644 (file)
index 0000000..4607979
--- /dev/null
@@ -0,0 +1,78 @@
+Test that setting and getting grid-definition-columns and grid-definition-rows works as expected
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Test getting grid-definition-columns and grid-definition-rows set through CSS
+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-columns') is "first 10px"
+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-rows') is "first 15px"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-columns') is "53% last"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-rows') is "27% last"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-columns') is "first auto"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-rows') is "auto last"
+PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-definition-columns') is "first minmax(10%, 15px)"
+PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(20px, 50%) last"
+PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('-webkit-grid-definition-columns') is "nav first 10px last"
+PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('-webkit-grid-definition-rows') is "nav first 15px last"
+PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-definition-columns') is "nav first 10% nav 15% last"
+PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-definition-rows') is "first nav2 25% nav2 75% last"
+
+Test getting and setting grid-definition-columns and grid-definition-rows through JS
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first 18px"
+PASS element.style.webkitGridDefinitionColumns is "first 18px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "66px last"
+PASS element.style.webkitGridDefinitionRows is "66px last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first 55%"
+PASS element.style.webkitGridDefinitionColumns is "first 55%"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "40% last"
+PASS element.style.webkitGridDefinitionRows is "40% last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first auto"
+PASS element.style.webkitGridDefinitionColumns is "first auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "auto last"
+PASS element.style.webkitGridDefinitionRows is "auto last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first -webkit-min-content"
+PASS element.style.webkitGridDefinitionColumns is "first -webkit-min-content"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "-webkit-min-content last"
+PASS element.style.webkitGridDefinitionRows is "-webkit-min-content last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first -webkit-max-content"
+PASS element.style.webkitGridDefinitionColumns is "first -webkit-max-content"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "-webkit-max-content last"
+PASS element.style.webkitGridDefinitionRows is "-webkit-max-content last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first minmax(55%, 45px)"
+PASS element.style.webkitGridDefinitionColumns is "first minmax(55%, 45px)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(30px, 40%) last"
+PASS element.style.webkitGridDefinitionRows is "minmax(30px, 40%) last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first minmax(220px, -webkit-max-content)"
+PASS element.style.webkitGridDefinitionColumns is "first minmax(22em, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(-webkit-max-content, 50px) last"
+PASS element.style.webkitGridDefinitionRows is "minmax(-webkit-max-content, 5em) last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first minmax(220px, -webkit-min-content)"
+PASS element.style.webkitGridDefinitionColumns is "first minmax(22em, -webkit-min-content)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(-webkit-min-content, 50px) last"
+PASS element.style.webkitGridDefinitionRows is "minmax(-webkit-min-content, 5em) last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "first minmax(-webkit-min-content, -webkit-max-content)"
+PASS element.style.webkitGridDefinitionColumns is "first minmax(-webkit-min-content, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "minmax(-webkit-max-content, -webkit-min-content) last"
+PASS element.style.webkitGridDefinitionRows is "minmax(-webkit-max-content, -webkit-min-content) last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "nav first minmax(-webkit-min-content, -webkit-max-content) last"
+PASS element.style.webkitGridDefinitionColumns is "first nav minmax(-webkit-min-content, -webkit-max-content) last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "nav first minmax(-webkit-max-content, -webkit-min-content) last"
+PASS element.style.webkitGridDefinitionRows is "first nav minmax(-webkit-max-content, -webkit-min-content) last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "nav first minmax(-webkit-min-content, -webkit-max-content) nav auto last"
+PASS element.style.webkitGridDefinitionColumns is "first nav minmax(-webkit-min-content, -webkit-max-content) nav auto last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "first nav2 minmax(-webkit-max-content, -webkit-min-content) nav2 minmax(10px, 15px) last"
+PASS element.style.webkitGridDefinitionRows is "first nav2 minmax(-webkit-max-content, -webkit-min-content) nav2 minmax(10px, 15px) last"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "foo bar auto foo auto bar"
+PASS element.style.webkitGridDefinitionColumns is "foo bar auto foo auto bar"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "foo bar auto foo auto bar"
+PASS element.style.webkitGridDefinitionRows is "foo bar auto foo auto bar"
+
+Test getting and setting invalid grid-definition-columns and grid-definition-rows through JS
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is "none"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is "none"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html b/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html
new file mode 100644 (file)
index 0000000..5f64784
--- /dev/null
@@ -0,0 +1,99 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<script>
+if (window.testRunner)
+    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.gridItem {
+    -webkit-grid-column: 1;
+    -webkit-grid-row: 1;
+    height: 22px;
+    width: 77px;
+}
+.gridWithFixed {
+    -webkit-grid-definition-columns: "first" 10px;
+    -webkit-grid-definition-rows: "first" 15px;
+}
+.gridWithPercent {
+    -webkit-grid-definition-columns: 53% "last";
+    -webkit-grid-definition-rows: 27% "last";
+}
+.gridWithAuto {
+    -webkit-grid-definition-columns: "first" auto;
+    -webkit-grid-definition-rows: auto "last";
+}
+.gridWithMinMax {
+    -webkit-grid-definition-columns: "first" minmax(10%, 15px);
+    -webkit-grid-definition-rows: minmax(20px, 50%) "last";
+}
+.gridWithFixedMultiple {
+    -webkit-grid-definition-columns: "first" "nav" 10px "last";
+    -webkit-grid-definition-rows: "first" "nav" 15px "last";
+}
+.gridWithPercentageSameStringMultipleTimes {
+    -webkit-grid-definition-columns: "first" "nav" 10% "nav" 15% "last";
+    -webkit-grid-definition-rows: "first" "nav2" 25% "nav2" 75% "last";
+}
+</style>
+<script src="../../resources/js-test-pre.js"></script>
+</head>
+<body>
+<div class="gridWithFixed" id="gridWithFixedElement"></div>
+<div class="gridWithPercent" id="gridWithPercentElement"></div>
+<div class="gridWithAuto" id="gridWithAutoElement"></div>
+<div class="gridWithAuto" id="gridWithAutoWithChildrenElement">
+    <div class="gridItem"></div>
+</div>
+<div class="gridWithMinMax" id="gridWithMinMax"></div>
+<div class="gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
+<div class="gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
+
+<script src="resources/grid-definitions-parsing-utils.js"></script>
+<script>
+    description('Test that setting and getting grid-definition-columns and grid-definition-rows works as expected');
+
+    debug("Test getting grid-definition-columns and grid-definition-rows set through CSS");
+    testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "first 10px", "first 15px");
+    testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% last", "27% last");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "first auto", "auto last");
+    testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "first minmax(10%, 15px)", "minmax(20px, 50%) last");
+    testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "nav first 10px last", "nav first 15px last");
+    testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "nav first 10% nav 15% last", "first nav2 25% nav2 75% last");
+
+    debug("");
+    debug("Test getting and setting grid-definition-columns and grid-definition-rows through JS");
+    testNonGridDefinitionsSetJSValues("'first' 18px", "66px 'last'", "first 18px", "66px last", "first 18px", "66px last");
+    testNonGridDefinitionsSetJSValues("'first' 55%", "40% 'last'", "first 55%", "40% last", "first 55%", "40% last");
+    testNonGridDefinitionsSetJSValues("'first' auto", "auto 'last'", "first auto", "auto last", "first auto", "auto last");
+    testNonGridDefinitionsSetJSValues("'first' -webkit-min-content", "-webkit-min-content 'last'", "first -webkit-min-content", "-webkit-min-content last", "first -webkit-min-content", "-webkit-min-content last");
+    testNonGridDefinitionsSetJSValues("'first' -webkit-max-content", "-webkit-max-content 'last'", "first -webkit-max-content", "-webkit-max-content last", "first -webkit-max-content", "-webkit-max-content last");
+    testNonGridDefinitionsSetJSValues("'first' minmax(55%, 45px)", "minmax(30px, 40%) 'last'", "first minmax(55%, 45px)", "minmax(30px, 40%) last", "first minmax(55%, 45px)", "minmax(30px, 40%) last");
+    testNonGridDefinitionsSetJSValues("'first' minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em) 'last'", "first minmax(220px, -webkit-max-content)", "minmax(-webkit-max-content, 50px) last", "first minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em) last", "first minmax(220px, -webkit-max-content)", "minmax(-webkit-max-content, 50px) last", "minmax(-webkit-max-content, 50px) last");
+    testNonGridDefinitionsSetJSValues("'first' minmax(22em, -webkit-min-content)", "minmax(-webkit-min-content, 5em) 'last'", "first minmax(220px, -webkit-min-content)", "minmax(-webkit-min-content, 50px) last", "first minmax(22em, -webkit-min-content)", "minmax(-webkit-min-content, 5em) last", "first minmax(220px, -webkit-min-content)", "minmax(-webkit-min-content, 50px) last", "minmax(-webkit-min-content, 50px) last");
+    testNonGridDefinitionsSetJSValues("'first' minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) 'last'", "first minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) last", "first minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) last");
+    testNonGridDefinitionsSetJSValues("'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'last'", "'first' 'nav' minmax(-webkit-max-content, -webkit-min-content) 'last'", "nav first minmax(-webkit-min-content, -webkit-max-content) last", "nav first minmax(-webkit-max-content, -webkit-min-content) last", "first nav minmax(-webkit-min-content, -webkit-max-content) last", "first nav minmax(-webkit-max-content, -webkit-min-content) last");
+    testNonGridDefinitionsSetJSValues("'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'nav' auto 'last'", "'first' 'nav2' minmax(-webkit-max-content, -webkit-min-content) 'nav2' minmax(10px, 15px) 'last'", "nav first minmax(-webkit-min-content, -webkit-max-content) nav auto last", "first nav2 minmax(-webkit-max-content, -webkit-min-content) nav2 minmax(10px, 15px) last", "first nav minmax(-webkit-min-content, -webkit-max-content) nav auto last", "first nav2 minmax(-webkit-max-content, -webkit-min-content) nav2 minmax(10px, 15px) last");;
+    testNonGridDefinitionsSetJSValues("'foo' 'bar' auto 'foo' auto 'bar'", "'foo' 'bar' auto 'foo' auto 'bar'", "foo bar auto foo auto bar", "foo bar auto foo auto bar", "foo bar auto foo auto bar", "foo bar auto foo auto bar");
+
+    debug("");
+    debug("Test getting and setting invalid grid-definition-columns and grid-definition-rows through JS");
+    element = document.createElement("div");
+    document.body.appendChild(element);
+    element.style.webkitGridDefinitionColumns = "'foo'";
+    element.style.webkitGridDefinitionRows = "'bar";
+    shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "none");
+    shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "none");
+
+    element = document.createElement("div");
+    document.body.appendChild(element);
+    element.style.webkitGridDefinitionColumns = "'foo' 'bar'";
+    element.style.webkitGridDefinitionRows = "'bar' 'foo'";
+    shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "none");
+    shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "none");
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
index 23d24b2..eb2a386 100755 (executable)
@@ -2,17 +2,18 @@ description('Test that setting and getting grid-definition-columns and grid-defi
 
 debug("Test getting |grid-definition-columns| and |grid-definition-rows| set through CSS");
 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "7px 11px", "17px 2px");
-testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% 99%", "27% 52%");
-testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "auto auto", "auto auto");
+testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% 99%", "27% 52%", "424px 792px", "162px 312px");
+testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "auto auto", "auto auto", "0px 17px", "0px 3px");
 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px 120px", "150px 170px");
-testGridDefinitionsValues(document.getElementById("gridWithThreeItems"), "15px auto 100px", "120px 18px auto");
-testGridDefinitionsValues(document.getElementById("gridWithPercentAndViewportPercent"), "50% 120px", "35% 168px");
+testGridDefinitionsValues(document.getElementById("gridWithThreeItems"), "15px auto 100px", "120px 18px auto", "15px 0px 100px", "120px 18px 0px");
+testGridDefinitionsValues(document.getElementById("gridWithPercentAndViewportPercent"), "50% 120px", "35% 168px", "400px 120px", "210px 168px");
 testGridDefinitionsValues(document.getElementById("gridWithFitContentAndFitAvailable"), "none", "none");
-testGridDefinitionsValues(document.getElementById("gridWithMinMaxContent"), "-webkit-min-content -webkit-max-content", "-webkit-max-content -webkit-min-content");
-testGridDefinitionsValues(document.getElementById("gridWithMinMaxAndFixed"), "minmax(45px, 30%) 15px", "120px minmax(35%, 10px)");
-testGridDefinitionsValues(document.getElementById("gridWithMinMaxAndMinMaxContent"), "minmax(-webkit-min-content, 30%) 15px", "120px minmax(35%, -webkit-max-content)");
-testGridDefinitionsValues(document.getElementById("gridWithFractionFraction"), "1fr 2fr", "3fr 4fr");
-testGridDefinitionsValues(document.getElementById("gridWithFractionMinMax"), "minmax(-webkit-min-content, 45px) 2fr", "3fr minmax(14px, -webkit-max-content)");
+testGridDefinitionsValues(document.getElementById("gridWithMinMaxContent"), "-webkit-min-content -webkit-max-content", "-webkit-max-content -webkit-min-content", "0px 0px", "0px 0px");
+testGridDefinitionsValues(document.getElementById("gridWithMinMaxContentWithChildrenElement"), "-webkit-min-content -webkit-max-content", "-webkit-max-content -webkit-min-content", "7px 17px", "11px 3px");
+testGridDefinitionsValues(document.getElementById("gridWithMinMaxAndFixed"), "minmax(45px, 30%) 15px", "120px minmax(35%, 10px)", "240px 15px", "120px 210px");
+testGridDefinitionsValues(document.getElementById("gridWithMinMaxAndMinMaxContent"), "minmax(-webkit-min-content, 30%) 15px", "120px minmax(35%, -webkit-max-content)", "240px 15px", "120px 210px");
+testGridDefinitionsValues(document.getElementById("gridWithFractionFraction"), "1fr 2fr", "3fr 4fr", "320px 480px", "225px 375px");
+testGridDefinitionsValues(document.getElementById("gridWithFractionMinMax"), "minmax(-webkit-min-content, 45px) 2fr", "3fr minmax(14px, -webkit-max-content)", "45px 755px", "586px 14px");
 
 debug("");
 debug("Test the initial value");
@@ -24,11 +25,11 @@ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definitio
 debug("");
 debug("Test getting and setting grid-definition-rows and grid-definition-columns through JS");
 testGridDefinitionsSetJSValues("18px 22px", "66px 70px");
-testGridDefinitionsSetJSValues("55% 80%", "40% 63%");
-testGridDefinitionsSetJSValues("auto auto", "auto auto");
-testGridDefinitionsSetJSValues("auto 16em 22px", "56% 10em auto", "auto 160px 22px", "56% 100px auto");
-testGridDefinitionsSetJSValues("16em minmax(16px, 20px)", "minmax(10%, 15%) auto", "160px minmax(16px, 20px)");
-testGridDefinitionsSetJSValues("16em 2fr", "14fr auto", "160px 2fr");
+testGridDefinitionsSetJSValues("55% 80%", "40% 63%", "440px 640px", "240px 378px");
+testGridDefinitionsSetJSValues("auto auto", "auto auto", "0px 0px", "0px 0px");
+testGridDefinitionsSetJSValues("auto 16em 22px", "56% 10em auto", "0px 160px 22px", "336px 100px 0px");
+testGridDefinitionsSetJSValues("16em minmax(16px, 20px)", "minmax(10%, 15%) auto", "160px 20px", "90px 0px");
+testGridDefinitionsSetJSValues("16em 2fr", "14fr auto", "160px 640px", "600px 0px");
 
 debug("");
 debug("Test getting wrong values set from CSS");
@@ -53,14 +54,17 @@ function testInherit()
 {
     var parentElement = document.createElement("div");
     document.body.appendChild(parentElement);
+    parentElement.style.width = "800px";
+    parentElement.style.font = "10px Ahem"; // Used to resolve em font consistently.
     parentElement.style.webkitGridDefinitionColumns = "50px 1fr 'last'";
-    parentElement.style.webkitGridDefinitionRows = "101% 'middle' 45px";
+    parentElement.style.webkitGridDefinitionRows = "2em 'middle' 45px";
 
     element = document.createElement("div");
     parentElement.appendChild(element);
+    element.style.display = "-webkit-grid";
     element.style.webkitGridDefinitionColumns = "inherit";
     element.style.webkitGridDefinitionRows = "inherit";
-    testGridDefinitionsValues(element, "50px 1fr last", "101% middle 45px");
+    testGridDefinitionsValues(element, "50px 750px last", "20px middle 45px");
 
     document.body.removeChild(parentElement);
 }
@@ -72,9 +76,12 @@ function testInitial()
 {
     element = document.createElement("div");
     document.body.appendChild(element);
+    element.style.display = "-webkit-grid";
+    element.style.width = "800px";
+    element.style.height = "600px";
     element.style.webkitGridDefinitionColumns = "150% 'middle' 55px";
     element.style.webkitGridDefinitionRows = "1fr 'line' 2fr 'line'";
-    testGridDefinitionsValues(element, "150% middle 55px", "1fr line 2fr line");
+    testGridDefinitionsValues(element, "1200px middle 55px", "200px line 400px line");
 
     element.style.webkitGridDefinitionColumns = "initial";
     element.style.webkitGridDefinitionRows = "initial";
index 18ea55c..433acca 100755 (executable)
@@ -3,14 +3,17 @@ description('Test that setting and getting grid-definition-columns and grid-defi
 debug("Test getting -webkit-grid-definition-columns and -webkit-grid-definition-rows set through CSS");
 testGridDefinitionsValues(document.getElementById("gridWithNoneElement"), "none", "none");
 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "10px", "15px");
-testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53%", "27%");
-testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "auto", "auto");
+testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px", "162px");
+testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "0px", "0px");
+testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenElement"), "7px", "11px");
 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px", "150px");
 testGridDefinitionsValues(document.getElementById("gridWithViewPortPercentageElement"), "64px", "60px");
-testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "minmax(10%, 15px)", "minmax(20px, 50%)");
-testGridDefinitionsValues(document.getElementById("gridWithMinContent"), "-webkit-min-content", "-webkit-min-content");
-testGridDefinitionsValues(document.getElementById("gridWithMaxContent"), "-webkit-max-content", "-webkit-max-content");
-testGridDefinitionsValues(document.getElementById("gridWithFraction"), "1fr", "2fr");
+testGridDefinitionsValues(document.getElementById("gridWithMinMaxElement"), "80px", "300px");
+testGridDefinitionsValues(document.getElementById("gridWithMinContentElement"), "0px", "0px");
+testGridDefinitionsValues(document.getElementById("gridWithMinContentWithChildrenElement"), "17px", "11px");
+testGridDefinitionsValues(document.getElementById("gridWithMaxContentElement"), "0px", "0px");
+testGridDefinitionsValues(document.getElementById("gridWithMaxContentWithChildrenElement"), "17px", "11px");
+testGridDefinitionsValues(document.getElementById("gridWithFractionElement"), "800px", "600px");
 
 debug("");
 debug("Test getting wrong values for -webkit-grid-definition-columns and -webkit-grid-definition-rows through CSS (they should resolve to the default: 'none')");
@@ -29,28 +32,27 @@ testGridDefinitionsValues(element, "none", "none");
 debug("");
 debug("Test getting and setting -webkit-grid-definition-columns and -webkit-grid-definition-rows through JS");
 testGridDefinitionsSetJSValues("18px", "66px");
-testGridDefinitionsSetJSValues("55%", "40%");
-testGridDefinitionsSetJSValues("auto", "auto");
+testGridDefinitionsSetJSValues("55%", "40%", "440px", "240px");
+testGridDefinitionsSetJSValues("auto", "auto", "0px", "0px");
 testGridDefinitionsSetJSValues("10vw", "25vh", "80px", "150px");
-testGridDefinitionsSetJSValues("-webkit-min-content", "-webkit-min-content");
-testGridDefinitionsSetJSValues("-webkit-max-content", "-webkit-max-content");
+testGridDefinitionsSetJSValues("-webkit-min-content", "-webkit-min-content", "0px", "0px");
+testGridDefinitionsSetJSValues("-webkit-max-content", "-webkit-max-content", "0px", "0px");
 
 debug("");
 debug("Test getting and setting -webkit-grid-definition-columns and -webkit-grid-definition-rows to minmax() values through JS");
-testGridDefinitionsSetJSValues("minmax(55%, 45px)", "minmax(30px, 40%)");
-testGridDefinitionsSetJSValues("minmax(22em, 8vh)", "minmax(10vw, 5em)", "minmax(220px, 48px)", "minmax(80px, 50px)");
-testGridDefinitionsSetJSValues("minmax(-webkit-min-content, 8vh)", "minmax(10vw, -webkit-min-content)", "minmax(-webkit-min-content, 48px)", "minmax(80px, -webkit-min-content)");
-testGridDefinitionsSetJSValues("minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em)", "minmax(220px, -webkit-max-content)", "minmax(-webkit-max-content, 50px)");
-testGridDefinitionsSetJSValues("minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content)");
-
+testGridDefinitionsSetJSValues("minmax(55%, 45px)", "minmax(30px, 40%)", "440px", "240px");
+testGridDefinitionsSetJSValues("minmax(22em, 8vh)", "minmax(10vw, 5em)", "220px", "80px");
+testGridDefinitionsSetJSValues("minmax(-webkit-min-content, 8vh)", "minmax(10vw, -webkit-min-content)", "48px", "80px");
+testGridDefinitionsSetJSValues("minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em)", "220px", "50px");
+testGridDefinitionsSetJSValues("minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content)", "0px", "0px");
 // Unit comparison should be case-insensitive.
-testGridDefinitionsSetJSValues("3600Fr", "154fR", "3600fr", "154fr", "3600fr", "154fr");
+testGridDefinitionsSetJSValues("3600Fr", "154fR", "800px", "600px", "3600fr", "154fr");
 
 // Float values are allowed.
-+testGridDefinitionsSetJSValues("3.1459fr", "2.718fr");
++testGridDefinitionsSetJSValues("3.1459fr", "2.718fr", "800px", "600px");
 
 // A leading '+' is allowed.
-testGridDefinitionsSetJSValues("+3fr", "+4fr", "3fr", "4fr", "3fr", "4fr");
+testGridDefinitionsSetJSValues("+3fr", "+4fr", "800px", "600px", "3fr", "4fr");
 
 debug("");
 debug("Test setting grid-definition-columns and grid-definition-rows to bad values through JS");
@@ -83,15 +85,17 @@ function testInherit()
 {
     var parentElement = document.createElement("div");
     document.body.appendChild(parentElement);
+    parentElement.style.font = "10px Ahem"; // Used to resolve em font consistently.
     parentElement.style.webkitGridDefinitionColumns = "50px 'last'";
-    parentElement.style.webkitGridDefinitionRows = "'first' 101%";
+    parentElement.style.webkitGridDefinitionRows = "'first' 2em";
 
     element = document.createElement("div");
     parentElement.appendChild(element);
+    element.style.display = "-webkit-grid";
     element.style.webkitGridDefinitionColumns = "inherit";
     element.style.webkitGridDefinitionRows = "inherit";
     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'50px last'");
-    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'first 101%'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'first 20px'");
 
     document.body.removeChild(parentElement);
 }
@@ -103,11 +107,15 @@ function testInitial()
 {
     element = document.createElement("div");
     document.body.appendChild(element);
+    element.style.display = "-webkit-grid";
+    element.style.width = "300px";
+    element.style.height = "150px";
     element.style.webkitGridDefinitionColumns = "150% 'last'";
     element.style.webkitGridDefinitionRows = "'first' 1fr";
-    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'150% last'");
-    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'first 1fr'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'450px last'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'first 150px'");
 
+    element.style.display = "-webkit-grid";
     element.style.webkitGridDefinitionColumns = "initial";
     element.style.webkitGridDefinitionRows = "initial";
     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
index aaed0f3..519b3e5 100644 (file)
@@ -1,9 +1,9 @@
-function testGridDefinitionsValues(element, columnValue, rowValue)
+function testGridDefinitionsValues(element, columnValue, rowValue, computedColumnValue, computedRowValue)
 {
     window.element = element;
     var elementID = element.id || "element";
-    shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-definition-columns')", columnValue);
-    shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-definition-rows')", rowValue);
+    shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-definition-columns')", computedColumnValue || columnValue);
+    shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-definition-rows')", computedRowValue || rowValue);
 }
 
 function testGridDefinitionsSetJSValues(columnValue, rowValue, computedColumnValue, computedRowValue, jsColumnValue, jsRowValue)
@@ -21,7 +21,7 @@ function checkGridDefinitionsSetJSValues(useGrid, columnValue, rowValue, compute
     window.element = document.createElement("div");
     document.body.appendChild(element);
     if (useGrid) {
-        element.style.display = "grid";
+        element.style.display = "-webkit-grid";
         element.style.width = "800px";
         element.style.height = "600px";
     }
diff --git a/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set-multiple.js b/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set-multiple.js
new file mode 100644 (file)
index 0000000..b93d410
--- /dev/null
@@ -0,0 +1,94 @@
+description('Test that setting and getting grid-definition-columns and grid-definition-rows works as expected');
+
+debug("Test getting |grid-definition-columns| and |grid-definition-rows| set through CSS");
+testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "7px 11px", "17px 2px");
+testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% 99%", "27% 52%");
+testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "auto auto", "auto auto");
+testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px 120px", "150px 170px");
+testGridDefinitionsValues(document.getElementById("gridWithThreeItems"), "15px auto 100px", "120px 18px auto");
+testGridDefinitionsValues(document.getElementById("gridWithPercentAndViewportPercent"), "50% 120px", "35% 168px");
+testGridDefinitionsValues(document.getElementById("gridWithFitContentAndFitAvailable"), "none", "none");
+testGridDefinitionsValues(document.getElementById("gridWithMinMaxContent"), "-webkit-min-content -webkit-max-content", "-webkit-max-content -webkit-min-content");
+testGridDefinitionsValues(document.getElementById("gridWithMinMaxAndFixed"), "minmax(45px, 30%) 15px", "120px minmax(35%, 10px)");
+testGridDefinitionsValues(document.getElementById("gridWithMinMaxAndMinMaxContent"), "minmax(-webkit-min-content, 30%) 15px", "120px minmax(35%, -webkit-max-content)");
+testGridDefinitionsValues(document.getElementById("gridWithFractionFraction"), "1fr 2fr", "3fr 4fr");
+testGridDefinitionsValues(document.getElementById("gridWithFractionMinMax"), "minmax(-webkit-min-content, 45px) 2fr", "3fr minmax(14px, -webkit-max-content)");
+
+debug("");
+debug("Test the initial value");
+var element = document.createElement("div");
+document.body.appendChild(element);
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
+
+debug("");
+debug("Test getting and setting grid-definition-rows and grid-definition-columns through JS");
+testNonGridDefinitionsSetJSValues("18px 22px", "66px 70px");
+testNonGridDefinitionsSetJSValues("55% 80%", "40% 63%");
+testNonGridDefinitionsSetJSValues("auto auto", "auto auto");
+testNonGridDefinitionsSetJSValues("auto 16em 22px", "56% 10em auto", "auto 160px 22px", "56% 100px auto");
+testNonGridDefinitionsSetJSValues("16em minmax(16px, 20px)", "minmax(10%, 15%) auto", "160px minmax(16px, 20px)");
+testNonGridDefinitionsSetJSValues("16em 2fr", "14fr auto", "160px 2fr");
+testNonGridDefinitionsSetJSValues("50% 12vw", "5% 85vh", "50% 96px", "5% 510px");
+
+debug("");
+debug("Test getting wrong values set from CSS");
+var gridWithNoneAndAuto = document.getElementById("gridWithNoneAndAuto");
+shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
+shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
+
+var gridWithNoneAndFixed = document.getElementById("gridWithNoneAndFixed");
+shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
+shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
+
+debug("");
+debug("Test setting and getting wrong values from JS");
+testGridDefinitionsSetBadJSValues("none auto", "none auto");
+testGridDefinitionsSetBadJSValues("none 16em", "none 56%");
+testGridDefinitionsSetBadJSValues("none none", "none none");
+testGridDefinitionsSetBadJSValues("auto none", "auto none");
+testGridDefinitionsSetBadJSValues("auto none 16em", "auto 18em none");
+testGridDefinitionsSetBadJSValues("-webkit-fit-content -webkit-fit-content", "-webkit-fit-available -webkit-fit-available");
+testGridDefinitionsSetBadJSValues("auto minmax(16px, auto)", "minmax(auto, 15%) 10vw");
+// Negative values are not allowed.
+testGridDefinitionsSetBadJSValues("-10px minmax(16px, 32px)", "minmax(10%, 15%) -10vw");
+testGridDefinitionsSetBadJSValues("10px minmax(16px, -1vw)", "minmax(-1%, 15%) 10vw");
+
+function testInherit()
+{
+    var parentElement = document.createElement("div");
+    document.body.appendChild(parentElement);
+    parentElement.style.webkitGridDefinitionColumns = "50px 1fr 'last'";
+    parentElement.style.webkitGridDefinitionRows = "101% 'middle' 45px";
+    testGridDefinitionsValues(parentElement, "50px 1fr last", "101% middle 45px");
+
+    element = document.createElement("div");
+    parentElement.appendChild(element);
+    element.style.webkitGridDefinitionColumns = "inherit";
+    element.style.webkitGridDefinitionRows = "inherit";
+    testGridDefinitionsValues(element, "50px 1fr last", "101% middle 45px");
+
+    document.body.removeChild(parentElement);
+}
+debug("");
+debug("Test setting grid-definition-columns and grid-definition-rows to 'inherit' through JS");
+testInherit();
+
+function testInitial()
+{
+    element = document.createElement("div");
+    document.body.appendChild(element);
+    element.style.webkitGridDefinitionColumns = "150% 'middle' 55px";
+    element.style.webkitGridDefinitionRows = "1fr 'line' 2fr 'line'";
+    testGridDefinitionsValues(element, "150% middle 55px", "1fr line 2fr line");
+
+    element.style.webkitGridDefinitionColumns = "initial";
+    element.style.webkitGridDefinitionRows = "initial";
+    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
+
+    document.body.removeChild(element);
+}
+debug("");
+debug("Test setting grid-definition-columns and grid-definition-rows to 'initial' through JS");
+testInitial();
diff --git a/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js b/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js
new file mode 100644 (file)
index 0000000..1f6f6fa
--- /dev/null
@@ -0,0 +1,117 @@
+description('Test that setting and getting grid-definition-columns and grid-definition-rows works as expected');
+
+debug("Test getting grid-definition-columns and grid-definition-rows set through CSS");
+testGridDefinitionsValues(document.getElementById("gridWithNoneElement"), "none", "none");
+testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "10px", "15px");
+testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53%", "27%");
+testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "auto", "auto");
+testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px", "150px");
+testGridDefinitionsValues(document.getElementById("gridWithViewPortPercentageElement"), "64px", "60px");
+testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "minmax(10%, 15px)", "minmax(20px, 50%)");
+testGridDefinitionsValues(document.getElementById("gridWithMinContent"), "-webkit-min-content", "-webkit-min-content");
+testGridDefinitionsValues(document.getElementById("gridWithMaxContent"), "-webkit-max-content", "-webkit-max-content");
+testGridDefinitionsValues(document.getElementById("gridWithFraction"), "1fr", "2fr");
+
+debug("");
+debug("Test getting wrong values for grid-definition-columns and grid-definition-rows through CSS (they should resolve to the default: 'none')");
+var gridWithFitContentElement = document.getElementById("gridWithFitContentElement");
+testGridDefinitionsValues(gridWithFitContentElement, "none", "none");
+
+var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableElement");
+testGridDefinitionsValues(gridWithFitAvailableElement, "none", "none");
+
+debug("");
+debug("Test the initial value");
+var element = document.createElement("div");
+document.body.appendChild(element);
+testGridDefinitionsValues(element, "none", "none");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
+
+debug("");
+debug("Test getting and setting grid-definition-columns and grid-definition-rows through JS");
+testNonGridDefinitionsSetJSValues("18px", "66px");
+testNonGridDefinitionsSetJSValues("55%", "40%");
+testNonGridDefinitionsSetJSValues("auto", "auto");
+testNonGridDefinitionsSetJSValues("10vw", "25vh", "80px", "150px");
+testNonGridDefinitionsSetJSValues("-webkit-min-content", "-webkit-min-content");
+testNonGridDefinitionsSetJSValues("-webkit-max-content", "-webkit-max-content");
+
+debug("");
+debug("Test getting and setting grid-definition-columns and grid-definition-rows to minmax() values through JS");
+testNonGridDefinitionsSetJSValues("minmax(55%, 45px)", "minmax(30px, 40%)");
+testNonGridDefinitionsSetJSValues("minmax(22em, 8vh)", "minmax(10vw, 5em)", "minmax(220px, 48px)", "minmax(80px, 50px)");
+testNonGridDefinitionsSetJSValues("minmax(-webkit-min-content, 8vh)", "minmax(10vw, -webkit-min-content)", "minmax(-webkit-min-content, 48px)", "minmax(80px, -webkit-min-content)");
+testNonGridDefinitionsSetJSValues("minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em)", "minmax(220px, -webkit-max-content)", "minmax(-webkit-max-content, 50px)");
+testNonGridDefinitionsSetJSValues("minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content)");
+// Unit comparison should be case-insensitive.
+testNonGridDefinitionsSetJSValues("3600Fr", "154fR", "3600fr", "154fr", "3600fr", "154fr");
+// Float values are allowed.
+testNonGridDefinitionsSetJSValues("3.1459fr", "2.718fr");
+// A leading '+' is allowed.
+testNonGridDefinitionsSetJSValues("+3fr", "+4fr", "3fr", "4fr", "3fr", "4fr");
+
+debug("");
+debug("Test setting grid-definition-columns and grid-definition-rows to bad values through JS");
+// No comma and only 1 argument provided.
+testGridDefinitionsSetBadJSValues("minmax(10px 20px)", "minmax(10px)")
+// Nested minmax and only 2 arguments are allowed.
+testGridDefinitionsSetBadJSValues("minmax(minmax(10px, 20px), 20px)", "minmax(10px, 20px, 30px)");
+// No breadth value and no comma.
+testGridDefinitionsSetBadJSValues("minmax()", "minmax(30px 30% 30em)");
+// Auto is not allowed inside minmax.
+testGridDefinitionsSetBadJSValues("minmax(auto, 8vh)", "minmax(10vw, auto)");
+testGridDefinitionsSetBadJSValues("-2fr", "3ffr");
+testGridDefinitionsSetBadJSValues("-2.05fr", "+-3fr");
+testGridDefinitionsSetBadJSValues("0fr", "1r");
+// A dimension doesn't allow spaces between the number and the unit.
+testGridDefinitionsSetBadJSValues(".0000fr", "13 fr");
+testGridDefinitionsSetBadJSValues("7.-fr", "-8,0fr");
+// Negative values are not allowed.
+testGridDefinitionsSetBadJSValues("-1px", "-6em");
+testGridDefinitionsSetBadJSValues("minmax(-1%, 32%)", "minmax(2vw, -6em)");
+
+debug("");
+debug("Test setting grid-definition-columns and grid-definition-rows back to 'none' through JS");
+testNonGridDefinitionsSetJSValues("18px", "66px");
+testNonGridDefinitionsSetJSValues("none", "none");
+
+function testInherit()
+{
+    var parentElement = document.createElement("div");
+    document.body.appendChild(parentElement);
+    parentElement.style.webkitGridDefinitionColumns = "50px 'last'";
+    parentElement.style.webkitGridDefinitionRows = "'first' 101%";
+
+    element = document.createElement("div");
+    parentElement.appendChild(element);
+    element.style.webkitGridDefinitionColumns = "inherit";
+    element.style.webkitGridDefinitionRows = "inherit";
+    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'50px last'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'first 101%'");
+
+    document.body.removeChild(parentElement);
+}
+debug("");
+debug("Test setting grid-definition-columns and grid-definition-rows to 'inherit' through JS");
+testInherit();
+
+function testInitial()
+{
+    element = document.createElement("div");
+    document.body.appendChild(element);
+    element.style.webkitGridDefinitionColumns = "150% 'last'";
+    element.style.webkitGridDefinitionRows = "'first' 1fr";
+    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'150% last'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'first 1fr'");
+
+    element.style.webkitGridDefinitionColumns = "initial";
+    element.style.webkitGridDefinitionRows = "initial";
+    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
+
+    document.body.removeChild(element);
+}
+debug("");
+debug("Test setting grid-definition-columns and grid-definition-rows to 'initial' through JS");
+testInitial();
index 87c37d1..be13a53 100644 (file)
@@ -1,3 +1,54 @@
+2014-01-29  Sergio Villar Senin  <svillar@igalia.com>
+
+        [CSS Grid Layout] getComputedStyle() is wrong for grid-definition-{columns|rows}
+        https://bugs.webkit.org/show_bug.cgi?id=127033
+
+        Reviewed by Andreas Kling.
+
+        Tests: fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.html
+               fast/css-grid-layout/non-grid-columns-rows-get-set.html
+               fast/css-grid-layout/non-grid-element-repeat-get-set.html
+               fast/css-grid-layout/non-named-grid-line-get-set.html
+
+        According to the specs getComputedStyle() should return the used
+        values instead of the resolved values for compatibility with early
+        implementations. This means that grid-definition-{columns|rows}
+        are now layout dependent as we need to compute the used values for
+        grid track sizes.
+
+        Updated the outcome of existing tests and added a bunch of new
+        ones that check the behavior of the different properties outside
+        grid containers.
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::specifiedValueForGridTrackSize):
+        (WebCore::valueForGridTrackList):
+        (WebCore::isLayoutDependent):
+        (WebCore::ComputedStyleExtractor::propertyValue):
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::GridIterator::GridIterator):
+        (WebCore::RenderGrid::computedUsedBreadthOfGridTracks):
+        (WebCore::RenderGrid::computeUsedBreadthOfMinLength):
+        (WebCore::RenderGrid::computeUsedBreadthOfMaxLength):
+        (WebCore::RenderGrid::computeUsedBreadthOfSpecifiedLength):
+        (WebCore::RenderGrid::computeNormalizedFractionBreadth):
+        (WebCore::RenderGrid::gridTrackSize):
+        (WebCore::RenderGrid::minContentForChild):
+        (WebCore::RenderGrid::maxContentForChild):
+        (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctions):
+        (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForItems):
+        (WebCore::RenderGrid::tracksAreWiderThanMinTrackBreadth):
+        (WebCore::RenderGrid::growGrid):
+        (WebCore::RenderGrid::autoPlacementMajorAxisDirection):
+        (WebCore::RenderGrid::autoPlacementMinorAxisDirection):
+        (WebCore::RenderGrid::layoutGridItems):
+        (WebCore::RenderGrid::resolveGridPositionsFromAutoPlacementPosition):
+        (WebCore::RenderGrid::resolveGridPositionsFromStyle):
+        (WebCore::RenderGrid::gridAreaBreadthForChild):
+        (WebCore::RenderGrid::populateGridPositions):
+        (WebCore::RenderGrid::findChildLogicalPosition):
+        * rendering/RenderGrid.h:
+
 2014-02-06  Anders Carlsson  <andersca@apple.com>
 
         Modernize CrossOriginPreflightResultCache
index 4dc35cf..d772828 100644 (file)
@@ -57,6 +57,7 @@
 #include "PseudoElement.h"
 #include "Rect.h"
 #include "RenderBox.h"
+#include "RenderGrid.h"
 #include "RenderStyle.h"
 #include "RenderView.h"
 #include "SVGElement.h"
@@ -969,7 +970,7 @@ static PassRef<CSSValue> valueForGridTrackBreadth(const GridLength& trackBreadth
     return zoomAdjustedPixelValueForLength(trackBreadthLength, style);
 }
 
-static PassRefPtr<CSSValue> valueForGridTrackSize(const GridTrackSize& trackSize, const RenderStyle* style, RenderView* renderView)
+static PassRefPtr<CSSValue> specifiedValueForGridTrackSize(const GridTrackSize& trackSize, const RenderStyle* style, RenderView* renderView)
 {
     switch (trackSize.type()) {
     case LengthTrackSizing:
@@ -1002,8 +1003,11 @@ static void addValuesForNamedGridLinesAtIndex(const NamedGridLinesMap& namedGrid
     }
 }
 
-static PassRef<CSSValue> valueForGridTrackList(const Vector<GridTrackSize>& trackSizes, const NamedGridLinesMap& namedGridLines, const RenderStyle* style, RenderView* renderView)
+static PassRef<CSSValue> valueForGridTrackList(GridTrackSizingDirection direction, RenderObject* renderer, const RenderStyle* style, RenderView* renderView)
 {
+    const Vector<GridTrackSize>& trackSizes = direction == ForColumns ? style->gridColumns() : style->gridRows();
+    const NamedGridLinesMap& namedGridLines = direction == ForColumns ? style->namedGridColumnLines() : style->namedGridRowLines();
+
     // Handle the 'none' case here.
     if (!trackSizes.size()) {
         ASSERT(namedGridLines.isEmpty());
@@ -1011,11 +1015,24 @@ static PassRef<CSSValue> valueForGridTrackList(const Vector<GridTrackSize>& trac
     }
 
     auto list = CSSValueList::createSpaceSeparated();
-    for (size_t i = 0; i < trackSizes.size(); ++i) {
-        addValuesForNamedGridLinesAtIndex(namedGridLines, i, list.get());
-        list.get().append(valueForGridTrackSize(trackSizes[i], style, renderView));
+    if (renderer && renderer->isRenderGrid()) {
+        const Vector<LayoutUnit>& trackPositions = direction == ForColumns ? toRenderGrid(renderer)->columnPositions() : toRenderGrid(renderer)->rowPositions();
+        // There are at least #tracks + 1 grid lines (trackPositions). Apart from that, the grid container can generate implicit grid tracks,
+        // so we'll have more trackPositions than trackSizes as the latter only contain the explicit grid.
+        ASSERT(trackPositions.size() - 1 >= trackSizes.size());
+
+        for (unsigned i = 0; i < trackSizes.size(); ++i) {
+            addValuesForNamedGridLinesAtIndex(namedGridLines, i, list.get());
+            list.get().append(zoomAdjustedPixelValue(trackPositions[i + 1] - trackPositions[i], style));
+        }
+    } else {
+        for (unsigned i = 0; i < trackSizes.size(); ++i) {
+            addValuesForNamedGridLinesAtIndex(namedGridLines, i, list.get());
+            list.get().append(specifiedValueForGridTrackSize(trackSizes[i], style, renderView));
+        }
     }
-    // Those are the trailing <string>* allowed in the syntax.
+
+    // Those are the trailing <ident>* allowed in the syntax.
     addValuesForNamedGridLinesAtIndex(namedGridLines, trackSizes.size(), list.get());
     return std::move(list);
 }
@@ -1519,6 +1536,8 @@ static bool isLayoutDependent(CSSPropertyID propertyID, RenderStyle* style, Rend
     switch (propertyID) {
     case CSSPropertyWidth:
     case CSSPropertyHeight:
+    case CSSPropertyWebkitGridDefinitionColumns:
+    case CSSPropertyWebkitGridDefinitionRows:
     case CSSPropertyWebkitPerspectiveOrigin:
     case CSSPropertyWebkitTransformOrigin:
     case CSSPropertyWebkitTransform:
@@ -2049,16 +2068,23 @@ PassRefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propert
             }
             return list.release();
         }
-        case CSSPropertyWebkitGridAutoColumns:
-            return valueForGridTrackSize(style->gridAutoColumns(), style.get(), m_node->document().renderView());
         case CSSPropertyWebkitGridAutoFlow:
             return cssValuePool().createValue(style->gridAutoFlow());
+
+        // Specs mention that getComputedStyle() should return the used value of the property instead of the computed
+        // one for grid-definition-{rows|columns} but not for the grid-auto-{rows|columns} as things like
+        // grid-auto-columns: 2fr; cannot be resolved to a value in pixels as the '2fr' means very different things
+        // depending on the size of the explicit grid or the number of implicit tracks added to the grid. See
+        // http://lists.w3.org/Archives/Public/www-style/2013Nov/0014.html
+        case CSSPropertyWebkitGridAutoColumns:
+            return specifiedValueForGridTrackSize(style->gridAutoColumns(), style.get(), m_node->document().renderView());
         case CSSPropertyWebkitGridAutoRows:
-            return valueForGridTrackSize(style->gridAutoRows(), style.get(), m_node->document().renderView());
+            return specifiedValueForGridTrackSize(style->gridAutoRows(), style.get(), m_node->document().renderView());
+
         case CSSPropertyWebkitGridDefinitionColumns:
-            return valueForGridTrackList(style->gridColumns(), style->namedGridColumnLines(), style.get(), m_node->document().renderView());
+            return valueForGridTrackList(ForColumns, renderer, style.get(), m_node->document().renderView());
         case CSSPropertyWebkitGridDefinitionRows:
-            return valueForGridTrackList(style->gridRows(), style->namedGridRowLines(), style.get(), m_node->document().renderView());
+            return valueForGridTrackList(ForRows, renderer, style.get(), m_node->document().renderView());
 
         case CSSPropertyWebkitGridColumnStart:
             return valueForGridPosition(style->gridItemColumnStart());
index 07791cd..fad7b55 100644 (file)
@@ -86,7 +86,7 @@ class RenderGrid::GridIterator {
 public:
     // |direction| is the direction that is fixed to |fixedTrackIndex| so e.g
     // GridIterator(m_grid, ForColumns, 1) will walk over the rows of the 2nd column.
-    GridIterator(const Vector<Vector<Vector<RenderBox*, 1>>>& grid, TrackSizingDirection direction, size_t fixedTrackIndex)
+    GridIterator(const Vector<Vector<Vector<RenderBox*, 1>>>& grid, GridTrackSizingDirection direction, size_t fixedTrackIndex)
         : m_grid(grid)
         , m_direction(direction)
         , m_rowIndex((direction == ForColumns) ? 0 : fixedTrackIndex)
@@ -135,7 +135,7 @@ public:
 
 private:
     const Vector<Vector<Vector<RenderBox*, 1>>>& m_grid;
-    TrackSizingDirection m_direction;
+    GridTrackSizingDirection m_direction;
     size_t m_rowIndex;
     size_t m_columnIndex;
     size_t m_childIndex;
@@ -257,13 +257,13 @@ void RenderGrid::computePreferredLogicalWidths()
     setPreferredLogicalWidthsDirty(false);
 }
 
-void RenderGrid::computedUsedBreadthOfGridTracks(TrackSizingDirection direction, GridSizingData& sizingData)
+void RenderGrid::computedUsedBreadthOfGridTracks(GridTrackSizingDirection direction, GridSizingData& sizingData)
 {
     LayoutUnit availableLogicalSpace = (direction == ForColumns) ? availableLogicalWidth() : availableLogicalHeight(IncludeMarginBorderPadding);
     computedUsedBreadthOfGridTracks(direction, sizingData, availableLogicalSpace);
 }
 
-void RenderGrid::computedUsedBreadthOfGridTracks(TrackSizingDirection direction, GridSizingData& sizingData, LayoutUnit& availableLogicalSpace)
+void RenderGrid::computedUsedBreadthOfGridTracks(GridTrackSizingDirection direction, GridSizingData& sizingData, LayoutUnit& availableLogicalSpace)
 {
     Vector<GridTrack>& tracks = (direction == ForColumns) ? sizingData.columnTracks : sizingData.rowTracks;
     sizingData.contentSizedTracksIndex.shrink(0);
@@ -313,7 +313,7 @@ void RenderGrid::computedUsedBreadthOfGridTracks(TrackSizingDirection direction,
     }
 }
 
-LayoutUnit RenderGrid::computeUsedBreadthOfMinLength(TrackSizingDirection direction, const GridLength& gridLength) const
+LayoutUnit RenderGrid::computeUsedBreadthOfMinLength(GridTrackSizingDirection direction, const GridLength& gridLength) const
 {
     if (gridLength.isFlex())
         return 0;
@@ -327,7 +327,7 @@ LayoutUnit RenderGrid::computeUsedBreadthOfMinLength(TrackSizingDirection direct
     return 0;
 }
 
-LayoutUnit RenderGrid::computeUsedBreadthOfMaxLength(TrackSizingDirection direction, const GridLength& gridLength, LayoutUnit usedBreadth) const
+LayoutUnit RenderGrid::computeUsedBreadthOfMaxLength(GridTrackSizingDirection direction, const GridLength& gridLength, LayoutUnit usedBreadth) const
 {
     if (gridLength.isFlex())
         return usedBreadth;
@@ -344,14 +344,14 @@ LayoutUnit RenderGrid::computeUsedBreadthOfMaxLength(TrackSizingDirection direct
     return infinity;
 }
 
-LayoutUnit RenderGrid::computeUsedBreadthOfSpecifiedLength(TrackSizingDirection direction, const Length& trackLength) const
+LayoutUnit RenderGrid::computeUsedBreadthOfSpecifiedLength(GridTrackSizingDirection direction, const Length& trackLength) const
 {
     // FIXME: We still need to support calc() here (https://webkit.org/b/103761).
     ASSERT(trackLength.isFixed() || trackLength.isPercent() || trackLength.isViewportPercentage());
     return valueForLength(trackLength, direction == ForColumns ? logicalWidth() : computeContentLogicalHeight(style().logicalHeight()));
 }
 
-double RenderGrid::computeNormalizedFractionBreadth(Vector<GridTrack>& tracks, TrackSizingDirection direction, LayoutUnit availableLogicalSpace) const
+double RenderGrid::computeNormalizedFractionBreadth(Vector<GridTrack>& tracks, GridTrackSizingDirection direction, LayoutUnit availableLogicalSpace) const
 {
     // |availableLogicalSpace| already accounts for the used breadths so no need to remove it here.
 
@@ -399,7 +399,7 @@ double RenderGrid::computeNormalizedFractionBreadth(Vector<GridTrack>& tracks, T
     return availableLogicalSpaceIgnoringFractionTracks / accumulatedFractions;
 }
 
-const GridTrackSize& RenderGrid::gridTrackSize(TrackSizingDirection direction, size_t i) const
+const GridTrackSize& RenderGrid::gridTrackSize(GridTrackSizingDirection direction, size_t i) const
 {
     const Vector<GridTrackSize>& trackStyles = (direction == ForColumns) ? style().gridColumns() : style().gridRows();
     if (i >= trackStyles.size())
@@ -436,7 +436,7 @@ LayoutUnit RenderGrid::logicalContentHeightForChild(RenderBox* child, Vector<Gri
     return child->logicalHeight();
 }
 
-LayoutUnit RenderGrid::minContentForChild(RenderBox* child, TrackSizingDirection direction, Vector<GridTrack>& columnTracks)
+LayoutUnit RenderGrid::minContentForChild(RenderBox* child, GridTrackSizingDirection direction, Vector<GridTrack>& columnTracks)
 {
     bool hasOrthogonalWritingMode = child->isHorizontalWritingMode() != isHorizontalWritingMode();
     // FIXME: Properly support orthogonal writing mode.
@@ -452,7 +452,7 @@ LayoutUnit RenderGrid::minContentForChild(RenderBox* child, TrackSizingDirection
     return logicalContentHeightForChild(child, columnTracks);
 }
 
-LayoutUnit RenderGrid::maxContentForChild(RenderBox* child, TrackSizingDirection direction, Vector<GridTrack>& columnTracks)
+LayoutUnit RenderGrid::maxContentForChild(RenderBox* child, GridTrackSizingDirection direction, Vector<GridTrack>& columnTracks)
 {
     bool hasOrthogonalWritingMode = child->isHorizontalWritingMode() != isHorizontalWritingMode();
     // FIXME: Properly support orthogonal writing mode.
@@ -468,7 +468,7 @@ LayoutUnit RenderGrid::maxContentForChild(RenderBox* child, TrackSizingDirection
     return logicalContentHeightForChild(child, columnTracks);
 }
 
-void RenderGrid::resolveContentBasedTrackSizingFunctions(TrackSizingDirection direction, GridSizingData& sizingData)
+void RenderGrid::resolveContentBasedTrackSizingFunctions(GridTrackSizingDirection direction, GridSizingData& sizingData)
 {
     // FIXME: Split the grid tracks into groups that doesn't overlap a <flex> grid track.
 
@@ -487,7 +487,7 @@ void RenderGrid::resolveContentBasedTrackSizingFunctions(TrackSizingDirection di
     }
 }
 
-void RenderGrid::resolveContentBasedTrackSizingFunctionsForItems(TrackSizingDirection direction, GridSizingData& sizingData, RenderBox* gridItem, FilterFunction filterFunction, SizingFunction sizingFunction, AccumulatorGetter trackGetter, AccumulatorGrowFunction trackGrowthFunction)
+void RenderGrid::resolveContentBasedTrackSizingFunctionsForItems(GridTrackSizingDirection direction, GridSizingData& sizingData, RenderBox* gridItem, FilterFunction filterFunction, SizingFunction sizingFunction, AccumulatorGetter trackGetter, AccumulatorGrowFunction trackGrowthFunction)
 {
     const GridCoordinate coordinate = cachedGridCoordinate(gridItem);
     const size_t initialTrackIndex = (direction == ForColumns) ? coordinate.columns.initialPositionIndex : coordinate.rows.initialPositionIndex;
@@ -555,7 +555,7 @@ void RenderGrid::distributeSpaceToTracks(Vector<GridTrack*>& tracks, Vector<Grid
 }
 
 #ifndef NDEBUG
-bool RenderGrid::tracksAreWiderThanMinTrackBreadth(TrackSizingDirection direction, const Vector<GridTrack>& tracks)
+bool RenderGrid::tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection direction, const Vector<GridTrack>& tracks)
 {
     for (size_t i = 0; i < tracks.size(); ++i) {
         const GridTrackSize& trackSize = gridTrackSize(direction, i);
@@ -567,7 +567,7 @@ bool RenderGrid::tracksAreWiderThanMinTrackBreadth(TrackSizingDirection directio
 }
 #endif
 
-void RenderGrid::growGrid(TrackSizingDirection direction)
+void RenderGrid::growGrid(GridTrackSizingDirection direction)
 {
     if (direction == ForColumns) {
         const size_t oldColumnSize = m_grid[0].size();
@@ -722,14 +722,14 @@ void RenderGrid::placeAutoMajorAxisItemOnGrid(RenderBox* gridItem)
     insertItemIntoGrid(gridItem, rowIndex, columnIndex);
 }
 
-RenderGrid::TrackSizingDirection RenderGrid::autoPlacementMajorAxisDirection() const
+RenderGrid::GridTrackSizingDirection RenderGrid::autoPlacementMajorAxisDirection() const
 {
     GridAutoFlow flow = style().gridAutoFlow();
     ASSERT(flow != AutoFlowNone);
     return (flow == AutoFlowColumn) ? ForColumns : ForRows;
 }
 
-RenderGrid::TrackSizingDirection RenderGrid::autoPlacementMinorAxisDirection() const
+RenderGrid::GridTrackSizingDirection RenderGrid::autoPlacementMinorAxisDirection() const
 {
     GridAutoFlow flow = style().gridAutoFlow();
     ASSERT(flow != AutoFlowNone);
@@ -752,6 +752,8 @@ void RenderGrid::layoutGridItems()
     computedUsedBreadthOfGridTracks(ForRows, sizingData);
     ASSERT(tracksAreWiderThanMinTrackBreadth(ForRows, sizingData.rowTracks));
 
+    populateGridPositions(sizingData);
+
     for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
         // Because the grid area cannot be styled, we don't need to adjust
         // the grid breadth to account for 'box-sizing'.
@@ -797,14 +799,14 @@ GridCoordinate RenderGrid::cachedGridCoordinate(const RenderBox* gridItem) const
     return m_gridItemCoordinate.get(gridItem);
 }
 
-GridSpan RenderGrid::resolveGridPositionsFromAutoPlacementPosition(const RenderBox*, TrackSizingDirection, size_t initialPosition) const
+GridSpan RenderGrid::resolveGridPositionsFromAutoPlacementPosition(const RenderBox*, GridTrackSizingDirection, size_t initialPosition) const
 {
     // FIXME: We don't support spanning with auto positions yet. Once we do, this is wrong. Also we should make
     // sure the grid can accomodate the new item as we only grow 1 position in a given direction.
     return GridSpan(initialPosition, initialPosition);
 }
 
-PassOwnPtr<GridSpan> RenderGrid::resolveGridPositionsFromStyle(const RenderBox* gridItem, TrackSizingDirection direction) const
+PassOwnPtr<GridSpan> RenderGrid::resolveGridPositionsFromStyle(const RenderBox* gridItem, GridTrackSizingDirection direction) const
 {
     const GridPosition& initialPosition = (direction == ForColumns) ? gridItem->style().gridItemColumnStart() : gridItem->style().gridItemRowStart();
     const GridPositionSide initialPositionSide = (direction == ForColumns) ? ColumnStartSide : RowStartSide;
@@ -1005,7 +1007,7 @@ PassOwnPtr<GridSpan> RenderGrid::resolveRowEndColumnEndNamedGridLinePositionAgai
     return GridSpan::create(resolvedOppositePosition, resolvedGridLinePosition);
 }
 
-LayoutUnit RenderGrid::gridAreaBreadthForChild(const RenderBox* child, TrackSizingDirection direction, const Vector<GridTrack>& tracks) const
+LayoutUnit RenderGrid::gridAreaBreadthForChild(const RenderBox* child, GridTrackSizingDirection direction, const Vector<GridTrack>& tracks) const
 {
     const GridCoordinate& coordinate = cachedGridCoordinate(child);
     const GridSpan& span = (direction == ForColumns) ? coordinate.columns : coordinate.rows;
@@ -1015,19 +1017,27 @@ LayoutUnit RenderGrid::gridAreaBreadthForChild(const RenderBox* child, TrackSizi
     return gridAreaBreadth;
 }
 
+void RenderGrid::populateGridPositions(const GridSizingData& sizingData)
+{
+    m_columnPositions.resizeToFit(sizingData.columnTracks.size() + 1);
+    m_columnPositions[0] = borderAndPaddingStart();
+    for (size_t i = 0; i < m_columnPositions.size() - 1; ++i)
+        m_columnPositions[i + 1] = m_columnPositions[i] + sizingData.columnTracks[i].m_usedBreadth;
+
+    m_rowPositions.resizeToFit(sizingData.rowTracks.size() + 1);
+    m_rowPositions[0] = borderAndPaddingBefore();
+    for (size_t i = 0; i < m_rowPositions.size() - 1; ++i)
+        m_rowPositions[i + 1] = m_rowPositions[i] + sizingData.rowTracks[i].m_usedBreadth;
+}
+
 LayoutPoint RenderGrid::findChildLogicalPosition(RenderBox* child, const GridSizingData& sizingData)
 {
     const GridCoordinate& coordinate = cachedGridCoordinate(child);
+    ASSERT_UNUSED(sizingData, coordinate.columns.initialPositionIndex < sizingData.columnTracks.size());
+    ASSERT_UNUSED(sizingData, coordinate.rows.initialPositionIndex < sizingData.rowTracks.size());
 
     // The grid items should be inside the grid container's border box, that's why they need to be shifted.
-    LayoutPoint offset(borderAndPaddingStart() + marginStartForChild(*child), borderAndPaddingBefore() + marginBeforeForChild(*child));
-    // FIXME: |columnTrack| and |rowTrack| should be smaller than our column / row count.
-    for (size_t i = 0; i < coordinate.columns.initialPositionIndex && i < sizingData.columnTracks.size(); ++i)
-        offset.setX(offset.x() + sizingData.columnTracks[i].m_usedBreadth);
-    for (size_t i = 0; i < coordinate.rows.initialPositionIndex && i < sizingData.rowTracks.size(); ++i)
-        offset.setY(offset.y() + sizingData.rowTracks[i].m_usedBreadth);
-
-    return offset;
+    return LayoutPoint(m_columnPositions[coordinate.columns.initialPositionIndex] + marginStartForChild(*child), m_rowPositions[coordinate.rows.initialPositionIndex] + marginBeforeForChild(*child));
 }
 
 void RenderGrid::paintChildren(PaintInfo& paintInfo, const LayoutPoint& paintOffset, PaintInfo& forChild, bool usePrintRect)
index 8a82a29..7e05f43 100644 (file)
@@ -36,6 +36,11 @@ class GridCoordinate;
 class GridSpan;
 class GridTrack;
 
+enum GridTrackSizingDirection {
+    ForColumns,
+    ForRows
+};
+
 class RenderGrid final : public RenderBlock {
 public:
     RenderGrid(Element&, PassRef<RenderStyle>);
@@ -55,6 +60,9 @@ public:
         RowEndSide
     };
 
+    const Vector<LayoutUnit>& columnPositions() const { return m_columnPositions; }
+    const Vector<LayoutUnit>& rowPositions() const { return m_rowPositions; }
+
 private:
     virtual const char* renderName() const override;
     virtual bool isRenderGrid() const override { return true; }
@@ -63,15 +71,15 @@ private:
 
     class GridIterator;
     class GridSizingData;
-    enum TrackSizingDirection { ForColumns, ForRows };
-    void computedUsedBreadthOfGridTracks(TrackSizingDirection, GridSizingData&);
-    void computedUsedBreadthOfGridTracks(TrackSizingDirection, GridSizingData&, LayoutUnit& availableLogicalSpace);
-    LayoutUnit computeUsedBreadthOfMinLength(TrackSizingDirection, const GridLength&) const;
-    LayoutUnit computeUsedBreadthOfMaxLength(TrackSizingDirection, const GridLength&, LayoutUnit usedBreadth) const;
-    LayoutUnit computeUsedBreadthOfSpecifiedLength(TrackSizingDirection, const Length&) const;
-    void resolveContentBasedTrackSizingFunctions(TrackSizingDirection, GridSizingData&);
-
-    void growGrid(TrackSizingDirection);
+    enum GridTrackSizingDirection { ForColumns, ForRows };
+    void computedUsedBreadthOfGridTracks(GridTrackSizingDirection, GridSizingData&);
+    void computedUsedBreadthOfGridTracks(GridTrackSizingDirection, GridSizingData&, LayoutUnit& availableLogicalSpace);
+    LayoutUnit computeUsedBreadthOfMinLength(GridTrackSizingDirection, const GridLength&) const;
+    LayoutUnit computeUsedBreadthOfMaxLength(GridTrackSizingDirection, const GridLength&, LayoutUnit usedBreadth) const;
+    LayoutUnit computeUsedBreadthOfSpecifiedLength(GridTrackSizingDirection, const Length&) const;
+    void resolveContentBasedTrackSizingFunctions(GridTrackSizingDirection, GridSizingData&);
+
+    void growGrid(GridTrackSizingDirection);
     void insertItemIntoGrid(RenderBox*, size_t rowTrack, size_t columnTrack);
     void insertItemIntoGrid(RenderBox*, const GridCoordinate&);
     void placeItemsOnGrid();
@@ -79,34 +87,35 @@ private:
     void placeSpecifiedMajorAxisItemsOnGrid(Vector<RenderBox*>);
     void placeAutoMajorAxisItemsOnGrid(Vector<RenderBox*>);
     void placeAutoMajorAxisItemOnGrid(RenderBox*);
-    TrackSizingDirection autoPlacementMajorAxisDirection() const;
-    TrackSizingDirection autoPlacementMinorAxisDirection() const;
+    GridTrackSizingDirection autoPlacementMajorAxisDirection() const;
+    GridTrackSizingDirection autoPlacementMinorAxisDirection() const;
 
     void layoutGridItems();
+    void populateGridPositions(const GridSizingData&);
     void clearGrid();
 
-    typedef LayoutUnit (RenderGrid::* SizingFunction)(RenderBox*, TrackSizingDirection, Vector<GridTrack>&);
+    typedef LayoutUnit (RenderGrid::* SizingFunction)(RenderBox*, GridTrackSizingDirection, Vector<GridTrack>&);
     typedef LayoutUnit (GridTrack::* AccumulatorGetter)() const;
     typedef void (GridTrack::* AccumulatorGrowFunction)(LayoutUnit);
     typedef bool (GridTrackSize::* FilterFunction)() const;
-    void resolveContentBasedTrackSizingFunctionsForItems(TrackSizingDirection, GridSizingData&, RenderBox*, FilterFunction, SizingFunction, AccumulatorGetter, AccumulatorGrowFunction);
+    void resolveContentBasedTrackSizingFunctionsForItems(GridTrackSizingDirection, GridSizingData&, RenderBox*, FilterFunction, SizingFunction, AccumulatorGetter, AccumulatorGrowFunction);
     void distributeSpaceToTracks(Vector<GridTrack*>&, Vector<GridTrack*>* tracksForGrowthAboveMaxBreadth, AccumulatorGetter, AccumulatorGrowFunction, GridSizingData&, LayoutUnit& availableLogicalSpace);
 
-    double computeNormalizedFractionBreadth(Vector<GridTrack>&, TrackSizingDirection, LayoutUnit availableLogicalSpace) const;
+    double computeNormalizedFractionBreadth(Vector<GridTrack>&, GridTrackSizingDirection, LayoutUnit availableLogicalSpace) const;
 
-    const GridTrackSize& gridTrackSize(TrackSizingDirection, size_t) const;
+    const GridTrackSize& gridTrackSize(GridTrackSizingDirection, size_t) const;
     size_t explicitGridColumnCount() const;
     size_t explicitGridRowCount() const;
     size_t explicitGridSizeForSide(GridPositionSide) const;
 
     LayoutUnit logicalContentHeightForChild(RenderBox*, Vector<GridTrack>&);
-    LayoutUnit minContentForChild(RenderBox*, TrackSizingDirection, Vector<GridTrack>& columnTracks);
-    LayoutUnit maxContentForChild(RenderBox*, TrackSizingDirection, Vector<GridTrack>& columnTracks);
+    LayoutUnit minContentForChild(RenderBox*, GridTrackSizingDirection, Vector<GridTrack>& columnTracks);
+    LayoutUnit maxContentForChild(RenderBox*, GridTrackSizingDirection, Vector<GridTrack>& columnTracks);
     LayoutPoint findChildLogicalPosition(RenderBox*, const GridSizingData&);
     GridCoordinate cachedGridCoordinate(const RenderBox*) const;
 
-    GridSpan resolveGridPositionsFromAutoPlacementPosition(const RenderBox*, TrackSizingDirection, size_t) const;
-    PassOwnPtr<GridSpan> resolveGridPositionsFromStyle(const RenderBox*, TrackSizingDirection) const;
+    GridSpan resolveGridPositionsFromAutoPlacementPosition(const RenderBox*, GridTrackSizingDirection, size_t) const;
+    PassOwnPtr<GridSpan> resolveGridPositionsFromStyle(const RenderBox*, GridTrackSizingDirection) const;
     size_t resolveNamedGridLinePositionFromStyle(const GridPosition&, GridPositionSide) const;
     size_t resolveGridPositionFromStyle(const GridPosition&, GridPositionSide) const;
     PassOwnPtr<GridSpan> resolveGridPositionAgainstOppositePosition(size_t resolvedOppositePosition, const GridPosition&, GridPositionSide) const;
@@ -114,12 +123,12 @@ private:
     PassOwnPtr<GridSpan> resolveRowStartColumnStartNamedGridLinePositionAgainstOppositePosition(size_t resolvedOppositePosition, const GridPosition&, const Vector<size_t>&) const;
     PassOwnPtr<GridSpan> resolveRowEndColumnEndNamedGridLinePositionAgainstOppositePosition(size_t resolvedOppositePosition, const GridPosition&, const Vector<size_t>&) const;
 
-    LayoutUnit gridAreaBreadthForChild(const RenderBox* child, TrackSizingDirection, const Vector<GridTrack>&) const;
+    LayoutUnit gridAreaBreadthForChild(const RenderBox* child, GridTrackSizingDirection, const Vector<GridTrack>&) const;
 
     virtual void paintChildren(PaintInfo& forSelf, const LayoutPoint& paintOffset, PaintInfo& forChild, bool usePrintRect) override final;
 
 #ifndef NDEBUG
-    bool tracksAreWiderThanMinTrackBreadth(TrackSizingDirection, const Vector<GridTrack>&);
+    bool tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection, const Vector<GridTrack>&);
     bool gridWasPopulated() const { return !m_grid.isEmpty() && !m_grid[0].isEmpty(); }
 #endif
 
@@ -135,10 +144,14 @@ private:
     }
 
     Vector<Vector<Vector<RenderBox*, 1>>> m_grid;
+    Vector<LayoutUnit> m_columnPositions;
+    Vector<LayoutUnit> m_rowPositions;
     HashMap<const RenderBox*, GridCoordinate> m_gridItemCoordinate;
     OrderIterator m_orderIterator;
 };
 
+RENDER_OBJECT_TYPE_CASTS(RenderGrid, isRenderGrid())
+
 } // namespace WebCore
 
 #endif // RenderGrid_h