No subject
Mon Sep 28 12:00:37 PDT 2015
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):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridaligncontenthtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-content.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticallrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticalrlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddinghtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridjustifycontentdistributionverticallrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridjustifycontentdistributionverticalrlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridjustifycontenthtml">trunk/LayoutTests/fast/css-grid-layout/grid-justify-content.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgriddefinitionsparsingutilsjs">trunk/LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgridcss">trunk/LayoutTests/fast/css-grid-layout/resources/grid.css</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssCSSComputedStyleDeclarationcpp">trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp</a></li>
<li><a href="#trunkSourceWebCorecssCSSParsercpp">trunk/Source/WebCore/css/CSSParser.cpp</a></li>
<li><a href="#trunkSourceWebCorecssCSSParserh">trunk/Source/WebCore/css/CSSParser.h</a></li>
<li><a href="#trunkSourceWebCorecssCSSPropertyNamesin">trunk/Source/WebCore/css/CSSPropertyNames.in</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridcpp">trunk/Source/WebCore/rendering/RenderGrid.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridh">trunk/Source/WebCore/rendering/RenderGrid.h</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleRenderStyleh">trunk/Source/WebCore/rendering/style/RenderStyle.h</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleStyleGridDatacpp">trunk/Source/WebCore/rendering/style/StyleGridData.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleStyleGridDatah">trunk/Source/WebCore/rendering/style/StyleGridData.h</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridguttersandalignmentexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridguttersandalignmenthtml">trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridguttersandflexcontentexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridguttersandflexcontenthtml">trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridguttersandtracksexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridguttersandtrackshtml">trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridguttersgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridguttersgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgridalignmentcss">trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2015-10-07 07:32:14 UTC (rev 190662)
+++ trunk/LayoutTests/ChangeLog 2015-10-07 09:40:44 UTC (rev 190663)
</span><span class="lines">@@ -1,3 +1,82 @@
</span><ins>+2015-10-05 Sergio Villar Senin <svillar at 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):
+
</ins><span class="cx"> 2015-10-07 ChangSeok Oh <changseok.oh at collabora.com>
</span><span class="cx">
</span><span class="cx"> [GTK] Progress bar is broken on recent GTK+
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridaligncontenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-content.html (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -24,42 +25,6 @@
</span><span class="cx"> width: 20px;
</span><span class="cx"> height: 40px;
</span><span class="cx"> }
</span><del>-
-.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;
-}
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticallrhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -25,36 +26,6 @@
</span><span class="cx"> margin: 4px 8px 12px 16px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.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;
-}
-
</del><span class="cx"> .stretch {
</span><span class="cx"> align-self: stretch;
</span><span class="cx"> justify-self: stretch;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticalrlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -25,36 +26,6 @@
</span><span class="cx"> margin: 4px 8px 12px 16px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.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;
-}
-
</del><span class="cx"> .stretch {
</span><span class="cx"> align-self: stretch;
</span><span class="cx"> justify-self: stretch;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddinghtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -25,36 +26,7 @@
</span><span class="cx"> margin: 4px 8px 12px 16px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.itemsCenter {
- align-items: center;
- justify-items: center;
-}
</del><span class="cx">
</span><del>-.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;
-}
-
</del><span class="cx"> .stretch {
</span><span class="cx"> align-self: stretch;
</span><span class="cx"> justify-self: stretch;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align.html (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -26,54 +27,6 @@
</span><span class="cx"> background: black;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.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;
-}
-
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridguttersandalignmentexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment-expected.txt (0 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,58 @@
</span><ins>+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
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment-expected.txt
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridguttersandalignmenthtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html (0 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,297 @@
</span><ins>+<!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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridguttersandflexcontentexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt (0 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,20 @@
</span><ins>+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
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridguttersandflexcontenthtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html (0 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,91 @@
</span><ins>+<!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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridguttersandtracksexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks-expected.txt (0 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,58 @@
</span><ins>+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
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks-expected.txt
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridguttersandtrackshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html (0 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,139 @@
</span><ins>+<!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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridguttersgetsetexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt (0 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,44 @@
</span><ins>+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
+
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridguttersgetsethtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html (0 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,93 @@
</span><ins>+<!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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridjustifycontentdistributionverticallrhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-lr.html (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -20,21 +21,6 @@
</span><span class="cx"> -webkit-grid-auto-columns: auto;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.justifyContentSpaceBetween {
- justify-content: space-between;
-}
-
-.justifyContentSpaceAround {
- justify-content: space-around;
-}
-
-.justifyContentSpaceEvenly {
- justify-content: space-evenly;
-}
-
-.justifyContentStretch {
- justify-content: stretch;
-}
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridjustifycontentdistributionverticalrlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.html (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -20,21 +21,6 @@
</span><span class="cx"> -webkit-grid-auto-columns: auto;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.justifyContentSpaceBetween {
- justify-content: space-between;
-}
-
-.justifyContentSpaceAround {
- justify-content: space-around;
-}
-
-.justifyContentSpaceEvenly {
- justify-content: space-evenly;
-}
-
-.justifyContentStretch {
- justify-content: stretch;
-}
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridjustifycontenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content.html (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -20,41 +21,6 @@
</span><span class="cx"> height: 40px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.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;
-}
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridalignmentcss"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css (0 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,74 @@
</span><ins>+/* 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;
+}
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgriddefinitionsparsingutilsjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -67,3 +67,9 @@
</span><span class="cx"> shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-auto-rows')", computedRowValue);
</span><span class="cx"> shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-auto-columns')", computedColumnValue);
</span><span class="cx"> }
</span><ins>+
+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);
+}
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridcss"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid.css (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -93,6 +93,30 @@
</span><span class="cx"> -webkit-grid-row: 4;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.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;
+}
+
</ins><span class="cx"> .firstAutoRowSecondAutoColumn {
</span><span class="cx"> -webkit-grid-row: 1 / auto;
</span><span class="cx"> -webkit-grid-column: 2 / auto;
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,54 @@
</span><ins>+2015-10-05 Sergio Villar Senin <svillar at 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==):
+
</ins><span class="cx"> 2015-10-07 ChangSeok Oh <changseok.oh at collabora.com>
</span><span class="cx">
</span><span class="cx"> [GTK] Progress bar is broken on recent GTK+
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSComputedStyleDeclarationcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -337,6 +337,8 @@
</span><span class="cx"> CSSPropertyWebkitGridTemplateRows,
</span><span class="cx"> CSSPropertyWebkitGridRowEnd,
</span><span class="cx"> CSSPropertyWebkitGridRowStart,
</span><ins>+ CSSPropertyWebkitGridColumnGap,
+ CSSPropertyWebkitGridRowGap,
</ins><span class="cx"> #endif
</span><span class="cx"> CSSPropertyWebkitHyphenateCharacter,
</span><span class="cx"> CSSPropertyWebkitHyphenateLimitAfter,
</span><span class="lines">@@ -1073,10 +1075,15 @@
</span><span class="cx"> // so we'll have more trackPositions than trackSizes as the latter only contain the explicit grid.
</span><span class="cx"> ASSERT(trackPositions.size() - 1 >= trackSizes.size());
</span><span class="cx">
</span><del>- for (unsigned i = 0; i < trackPositions.size() - 1; ++i) {
</del><ins>+ unsigned i = 0;
+ LayoutUnit gutterSize = downcast<RenderGrid>(*renderer).guttersSize(direction, 2);
+ for (; i < trackPositions.size() - 2; ++i) {
</ins><span class="cx"> addValuesForNamedGridLinesAtIndex(orderedNamedGridLines, i, list.get());
</span><del>- list.get().append(zoomAdjustedPixelValue(trackPositions[i + 1] - trackPositions[i], style));
</del><ins>+ list.get().append(zoomAdjustedPixelValue(trackPositions[i + 1] - trackPositions[i] - gutterSize, style));
</ins><span class="cx"> }
</span><ins>+ // Last track line does not have any gutter.
+ addValuesForNamedGridLinesAtIndex(orderedNamedGridLines, i, list.get());
+ list.get().append(zoomAdjustedPixelValue(trackPositions[i + 1] - trackPositions[i], style));
</ins><span class="cx"> insertionIndex = trackPositions.size() - 1;
</span><span class="cx"> } else {
</span><span class="cx"> for (unsigned i = 0; i < trackSizes.size(); ++i) {
</span><span class="lines">@@ -2595,6 +2602,12 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> return CSSGridTemplateAreasValue::create(style->namedGridArea(), style->namedGridAreaRowCount(), style->namedGridAreaColumnCount());
</span><ins>+ case CSSPropertyWebkitGridColumnGap:
+ return zoomAdjustedPixelValueForLength(style->gridColumnGap(), *style);
+ case CSSPropertyWebkitGridRowGap:
+ return zoomAdjustedPixelValueForLength(style->gridRowGap(), *style);
+ case CSSPropertyWebkitGridGap:
+ return getCSSPropertyValuesForGridShorthand(webkitGridGapShorthand());
</ins><span class="cx"> #endif /* ENABLE(CSS_GRID_LAYOUT) */
</span><span class="cx"> case CSSPropertyHeight:
</span><span class="cx"> if (renderer && !renderer->isRenderSVGModelObject()) {
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSParser.cpp (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -571,6 +571,10 @@
</span><span class="cx"> case CSSPropertyWebkitPaddingBefore:
</span><span class="cx"> case CSSPropertyWebkitPaddingEnd:
</span><span class="cx"> case CSSPropertyWebkitPaddingStart:
</span><ins>+#if ENABLE(CSS_GRID_LAYOUT)
+ case CSSPropertyWebkitGridColumnGap:
+ case CSSPropertyWebkitGridRowGap:
+#endif
</ins><span class="cx"> acceptsNegativeNumbers = false;
</span><span class="cx"> return true;
</span><span class="cx"> #if ENABLE(CSS_SHAPES)
</span><span class="lines">@@ -2772,6 +2776,14 @@
</span><span class="cx"> parsedValue = parseGridPosition();
</span><span class="cx"> break;
</span><span class="cx">
</span><ins>+ case CSSPropertyWebkitGridColumnGap:
+ case CSSPropertyWebkitGridRowGap:
+ validPrimitive = validateUnit(valueWithCalculation, FLength | FNonNeg);
+ break;
+
+ case CSSPropertyWebkitGridGap:
+ return parseGridGapShorthand(important);
+
</ins><span class="cx"> case CSSPropertyWebkitGridColumn:
</span><span class="cx"> case CSSPropertyWebkitGridRow: {
</span><span class="cx"> return parseGridItemPositionShorthand(propId, important);
</span><span class="lines">@@ -5439,6 +5451,43 @@
</span><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+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;
+}
+
</ins><span class="cx"> bool CSSParser::parseGridTemplateRowsAndAreas(PassRefPtr<CSSValue> templateColumns, bool important)
</span><span class="cx"> {
</span><span class="cx"> // At least template-areas strings must be defined.
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSParserh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSParser.h (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -213,6 +213,7 @@
</span><span class="cx"> bool parseGridTemplateShorthand(bool important);
</span><span class="cx"> bool parseGridShorthand(bool important);
</span><span class="cx"> bool parseGridAreaShorthand(bool important);
</span><ins>+ bool parseGridGapShorthand(bool important);
</ins><span class="cx"> bool parseSingleGridAreaLonghand(RefPtr<CSSValue>&);
</span><span class="cx"> RefPtr<CSSValue> parseGridTrackList();
</span><span class="cx"> bool parseGridTrackRepeatFunction(CSSValueList&);
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSPropertyNamesin"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSPropertyNames.in (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -494,13 +494,16 @@
</span><span class="cx"> -webkit-grid-auto-columns [Converter=GridTrackSize]
</span><span class="cx"> -webkit-grid-auto-rows [Converter=GridTrackSize]
</span><span class="cx"> -webkit-grid-column-end [ConditionalConverter=GridPosition, NameForMethods=GridItemColumnEnd]
</span><ins>+-webkit-grid-column-gap [Initial=initialZeroLength, Converter=Length]
</ins><span class="cx"> -webkit-grid-column-start [ConditionalConverter=GridPosition, NameForMethods=GridItemColumnStart]
</span><span class="cx"> -webkit-grid-template [Longhands=-webkit-grid-template-columns|-webkit-grid-template-rows|-webkit-grid-template-areas]
</span><span class="cx"> -webkit-grid-template-columns [Custom=All]
</span><span class="cx"> -webkit-grid-template-rows [Custom=All]
</span><span class="cx"> -webkit-grid-row-end [ConditionalConverter=GridPosition, NameForMethods=GridItemRowEnd]
</span><ins>+-webkit-grid-row-gap [Initial=initialZeroLength, Converter=Length]
</ins><span class="cx"> -webkit-grid-row-start [ConditionalConverter=GridPosition, NameForMethods=GridItemRowStart]
</span><span class="cx"> -webkit-grid-column [Longhands=-webkit-grid-column-start|-webkit-grid-column-end]
</span><ins>+-webkit-grid-gap [Longhands=-webkit-grid-column-gap|-webkit-grid-row-gap]
</ins><span class="cx"> -webkit-grid-row [Longhands=-webkit-grid-row-start|-webkit-grid-row-end]
</span><span class="cx"> -webkit-grid-template-areas [Custom=All]
</span><span class="cx"> -webkit-grid-auto-flow [Converter=GridAutoFlow]
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -329,6 +329,17 @@
</span><span class="cx"> clearNeedsLayout();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+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);
+}
+
</ins><span class="cx"> void RenderGrid::computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const
</span><span class="cx"> {
</span><span class="cx"> bool wasPopulated = gridWasPopulated();
</span><span class="lines">@@ -347,6 +358,10 @@
</span><span class="cx"> maxLogicalWidth += maxTrackBreadth;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ LayoutUnit totalGuttersSize = guttersSize(ForColumns, sizingData.columnTracks.size());
+ minLogicalWidth += totalGuttersSize;
+ maxLogicalWidth += totalGuttersSize;
+
</ins><span class="cx"> LayoutUnit scrollbarWidth = intrinsicScrollbarLogicalWidth();
</span><span class="cx"> minLogicalWidth += scrollbarWidth;
</span><span class="cx"> maxLogicalWidth += scrollbarWidth;
</span><span class="lines">@@ -913,6 +928,8 @@
</span><span class="cx"> if (sizingData.filteredTracks.isEmpty())
</span><span class="cx"> continue;
</span><span class="cx">
</span><ins>+ spanningTracksSize += guttersSize(direction, itemSpan.integerSpan());
+
</ins><span class="cx"> LayoutUnit extraSpace = currentItemSizeForTrackSizeComputationPhase(phase, gridItemWithSpan.gridItem(), direction, sizingData.columnTracks) - spanningTracksSize;
</span><span class="cx"> extraSpace = std::max<LayoutUnit>(extraSpace, 0);
</span><span class="cx"> auto& tracksToGrowBeyondGrowthLimits = sizingData.growBeyondGrowthLimitsTracks.isEmpty() ? sizingData.filteredTracks : sizingData.growBeyondGrowthLimitsTracks;
</span><span class="lines">@@ -1247,6 +1264,11 @@
</span><span class="cx">
</span><span class="cx"> LayoutUnit availableSpaceForColumns = availableLogicalWidth();
</span><span class="cx"> LayoutUnit availableSpaceForRows = availableLogicalHeight(IncludeMarginBorderPadding);
</span><ins>+
+ // Remove space consumed by gutters from the available logical space.
+ availableSpaceForColumns -= guttersSize(ForColumns, gridColumnCount());
+ availableSpaceForRows -= guttersSize(ForRows, gridRowCount());
+
</ins><span class="cx"> GridSizingData sizingData(gridColumnCount(), gridRowCount());
</span><span class="cx"> computeUsedBreadthOfGridTracks(ForColumns, sizingData, availableSpaceForColumns);
</span><span class="cx"> ASSERT(tracksAreWiderThanMinTrackBreadth(ForColumns, sizingData.columnTracks));
</span><span class="lines">@@ -1296,18 +1318,19 @@
</span><span class="cx"> child->repaintDuringLayoutIfMoved(oldChildRect);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ LayoutUnit height = borderAndPaddingLogicalHeight() + scrollbarLogicalHeight();
</ins><span class="cx"> for (auto& row : sizingData.rowTracks)
</span><del>- setLogicalHeight(logicalHeight() + row.baseSize());
</del><ins>+ height += row.baseSize();
</ins><span class="cx">
</span><ins>+ height += guttersSize(ForRows, sizingData.rowTracks.size());
</ins><span class="cx"> // min / max logical height is handled in updateLogicalHeight().
</span><del>- setLogicalHeight(logicalHeight() + borderAndPaddingLogicalHeight() + scrollbarLogicalHeight());
</del><span class="cx"> if (hasLineIfEmpty()) {
</span><span class="cx"> LayoutUnit minHeight = borderAndPaddingLogicalHeight()
</span><span class="cx"> + lineHeight(true, isHorizontalWritingMode() ? HorizontalLine : VerticalLine, PositionOfInteriorLineBoxes)
</span><span class="cx"> + scrollbarLogicalHeight();
</span><del>- if (height() < minHeight)
- setLogicalHeight(minHeight);
</del><ins>+ height = std::max(height, minHeight);
</ins><span class="cx"> }
</span><ins>+ setLogicalHeight(height);
</ins><span class="cx">
</span><span class="cx"> clearGrid();
</span><span class="cx"> }
</span><span class="lines">@@ -1325,6 +1348,9 @@
</span><span class="cx"> LayoutUnit gridAreaBreadth = 0;
</span><span class="cx"> for (auto& trackPosition : span)
</span><span class="cx"> gridAreaBreadth += tracks[trackPosition.toInt()].baseSize();
</span><ins>+
+ gridAreaBreadth += guttersSize(direction, span.integerSpan());
+
</ins><span class="cx"> return gridAreaBreadth;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1346,7 +1372,7 @@
</span><span class="cx">
</span><span class="cx"> void RenderGrid::populateGridPositions(GridSizingData& sizingData, LayoutUnit availableSpaceForColumns, LayoutUnit availableSpaceForRows)
</span><span class="cx"> {
</span><del>- // Since we add alignment offsets, grid lines are not always adjacent. Hence we will have to
</del><ins>+ // Since we add alignment offsets and track gutters, grid lines are not always adjacent. Hence we will have to
</ins><span class="cx"> // assume from now on that we just store positions of the initial grid lines of each track,
</span><span class="cx"> // except the last one, which is the only one considered as a final grid line of a track.
</span><span class="cx"> // FIXME: This will affect the computed style value of grid tracks size, since we are
</span><span class="lines">@@ -1357,10 +1383,11 @@
</span><span class="cx"> unsigned lastLine = numberOfLines - 1;
</span><span class="cx"> unsigned nextToLastLine = numberOfLines - 2;
</span><span class="cx"> ContentAlignmentData offset = computeContentPositionAndDistributionOffset(ForColumns, availableSpaceForColumns, numberOfTracks);
</span><ins>+ LayoutUnit trackGap = guttersSize(ForColumns, 2);
</ins><span class="cx"> m_columnPositions.resize(numberOfLines);
</span><span class="cx"> m_columnPositions[0] = borderAndPaddingStart() + offset.positionOffset;
</span><span class="cx"> for (unsigned i = 0; i < lastLine; ++i)
</span><del>- m_columnPositions[i + 1] = m_columnPositions[i] + offset.distributionOffset + sizingData.columnTracks[i].baseSize();
</del><ins>+ m_columnPositions[i + 1] = m_columnPositions[i] + offset.distributionOffset + sizingData.columnTracks[i].baseSize() + trackGap;
</ins><span class="cx"> m_columnPositions[lastLine] = m_columnPositions[nextToLastLine] + sizingData.columnTracks[nextToLastLine].baseSize();
</span><span class="cx">
</span><span class="cx"> numberOfTracks = sizingData.rowTracks.size();
</span><span class="lines">@@ -1368,10 +1395,11 @@
</span><span class="cx"> lastLine = numberOfLines - 1;
</span><span class="cx"> nextToLastLine = numberOfLines - 2;
</span><span class="cx"> offset = computeContentPositionAndDistributionOffset(ForRows, availableSpaceForRows, numberOfTracks);
</span><ins>+ trackGap = guttersSize(ForRows, 2);
</ins><span class="cx"> m_rowPositions.resize(numberOfLines);
</span><span class="cx"> m_rowPositions[0] = borderAndPaddingBefore() + offset.positionOffset;
</span><span class="cx"> for (unsigned i = 0; i < lastLine; ++i)
</span><del>- m_rowPositions[i + 1] = m_rowPositions[i] + offset.distributionOffset + sizingData.rowTracks[i].baseSize();
</del><ins>+ m_rowPositions[i + 1] = m_rowPositions[i] + offset.distributionOffset + sizingData.rowTracks[i].baseSize() + trackGap;
</ins><span class="cx"> m_rowPositions[lastLine] = m_rowPositions[nextToLastLine] + sizingData.rowTracks[nextToLastLine].baseSize();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1648,6 +1676,10 @@
</span><span class="cx"> case GridAxisCenter: {
</span><span class="cx"> unsigned childEndLine = coordinate.rows.resolvedFinalPosition.next().toInt();
</span><span class="cx"> LayoutUnit endOfRow = m_rowPositions[childEndLine];
</span><ins>+ // 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);
</ins><span class="cx"> LayoutUnit childBreadth = child.logicalHeight() + child.marginLogicalHeight();
</span><span class="cx"> // In order to properly adjust the Self Alignment values we need to consider the offset between tracks.
</span><span class="cx"> if (childEndLine - childStartLine > 1 && childEndLine < m_rowPositions.size() - 1)
</span><span class="lines">@@ -1678,6 +1710,10 @@
</span><span class="cx"> case GridAxisCenter: {
</span><span class="cx"> unsigned childEndLine = coordinate.columns.resolvedFinalPosition.next().toInt();
</span><span class="cx"> LayoutUnit endOfColumn = m_columnPositions[childEndLine];
</span><ins>+ // 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);
</ins><span class="cx"> LayoutUnit childBreadth = child.logicalWidth() + child.marginLogicalWidth();
</span><span class="cx"> // In order to properly adjust the Self Alignment values we need to consider the offset between tracks.
</span><span class="cx"> if (childEndLine - childStartLine > 1 && childEndLine < m_columnPositions.size() - 1)
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.h (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -60,6 +60,8 @@
</span><span class="cx"> const Vector<LayoutUnit>& columnPositions() const { return m_columnPositions; }
</span><span class="cx"> const Vector<LayoutUnit>& rowPositions() const { return m_rowPositions; }
</span><span class="cx">
</span><ins>+ LayoutUnit guttersSize(GridTrackSizingDirection, size_t span) const;
+
</ins><span class="cx"> private:
</span><span class="cx"> virtual const char* renderName() const override;
</span><span class="cx"> virtual bool isRenderGrid() const override { return true; }
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleRenderStyleh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/RenderStyle.h (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -965,7 +965,10 @@
</span><span class="cx"> bool isGridAutoFlowAlgorithmDense() const { return (rareNonInheritedData->m_grid->m_gridAutoFlow & InternalAutoFlowAlgorithmDense); }
</span><span class="cx"> const GridTrackSize& gridAutoColumns() const { return rareNonInheritedData->m_grid->m_gridAutoColumns; }
</span><span class="cx"> const GridTrackSize& gridAutoRows() const { return rareNonInheritedData->m_grid->m_gridAutoRows; }
</span><ins>+ const Length& gridColumnGap() const { return rareNonInheritedData->m_grid->m_gridColumnGap; }
+ const Length& gridRowGap() const { return rareNonInheritedData->m_grid->m_gridRowGap; }
</ins><span class="cx">
</span><ins>+
</ins><span class="cx"> const GridPosition& gridItemColumnStart() const { return rareNonInheritedData->m_gridItem->m_gridColumnStart; }
</span><span class="cx"> const GridPosition& gridItemColumnEnd() const { return rareNonInheritedData->m_gridItem->m_gridColumnEnd; }
</span><span class="cx"> const GridPosition& gridItemRowStart() const { return rareNonInheritedData->m_gridItem->m_gridRowStart; }
</span><span class="lines">@@ -1557,6 +1560,8 @@
</span><span class="cx"> void setGridItemColumnEnd(const GridPosition& columnEndPosition) { SET_VAR(rareNonInheritedData.access()->m_gridItem, m_gridColumnEnd, columnEndPosition); }
</span><span class="cx"> void setGridItemRowStart(const GridPosition& rowStartPosition) { SET_VAR(rareNonInheritedData.access()->m_gridItem, m_gridRowStart, rowStartPosition); }
</span><span class="cx"> void setGridItemRowEnd(const GridPosition& rowEndPosition) { SET_VAR(rareNonInheritedData.access()->m_gridItem, m_gridRowEnd, rowEndPosition); }
</span><ins>+ 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); }
</ins><span class="cx"> #endif /* ENABLE(CSS_GRID_LAYOUT) */
</span><span class="cx"> void setMarqueeIncrement(Length length) { SET_VAR(rareNonInheritedData.access()->m_marquee, increment, WTF::move(length)); }
</span><span class="cx"> void setMarqueeSpeed(int f) { SET_VAR(rareNonInheritedData.access()->m_marquee, speed, f); }
</span><span class="lines">@@ -2054,6 +2059,9 @@
</span><span class="cx"> static OrderedNamedGridLinesMap initialOrderedNamedGridColumnLines() { return OrderedNamedGridLinesMap(); }
</span><span class="cx"> static OrderedNamedGridLinesMap initialOrderedNamedGridRowLines() { return OrderedNamedGridLinesMap(); }
</span><span class="cx">
</span><ins>+ static Length initialGridColumnGap() { return Length(Fixed); }
+ static Length initialGridRowGap() { return Length(Fixed); }
+
</ins><span class="cx"> // 'auto' is the default.
</span><span class="cx"> static GridPosition initialGridItemColumnStart() { return GridPosition(); }
</span><span class="cx"> static GridPosition initialGridItemColumnEnd() { return GridPosition(); }
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleStyleGridDatacpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/StyleGridData.cpp (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -45,6 +45,8 @@
</span><span class="cx"> , m_namedGridArea(RenderStyle::initialNamedGridArea())
</span><span class="cx"> , m_namedGridAreaRowCount(RenderStyle::initialNamedGridAreaCount())
</span><span class="cx"> , m_namedGridAreaColumnCount(RenderStyle::initialNamedGridAreaCount())
</span><ins>+ , m_gridColumnGap(RenderStyle::initialGridColumnGap())
+ , m_gridRowGap(RenderStyle::initialGridRowGap())
</ins><span class="cx"> {
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -62,6 +64,8 @@
</span><span class="cx"> , m_namedGridArea(o.m_namedGridArea)
</span><span class="cx"> , m_namedGridAreaRowCount(o.m_namedGridAreaRowCount)
</span><span class="cx"> , m_namedGridAreaColumnCount(o.m_namedGridAreaColumnCount)
</span><ins>+ , m_gridColumnGap(o.m_gridColumnGap)
+ , m_gridRowGap(o.m_gridRowGap)
</ins><span class="cx"> {
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleStyleGridDatah"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/StyleGridData.h (190662 => 190663)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -49,7 +49,13 @@
</span><span class="cx"> bool operator==(const StyleGridData& o) const
</span><span class="cx"> {
</span><span class="cx"> // FIXME: comparing two hashes doesn't look great for performance. Something to keep in mind going forward.
</span><del>- 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;
</del><ins>+ 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;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> bool operator!=(const StyleGridData& o) const
</span><span class="lines">@@ -78,6 +84,9 @@
</span><span class="cx"> unsigned m_namedGridAreaRowCount;
</span><span class="cx"> unsigned m_namedGridAreaColumnCount;
</span><span class="cx">
</span><ins>+ Length m_gridColumnGap;
+ Length m_gridRowGap;
+
</ins><span class="cx"> private:
</span><span class="cx"> StyleGridData();
</span><span class="cx"> StyleGridData(const StyleGridData&);
</span></span></pre>
</div>
</div>
</body>
</html>
More information about the webkit-changes
mailing list