[css-grid] Implement grid gutters
authorsvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 7 Oct 2015 09:40:44 +0000 (09:40 +0000)
committersvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 7 Oct 2015 09:40:44 +0000 (09:40 +0000)
https://bugs.webkit.org/show_bug.cgi?id=149800

Reviewed by Darin Adler.

Source/WebCore:

Authors can now specify the gutters between grid lines, i.e.,
the space between two consecutive grid lines. This can be done
using the new '-webkit-grid-column-gap 'and
'-webkit-grid-row-gap' properties (or the '-webkit-grid-gap'
shorthand).

From the track sizing algorithm POV, gutters are treated as
fixed size columns. The primary consequence is that grids are
enlarged (depending on the number of tracks). Gutters also
affect the sizing of content-sized tracks and fr tracks as
long as the grid have spanning items. Those tracks will become
smaller as gutters will consume part of the item's size, so
the tracks won't need to grow as much as they used to.

Tests: fast/css-grid-layout/grid-gutters-and-alignment.html
       fast/css-grid-layout/grid-gutters-and-flex-content.html
       fast/css-grid-layout/grid-gutters-and-tracks.html
       fast/css-grid-layout/grid-gutters-get-set.html

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::valueForGridTrackList):
(WebCore::ComputedStyleExtractor::propertyValue):
* css/CSSParser.cpp:
(WebCore::isSimpleLengthPropertyID):
(WebCore::CSSParser::parseValue):
(WebCore::CSSParser::parseGridGapShorthand):
* css/CSSParser.h:
* css/CSSPropertyNames.in:
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::guttersSize):
(WebCore::RenderGrid::computeIntrinsicLogicalWidths):
(WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForItems):
(WebCore::RenderGrid::layoutGridItems):
(WebCore::RenderGrid::gridAreaBreadthForChild):
(WebCore::RenderGrid::populateGridPositions):
(WebCore::RenderGrid::columnAxisOffsetForChild):
(WebCore::RenderGrid::rowAxisOffsetForChild):
* rendering/RenderGrid.h:
* rendering/style/RenderStyle.h:
* rendering/style/StyleGridData.cpp:
(WebCore::StyleGridData::StyleGridData):
* rendering/style/StyleGridData.h:
(WebCore::StyleGridData::operator==):

LayoutTests:

Added several new test cases to verify that gutters are
properly considered when sizing and also to check that they do
not modify the current behavior. As many existing tests were
reused I took the chance to refactor some testing code related
to alignment so that it could be reused by many different
tests.

* fast/css-grid-layout/grid-align-content.html:
* fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html:
* fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html:
* fast/css-grid-layout/grid-align-justify-margin-border-padding.html:
* fast/css-grid-layout/grid-align.html:
* fast/css-grid-layout/grid-gutters-and-alignment-expected.txt: Added.
* fast/css-grid-layout/grid-gutters-and-alignment.html: Added.
* fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt: Added.
* fast/css-grid-layout/grid-gutters-and-flex-content.html: Added.
* fast/css-grid-layout/grid-gutters-and-tracks-expected.txt: Added.
* fast/css-grid-layout/grid-gutters-and-tracks.html: Added.
* fast/css-grid-layout/grid-gutters-get-set-expected.txt: Added.
* fast/css-grid-layout/grid-gutters-get-set.html: Added.
* fast/css-grid-layout/grid-justify-content-distribution-vertical-lr.html:
* fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.html:
* fast/css-grid-layout/grid-justify-content.html:
* fast/css-grid-layout/resources/grid-alignment.css: Added.
(.alignSelfAuto):
(.alignSelfStretch):
(.alignSelfStart):
(.alignSelfEnd):
(.alignSelfCenter):
(.alignSelfRight):
(.alignSelfLeft):
(.alignSelfFlexStart):
(.alignSelfFlexEnd):
(.alignSelfSelfStart):
(.alignSelfSelfEnd):
(.alignItemsCenter):
(.alignContentBaseline):
(.alignContentLastBaseline):
(.alignContentStart):
(.alignContentEnd):
(.alignContentCenter):
(.alignContentLeft):
(.alignContentRight):
(.alignContentFlexStart):
(.alignContentFlexEnd):
(.justifyContentBaseline):
(.justifyContentLastBaseline):
(.justifyContentStart):
(.justifyContentEnd):
(.justifyContentCenter):
(.justifyContentLeft):
(.justifyContentRight):
(.justifyContentFlexStart):
(.justifyContentFlexEnd):
(.justifyContentSpaceBetween):
(.justifyContentSpaceAround):
(.justifyContentSpaceEvenly):
(.justifyContentStretch):
(.itemsCenter):
(.itemsEnd):
(.itemsLeft):
(.itemsRight):
(.itemsSelfStart):
(.itemsSelfEnd):
* fast/css-grid-layout/resources/grid-definitions-parsing-utils.js:
(testGridGapDefinitionsValues):
* fast/css-grid-layout/resources/grid.css:
(.firstRowThirdColumn):
(.secondRowThirdColumn):
(.firstRowFourthColumn):
(.secondRowFourthColumn):

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

30 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-align-content.html
LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html
LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html
LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html
LayoutTests/fast/css-grid-layout/grid-align.html
LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-lr.html
LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.html
LayoutTests/fast/css-grid-layout/grid-justify-content.html
LayoutTests/fast/css-grid-layout/resources/grid-alignment.css [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js
LayoutTests/fast/css-grid-layout/resources/grid.css
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSParser.cpp
Source/WebCore/css/CSSParser.h
Source/WebCore/css/CSSPropertyNames.in
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/RenderGrid.h
Source/WebCore/rendering/style/RenderStyle.h
Source/WebCore/rendering/style/StyleGridData.cpp
Source/WebCore/rendering/style/StyleGridData.h

index 02d3464..64dcf66 100644 (file)
@@ -1,3 +1,82 @@
+2015-10-05  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-grid] Implement grid gutters
+        https://bugs.webkit.org/show_bug.cgi?id=149800
+
+        Reviewed by Darin Adler.
+
+        Added several new test cases to verify that gutters are
+        properly considered when sizing and also to check that they do
+        not modify the current behavior. As many existing tests were
+        reused I took the chance to refactor some testing code related
+        to alignment so that it could be reused by many different
+        tests.
+
+        * fast/css-grid-layout/grid-align-content.html:
+        * fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html:
+        * fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html:
+        * fast/css-grid-layout/grid-align-justify-margin-border-padding.html:
+        * fast/css-grid-layout/grid-align.html:
+        * fast/css-grid-layout/grid-gutters-and-alignment-expected.txt: Added.
+        * fast/css-grid-layout/grid-gutters-and-alignment.html: Added.
+        * fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt: Added.
+        * fast/css-grid-layout/grid-gutters-and-flex-content.html: Added.
+        * fast/css-grid-layout/grid-gutters-and-tracks-expected.txt: Added.
+        * fast/css-grid-layout/grid-gutters-and-tracks.html: Added.
+        * fast/css-grid-layout/grid-gutters-get-set-expected.txt: Added.
+        * fast/css-grid-layout/grid-gutters-get-set.html: Added.
+        * fast/css-grid-layout/grid-justify-content-distribution-vertical-lr.html:
+        * fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.html:
+        * fast/css-grid-layout/grid-justify-content.html:
+        * fast/css-grid-layout/resources/grid-alignment.css: Added.
+        (.alignSelfAuto):
+        (.alignSelfStretch):
+        (.alignSelfStart):
+        (.alignSelfEnd):
+        (.alignSelfCenter):
+        (.alignSelfRight):
+        (.alignSelfLeft):
+        (.alignSelfFlexStart):
+        (.alignSelfFlexEnd):
+        (.alignSelfSelfStart):
+        (.alignSelfSelfEnd):
+        (.alignItemsCenter):
+        (.alignContentBaseline):
+        (.alignContentLastBaseline):
+        (.alignContentStart):
+        (.alignContentEnd):
+        (.alignContentCenter):
+        (.alignContentLeft):
+        (.alignContentRight):
+        (.alignContentFlexStart):
+        (.alignContentFlexEnd):
+        (.justifyContentBaseline):
+        (.justifyContentLastBaseline):
+        (.justifyContentStart):
+        (.justifyContentEnd):
+        (.justifyContentCenter):
+        (.justifyContentLeft):
+        (.justifyContentRight):
+        (.justifyContentFlexStart):
+        (.justifyContentFlexEnd):
+        (.justifyContentSpaceBetween):
+        (.justifyContentSpaceAround):
+        (.justifyContentSpaceEvenly):
+        (.justifyContentStretch):
+        (.itemsCenter):
+        (.itemsEnd):
+        (.itemsLeft):
+        (.itemsRight):
+        (.itemsSelfStart):
+        (.itemsSelfEnd):
+        * fast/css-grid-layout/resources/grid-definitions-parsing-utils.js:
+        (testGridGapDefinitionsValues):
+        * fast/css-grid-layout/resources/grid.css:
+        (.firstRowThirdColumn):
+        (.secondRowThirdColumn):
+        (.firstRowFourthColumn):
+        (.secondRowFourthColumn):
+
 2015-10-07  ChangSeok Oh  <changseok.oh@collabora.com>
 
         [GTK] Progress bar is broken on recent GTK+
index fa775d2..4d86b1b 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 body {
@@ -24,42 +25,6 @@ body {
     width: 20px;
     height: 40px;
 }
-
-.alignContentBaseline {
-    align-content: baseline;
-}
-
-.alignContentLastBaseline {
-    align-content: last-baseline;
-}
-
-.alignContentStart {
-    align-content: start;
-}
-
-.alignContentEnd {
-    align-content: end;
-}
-
-.alignContentCenter {
-    align-content: center;
-}
-
-.alignContentLeft {
-    align-content: left;
-}
-
-.alignContentRight {
-    align-content: right;
-}
-
-.alignContentFlexStart {
-    align-content: flex-start;
-}
-
-.alignContentFlexEnd {
-    align-content: flex-end;
-}
 </style>
 </head>
 <body onload="checkLayout('.grid')">
index 6c0afce..043e29c 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 body {
@@ -25,36 +26,6 @@ body {
     margin: 4px 8px 12px 16px;
 }
 
-.itemsCenter {
-    align-items: center;
-    justify-items: center;
-}
-
-.itemsEnd {
-    align-items: end;
-    justify-items: end;
-}
-
-.itemsLeft {
-    align-items: left;
-    justify-items: left;
-}
-
-.itemsRight {
-    align-items: right;
-    justify-items: right;
-}
-
-.itemsSelfStart {
-    align-items: self-start;
-    justify-items: self-start;
-}
-
-.itemsSelfEnd {
-    align-items: self-end;
-    justify-items: self-end;
-}
-
 .stretch {
     align-self: stretch;
     justify-self: stretch;
index b2c2f6e..9d91a0b 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 body {
@@ -25,36 +26,6 @@ body {
     margin: 4px 8px 12px 16px;
 }
 
-.itemsCenter {
-    align-items: center;
-    justify-items: center;
-}
-
-.itemsEnd {
-    align-items: end;
-    justify-items: end;
-}
-
-.itemsLeft {
-    align-items: left;
-    justify-items: left;
-}
-
-.itemsRight {
-    align-items: right;
-    justify-items: right;
-}
-
-.itemsSelfStart {
-    align-items: self-start;
-    justify-items: self-start;
-}
-
-.itemsSelfEnd {
-    align-items: self-end;
-    justify-items: self-end;
-}
-
 .stretch {
     align-self: stretch;
     justify-self: stretch;
index 0aba8ad..200ee00 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 body {
@@ -25,35 +26,6 @@ body {
     margin: 4px 8px 12px 16px;
 }
 
-.itemsCenter {
-    align-items: center;
-    justify-items: center;
-}
-
-.itemsEnd {
-    align-items: end;
-    justify-items: end;
-}
-
-.itemsLeft {
-    align-items: left;
-    justify-items: left;
-}
-
-.itemsRight {
-    align-items: right;
-    justify-items: right;
-}
-
-.itemsSelfStart {
-    align-items: self-start;
-    justify-items: self-start;
-}
-
-.itemsSelfEnd {
-    align-items: self-end;
-    justify-items: self-end;
-}
 
 .stretch {
     align-self: stretch;
index 663698c..1f48dc4 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 body {
@@ -26,54 +27,6 @@ body {
     background: black;
 }
 
-.alignSelfAuto {
-    align-self: auto;
-}
-
-.alignSelfStretch {
-    align-self: stretch;
-}
-
-.alignSelfStart {
-    align-self: start;
-}
-
-.alignSelfEnd {
-    align-self: end;
-}
-
-.alignSelfCenter {
-    align-self: center;
-}
-
-.alignSelfRight {
-    align-self: right;
-}
-
-.alignSelfLeft {
-    align-self: left;
-}
-
-.alignSelfFlexStart {
-    align-self: flex-start;
-}
-
-.alignSelfFlexEnd {
-    align-self: flex-end;
-}
-
-.alignSelfSelfStart {
-    align-self: self-start;
-}
-
-.alignSelfSelfEnd {
-    align-self: self-end;
-}
-
-.alignItemsCenter {
-    align-items: center;
-}
-
 </style>
 </head>
 <body onload="checkLayout('.grid')">
diff --git a/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment-expected.txt b/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment-expected.txt
new file mode 100644 (file)
index 0000000..b5ebe2d
--- /dev/null
@@ -0,0 +1,58 @@
+PASS successfullyParsed is true
+
+TEST COMPLETE
+PASS
+PASS
+PASS
+direction: LTR | align-content: 'center'
+
+PASS
+direction: LTR | align-content: 'right'
+
+PASS
+direction: RTL | align-content: 'right'
+
+PASS
+direction: RTL | align-content: 'start'
+
+PASS
+direction: LTR | justify-content: 'center'
+
+PASS
+direction: LTR | justify-content: 'end'
+
+PASS
+direction: RTL | justify-content: 'end'
+
+PASS
+direction: RTL | justify-content: 'start'
+
+PASS
+direction: RTL | justify-content: 'stretch'
+
+PASS
+direction: LTR | justify-content: 'space-evenly'
+
+PASS
+direction: LTR | justify-content: 'space-between'
+
+PASS
+direction: LTR | justify-content: 'space-around'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'right' | justify-items: 'right'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html b/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html
new file mode 100644 (file)
index 0000000..6da40e3
--- /dev/null
@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel=stylesheet>
+<script src="../../resources/check-layout.js"></script>
+<script src="../../resources/js-test.js"></script>
+<style>
+body { margin: 0px; }
+
+.grid100And200 {
+    -webkit-grid-template-columns: 100px 100px;
+    -webkit-grid-template-rows: 200px 200px;
+    width: -webkit-fit-content;
+    position: relative; /* For the <p> comments */
+}
+
+.grid50And100 {
+    -webkit-grid: 50px 50px / 100px 100px;
+    width: 200px;
+    height: 300px;
+    position: relative; /* For the <p> comments */
+}
+
+.gridAuto20And40 {
+    -webkit-grid-auto-columns: 20px;
+    -webkit-grid-auto-rows: 40px;
+    width: 400px;
+    height: 300px;
+    position: relative; /* For the <p> comments */
+}
+
+.gridWithPaddingBorder {
+    -webkit-grid-template-columns: 100px 200px;
+    -webkit-grid-template-rows: 200px 200px;
+    padding: 10px 15px 20px 30px;
+    border-width: 5px 10px 15px 20px;
+    border-style: dotted;
+    border-color: blue;
+    width: -webkit-fit-content;
+    position: relative; /* For the <p> comments */
+}
+
+.stretch {
+    align-self: stretch;
+    justify-self: stretch;
+}
+
+.stretchedGrid { -webkit-grid-auto-columns: auto; }
+
+.gridRowColumnGaps {
+    -webkit-grid-row-gap: 17px;
+    -webkit-grid-column-gap: 21px;
+}
+
+div.grid > div { font: 10px/1 Ahem; }
+
+.cell {
+    width: 20px;
+    height: 40px;
+}
+
+div.gridWithPaddingBorder > div.cell {
+    margin: 4px 8px 12px 16px;
+}
+
+
+.container {
+    position: relative;
+}
+
+</style>
+
+<body onload="checkLayout('.grid')">
+
+<!-- Check that gutters do not interfere with self alignment computation. -->
+<div class="container">
+    <div class="grid grid100And200 alignItemsCenter gridRowColumnGaps" data-expected-width="221" data-expected-height="417">
+        <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn" data-offset-x="121" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="217" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="121" data-offset-y="377" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="grid grid100And200 verticalLR gridRowColumnGaps" data-expected-width="417" data-expected-height="221">
+        <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
+        </div>
+        <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="121" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offset-x="180" data-offset-y="121" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-offset-x="307" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfRight secondRowSecondColumn verticalRL" data-offset-x="217" data-offset-y="121" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfLeft secondRowSecondColumn verticalRL" data-offset-x="217" data-offset-y="121" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+    </div>
+</div>
+
+<div class="container">
+     <div class="grid grid100And200 directionRTL gridRowColumnGaps" data-expected-width="221" data-expected-height="417">
+         <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="121" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+         <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="80" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="201" data-offset-y="297" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="80" data-offset-y="217" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="80" data-offset-y="217" data-expected-width="20" data-expected-height="40"></div>
+     </div>
+</div>
+
+<!-- Check that gutters do not interfere with align-content computation. -->
+<div class="container">
+    <p>direction: LTR | align-content: 'center'</p>
+    <div class="grid grid50And100 alignContentCenter gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="42" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="71" data-offset-y="42" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="159" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="71" data-offset-y="159" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: LTR | align-content: 'right'</p>
+    <div class="grid grid50And100 alignContentRight gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="71" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="117" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="71" data-offset-y="117" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: RTL | align-content: 'right'</p>
+    <div class="grid grid50And100 directionRTL alignContentRight gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="79" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="117" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="109" data-offset-y="117" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: RTL | align-content: 'start'</p>
+    <div class="grid grid50And100 directionRTL alignContentStart gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="79" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="117" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="109" data-offset-y="117" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with justify-content computation. -->
+<div class="container">
+    <p>direction: LTR | justify-content: 'center'</p>
+    <div class="grid grid50And100 justifyContentCenter gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="40" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="111" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="40" data-offset-y="117" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="111" data-offset-y="117" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: LTR | justify-content: 'end'</p>
+    <div class="grid grid50And100 justifyContentEnd gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="79" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="79" data-offset-y="117" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="117" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: RTL | justify-content: 'end'</p>
+    <div class="grid grid50And100 directionRTL justifyContentRight gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="79" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="117" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="109" data-offset-y="117" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: RTL | justify-content: 'start'</p>
+    <div class="grid grid50And100 directionRTL justifyContentStart gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="79" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="117" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="109" data-offset-y="117" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with vertical justify-content computation. -->
+
+<div class="container">
+    <p>direction: RTL | justify-content: 'stretch'</p>
+    <div class="grid gridAuto20And40 stretchedGrid justifyContentStretch verticalLR directionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="241" data-expected-width="40" data-expected-height="59"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="161" data-expected-width="40" data-expected-height="59"></div>
+        <div class="firstRowThirdColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="59"></div>
+        <div class="firstRowFourthColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="59"></div>
+        <div class="secondRowFirstColumn" data-offset-x="57" data-offset-y="241" data-expected-width="40" data-expected-height="59"></div>
+        <div class="secondRowSecondColumn" data-offset-x="57" data-offset-y="161" data-expected-width="40" data-expected-height="59"></div>
+        <div class="secondRowThirdColumn" data-offset-x="57" data-offset-y="80" data-expected-width="40" data-expected-height="59"></div>
+        <div class="secondRowFourthColumn" data-offset-x="57" data-offset-y="0" data-expected-width="40" data-expected-height="59"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: LTR | justify-content: 'space-evenly'</p>
+    <div class="grid gridAuto20And40 justifyContentSpaceEvenly verticalLR directionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="231" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowThirdColumn" data-offset-x="0" data-offset-y="50" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="57" data-offset-y="231" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="57" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowThirdColumn" data-offset-x="57" data-offset-y="50" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: LTR | justify-content: 'space-between'</p>
+    <div class="grid gridAuto20And40 justifyContentSpaceBetween verticalRL directionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="187" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowThirdColumn" data-offset-x="360" data-offset-y="93" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowFourthColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="303" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="303" data-offset-y="187" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowThirdColumn" data-offset-x="303" data-offset-y="93" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFourthColumn" data-offset-x="303" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: LTR | justify-content: 'space-around'</p>
+    <div class="grid gridAuto20And40 justifyContentSpaceAround verticalRL directionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="303" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="303" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with align&justify computation when having border, padding and margins. -->
+<div class="container">
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid gridWithPaddingBorder directionLTR itemsSelfStart gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="46" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="151" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="167" data-offset-y="231" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid gridWithPaddingBorder directionLTR itemsSelfEnd gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="151" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="167" data-offset-y="375" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'right' | justify-items: 'right'</p>
+    <div class="grid gridWithPaddingBorder directionRTL itemsRight gridRowColumnGaps"     data-expected-width="396" data-expected-height="467">
+        <div class="cell firstRowFirstColumn"     data-offset-x="323" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="stretch secondRowFirstColumn" data-offset-x="251" data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="231" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid gridWithPaddingBorder directionRTL itemsSelfStart gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="323" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="251" data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202"  data-offset-y="231" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt b/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt
new file mode 100644 (file)
index 0000000..dae56ec
--- /dev/null
@@ -0,0 +1,20 @@
+PASS successfullyParsed is true
+
+TEST COMPLETE
+PASS
+PASS
+PASS
+PASS
+XXXX XXXX
+XXX XXX
+XXXXX XXXXX
+XX XX XX XX
+PASS
+XXXXX
+XXX XXX XXX
+XXXX XXXX
+PASS
+XX
+XXX XXX XXX
+XXXX XXXX
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html b/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html
new file mode 100644 (file)
index 0000000..57a0456
--- /dev/null
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel=stylesheet>
+<script src="../../resources/check-layout.js"></script>
+<script src="../../resources/js-test.js"></script>
+<style>
+.gridMaxFlexContent { -webkit-grid-template: minmax(30px, 2fr) / 50px; }
+.gridTwoDoubleMaxFlexContent { -webkit-grid-template: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; }
+.gridIgnoreSecondGridItem { -webkit-grid-template: minmax(300px, 3fr) minmax(150px, 1fr) / 50px; }
+
+.gridRowsMaxFlexContent { -webkit-grid-template: 50px / minmax(30px, 2fr); }
+.gridRowsTwoMaxFlexContent { -webkit-grid-template: 50px / minmax(10px, 1fr) minmax(10px, 2fr); }
+.gridRowsTwoDoubleMaxFlexContent { -webkit-grid-template: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); }
+
+.gridMinMaxFlexFixedAndMinContentAndFixed { -webkit-grid-template-columns: minmax(0.5fr, 35px) -webkit-min-content 25px; }
+.gridMinContentAndMinMaxFixedMinContentAndFlex { -webkit-grid-template-columns: -webkit-min-content minmax(20px, -webkit-min-content) 2fr; }
+.gridMaxContentAndMinMaxFixedMaxContentAndFlex { -webkit-grid-template-columns: -webkit-max-content minmax(20px, -webkit-max-content) 1fr; }
+
+div.grid > div { font: 10px/1 Ahem; }
+
+.gridRowColumnGaps {
+    -webkit-grid-row-gap: 33px;
+    -webkit-grid-column-gap: 19px;
+}
+
+</style>
+<body onload="checkLayout('.grid');">
+
+<!-- Check that gutters do not interfere with flex content resolution for columns -->
+
+<div style="width: 120px; height: 10px;">
+    <div class="grid gridTwoDoubleMaxFlexContent gridRowColumnGaps" data-expected-width="120" data-expected-height="50">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="81" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="width: 570px; height: 10px;">
+    <div class="grid gridIgnoreSecondGridItem gridRowColumnGaps" data-expected-width="570" data-expected-height="50">
+        <div class="firstRowFirstColumn" data-expected-width="401" data-expected-height="50"></div>
+        <div class="firstRowSecondColumn" data-expected-width="150" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with flex content resolution for rows -->
+
+<div style="width: 10px; height: 60px">
+    <div class="grid gridRowsTwoMaxFlexContent gridRowColumnGaps" style="height: 100%" data-expected-width="10" data-expected-height="60">
+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="17"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 60px">
+    <div class="grid gridRowsTwoDoubleMaxFlexContent gridRowColumnGaps" data-expected-width="10" data-expected-height="63">
+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with flex content resolution with content sized tracks -->
+
+<div style="position: relative; width: 100px;">
+    <div class="grid gridMinMaxFlexFixedAndMinContentAndFixed gridRowColumnGaps" data-expected-width="100" data-expected-height="199">
+       <div style="-webkit-grid-column: 1 / span 2;" data-expected-width="54" data-expected-height="20">XXXX XXXX</div>
+       <div style="-webkit-grid-column: 2 / span 2; -webkit-grid-row: 2;" data-expected-width="44" data-expected-height="20">XXX XXX</div>
+       <div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 3;" data-expected-width="98" data-expected-height="20">XXXXX XXXXX</div>
+       <div style="-webkit-grid-column: 2 / span 2; -webkit-grid-row: 4;" data-expected-width="44" data-expected-height="40">XX XX XX XX</div>
+    </div>
+</div>
+
+<div style="position: relative; width: 100px;">
+    <div class="grid gridMinContentAndMinMaxFixedMinContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="149">
+       <div style="-webkit-grid-column: 2 / span 2;" data-expected-width="80">XXXXX</div>
+       <div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 2;" data-expected-width="100">XXX XXX XXX</div>
+       <div style="-webkit-grid-column: 1 / span 2; -webkit-grid-row: 3;" data-expected-width="40">XXXX XXXX</div>
+        <div style="-webkit-grid-column: 1; -webkit-grid-row: 4;" data-expected-width="1" data-expected-height="0"></div>
+    </div>
+</div>
+
+<div style="position: relative; width: 100px;">
+    <div class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="139">
+       <div style="-webkit-grid-column: 2 / span 2;" data-expected-width="39">XX</div>
+       <div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 2;" data-expected-width="109">XXX XXX XXX</div>
+       <div style="-webkit-grid-column: 1 / span 2; -webkit-grid-row: 3;" data-expected-width="90">XXXX XXXX</div>
+        <div style="-webkit-grid-column: 1; -webkit-grid-row: 4;" data-expected-width="51" data-expected-height="0"></div>
+    </div>
+</div>
+
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks-expected.txt b/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks-expected.txt
new file mode 100644 (file)
index 0000000..39ff815
--- /dev/null
@@ -0,0 +1,58 @@
+PASS successfullyParsed is true
+
+TEST COMPLETE
+PASS
+PASS
+XX
+XX
+X
+XX XX
+PASS
+XX
+XX
+XX XX
+XXXX XX
+X
+XX XX
+PASS
+XX
+XX
+XX XX
+XXXX XX
+X
+XX XX
+PASS
+X X X
+X X
+XXX XX X XX XX
+PASS
+X X X
+X XX X XX XX XX X
+X X
+PASS
+XX
+X X
+X X
+XXX XX
+X
+XX XX
+PASS
+XX
+X X
+X X
+XXX XX
+X
+XX XX
+PASS
+XXXXX
+X
+X
+PASS
+XXXX X XXXX
+X XX X XX X
+XXX XX
+XX
+XXXXX
+PASS
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html b/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html
new file mode 100644 (file)
index 0000000..989531d
--- /dev/null
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel=stylesheet>
+<script src="../../resources/check-layout.js"></script>
+<script src="../../resources/js-test.js"></script>
+<style>
+body { margin: 0px; }
+
+.normalGap { -webkit-grid-gap: normal; }
+
+.gridGap { -webkit-grid-gap: 16px; }
+
+.gridRowColumnGaps {
+    -webkit-grid-row-gap: 12px;
+    -webkit-grid-column-gap: 23px;
+}
+
+.gridMultipleCols { -webkit-grid-template-columns: 30px minmax(10px, 50px) 80px; }
+.gridMultipleRows { -webkit-grid-template-rows: 90px 70px -webkit-min-content; }
+.gridAutoAuto { -webkit-grid-template: auto auto / auto auto; }
+.gridMultipleFixed { -webkit-grid-template: [first] 15px [foo] 25px [bar] 35px [last] / [first] 37px [foo] 57px [bar] 77px [last]; }
+.gridFixed100 { -webkit-grid-template: repeat(2, 100px) / repeat(2, 100px); }
+
+.thirdRowThirdColumn { -webkit-grid-area: 3 / 3; }
+.firstRowThirdColumn { -webkit-grid-area: 1 / 3; }
+
+div.grid > div { font: 10px/1 Ahem; }
+
+.gridItemMargins {
+    margin: 20px 30px 40px 50px;
+    width: 20px;
+    height: 40px;
+}
+
+</style>
+
+<body onload="checkLayout('.grid')">
+
+<!-- Check that gutters contribute to the size of the grid containers. -->
+
+<div style="position: relative;">
+    <div class="grid normalGap gridMultipleCols fit-content" data-expected-width="160" data-expected-height="0"></div>
+    <div class="grid normalGap gridMultipleRows" style="width: 400px" data-expected-width="400" data-expected-height="160"></div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridRowColumnGaps fit-content" data-expected-width="93" data-expected-height="52">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">XX</div>
+        <div class="secondRowSecondColumn" data-offset-x="43" data-offset-y="22" data-expected-width="50" data-expected-height="30">XX<br>X<br>XX XX</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridMultipleCols gridRowColumnGaps fit-content" data-expected-width="206" data-expected-height="84">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10">XX</div>
+        <div class="secondRowSecondColumn" data-offset-x="53" data-offset-y="22" data-expected-width="50" data-expected-height="20">XX<br>XX XX</div>
+        <div class="thirdRowThirdColumn" data-offset-x="126" data-offset-y="54" data-expected-width="80" data-expected-height="30">XXXX XX<br>X<br>XX XX</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridMultipleRows gridRowColumnGaps fit-content" data-expected-width="186" data-expected-height="214">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="90">XX</div>
+        <div class="secondRowSecondColumn" data-offset-x="43" data-offset-y="102" data-expected-width="50" data-expected-height="70">XX<br>XX XX</div>
+        <div class="thirdRowThirdColumn" data-offset-x="116" data-offset-y="184" data-expected-width="70" data-expected-height="30">XXXX XX<br>X<br>XX XX</div>
+    </div>
+</div>
+
+<!-- Check that gutters do not alter grid items positioning. -->
+<div style="position: relative">
+    <div class="grid gridMultipleFixed gridRowColumnGaps">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="37">X X X</div>
+        <div class="secondRowSecondColumn" data-offset-x="38" data-offset-y="49" data-expected-width="25" data-expected-height="57">X X</div>
+        <div class="thirdRowThirdColumn" data-offset-x="86" data-offset-y="118" data-expected-width="35" data-expected-height="77">XXX XX X XX XX</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridMultipleFixed gridRowColumnGaps">
+        <div style="-webkit-grid-row: 2; -webkit-grid-column: -2 / -1;" data-offset-x="86" data-offset-y="49" data-expected-width="35" data-expected-height="57">X X X</div>
+        <div style="-webkit-grid-row: 1 / bar; -webkit-grid-column: bar" data-offset-x="86" data-offset-y="0" data-expected-width="35" data-expected-height="106">X XX X XX XX XX X</div>
+        <div style="-webkit-grid-row: -2; -webkit-grid-column-end: foo" data-offset-x="0" data-offset-y="118" data-expected-width="15" data-expected-height="77">X X</div>
+    </div>
+</div>
+
+<!-- Check that gutters do not alter track sizing. -->
+<div style="position: relative">
+    <div class="grid gridRowColumnGaps fit-content" data-expected-width="156" data-expected-height="84">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">XX</div>
+        <div class="secondRowSecondColumn" data-offset-x="43" data-offset-y="22" data-expected-width="30" data-expected-height="20">X X<br>X X</div>
+        <div class="thirdRowThirdColumn" data-offset-x="96" data-offset-y="54" data-expected-width="60" data-expected-height="30">XXX XX<br>X<br>XX XX</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridRowColumnGaps gridMultipleCols gridMultipleRows fit-content" data-expected-width="206" data-expected-height="214">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="90">XX</div>
+        <div class="secondRowSecondColumn" data-offset-x="53" data-offset-y="102" data-expected-width="50" data-expected-height="70">X X<br>X X</div>
+        <div class="thirdRowThirdColumn" data-offset-x="126" data-offset-y="184" data-expected-width="80" data-expected-height="30">XXX XX<br>X<br>XX XX</div>
+    </div>
+</div>
+
+<!-- Check that gutters contribute to the size of spanning items. -->
+<div style="position: relative">
+    <div class="grid gridGap gridAutoAuto constrainedContainer">
+        <div class="secondRowBothColumn" data-offset-x="0" data-offset-y="26" data-expected-width="50" data-expected-height="10">XXXXX</div>
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="17" data-expected-height="10">X</div>
+        <div class="firstRowSecondColumn" data-offset-x="33" data-offset-y="0" data-expected-width="17" data-expected-height="10">X</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridMultipleFixed gridRowColumnGaps">
+        <div style="-webkit-grid-row: 2; -webkit-grid-column: 1 / -1;" data-offset-x="0" data-offset-y="49" data-expected-width="121" data-expected-height="57">XXXX X XXXX</div>
+        <div style="-webkit-grid-row: first / last; -webkit-grid-column-start: 2" data-offset-x="38" data-offset-y="0" data-expected-width="25" data-expected-height="195">X XX X XX X</div>
+        <div style="-webkit-grid-row: 1 / 3; -webkit-grid-column: first / bar" data-offset-x="0" data-offset-y="0" data-expected-width="63" data-expected-height="106">XXX XX<br>XX<br>XXXXX</div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with margins computation. -->
+<div style="position: relative">
+    <div class="grid gridFixed100 gridGap">
+        <div class="gridItemMargins firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins firstRowSecondColumn" data-offset-x="166" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins secondRowFirstColumn" data-offset-x="50" data-offset-y="136" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins secondRowSecondColumn" data-offset-x="166" data-offset-y="136" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridFixed100 verticalRL directionRTL gridGap">
+        <div class="gridItemMargins firstRowFirstColumn" data-offset-x="166" data-offset-y="136" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins firstRowSecondColumn" data-offset-x="166" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins secondRowFirstColumn" data-offset-x="50" data-offset-y="136" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt b/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt
new file mode 100644 (file)
index 0000000..752b0d0
--- /dev/null
@@ -0,0 +1,44 @@
+Test that setting and getting grid-column-gap and grid-row-gap works as expected
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Test getting grid-column-gap and grid-row-gap set through CSS
+PASS window.getComputedStyle(defaultGrid, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
+PASS window.getComputedStyle(defaultGrid, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
+PASS window.getComputedStyle(gridGap, '').getPropertyValue('-webkit-grid-row-gap') is "25px"
+PASS window.getComputedStyle(gridGap, '').getPropertyValue('-webkit-grid-column-gap') is "25px"
+PASS window.getComputedStyle(gridColumnGap, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridColumnGap, '').getPropertyValue('-webkit-grid-column-gap') is "16px"
+PASS window.getComputedStyle(gridRowGap, '').getPropertyValue('-webkit-grid-row-gap') is "32px"
+PASS window.getComputedStyle(gridRowGap, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
+PASS window.getComputedStyle(gridCalcGaps, '').getPropertyValue('-webkit-grid-row-gap') is "13px"
+PASS window.getComputedStyle(gridCalcGaps, '').getPropertyValue('-webkit-grid-column-gap') is "10px"
+PASS window.getComputedStyle(gridRowColumnGaps, '').getPropertyValue('-webkit-grid-row-gap') is "12px"
+PASS window.getComputedStyle(gridRowColumnGaps, '').getPropertyValue('-webkit-grid-column-gap') is "16px"
+PASS window.getComputedStyle(gridRowColumnGaps, '').getPropertyValue('-webkit-grid-row-gap') is "12px"
+PASS window.getComputedStyle(gridRowColumnGaps, '').getPropertyValue('-webkit-grid-column-gap') is "16px"
+PASS window.getComputedStyle(gridRowColumnInheritGaps, '').getPropertyValue('-webkit-grid-row-gap') is "25px"
+PASS window.getComputedStyle(gridRowColumnInheritGaps, '').getPropertyValue('-webkit-grid-column-gap') is "25px"
+PASS window.getComputedStyle(gridRowColumnInitialGaps, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridRowColumnInitialGaps, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
+
+Test getting wrong values for grid-column-gap and grid-row-gap set through CSS
+PASS window.getComputedStyle(gridInvalidRowGap, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidRowGap, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidColumnGap, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidColumnGap, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidMultipleRowColumnGaps, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidMultipleRowColumnGaps, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidGridGap, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidGridGap, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidNoneGap, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidNoneGap, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidImplicitGridGap, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidImplicitGridGap, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidLengthRowColumnGaps, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidLengthRowColumnGaps, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html b/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html
new file mode 100644 (file)
index 0000000..0efa329
--- /dev/null
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.gridGap { -webkit-grid-gap: 25px; }
+.gridColumnGap { -webkit-grid-column-gap: 2vw; }
+.gridRowGap { -webkit-grid-row-gap: 2em; }
+.gridRowColumnGaps {
+    -webkit-grid-row-gap: 12px;
+    -webkit-grid-column-gap: 1rem;
+}
+.gridRowColumnInheritGaps {
+    -webkit-grid-row-gap: inherit;
+    -webkit-grid-column-gap: inherit;
+}
+.gridRowColumnInitialGaps {
+    -webkit-grid-row-gap: initial;
+    -webkit-grid-column-gap: initial;
+}
+.gridCalcGaps {
+    -webkit-grid-row-gap: calc(10px + 3px);
+    -webkit-grid-column-gap: calc(2px + 1vw);
+}
+.gridInvalidRowGap { -webkit-grid-row-gap: 10%; }
+.gridInvalidColumnGap { -webkit-grid-column-gap: -webkit-max-content; }
+.gridInvalidMultipleRowColumnGaps {
+    -webkit-grid-row-gap: 10px 1px;
+    -webkit-grid-column-gap: 0px 0px 0px;
+}
+.gridInvalidLengthRowColumnGaps {
+    -webkit-grid-row-gap: 2dpi;
+    -webkit-grid-column-gap: 3rad;
+}
+.gridInvalidGridGap { -webkit-grid-gap: 20px 20px 10px; }
+.gridInvalidNoneGap { -webkit-grid-gap: none; }
+.gridInvalidImplicitGridGap { -webkit-grid-gap: -webkit-fit-content; }
+
+</style>
+<script src="../../resources/js-test.js"></script>
+</head>
+<body>
+
+<div class="grid" id="defaultGrid"></div>
+<div class="grid gridGap" id="gridGap"></div>
+<div class="grid gridColumnGap" id="gridColumnGap"></div>
+<div class="grid gridRowGap" id="gridRowGap"></div>
+<div class="grid gridCalcGaps" id="gridCalcGaps"></div>
+<div class="grid gridRowColumnGaps" id="gridRowColumnGaps"></div>
+<div class="grid gridGap">
+    <div class="grid gridRowColumnInheritGaps" id="gridRowColumnInheritGaps"></div>
+</div>
+<div class="grid gridGap">
+    <div class="grid gridRowColumnInitialGaps" id="gridRowColumnInitialGaps"></div>
+</div>
+<div class="grid gridInvalidRowGap" id="gridInvalidRowGap"></div>
+<div class="grid gridInvalidColumnGap" id="gridInvalidColumnGap"></div>
+<div class="grid gridInvalidMultipleRowColumnGaps" id="gridInvalidMultipleRowColumnGaps"></div>
+<div class="grid gridInvalidGridGap" id="gridInvalidGridGap"></div>
+<div class="grid gridInvalidNoneGap" id="gridInvalidNoneGap"></div>
+<div class="grid gridInvalidImplicitGridGap" id="gridInvalidImplicitGridGap"></div>
+<div class="grid gridInvalidLengthRowColumnGaps" id="gridInvalidLengthRowColumnGaps"></div>
+
+<script src="resources/grid-definitions-parsing-utils.js"></script>
+<script>
+
+description('Test that setting and getting grid-column-gap and grid-row-gap works as expected');
+
+debug("Test getting grid-column-gap and grid-row-gap set through CSS");
+
+testGridGapDefinitionsValues("defaultGrid", "0px", "0px");
+testGridGapDefinitionsValues("gridGap", "25px", "25px");
+testGridGapDefinitionsValues("gridColumnGap", "0px", "16px");
+testGridGapDefinitionsValues("gridRowGap", "32px", "0px");
+testGridGapDefinitionsValues("gridCalcGaps", "13px", "10px");
+testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px");
+testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px");
+testGridGapDefinitionsValues("gridRowColumnInheritGaps", "25px", "25px");
+testGridGapDefinitionsValues("gridRowColumnInitialGaps", "0px", "0px");
+
+debug("");
+debug("Test getting wrong values for grid-column-gap and grid-row-gap set through CSS");
+testGridGapDefinitionsValues("gridInvalidRowGap", "0px", "0px");
+testGridGapDefinitionsValues("gridInvalidColumnGap", "0px", "0px");
+testGridGapDefinitionsValues("gridInvalidMultipleRowColumnGaps", "0px", "0px");
+testGridGapDefinitionsValues("gridInvalidGridGap", "0px", "0px");
+testGridGapDefinitionsValues("gridInvalidNoneGap", "0px", "0px");
+testGridGapDefinitionsValues("gridInvalidImplicitGridGap", "0px", "0px");
+testGridGapDefinitionsValues("gridInvalidLengthRowColumnGaps", "0px", "0px");
+
+</script>
+</body>
+</html>
index 1f2684e..aa493b5 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 body {
@@ -20,21 +21,6 @@ body {
     -webkit-grid-auto-columns: auto;
 }
 
-.justifyContentSpaceBetween {
-    justify-content: space-between;
-}
-
-.justifyContentSpaceAround {
-    justify-content: space-around;
-}
-
-.justifyContentSpaceEvenly {
-    justify-content: space-evenly;
-}
-
-.justifyContentStretch {
-    justify-content: stretch;
-}
 </style>
 </head>
 <body onload="checkLayout('.grid')">
index e5154bd..3dba042 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 body {
@@ -20,21 +21,6 @@ body {
     -webkit-grid-auto-columns: auto;
 }
 
-.justifyContentSpaceBetween {
-    justify-content: space-between;
-}
-
-.justifyContentSpaceAround {
-    justify-content: space-around;
-}
-
-.justifyContentSpaceEvenly {
-    justify-content: space-evenly;
-}
-
-.justifyContentStretch {
-    justify-content: stretch;
-}
 </style>
 </head>
 <body onload="checkLayout('.grid')">
index 74bebfa..beecebc 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 body {
@@ -20,41 +21,6 @@ body {
     height: 40px;
 }
 
-.justifyContentBaseline {
-    justify-content: baseline;
-}
-
-.justifyContentLastBaseline {
-    justify-content: last-baseline;
-}
-
-.justifyContentStart {
-    justify-content: start;
-}
-
-.justifyContentEnd {
-    justify-content: end;
-}
-
-.justifyContentCenter {
-    justify-content: center;
-}
-
-.justifyContentLeft {
-    justify-content: left;
-}
-
-.justifyContentRight {
-    justify-content: right;
-}
-
-.justifyContentFlexStart {
-    justify-content: flex-start;
-}
-
-.justifyContentFlexEnd {
-    justify-content: flex-end;
-}
 </style>
 </head>
 <body onload="checkLayout('.grid')">
diff --git a/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css b/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css
new file mode 100644 (file)
index 0000000..468b17a
--- /dev/null
@@ -0,0 +1,74 @@
+/* align-self */
+.alignSelfAuto { align-self: auto; }
+.alignSelfStretch { align-self: stretch; }
+.alignSelfStart { align-self: start; }
+.alignSelfEnd { align-self: end; }
+.alignSelfCenter { align-self: center; }
+.alignSelfRight { align-self: right; }
+.alignSelfLeft { align-self: left; }
+
+.alignSelfFlexStart { align-self: flex-start; }
+.alignSelfFlexEnd { align-self: flex-end; }
+
+.alignSelfSelfStart { align-self: self-start; }
+.alignSelfSelfEnd { align-self: self-end; }
+
+/* align-items */
+.alignItemsCenter { align-items: center; }
+
+/* align-content */
+.alignContentBaseline { align-content: baseline; }
+.alignContentLastBaseline { align-content: last-baseline; }
+.alignContentStart { align-content: start; }
+.alignContentEnd { align-content: end; }
+.alignContentCenter { align-content: center; }
+.alignContentLeft { align-content: left; }
+.alignContentRight { align-content: right; }
+.alignContentFlexStart { align-content: flex-start; }
+.alignContentFlexEnd { align-content: flex-end; }
+
+/* justify-content */
+.justifyContentBaseline { justify-content: baseline; }
+.justifyContentLastBaseline { justify-content: last-baseline; }
+.justifyContentStart { justify-content: start; }
+.justifyContentEnd { justify-content: end; }
+.justifyContentCenter { justify-content: center; }
+.justifyContentLeft { justify-content: left; }
+.justifyContentRight { justify-content: right; }
+.justifyContentFlexStart { justify-content: flex-start; }
+.justifyContentFlexEnd { justify-content: flex-end; }
+.justifyContentSpaceBetween { justify-content: space-between; }
+.justifyContentSpaceAround { justify-content: space-around; }
+.justifyContentSpaceEvenly { justify-content: space-evenly; }
+.justifyContentStretch { justify-content: stretch; }
+
+/* Both align-items and justify-items */
+.itemsCenter {
+    align-items: center;
+    justify-items: center;
+}
+
+.itemsEnd {
+    align-items: end;
+    justify-items: end;
+}
+
+.itemsLeft {
+    align-items: left;
+    justify-items: left;
+}
+
+.itemsRight {
+    align-items: right;
+    justify-items: right;
+}
+
+.itemsSelfStart {
+    align-items: self-start;
+    justify-items: self-start;
+}
+
+.itemsSelfEnd {
+    align-items: self-end;
+    justify-items: self-end;
+}
index 28f6e4b..05d8253 100644 (file)
@@ -67,3 +67,9 @@ function testGridAutoDefinitionsValues(element, computedRowValue, computedColumn
     shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-auto-rows')", computedRowValue);
     shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-auto-columns')", computedColumnValue);
 }
+
+function testGridGapDefinitionsValues(element, computedRowGap, computedColumnGap)
+{
+    shouldBeEqualToString("window.getComputedStyle(" + element + ", '').getPropertyValue('-webkit-grid-row-gap')", computedRowGap);
+    shouldBeEqualToString("window.getComputedStyle(" + element + ", '').getPropertyValue('-webkit-grid-column-gap')", computedColumnGap);
+}
index 5c8cce6..a3dfe60 100644 (file)
     -webkit-grid-row: 4;
 }
 
+.firstRowThirdColumn {
+    background-color: magenta;
+    grid-column: 3;
+    grid-row: 1;
+}
+
+.secondRowThirdColumn {
+    background-color: navy;
+    grid-column: 3;
+    grid-row: 2;
+}
+
+.firstRowFourthColumn {
+    background-color: green;
+    grid-column: 4;
+    grid-row: 1;
+}
+
+.secondRowFourthColumn {
+    background-color: pink;
+    grid-column: 4;
+    grid-row: 2;
+}
+
 .firstAutoRowSecondAutoColumn {
     -webkit-grid-row: 1 / auto;
     -webkit-grid-column: 2 / auto;
index 47b4ff8..14439d1 100644 (file)
@@ -1,3 +1,54 @@
+2015-10-05  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-grid] Implement grid gutters
+        https://bugs.webkit.org/show_bug.cgi?id=149800
+
+        Reviewed by Darin Adler.
+
+        Authors can now specify the gutters between grid lines, i.e.,
+        the space between two consecutive grid lines. This can be done
+        using the new '-webkit-grid-column-gap 'and
+        '-webkit-grid-row-gap' properties (or the '-webkit-grid-gap'
+        shorthand).
+
+        From the track sizing algorithm POV, gutters are treated as
+        fixed size columns. The primary consequence is that grids are
+        enlarged (depending on the number of tracks). Gutters also
+        affect the sizing of content-sized tracks and fr tracks as
+        long as the grid have spanning items. Those tracks will become
+        smaller as gutters will consume part of the item's size, so
+        the tracks won't need to grow as much as they used to.
+
+        Tests: fast/css-grid-layout/grid-gutters-and-alignment.html
+               fast/css-grid-layout/grid-gutters-and-flex-content.html
+               fast/css-grid-layout/grid-gutters-and-tracks.html
+               fast/css-grid-layout/grid-gutters-get-set.html
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::valueForGridTrackList):
+        (WebCore::ComputedStyleExtractor::propertyValue):
+        * css/CSSParser.cpp:
+        (WebCore::isSimpleLengthPropertyID):
+        (WebCore::CSSParser::parseValue):
+        (WebCore::CSSParser::parseGridGapShorthand):
+        * css/CSSParser.h:
+        * css/CSSPropertyNames.in:
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::guttersSize):
+        (WebCore::RenderGrid::computeIntrinsicLogicalWidths):
+        (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForItems):
+        (WebCore::RenderGrid::layoutGridItems):
+        (WebCore::RenderGrid::gridAreaBreadthForChild):
+        (WebCore::RenderGrid::populateGridPositions):
+        (WebCore::RenderGrid::columnAxisOffsetForChild):
+        (WebCore::RenderGrid::rowAxisOffsetForChild):
+        * rendering/RenderGrid.h:
+        * rendering/style/RenderStyle.h:
+        * rendering/style/StyleGridData.cpp:
+        (WebCore::StyleGridData::StyleGridData):
+        * rendering/style/StyleGridData.h:
+        (WebCore::StyleGridData::operator==):
+
 2015-10-07  ChangSeok Oh  <changseok.oh@collabora.com>
 
         [GTK] Progress bar is broken on recent GTK+
index e4d1e27..7d8cffa 100644 (file)
@@ -337,6 +337,8 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyWebkitGridTemplateRows,
     CSSPropertyWebkitGridRowEnd,
     CSSPropertyWebkitGridRowStart,
+    CSSPropertyWebkitGridColumnGap,
+    CSSPropertyWebkitGridRowGap,
 #endif
     CSSPropertyWebkitHyphenateCharacter,
     CSSPropertyWebkitHyphenateLimitAfter,
@@ -1073,10 +1075,15 @@ static Ref<CSSValue> valueForGridTrackList(GridTrackSizingDirection direction, R
         // 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 < trackPositions.size() - 1; ++i) {
+        unsigned i = 0;
+        LayoutUnit gutterSize = downcast<RenderGrid>(*renderer).guttersSize(direction, 2);
+        for (; i < trackPositions.size() - 2; ++i) {
             addValuesForNamedGridLinesAtIndex(orderedNamedGridLines, i, list.get());
-            list.get().append(zoomAdjustedPixelValue(trackPositions[i + 1] - trackPositions[i], style));
+            list.get().append(zoomAdjustedPixelValue(trackPositions[i + 1] - trackPositions[i] - gutterSize, style));
         }
+        // Last track line does not have any gutter.
+        addValuesForNamedGridLinesAtIndex(orderedNamedGridLines, i, list.get());
+        list.get().append(zoomAdjustedPixelValue(trackPositions[i + 1] - trackPositions[i], style));
         insertionIndex = trackPositions.size() - 1;
     } else {
         for (unsigned i = 0; i < trackSizes.size(); ++i) {
@@ -2595,6 +2602,12 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             }
 
             return CSSGridTemplateAreasValue::create(style->namedGridArea(), style->namedGridAreaRowCount(), style->namedGridAreaColumnCount());
+        case CSSPropertyWebkitGridColumnGap:
+            return zoomAdjustedPixelValueForLength(style->gridColumnGap(), *style);
+        case CSSPropertyWebkitGridRowGap:
+            return zoomAdjustedPixelValueForLength(style->gridRowGap(), *style);
+        case CSSPropertyWebkitGridGap:
+            return getCSSPropertyValuesForGridShorthand(webkitGridGapShorthand());
 #endif /* ENABLE(CSS_GRID_LAYOUT) */
         case CSSPropertyHeight:
             if (renderer && !renderer->isRenderSVGModelObject()) {
index 7ece1c7..eede5a7 100644 (file)
@@ -571,6 +571,10 @@ static inline bool isSimpleLengthPropertyID(CSSPropertyID propertyId, bool& acce
     case CSSPropertyWebkitPaddingBefore:
     case CSSPropertyWebkitPaddingEnd:
     case CSSPropertyWebkitPaddingStart:
+#if ENABLE(CSS_GRID_LAYOUT)
+    case CSSPropertyWebkitGridColumnGap:
+    case CSSPropertyWebkitGridRowGap:
+#endif
         acceptsNegativeNumbers = false;
         return true;
 #if ENABLE(CSS_SHAPES)
@@ -2772,6 +2776,14 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
         parsedValue = parseGridPosition();
         break;
 
+    case CSSPropertyWebkitGridColumnGap:
+    case CSSPropertyWebkitGridRowGap:
+        validPrimitive = validateUnit(valueWithCalculation, FLength | FNonNeg);
+        break;
+
+    case CSSPropertyWebkitGridGap:
+        return parseGridGapShorthand(important);
+
     case CSSPropertyWebkitGridColumn:
     case CSSPropertyWebkitGridRow: {
         return parseGridItemPositionShorthand(propId, important);
@@ -5439,6 +5451,43 @@ bool CSSParser::parseGridItemPositionShorthand(CSSPropertyID shorthandId, bool i
     return true;
 }
 
+bool CSSParser::parseGridGapShorthand(bool important)
+{
+    ShorthandScope scope(this, CSSPropertyWebkitGridGap);
+    ASSERT(shorthandForProperty(CSSPropertyWebkitGridGap).length() == 2);
+
+    CSSParserValue* value = m_valueList->current();
+    if (!value)
+        return false;
+
+    ValueWithCalculation columnValueWithCalculation(*value);
+    if (!validateUnit(columnValueWithCalculation, FLength | FNonNeg))
+        return false;
+
+    RefPtr<CSSPrimitiveValue> columnGap = createPrimitiveNumericValue(columnValueWithCalculation);
+
+    value = m_valueList->next();
+    if (!value) {
+        addProperty(CSSPropertyWebkitGridColumnGap, columnGap, important);
+        addProperty(CSSPropertyWebkitGridRowGap, columnGap, important);
+        return true;
+    }
+
+    ValueWithCalculation rowValueWithCalculation(*value);
+    if (!validateUnit(rowValueWithCalculation, FLength | FNonNeg))
+        return false;
+
+    if (m_valueList->next())
+        return false;
+
+    RefPtr<CSSPrimitiveValue> rowGap = createPrimitiveNumericValue(rowValueWithCalculation);
+
+    addProperty(CSSPropertyWebkitGridColumnGap, columnGap, important);
+    addProperty(CSSPropertyWebkitGridRowGap, rowGap, important);
+
+    return true;
+}
+
 bool CSSParser::parseGridTemplateRowsAndAreas(PassRefPtr<CSSValue> templateColumns, bool important)
 {
     // At least template-areas strings must be defined.
index 1033304..cf6b750 100644 (file)
@@ -213,6 +213,7 @@ public:
     bool parseGridTemplateShorthand(bool important);
     bool parseGridShorthand(bool important);
     bool parseGridAreaShorthand(bool important);
+    bool parseGridGapShorthand(bool important);
     bool parseSingleGridAreaLonghand(RefPtr<CSSValue>&);
     RefPtr<CSSValue> parseGridTrackList();
     bool parseGridTrackRepeatFunction(CSSValueList&);
index fbf0ad9..7382da6 100644 (file)
@@ -494,13 +494,16 @@ justify-items [Initial=initialSelfAlignment, Converter=SelfOrDefaultAlignmentDat
 -webkit-grid-auto-columns [Converter=GridTrackSize]
 -webkit-grid-auto-rows [Converter=GridTrackSize]
 -webkit-grid-column-end [ConditionalConverter=GridPosition, NameForMethods=GridItemColumnEnd]
+-webkit-grid-column-gap [Initial=initialZeroLength, Converter=Length]
 -webkit-grid-column-start [ConditionalConverter=GridPosition, NameForMethods=GridItemColumnStart]
 -webkit-grid-template [Longhands=-webkit-grid-template-columns|-webkit-grid-template-rows|-webkit-grid-template-areas]
 -webkit-grid-template-columns [Custom=All]
 -webkit-grid-template-rows [Custom=All]
 -webkit-grid-row-end [ConditionalConverter=GridPosition, NameForMethods=GridItemRowEnd]
+-webkit-grid-row-gap [Initial=initialZeroLength, Converter=Length]
 -webkit-grid-row-start [ConditionalConverter=GridPosition, NameForMethods=GridItemRowStart]
 -webkit-grid-column [Longhands=-webkit-grid-column-start|-webkit-grid-column-end]
+-webkit-grid-gap [Longhands=-webkit-grid-column-gap|-webkit-grid-row-gap]
 -webkit-grid-row [Longhands=-webkit-grid-row-start|-webkit-grid-row-end]
 -webkit-grid-template-areas [Custom=All]
 -webkit-grid-auto-flow [Converter=GridAutoFlow]
index 91da341..6b7c606 100644 (file)
@@ -329,6 +329,17 @@ void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)
     clearNeedsLayout();
 }
 
+LayoutUnit RenderGrid::guttersSize(GridTrackSizingDirection direction, size_t span) const
+{
+    ASSERT(span >= 1);
+
+    if (span == 1)
+        return { };
+
+    const Length& trackGap = direction == ForColumns ? style().gridColumnGap() : style().gridRowGap();
+    return valueForLength(trackGap, 0) * (span - 1);
+}
+
 void RenderGrid::computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const
 {
     bool wasPopulated = gridWasPopulated();
@@ -347,6 +358,10 @@ void RenderGrid::computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, Layo
         maxLogicalWidth += maxTrackBreadth;
     }
 
+    LayoutUnit totalGuttersSize = guttersSize(ForColumns, sizingData.columnTracks.size());
+    minLogicalWidth += totalGuttersSize;
+    maxLogicalWidth += totalGuttersSize;
+
     LayoutUnit scrollbarWidth = intrinsicScrollbarLogicalWidth();
     minLogicalWidth += scrollbarWidth;
     maxLogicalWidth += scrollbarWidth;
@@ -913,6 +928,8 @@ void RenderGrid::resolveContentBasedTrackSizingFunctionsForItems(GridTrackSizing
         if (sizingData.filteredTracks.isEmpty())
             continue;
 
+        spanningTracksSize += guttersSize(direction, itemSpan.integerSpan());
+
         LayoutUnit extraSpace = currentItemSizeForTrackSizeComputationPhase(phase, gridItemWithSpan.gridItem(), direction, sizingData.columnTracks) - spanningTracksSize;
         extraSpace = std::max<LayoutUnit>(extraSpace, 0);
         auto& tracksToGrowBeyondGrowthLimits = sizingData.growBeyondGrowthLimitsTracks.isEmpty() ? sizingData.filteredTracks : sizingData.growBeyondGrowthLimitsTracks;
@@ -1247,6 +1264,11 @@ void RenderGrid::layoutGridItems()
 
     LayoutUnit availableSpaceForColumns = availableLogicalWidth();
     LayoutUnit availableSpaceForRows = availableLogicalHeight(IncludeMarginBorderPadding);
+
+    // Remove space consumed by gutters from the available logical space.
+    availableSpaceForColumns -= guttersSize(ForColumns, gridColumnCount());
+    availableSpaceForRows -= guttersSize(ForRows, gridRowCount());
+
     GridSizingData sizingData(gridColumnCount(), gridRowCount());
     computeUsedBreadthOfGridTracks(ForColumns, sizingData, availableSpaceForColumns);
     ASSERT(tracksAreWiderThanMinTrackBreadth(ForColumns, sizingData.columnTracks));
@@ -1296,18 +1318,19 @@ void RenderGrid::layoutGridItems()
             child->repaintDuringLayoutIfMoved(oldChildRect);
     }
 
+    LayoutUnit height = borderAndPaddingLogicalHeight() + scrollbarLogicalHeight();
     for (auto& row : sizingData.rowTracks)
-        setLogicalHeight(logicalHeight() + row.baseSize());
+        height += row.baseSize();
 
+    height += guttersSize(ForRows, sizingData.rowTracks.size());
     // min / max logical height is handled in updateLogicalHeight().
-    setLogicalHeight(logicalHeight() + borderAndPaddingLogicalHeight() + scrollbarLogicalHeight());
     if (hasLineIfEmpty()) {
         LayoutUnit minHeight = borderAndPaddingLogicalHeight()
             + lineHeight(true, isHorizontalWritingMode() ? HorizontalLine : VerticalLine, PositionOfInteriorLineBoxes)
             + scrollbarLogicalHeight();
-        if (height() < minHeight)
-            setLogicalHeight(minHeight);
+        height = std::max(height, minHeight);
     }
+    setLogicalHeight(height);
 
     clearGrid();
 }
@@ -1325,6 +1348,9 @@ LayoutUnit RenderGrid::gridAreaBreadthForChild(const RenderBox& child, GridTrack
     LayoutUnit gridAreaBreadth = 0;
     for (auto& trackPosition : span)
         gridAreaBreadth += tracks[trackPosition.toInt()].baseSize();
+
+    gridAreaBreadth += guttersSize(direction, span.integerSpan());
+
     return gridAreaBreadth;
 }
 
@@ -1346,7 +1372,7 @@ LayoutUnit RenderGrid::gridAreaBreadthForChildIncludingAlignmentOffsets(const Re
 
 void RenderGrid::populateGridPositions(GridSizingData& sizingData, LayoutUnit availableSpaceForColumns, LayoutUnit availableSpaceForRows)
 {
-    // Since we add alignment offsets, grid lines are not always adjacent. Hence we will have to
+    // Since we add alignment offsets and track gutters, grid lines are not always adjacent. Hence we will have to
     // assume from now on that we just store positions of the initial grid lines of each track,
     // except the last one, which is the only one considered as a final grid line of a track.
     // FIXME: This will affect the computed style value of grid tracks size, since we are
@@ -1357,10 +1383,11 @@ void RenderGrid::populateGridPositions(GridSizingData& sizingData, LayoutUnit av
     unsigned lastLine = numberOfLines - 1;
     unsigned nextToLastLine = numberOfLines - 2;
     ContentAlignmentData offset = computeContentPositionAndDistributionOffset(ForColumns, availableSpaceForColumns, numberOfTracks);
+    LayoutUnit trackGap = guttersSize(ForColumns, 2);
     m_columnPositions.resize(numberOfLines);
     m_columnPositions[0] = borderAndPaddingStart() + offset.positionOffset;
     for (unsigned i = 0; i < lastLine; ++i)
-        m_columnPositions[i + 1] = m_columnPositions[i] + offset.distributionOffset + sizingData.columnTracks[i].baseSize();
+        m_columnPositions[i + 1] = m_columnPositions[i] + offset.distributionOffset + sizingData.columnTracks[i].baseSize() + trackGap;
     m_columnPositions[lastLine] = m_columnPositions[nextToLastLine] + sizingData.columnTracks[nextToLastLine].baseSize();
 
     numberOfTracks = sizingData.rowTracks.size();
@@ -1368,10 +1395,11 @@ void RenderGrid::populateGridPositions(GridSizingData& sizingData, LayoutUnit av
     lastLine = numberOfLines - 1;
     nextToLastLine = numberOfLines - 2;
     offset = computeContentPositionAndDistributionOffset(ForRows, availableSpaceForRows, numberOfTracks);
+    trackGap = guttersSize(ForRows, 2);
     m_rowPositions.resize(numberOfLines);
     m_rowPositions[0] = borderAndPaddingBefore() + offset.positionOffset;
     for (unsigned i = 0; i < lastLine; ++i)
-        m_rowPositions[i + 1] = m_rowPositions[i] + offset.distributionOffset + sizingData.rowTracks[i].baseSize();
+        m_rowPositions[i + 1] = m_rowPositions[i] + offset.distributionOffset + sizingData.rowTracks[i].baseSize() + trackGap;
     m_rowPositions[lastLine] = m_rowPositions[nextToLastLine] + sizingData.rowTracks[nextToLastLine].baseSize();
 }
 
@@ -1648,6 +1676,10 @@ LayoutUnit RenderGrid::columnAxisOffsetForChild(const RenderBox& child) const
     case GridAxisCenter: {
         unsigned childEndLine = coordinate.rows.resolvedFinalPosition.next().toInt();
         LayoutUnit endOfRow = m_rowPositions[childEndLine];
+        // m_rowPositions include gutters so we need to substract them to get the actual end position for a given
+        // row (this does not have to be done for the last track as there are no more m_rowPositions after it)
+        if (childEndLine < m_rowPositions.size() - 1)
+            endOfRow -= guttersSize(ForRows, 2);
         LayoutUnit childBreadth = child.logicalHeight() + child.marginLogicalHeight();
         // In order to properly adjust the Self Alignment values we need to consider the offset between tracks.
         if (childEndLine - childStartLine > 1 && childEndLine < m_rowPositions.size() - 1)
@@ -1678,6 +1710,10 @@ LayoutUnit RenderGrid::rowAxisOffsetForChild(const RenderBox& child) const
     case GridAxisCenter: {
         unsigned childEndLine = coordinate.columns.resolvedFinalPosition.next().toInt();
         LayoutUnit endOfColumn = m_columnPositions[childEndLine];
+        // m_columnPositions include gutters so we need to substract them to get the actual end position for a given
+        // column (this does not have to be done for the last track as there are no more m_columnPositions after it)
+        if (childEndLine < m_columnPositions.size() - 1)
+            endOfColumn -= guttersSize(ForColumns, 2);
         LayoutUnit childBreadth = child.logicalWidth() + child.marginLogicalWidth();
         // In order to properly adjust the Self Alignment values we need to consider the offset between tracks.
         if (childEndLine - childStartLine > 1 && childEndLine < m_columnPositions.size() - 1)
index 6f2db02..5d3cefd 100644 (file)
@@ -60,6 +60,8 @@ public:
     const Vector<LayoutUnit>& columnPositions() const { return m_columnPositions; }
     const Vector<LayoutUnit>& rowPositions() const { return m_rowPositions; }
 
+    LayoutUnit guttersSize(GridTrackSizingDirection, size_t span) const;
+
 private:
     virtual const char* renderName() const override;
     virtual bool isRenderGrid() const override { return true; }
index 59f9d56..00ea5c2 100644 (file)
@@ -965,6 +965,9 @@ public:
     bool isGridAutoFlowAlgorithmDense() const { return (rareNonInheritedData->m_grid->m_gridAutoFlow & InternalAutoFlowAlgorithmDense); }
     const GridTrackSize& gridAutoColumns() const { return rareNonInheritedData->m_grid->m_gridAutoColumns; }
     const GridTrackSize& gridAutoRows() const { return rareNonInheritedData->m_grid->m_gridAutoRows; }
+    const Length& gridColumnGap() const { return rareNonInheritedData->m_grid->m_gridColumnGap; }
+    const Length& gridRowGap() const { return rareNonInheritedData->m_grid->m_gridRowGap; }
+
 
     const GridPosition& gridItemColumnStart() const { return rareNonInheritedData->m_gridItem->m_gridColumnStart; }
     const GridPosition& gridItemColumnEnd() const { return rareNonInheritedData->m_gridItem->m_gridColumnEnd; }
@@ -1557,6 +1560,8 @@ public:
     void setGridItemColumnEnd(const GridPosition& columnEndPosition) { SET_VAR(rareNonInheritedData.access()->m_gridItem, m_gridColumnEnd, columnEndPosition); }
     void setGridItemRowStart(const GridPosition& rowStartPosition) { SET_VAR(rareNonInheritedData.access()->m_gridItem, m_gridRowStart, rowStartPosition); }
     void setGridItemRowEnd(const GridPosition& rowEndPosition) { SET_VAR(rareNonInheritedData.access()->m_gridItem, m_gridRowEnd, rowEndPosition); }
+    void setGridColumnGap(const Length& v) { SET_VAR(rareNonInheritedData.access()->m_grid, m_gridColumnGap, v); }
+    void setGridRowGap(const Length& v) { SET_VAR(rareNonInheritedData.access()->m_grid, m_gridRowGap, v); }
 #endif /* ENABLE(CSS_GRID_LAYOUT) */
     void setMarqueeIncrement(Length length) { SET_VAR(rareNonInheritedData.access()->m_marquee, increment, WTF::move(length)); }
     void setMarqueeSpeed(int f) { SET_VAR(rareNonInheritedData.access()->m_marquee, speed, f); }
@@ -2054,6 +2059,9 @@ public:
     static OrderedNamedGridLinesMap initialOrderedNamedGridColumnLines() { return OrderedNamedGridLinesMap(); }
     static OrderedNamedGridLinesMap initialOrderedNamedGridRowLines() { return OrderedNamedGridLinesMap(); }
 
+    static Length initialGridColumnGap() { return Length(Fixed); }
+    static Length initialGridRowGap() { return Length(Fixed); }
+
     // 'auto' is the default.
     static GridPosition initialGridItemColumnStart() { return GridPosition(); }
     static GridPosition initialGridItemColumnEnd() { return GridPosition(); }
index bdb3d2e..fa22ed2 100644 (file)
@@ -45,6 +45,8 @@ StyleGridData::StyleGridData()
     , m_namedGridArea(RenderStyle::initialNamedGridArea())
     , m_namedGridAreaRowCount(RenderStyle::initialNamedGridAreaCount())
     , m_namedGridAreaColumnCount(RenderStyle::initialNamedGridAreaCount())
+    , m_gridColumnGap(RenderStyle::initialGridColumnGap())
+    , m_gridRowGap(RenderStyle::initialGridRowGap())
 {
 }
 
@@ -62,6 +64,8 @@ inline StyleGridData::StyleGridData(const StyleGridData& o)
     , m_namedGridArea(o.m_namedGridArea)
     , m_namedGridAreaRowCount(o.m_namedGridAreaRowCount)
     , m_namedGridAreaColumnCount(o.m_namedGridAreaColumnCount)
+    , m_gridColumnGap(o.m_gridColumnGap)
+    , m_gridRowGap(o.m_gridRowGap)
 {
 }
 
index 3b99cf2..d895cda 100644 (file)
@@ -49,7 +49,13 @@ public:
     bool operator==(const StyleGridData& o) const
     {
         // FIXME: comparing two hashes doesn't look great for performance. Something to keep in mind going forward.
-        return m_gridColumns == o.m_gridColumns && m_gridRows == o.m_gridRows && m_gridAutoFlow == o.m_gridAutoFlow && m_gridAutoRows == o.m_gridAutoRows && m_gridAutoColumns == o.m_gridAutoColumns && m_namedGridColumnLines == o.m_namedGridColumnLines && m_namedGridRowLines == o.m_namedGridRowLines && m_namedGridArea == o.m_namedGridArea && m_namedGridArea == o.m_namedGridArea && m_namedGridAreaRowCount == o.m_namedGridAreaRowCount && m_namedGridAreaColumnCount == o.m_namedGridAreaColumnCount && m_orderedNamedGridRowLines == o.m_orderedNamedGridRowLines && m_orderedNamedGridColumnLines == o.m_orderedNamedGridColumnLines;
+        return m_gridColumns == o.m_gridColumns && m_gridRows == o.m_gridRows
+            && m_gridAutoFlow == o.m_gridAutoFlow && m_gridAutoRows == o.m_gridAutoRows && m_gridAutoColumns == o.m_gridAutoColumns
+            && m_namedGridColumnLines == o.m_namedGridColumnLines && m_namedGridRowLines == o.m_namedGridRowLines
+            && m_namedGridArea == o.m_namedGridArea && m_namedGridArea == o.m_namedGridArea
+            && m_namedGridAreaRowCount == o.m_namedGridAreaRowCount && m_namedGridAreaColumnCount == o.m_namedGridAreaColumnCount
+            && m_orderedNamedGridRowLines == o.m_orderedNamedGridRowLines && m_orderedNamedGridColumnLines == o.m_orderedNamedGridColumnLines
+            && m_gridColumnGap == o.m_gridColumnGap && m_gridRowGap == o.m_gridRowGap;
     }
 
     bool operator!=(const StyleGridData& o) const
@@ -78,6 +84,9 @@ public:
     unsigned m_namedGridAreaRowCount;
     unsigned m_namedGridAreaColumnCount;
 
+    Length m_gridColumnGap;
+    Length m_gridRowGap;
+
 private:
     StyleGridData();
     StyleGridData(const StyleGridData&);