Diff
Modified: trunk/LayoutTests/ChangeLog (190662 => 190663)
--- trunk/LayoutTests/ChangeLog 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/LayoutTests/ChangeLog 2015-10-07 09:40:44 UTC (rev 190663)
@@ -1,3 +1,82 @@
+2015-10-05 Sergio Villar Senin <[email protected]>
+
+ [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 <[email protected]>
[GTK] Progress bar is broken on recent GTK+
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-content.html (190662 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/grid-align-content.html 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-content.html 2015-10-07 09:40:44 UTC (rev 190663)
@@ -2,6 +2,7 @@
<html>
<head>
<link href="" rel="stylesheet">
+<link href="" rel="stylesheet">
<script src=""
<style>
body {
@@ -24,42 +25,6 @@
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')">
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html (190662 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html 2015-10-07 09:40:44 UTC (rev 190663)
@@ -2,6 +2,7 @@
<html>
<head>
<link href="" rel="stylesheet">
+<link href="" rel="stylesheet">
<script src=""
<style>
body {
@@ -25,36 +26,6 @@
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;
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html (190662 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html 2015-10-07 09:40:44 UTC (rev 190663)
@@ -2,6 +2,7 @@
<html>
<head>
<link href="" rel="stylesheet">
+<link href="" rel="stylesheet">
<script src=""
<style>
body {
@@ -25,36 +26,6 @@
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;
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html (190662 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html 2015-10-07 09:40:44 UTC (rev 190663)
@@ -2,6 +2,7 @@
<html>
<head>
<link href="" rel="stylesheet">
+<link href="" rel="stylesheet">
<script src=""
<style>
body {
@@ -25,36 +26,7 @@
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;
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align.html (190662 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/grid-align.html 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align.html 2015-10-07 09:40:44 UTC (rev 190663)
@@ -2,6 +2,7 @@
<html>
<head>
<link href="" rel="stylesheet">
+<link href="" rel="stylesheet">
<script src=""
<style>
body {
@@ -26,54 +27,6 @@
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')">
Added: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment-expected.txt (0 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment-expected.txt 2015-10-07 09:40:44 UTC (rev 190663)
@@ -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
Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html (0 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html 2015-10-07 09:40:44 UTC (rev 190663)
@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<link href="" rel="stylesheet">
+<link href="" rel="stylesheet">
+<link href="" rel=stylesheet>
+<script src=""
+<script src=""
+<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>
Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt (0 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt 2015-10-07 09:40:44 UTC (rev 190663)
@@ -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
Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html (0 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html 2015-10-07 09:40:44 UTC (rev 190663)
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<link href="" rel="stylesheet">
+<link href="" rel="stylesheet">
+<link href="" rel=stylesheet>
+<script src=""
+<script src=""
+<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>
Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks-expected.txt (0 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks-expected.txt 2015-10-07 09:40:44 UTC (rev 190663)
@@ -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
Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html (0 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html 2015-10-07 09:40:44 UTC (rev 190663)
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<link href="" rel="stylesheet">
+<link href="" rel=stylesheet>
+<script src=""
+<script src=""
+<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>
Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt (0 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt 2015-10-07 09:40:44 UTC (rev 190663)
@@ -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
+
Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html (0 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html 2015-10-07 09:40:44 UTC (rev 190663)
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="" 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=""
+</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=""
+<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>
Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:eol-style
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-lr.html (190662 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-lr.html 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-lr.html 2015-10-07 09:40:44 UTC (rev 190663)
@@ -2,6 +2,7 @@
<html>
<head>
<link href="" rel="stylesheet">
+<link href="" rel="stylesheet">
<script src=""
<style>
body {
@@ -20,21 +21,6 @@
-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')">
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.html (190662 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.html 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.html 2015-10-07 09:40:44 UTC (rev 190663)
@@ -2,6 +2,7 @@
<html>
<head>
<link href="" rel="stylesheet">
+<link href="" rel="stylesheet">
<script src=""
<style>
body {
@@ -20,21 +21,6 @@
-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')">
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content.html (190662 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/grid-justify-content.html 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-justify-content.html 2015-10-07 09:40:44 UTC (rev 190663)
@@ -2,6 +2,7 @@
<html>
<head>
<link href="" rel="stylesheet">
+<link href="" rel="stylesheet">
<script src=""
<style>
body {
@@ -20,41 +21,6 @@
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')">
Added: trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css (0 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css 2015-10-07 09:40:44 UTC (rev 190663)
@@ -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;
+}
Property changes on: trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css
___________________________________________________________________
Added: svn:mime-type
Added: svn:eol-style
Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js (190662 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js 2015-10-07 09:40:44 UTC (rev 190663)
@@ -67,3 +67,9 @@
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);
+}
Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid.css (190662 => 190663)
--- trunk/LayoutTests/fast/css-grid-layout/resources/grid.css 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid.css 2015-10-07 09:40:44 UTC (rev 190663)
@@ -93,6 +93,30 @@
-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;
Modified: trunk/Source/WebCore/ChangeLog (190662 => 190663)
--- trunk/Source/WebCore/ChangeLog 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/Source/WebCore/ChangeLog 2015-10-07 09:40:44 UTC (rev 190663)
@@ -1,3 +1,54 @@
+2015-10-05 Sergio Villar Senin <[email protected]>
+
+ [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 <[email protected]>
[GTK] Progress bar is broken on recent GTK+
Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (190662 => 190663)
--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2015-10-07 09:40:44 UTC (rev 190663)
@@ -337,6 +337,8 @@
CSSPropertyWebkitGridTemplateRows,
CSSPropertyWebkitGridRowEnd,
CSSPropertyWebkitGridRowStart,
+ CSSPropertyWebkitGridColumnGap,
+ CSSPropertyWebkitGridRowGap,
#endif
CSSPropertyWebkitHyphenateCharacter,
CSSPropertyWebkitHyphenateLimitAfter,
@@ -1073,10 +1075,15 @@
// 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 @@
}
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()) {
Modified: trunk/Source/WebCore/css/CSSParser.cpp (190662 => 190663)
--- trunk/Source/WebCore/css/CSSParser.cpp 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/Source/WebCore/css/CSSParser.cpp 2015-10-07 09:40:44 UTC (rev 190663)
@@ -571,6 +571,10 @@
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 @@
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 @@
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.
Modified: trunk/Source/WebCore/css/CSSParser.h (190662 => 190663)
--- trunk/Source/WebCore/css/CSSParser.h 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/Source/WebCore/css/CSSParser.h 2015-10-07 09:40:44 UTC (rev 190663)
@@ -213,6 +213,7 @@
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&);
Modified: trunk/Source/WebCore/css/CSSPropertyNames.in (190662 => 190663)
--- trunk/Source/WebCore/css/CSSPropertyNames.in 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/Source/WebCore/css/CSSPropertyNames.in 2015-10-07 09:40:44 UTC (rev 190663)
@@ -494,13 +494,16 @@
-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]
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (190662 => 190663)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-10-07 09:40:44 UTC (rev 190663)
@@ -329,6 +329,17 @@
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 @@
maxLogicalWidth += maxTrackBreadth;
}
+ LayoutUnit totalGuttersSize = guttersSize(ForColumns, sizingData.columnTracks.size());
+ minLogicalWidth += totalGuttersSize;
+ maxLogicalWidth += totalGuttersSize;
+
LayoutUnit scrollbarWidth = intrinsicScrollbarLogicalWidth();
minLogicalWidth += scrollbarWidth;
maxLogicalWidth += scrollbarWidth;
@@ -913,6 +928,8 @@
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 @@
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 @@
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 gridAreaBreadth = 0;
for (auto& trackPosition : span)
gridAreaBreadth += tracks[trackPosition.toInt()].baseSize();
+
+ gridAreaBreadth += guttersSize(direction, span.integerSpan());
+
return gridAreaBreadth;
}
@@ -1346,7 +1372,7 @@
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 @@
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 @@
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 @@
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 @@
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)
Modified: trunk/Source/WebCore/rendering/RenderGrid.h (190662 => 190663)
--- trunk/Source/WebCore/rendering/RenderGrid.h 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2015-10-07 09:40:44 UTC (rev 190663)
@@ -60,6 +60,8 @@
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; }
Modified: trunk/Source/WebCore/rendering/style/RenderStyle.h (190662 => 190663)
--- trunk/Source/WebCore/rendering/style/RenderStyle.h 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/Source/WebCore/rendering/style/RenderStyle.h 2015-10-07 09:40:44 UTC (rev 190663)
@@ -965,7 +965,10 @@
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; }
const GridPosition& gridItemRowStart() const { return rareNonInheritedData->m_gridItem->m_gridRowStart; }
@@ -1557,6 +1560,8 @@
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 @@
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(); }
Modified: trunk/Source/WebCore/rendering/style/StyleGridData.cpp (190662 => 190663)
--- trunk/Source/WebCore/rendering/style/StyleGridData.cpp 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/Source/WebCore/rendering/style/StyleGridData.cpp 2015-10-07 09:40:44 UTC (rev 190663)
@@ -45,6 +45,8 @@
, m_namedGridArea(RenderStyle::initialNamedGridArea())
, m_namedGridAreaRowCount(RenderStyle::initialNamedGridAreaCount())
, m_namedGridAreaColumnCount(RenderStyle::initialNamedGridAreaCount())
+ , m_gridColumnGap(RenderStyle::initialGridColumnGap())
+ , m_gridRowGap(RenderStyle::initialGridRowGap())
{
}
@@ -62,6 +64,8 @@
, 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)
{
}
Modified: trunk/Source/WebCore/rendering/style/StyleGridData.h (190662 => 190663)
--- trunk/Source/WebCore/rendering/style/StyleGridData.h 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/Source/WebCore/rendering/style/StyleGridData.h 2015-10-07 09:40:44 UTC (rev 190663)
@@ -49,7 +49,13 @@
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 @@
unsigned m_namedGridAreaRowCount;
unsigned m_namedGridAreaColumnCount;
+ Length m_gridColumnGap;
+ Length m_gridRowGap;
+
private:
StyleGridData();
StyleGridData(const StyleGridData&);
