<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[206161] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/206161">206161</a></dd>
<dt>Author</dt> <dd>jfernandez@igalia.com</dd>
<dt>Date</dt> <dd>2016-09-20 11:41:43 -0700 (Tue, 20 Sep 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-grid] The 'grid' shorthand has a new syntax.
https://bugs.webkit.org/show_bug.cgi?id=161954
Reviewed by Darin Adler.
Source/WebCore:
Implementation of the new CSS syntax for the 'grid' shorthand, as
defined in the CSS Grid Layout specification:
- https://drafts.csswg.org/css-grid/#grid-shorthand
No new tests, just adapted the ones we already have and added a few additional test cases.
* css/CSSValueKeywords.in:
* css/parser/CSSParser.cpp:
(WebCore::CSSParser::parseImplicitAutoFlow): Added. Similar to parseGridAutoFlow, but using the new 'auto-flow' keyword.
(WebCore::CSSParser::parseGridShorthand): New syntax of the 'grid' shorthand.
* css/parser/CSSParser.h:
LayoutTests:
Adapted the already defined test cases to the new syntax of the
'grid' shorthand. Also added a few additional test cases.
* fast/css-grid-layout/grid-shorthand-get-set-expected.txt:
* fast/css-grid-layout/grid-shorthand-get-set.html:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridshorthandgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridshorthandgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssCSSValueKeywordsin">trunk/Source/WebCore/css/CSSValueKeywords.in</a></li>
<li><a href="#trunkSourceWebCorecssparserCSSParsercpp">trunk/Source/WebCore/css/parser/CSSParser.cpp</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (206160 => 206161)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-09-20 18:35:24 UTC (rev 206160)
+++ trunk/LayoutTests/ChangeLog 2016-09-20 18:41:43 UTC (rev 206161)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+2016-09-20 Javier Fernandez <jfernandez@igalia.com>
+
+ [css-grid] The 'grid' shorthand has a new syntax.
+ https://bugs.webkit.org/show_bug.cgi?id=161954
+
+ Reviewed by Darin Adler.
+
+ Adapted the already defined test cases to the new syntax of the
+ 'grid' shorthand. Also added a few additional test cases.
+
+ * fast/css-grid-layout/grid-shorthand-get-set-expected.txt:
+ * fast/css-grid-layout/grid-shorthand-get-set.html:
+
</ins><span class="cx"> 2016-09-20 Ryan Haddad <ryanhaddad@apple.com>
</span><span class="cx">
</span><span class="cx"> Marking js/regress-139548.html as a flaky timeout on mac-wk2 debug.
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridshorthandgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt (206160 => 206161)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt 2016-09-20 18:35:24 UTC (rev 206160)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt 2016-09-20 18:41:43 UTC (rev 206161)
</span><span class="lines">@@ -4,12 +4,12 @@
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> Test getting the longhand values when shorthand is set through CSS.
</span><del>-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-auto-flow') is "row dense"
-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-auto-rows') is "auto"
</del><ins>+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-rows') is "auto"
</ins><span class="cx"> PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-template-columns') is "15px"
</span><span class="cx"> PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-template-rows') is "10px"
</span><span class="cx"> PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-template-areas') is "none"
</span><span class="lines">@@ -16,86 +16,98 @@
</span><span class="cx"> PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-auto-flow') is "row"
</span><span class="cx"> PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-auto-columns') is "auto"
</span><span class="cx"> PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-auto-rows') is "auto"
</span><del>-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-template-rows') is "10px"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-template-rows') is "10px"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-auto-flow') is "row dense"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-auto-columns') is "20px"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-auto-rows') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-auto-flow') is "column"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-auto-rows') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-auto-flow') is "row dense"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-auto-rows') is "10px"
</del><ins>+PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-template-columns') is "15px"
+PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridColumnsAndAutoFlow, '').getPropertyValue('grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridColumnsAndAutoFlow, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridColumnsAndAutoFlow, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridColumnsAndAutoFlow, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridColumnsAndAutoFlow, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridColumnsAndAutoFlow, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRows, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRows, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRows, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRows, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRows, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRows, '').getPropertyValue('grid-auto-rows') is "10px"
</ins><span class="cx"> PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-template-columns') is "none"
</span><span class="cx"> PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-template-rows') is "none"
</span><span class="cx"> PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-template-areas') is "none"
</span><span class="cx"> PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-auto-flow') is "column dense"
</span><del>-PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-auto-rows') is "10px"
</del><ins>+PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-auto-rows') is "auto"
</ins><span class="cx"> PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-template-columns') is "none"
</span><span class="cx"> PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-template-rows') is "none"
</span><span class="cx"> PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-template-areas') is "none"
</span><span class="cx"> PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-auto-flow') is "row dense"
</span><del>-PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-auto-rows') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-auto-flow') is "column"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-auto-columns') is "20px"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-auto-rows') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-template-columns') is "none"
</del><ins>+PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRowsAndColumns, '').getPropertyValue('grid-template-columns') is "20px"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRowsAndColumns, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRowsAndColumns, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRowsAndColumns, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRowsAndColumns, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRowsAndColumns, '').getPropertyValue('grid-auto-rows') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-template-columns') is "100px 50px"
</ins><span class="cx"> PASS window.getComputedStyle(gridWithAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-template-rows') is "none"
</span><span class="cx"> PASS window.getComputedStyle(gridWithAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-template-areas') is "none"
</span><span class="cx"> PASS window.getComputedStyle(gridWithAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-auto-flow') is "row"
</span><del>-PASS window.getComputedStyle(gridWithAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-auto-columns') is "100px 10%"
</del><ins>+PASS window.getComputedStyle(gridWithAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-auto-columns') is "auto"
</ins><span class="cx"> PASS window.getComputedStyle(gridWithAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-auto-rows') is "20px 10px"
</span><ins>+PASS window.getComputedStyle(gridWithRowsAndAutoFlow, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlow, '').getPropertyValue('grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlow, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlow, '').getPropertyValue('grid-auto-flow') is "column"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlow, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlow, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithRowsNoneAndAutoFlowAndAutoColumn, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithRowsNoneAndAutoFlowAndAutoColumn, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithRowsNoneAndAutoFlowAndAutoColumn, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithRowsNoneAndAutoFlowAndAutoColumn, '').getPropertyValue('grid-auto-flow') is "column"
+PASS window.getComputedStyle(gridWithRowsNoneAndAutoFlowAndAutoColumn, '').getPropertyValue('grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithRowsNoneAndAutoFlowAndAutoColumn, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowDenseColumn, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowDenseColumn, '').getPropertyValue('grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowDenseColumn, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowDenseColumn, '').getPropertyValue('grid-auto-flow') is "column dense"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowDenseColumn, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowDenseColumn, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithColumnsAndDenseAutoFlow, '').getPropertyValue('grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridWithColumnsAndDenseAutoFlow, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithColumnsAndDenseAutoFlow, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithColumnsAndDenseAutoFlow, '').getPropertyValue('grid-auto-flow') is "row dense"
+PASS window.getComputedStyle(gridWithColumnsAndDenseAutoFlow, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithColumnsAndDenseAutoFlow, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndAutoColumns, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndAutoColumns, '').getPropertyValue('grid-template-rows') is "20px"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndAutoColumns, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndAutoColumns, '').getPropertyValue('grid-auto-flow') is "column"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndAutoColumns, '').getPropertyValue('grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndAutoColumns, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-template-rows') is "100px 50px"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-auto-flow') is "column"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-auto-columns') is "20px 10px"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-auto-rows') is "auto"
</ins><span class="cx">
</span><del>-Test setting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'row')
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-auto-rows') is "auto"
</del><ins>+Test getting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'none')
+PASS window.getComputedStyle(gridWithMisplacedAutoColumn, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithMisplacedAutoColumn, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithMisplacedAutoColumn, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithMisplacedAutoColumn, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithMisplacedAutoColumn, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithMisplacedAutoColumn, '').getPropertyValue('grid-auto-rows') is "auto"
</ins><span class="cx"> PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-template-columns') is "none"
</span><span class="cx"> PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-template-rows') is "none"
</span><span class="cx"> PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-template-areas') is "none"
</span><span class="lines">@@ -114,54 +126,72 @@
</span><span class="cx"> PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-auto-flow') is "row"
</span><span class="cx"> PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-auto-columns') is "auto"
</span><span class="cx"> PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-auto-rows') is "auto"
</span><del>-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-auto-rows') is "auto"
</del><ins>+PASS window.getComputedStyle(gridWithDuplicatedDense, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithDuplicatedDense, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithDuplicatedDense, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithDuplicatedDense, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithDuplicatedDense, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithDuplicatedDense, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithOnlyDense, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithOnlyDense, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithOnlyDense, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithOnlyDense, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithOnlyDense, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithOnlyDense, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithoutColumnInfo, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithoutColumnInfo, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithoutColumnInfo, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithoutColumnInfo, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithoutColumnInfo, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithoutColumnInfo, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithTwoAutoFlow, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithTwoAutoFlow, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithTwoAutoFlow, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithTwoAutoFlow, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithTwoAutoFlow, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithTwoAutoFlow, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithImplicitAndNoExplicit, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithImplicitAndNoExplicit, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithImplicitAndNoExplicit, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithImplicitAndNoExplicit, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithImplicitAndNoExplicit, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithImplicitAndNoExplicit, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowColumn, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowColumn, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowColumn, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowColumn, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowColumn, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowColumn, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowRow, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowRow, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowRow, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowRow, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowRow, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowRow, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoColumn, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoColumn, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoColumn, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoColumn, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoColumn, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoColumn, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoColumn, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoColumn, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoColumn, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoColumn, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoColumn, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoColumn, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoRow, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoRow, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoRow, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoRow, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoRow, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoRow, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoRow, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoRow, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoRow, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoRow, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoRow, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoRow, '').getPropertyValue('grid-auto-rows') is "auto"
</ins><span class="cx">
</span><span class="cx"> Test getting and setting 'grid' shorthand through JS
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "10px"
</span><span class="lines">@@ -189,7 +219,7 @@
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
</span><span class="cx"> PASS element.style.gridAutoRows is "initial"
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
</span><del>-PASS element.style.gridTemplateColumns is "initial"
</del><ins>+PASS element.style.gridTemplateColumns is "none"
</ins><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
</span><span class="cx"> PASS element.style.gridTemplateRows is "initial"
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
</span><span class="lines">@@ -196,14 +226,14 @@
</span><span class="cx"> PASS element.style.gridTemplateAreas is "initial"
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row dense"
</span><span class="cx"> PASS element.style.gridAutoFlow is "row dense"
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "20px"
-PASS element.style.gridAutoColumns is "20px"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS element.style.gridAutoColumns is "initial"
</ins><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "20px"
</span><span class="cx"> PASS element.style.gridAutoRows is "20px"
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
</span><span class="cx"> PASS element.style.gridTemplateColumns is "initial"
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
-PASS element.style.gridTemplateRows is "initial"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px"
+PASS element.style.gridTemplateRows is "20px"
</ins><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
</span><span class="cx"> PASS element.style.gridTemplateAreas is "initial"
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column"
</span><span class="lines">@@ -210,8 +240,32 @@
</span><span class="cx"> PASS element.style.gridAutoFlow is "column"
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "10px"
</span><span class="cx"> PASS element.style.gridAutoColumns is "10px"
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "20px"
-PASS element.style.gridAutoRows is "20px"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS element.style.gridAutoRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS element.style.gridTemplateColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS element.style.gridTemplateRows is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS element.style.gridTemplateAreas is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column dense"
+PASS element.style.gridAutoFlow is "column dense"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "20px"
+PASS element.style.gridAutoColumns is "20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS element.style.gridAutoRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS element.style.gridTemplateColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "10px"
+PASS element.style.gridTemplateRows is "10px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS element.style.gridTemplateAreas is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column"
+PASS element.style.gridAutoFlow is "column"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "20px"
+PASS element.style.gridAutoColumns is "20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS element.style.gridAutoRows is "initial"
</ins><span class="cx">
</span><span class="cx"> Test the initial value
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
</span><span class="lines">@@ -230,8 +284,8 @@
</span><span class="cx"> Test setting grid-template-columns and grid-template-rows back to 'none' through JS
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
</span><span class="cx"> PASS element.style.gridTemplateColumns is "initial"
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
-PASS element.style.gridTemplateRows is "initial"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "10px"
+PASS element.style.gridTemplateRows is "10px"
</ins><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
</span><span class="cx"> PASS element.style.gridTemplateAreas is "initial"
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column"
</span><span class="lines">@@ -238,8 +292,8 @@
</span><span class="cx"> PASS element.style.gridAutoFlow is "column"
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "20px"
</span><span class="cx"> PASS element.style.gridAutoColumns is "20px"
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "10px"
-PASS element.style.gridAutoRows is "10px"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS element.style.gridAutoRows is "initial"
</ins><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
</span><span class="cx"> PASS element.style.gridTemplateColumns is "none"
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
</span><span class="lines">@@ -252,6 +306,30 @@
</span><span class="cx"> PASS element.style.gridAutoColumns is "initial"
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
</span><span class="cx"> PASS element.style.gridAutoRows is "initial"
</span><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS element.style.gridTemplateColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px"
+PASS element.style.gridTemplateRows is "20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS element.style.gridTemplateAreas is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column"
+PASS element.style.gridAutoFlow is "column"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "10px"
+PASS element.style.gridAutoColumns is "10px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS element.style.gridAutoRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS element.style.gridTemplateColumns is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS element.style.gridTemplateRows is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS element.style.gridTemplateAreas is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row"
+PASS element.style.gridAutoFlow is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS element.style.gridAutoColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS element.style.gridAutoRows is "initial"
</ins><span class="cx">
</span><span class="cx"> Test the inherit value on reset-only subproperties (grid-*-gap)
</span><span class="cx"> PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-column-gap') is "0px"
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridshorthandgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html (206160 => 206161)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html 2016-09-20 18:35:24 UTC (rev 206160)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html 2016-09-20 18:41:43 UTC (rev 206161)
</span><span class="lines">@@ -3,158 +3,187 @@
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><del>-#gridWithDense {
- grid: dense;
</del><ins>+#gridWithNone {
+ grid: none;
</ins><span class="cx"> }
</span><del>-#gridWithTemplate {
</del><ins>+.gridWithTemplate {
</ins><span class="cx"> grid: 10px / 15px;
</span><span class="cx"> }
</span><del>-#gridWithTemplate1 {
- grid: 10px / none;
</del><ins>+.gridWithInherit {
+ grid: inherit;
</ins><span class="cx"> }
</span><del>-#gridWithTemplateNone {
- grid: 10px / none;
</del><ins>+#gridColumnsAndAutoFlow {
+ grid: auto-flow / 10px;
</ins><span class="cx"> }
</span><del>-#gridWithAutoFlowDenseAndRowsAndColumns {
- grid: dense 10px / 20px;
</del><ins>+#gridWithAutoFlowAndAutoRows {
+ grid: auto-flow 10px / none;
</ins><span class="cx"> }
</span><del>-#gridWithAutoFlowAndRows {
- grid: column 10px;
-}
-#gridWithAutoFlowDense {
- grid: dense 10px;
-}
</del><span class="cx"> #gridWithAutoFlowColumnDense {
</span><del>- grid: column dense 10px;
</del><ins>+ grid: none / auto-flow dense;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithAutoFlowDenseRow {
</span><del>- grid: dense row 10px;
</del><ins>+ grid: auto-flow dense / none;
</ins><span class="cx"> }
</span><del>-#gridWithAutoFlowAndRowsAndColumns {
- grid: column 10px / 20px;
</del><ins>+#gridWithAutoFlowAndAutoRowsAndColumns {
+ grid: auto-flow 10px / 20px;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithAutoFlowAndMultipleAutoTracks {
</span><del>- grid: row 20px 10px / 100px 10%;
</del><ins>+ grid: auto-flow 20px 10px / 100px 50px;
</ins><span class="cx"> }
</span><ins>+#gridWithRowsAndAutoFlow {
+ grid: 10px / auto-flow;
+}
+#gridWithRowsNoneAndAutoFlowAndAutoColumn {
+ grid: none / auto-flow 10px;
+}
+#gridWithRowsAndAutoFlowDenseColumn {
+ grid: 10px / auto-flow dense;
+}
+#gridWithColumnsAndDenseAutoFlow {
+ grid: dense auto-flow / 10px;
+}
+#gridWithRowsAndAutoFlowAndAutoColumns {
+ grid: 20px / auto-flow 10px;
+}
+#gridWithRowsAndAutoFlowAndMultipleAutoTracks {
+ grid: 100px 50px / auto-flow 20px 10px;
+}
</ins><span class="cx">
</span><span class="cx"> /* Bad values. */
</span><span class="cx">
</span><del>-#gridWithNone {
- grid: none;
</del><ins>+#gridWithMisplacedAutoColumn {
+ grid: 10px / 20px auto-flow;
</ins><span class="cx"> }
</span><del>-#gridWithAutoFlowNoneAndRowsAndColumns {
- grid: none 10px / 20px;
-}
-#gridWithAutoFlowNone {
- grid: none 10px;
-}
-#gridWithExplicitAndImplicit {
- grid: 10px / 20px column;
-}
</del><span class="cx"> #gridWithMisplacedNone1 {
</span><del>- grid: column 10px / none 20px;
</del><ins>+ grid: auto-flow 10px / none 20px;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithMisplacedNone2 {
</span><span class="cx"> grid: 10px / 20px none;
</span><span class="cx"> }
</span><del>-#gridWithWrongSlash1 {
- grid: column / 10px;
</del><ins>+#gridWithMisplacedDense {
+ grid: dense 10px / auto-flow 20px;
</ins><span class="cx"> }
</span><del>-#gridWithWrongSlash2 {
- grid: 5x / 10px / 20px;
</del><ins>+#gridWithDuplicatedDense {
+ grid: dense auto-flow dense / 10px;
</ins><span class="cx"> }
</span><del>-#gridWithAutoFlowRowAndColumn {
- grid: row column 10px;
</del><ins>+#gridWithOnlyDense {
+ grid: dense / 10px;
</ins><span class="cx"> }
</span><del>-#gridWithAutoFlowString1 {
- grid: row 10px "a";
</del><ins>+#gridWithoutColumnInfo {
+ grid: auto-flow dense 10px;
</ins><span class="cx"> }
</span><del>-#gridWithAutoFlowString2 {
- grid: row "a" 10px;
</del><ins>+#gridWithTwoAutoFlow {
+ grid: auto-flow / auto-flow 20px;
</ins><span class="cx"> }
</span><del>-#gridWithAutoFlowString3 {
- grid: row "a";
</del><ins>+#gridWithImplicitAndNoExplicit {
+ grid: column 20px / 10px;
</ins><span class="cx"> }
</span><del>-#gridWithTemplateAndAutoFlow {
- grid: 10px / 10px row;
</del><ins>+#gridWithExtraIdBeforeAutoFlowColumn {
+ grid: 10px / a auto-flow 20px;
</ins><span class="cx"> }
</span><del>-#gridWithTemplateAndMisplacedString1 {
- grid: 10px / 10px "a";
</del><ins>+#gridWithExtraIdBeforeAutoFlowRow {
+ grid: a auto-flow 10px / 20px;
</ins><span class="cx"> }
</span><del>-#gridWithMisplacedDense {
- grid: dense column dense;
</del><ins>+#gridWithExtraIdBeforeAutoColumn {
+ grid: 10px / auto-flow a 20px;
</ins><span class="cx"> }
</span><ins>+#gridWithExtraIdAfterAutoColumn {
+ grid: 10px / auto-flow 20px a;
+}
+#gridWithExtraIdBeforeAutoRow {
+ grid: auto-flow a 20px / 10px;
+}
+#gridWithExtraIdAfterAutoRow {
+ grid: auto-flow 20px a / 10px;
+}
</ins><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test.js"></script>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><del>-<div class="grid" id="gridWithDense"></div>
-<div class="grid" id="gridWithTemplate"></div>
-<div class="grid" id="gridWithTemplate1"></div>
-<div class="grid" id="gridWithAutoFlowDenseAndRowsAndColumns"></div>
-<div class="grid" id="gridWithAutoFlowAndRows"></div>
-<div class="grid" id="gridWithAutoFlowDense"></div>
</del><ins>+<div class="grid" id="gridWithNone"></div>
+<div class="grid gridWithTemplate" id="gridWithTemplate"></div>
+<div class="grid gridWithTemplate">
+ <div class="grid gridWithInherit" id="gridInherit"></div>
+</div>
+<div class="grid" class="gridWithTemplate">
+ <div><div class="grid gridWithInherit" id="gridNoInherit"></div></div>
+</div-->
+<div class="grid" id="gridColumnsAndAutoFlow"></div>
+<div class="grid" id="gridWithAutoFlowAndAutoRows"></div>
</ins><span class="cx"> <div class="grid" id="gridWithAutoFlowColumnDense"></div>
</span><span class="cx"> <div class="grid" id="gridWithAutoFlowDenseRow"></div>
</span><del>-<div class="grid" id="gridWithAutoFlowAndRowsAndColumns"></div>
-<div class="grid" id="gridWithNone"></div>
-<div class="grid" id="gridWithTemplateNone"></div>
-<div class="grid" id="gridWithAutoFlowNoneAndRowsAndColumns"></div>
-<div class="grid" id="gridWithAutoFlowNone"></div>
-<div class="grid" id="gridWithExplicitAndImplicit"></div>
</del><ins>+<div class="grid" id="gridWithAutoFlowAndAutoRowsAndColumns"></div>
+<div class="grid" id="gridWithAutoFlowAndMultipleAutoTracks"></div>
+<div class="grid" id="gridWithRowsAndAutoFlow"></div>
+<div class="grid" id="gridWithRowsNoneAndAutoFlowAndAutoColumn"></div>
+<div class="grid" id="gridWithRowsAndAutoFlowDenseColumn"></div>
+<div class="grid" id="gridWithColumnsAndDenseAutoFlow"></div>
+<div class="grid" id="gridWithRowsAndAutoFlowAndAutoColumns"></div>
+<div class="grid" id="gridWithRowsAndAutoFlowAndMultipleAutoTracks"></div>
+<div class="grid" id="gridWithMisplacedAutoColumn"></div>
</ins><span class="cx"> <div class="grid" id="gridWithMisplacedNone1"></div>
</span><span class="cx"> <div class="grid" id="gridWithMisplacedNone2"></div>
</span><del>-<div class="grid" id="gridWithWrongSlash1"></div>
-<div class="grid" id="gridWithWrongSlash2"></div>
-<div class="grid" id="gridWithAutoFlowRowAndColumn"></div>
-<div class="grid" id="gridWithAutoFlowString1"></div>
-<div class="grid" id="gridWithAutoFlowString2"></div>
-<div class="grid" id="gridWithAutoFlowString3"></div>
-<div class="grid" id="gridWithTemplateAndAutoFlow"></div>
-<div class="grid" id="gridWithTemplateAndMisplacedString1"></div>
</del><span class="cx"> <div class="grid" id="gridWithMisplacedDense"></div>
</span><del>-<div class="grid" id="gridWithAutoFlowAndMultipleAutoTracks"></div>
</del><ins>+<div class="grid" id="gridWithDuplicatedDense"></div>
+<div class="grid" id="gridWithOnlyDense"></div>
+<div class="grid" id="gridWithoutColumnInfo"></div>
+<div class="grid" id="gridWithTwoAutoFlow"></div>
+<div class="grid" id="gridWithImplicitAndNoExplicit"></div>
+<div class="grid" id="gridWithExtraIdBeforeAutoFlowColumn"></div>
+<div class="grid" id="gridWithExtraIdBeforeAutoFlowRow"></div>
+<div class="grid" id="gridWithExtraIdBeforeAutoColumn"></div>
+<div class="grid" id="gridWithExtraIdAfterAutoColumn"></div>
+<div class="grid" id="gridWithExtraIdBeforeAutoRow"></div>
+<div class="grid" id="gridWithExtraIdAfterAutoRow"></div>
</ins><span class="cx"> <script src="resources/grid-shorthand-parsing-utils.js"></script>
</span><span class="cx"> <script>
</span><span class="cx"> description("This test checks that the 'grid' shorthand is properly parsed and the longhand properties correctly assigned.");
</span><span class="cx">
</span><span class="cx"> debug("Test getting the longhand values when shorthand is set through CSS.");
</span><del>- testGridDefinitionsValues(document.getElementById("gridWithDense"), "none", "none", "none", "row dense", "auto", "auto");
</del><ins>+ testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", "none", "none", "row", "auto", "auto");
</ins><span class="cx"> testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px", "10px", "none", "row", "auto", "auto");
</span><del>- testGridDefinitionsValues(document.getElementById("gridWithTemplate1"), "none", "10px", "none", "row", "auto", "auto");
- testGridDefinitionsValues(document.getElementById("gridWithTemplateNone"), "none", "10px", "none", "row", "auto", "auto");
- testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseAndRowsAndColumns"), "none", "none", "none", "row dense", "20px", "10px");
- testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndRows"), "none", "none", "none", "column", "10px", "10px");
- testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDense"), "none", "none", "none", "row dense", "10px", "10px");
- testGridDefinitionsValues(document.getElementById("gridWithAutoFlowColumnDense"), "none", "none", "none", "column dense", "10px", "10px");
- testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseRow"), "none", "none", "none", "row dense", "10px", "10px");
- testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndRowsAndColumns"), "none", "none", "none", "column", "20px", "10px");
- testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndMultipleAutoTracks"), "none", "none", "none", "row", "100px 10%", "20px 10px");
</del><ins>+ testGridDefinitionsValues(document.getElementById("gridInherit"), "15px", "10px", "none", "row", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridNoInherit"), "none", "none", "none", "row", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridColumnsAndAutoFlow"), "10px", "none", "none", "row", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndAutoRows"), "none", "none", "none", "row", "auto", "10px");
+ testGridDefinitionsValues(document.getElementById("gridWithAutoFlowColumnDense"), "none", "none", "none", "column dense", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseRow"), "none", "none", "none", "row dense", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndAutoRowsAndColumns"), "20px", "none", "none", "row", "auto", "10px");
+ testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndMultipleAutoTracks"), "100px 50px", "none", "none", "row", "auto", "20px 10px");
</ins><span class="cx">
</span><ins>+ testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlow"), "none", "10px", "none", "column", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithRowsNoneAndAutoFlowAndAutoColumn"), "none", "none", "none", "column", "10px", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlowDenseColumn"), "none", "10px", "none", "column dense", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithColumnsAndDenseAutoFlow"), "10px", "none", "none", "row dense", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlowAndAutoColumns"), "none", "20px", "none", "column", "10px", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlowAndMultipleAutoTracks"), "none", "100px 50px", "none", "column", "20px 10px", "auto");
+
</ins><span class="cx"> debug("");
</span><del>- debug("Test setting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'row')");
- testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", "none", "none", "row", "auto", "auto");
- testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNoneAndRowsAndColumns"), "none", "none", "none", "row", "auto", "auto");
- testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), "none", "none", "none", "row", "auto", "auto");
- testGridDefinitionsValues(document.getElementById("gridWithExplicitAndImplicit"), "none", "none", "none", "row", "auto", "auto");
</del><ins>+ debug("Test getting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'none')");
+ testGridDefinitionsValues(document.getElementById("gridWithMisplacedAutoColumn"), "none", "none", "none", "row", "auto", "auto");
</ins><span class="cx"> testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"), "none", "none", "none", "row", "auto", "auto");
</span><span class="cx"> testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"), "none", "none", "none", "row", "auto", "auto");
</span><span class="cx"> testGridDefinitionsValues(document.getElementById("gridWithMisplacedDense"), "none", "none", "none", "row", "auto", "auto");
</span><del>- testGridDefinitionsValues(document.getElementById("gridWithWrongSlash1"), "none", "none", "none", "row", "auto", "auto");
- testGridDefinitionsValues(document.getElementById("gridWithWrongSlash2"), "none", "none", "none", "row", "auto", "auto");
- testGridDefinitionsValues(document.getElementById("gridWithAutoFlowRowAndColumn"), "none", "none", "none", "row", "auto", "auto");
- testGridDefinitionsValues(document.getElementById("gridWithAutoFlowString1"), "none", "none", "none", "row", "auto", "auto");
- testGridDefinitionsValues(document.getElementById("gridWithAutoFlowString2"), "none", "none", "none", "row", "auto", "auto");
- testGridDefinitionsValues(document.getElementById("gridWithAutoFlowString3"), "none", "none", "none", "row", "auto", "auto");
- testGridDefinitionsValues(document.getElementById("gridWithTemplateAndAutoFlow"), "none", "none", "none", "row", "auto", "auto");
- testGridDefinitionsValues(document.getElementById("gridWithTemplateAndMisplacedString1"), "none", "none", "none", "row", "auto", "auto");
</del><ins>+ testGridDefinitionsValues(document.getElementById("gridWithDuplicatedDense"), "none", "none", "none", "row", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithOnlyDense"), "none", "none", "none", "row", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithoutColumnInfo"), "none", "none", "none", "row", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithTwoAutoFlow"), "none", "none", "none", "row", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithImplicitAndNoExplicit"), "none", "none", "none", "row", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAutoFlowColumn"), "none", "none", "none", "row", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAutoFlowRow"), "none", "none", "none", "row", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAutoColumn"), "none", "none", "none", "row", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithExtraIdAfterAutoColumn"), "none", "none", "none", "row", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAutoRow"), "none", "none", "none", "row", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithExtraIdAfterAutoRow"), "none", "none", "none", "row", "auto", "auto");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test getting and setting 'grid' shorthand through JS");
</span><span class="cx"> testGridDefinitionsSetJSValues("20px / 10px", "10px", "20px", "none", "row", "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial");
</span><span class="cx"> testGridDefinitionsSetJSValues("[line] 'a' 20px / 10px", "10px", "[line] 20px", "\"a\"", "row", "auto", "auto", "10px", "[line] 20px", "\"a\"", "initial", "initial", "initial");
</span><del>- testGridDefinitionsSetJSValues("row dense 20px", "none", "none", "none", "row dense", "20px", "20px", "initial", "initial", "initial", "row dense", "20px", "20px");
- testGridDefinitionsSetJSValues("column 20px / 10px", "none", "none", "none", "column", "10px", "20px", "initial", "initial", "initial", "column", "10px", "20px");
</del><ins>+ testGridDefinitionsSetJSValues("auto-flow dense 20px / none", "none", "none", "none", "row dense", "auto", "20px", "none", "initial", "initial", "row dense", "initial", "20px");
+ testGridDefinitionsSetJSValues("20px / auto-flow 10px", "none", "20px", "none", "column", "10px", "auto", "initial", "20px", "initial", "column", "10px", "initial");
+ testGridDefinitionsSetJSValues("none / auto-flow dense 20px", "none", "none", "none", "column dense", "20px", "auto", "initial", "none", "initial", "column dense", "20px", "initial");
+ testGridDefinitionsSetJSValues("10px / auto-flow 20px", "none", "10px", "none", "column", "20px", "auto", "initial", "10px", "initial", "column", "20px", "initial");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the initial value");
</span><span class="lines">@@ -170,8 +199,10 @@
</span><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
</span><del>- testGridDefinitionsSetJSValues("column 10px / 20px", "none", "none", "none", "column", "20px", "10px", "initial", "initial", "initial", "column", "20px", "10px");
</del><ins>+ testGridDefinitionsSetJSValues("10px / auto-flow 20px", "none", "10px", "none", "column", "20px", "auto", "initial", "10px", "initial", "column", "20px", "initial");
</ins><span class="cx"> testGridDefinitionsSetJSValues("none", "none", "none", "none", "row", "auto", "auto", "none", "none", "none", "initial", "initial", "initial");
</span><ins>+ testGridDefinitionsSetJSValues("20px / auto-flow 10px", "none", "20px", "none", "column", "10px", "auto", "initial", "20px", "initial", "column", "10px", "initial");
+ testGridDefinitionsSetJSValues("none", "none", "none", "none", "row", "auto", "auto", "none", "none", "none", "initial", "initial", "initial");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the inherit value on reset-only subproperties (grid-*-gap)");
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (206160 => 206161)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-09-20 18:35:24 UTC (rev 206160)
+++ trunk/Source/WebCore/ChangeLog 2016-09-20 18:41:43 UTC (rev 206161)
</span><span class="lines">@@ -1,3 +1,22 @@
</span><ins>+2016-09-20 Javier Fernandez <jfernandez@igalia.com>
+
+ [css-grid] The 'grid' shorthand has a new syntax.
+ https://bugs.webkit.org/show_bug.cgi?id=161954
+
+ Reviewed by Darin Adler.
+
+ Implementation of the new CSS syntax for the 'grid' shorthand, as
+ defined in the CSS Grid Layout specification:
+ - https://drafts.csswg.org/css-grid/#grid-shorthand
+
+ No new tests, just adapted the ones we already have and added a few additional test cases.
+
+ * css/CSSValueKeywords.in:
+ * css/parser/CSSParser.cpp:
+ (WebCore::CSSParser::parseImplicitAutoFlow): Added. Similar to parseGridAutoFlow, but using the new 'auto-flow' keyword.
+ (WebCore::CSSParser::parseGridShorthand): New syntax of the 'grid' shorthand.
+ * css/parser/CSSParser.h:
+
</ins><span class="cx"> 2016-09-20 Alex Christensen <achristensen@webkit.org>
</span><span class="cx">
</span><span class="cx"> URLParser should allow '@' in user
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSValueKeywordsin"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSValueKeywords.in (206160 => 206161)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSValueKeywords.in 2016-09-20 18:35:24 UTC (rev 206160)
+++ trunk/Source/WebCore/css/CSSValueKeywords.in 2016-09-20 18:41:43 UTC (rev 206161)
</span><span class="lines">@@ -1250,6 +1250,7 @@
</span><span class="cx"> span
</span><span class="cx">
</span><span class="cx"> // grid-auto-flow
</span><ins>+auto-flow
</ins><span class="cx"> dense
</span><span class="cx">
</span><span class="cx"> #if defined(ENABLE_CSS3_TEXT) && ENABLE_CSS3_TEXT
</span></span></pre></div>
<a id="trunkSourceWebCorecssparserCSSParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/parser/CSSParser.cpp (206160 => 206161)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/parser/CSSParser.cpp 2016-09-20 18:35:24 UTC (rev 206160)
+++ trunk/Source/WebCore/css/parser/CSSParser.cpp 2016-09-20 18:41:43 UTC (rev 206161)
</span><span class="lines">@@ -5501,6 +5501,33 @@
</span><span class="cx"> return parseGridTemplateRowsAndAreasAndColumns(important);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+static RefPtr<CSSValue> parseImplicitAutoFlow(CSSParserValueList& inputList, Ref<CSSPrimitiveValue>&& flowDirection)
+{
+ // [ auto-flow && dense? ]
+ auto value = inputList.current();
+ if (!value)
+ return nullptr;
+ auto list = CSSValueList::createSpaceSeparated();
+ list->append(WTFMove(flowDirection));
+ if (value->id == CSSValueAutoFlow) {
+ value = inputList.next();
+ if (value && value->id == CSSValueDense) {
+ list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueDense));
+ inputList.next();
+ }
+ } else {
+ if (value->id != CSSValueDense)
+ return nullptr;
+ value = inputList.next();
+ if (!value || value->id != CSSValueAutoFlow)
+ return nullptr;
+ list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueDense));
+ inputList.next();
+ }
+
+ return WTFMove(list);
+}
+
</ins><span class="cx"> bool CSSParser::parseGridShorthand(bool important)
</span><span class="cx"> {
</span><span class="cx"> ASSERT(isCSSGridLayoutEnabled());
</span><span class="lines">@@ -5522,45 +5549,72 @@
</span><span class="cx">
</span><span class="cx"> // Need to rewind parsing to explore the alternative syntax of this shorthand.
</span><span class="cx"> m_valueList->setCurrentIndex(0);
</span><del>-
- // 2- <grid-auto-flow> [ <grid-auto-columns> [ / <grid-auto-rows> ]? ]
- if (!parseValue(CSSPropertyGridAutoFlow, important))
</del><ins>+ auto value = m_valueList->current();
+ if (!value)
</ins><span class="cx"> return false;
</span><span class="cx">
</span><span class="cx"> RefPtr<CSSValue> autoColumnsValue;
</span><span class="cx"> RefPtr<CSSValue> autoRowsValue;
</span><del>-
- if (m_valueList->current()) {
- autoRowsValue = parseGridTrackList(GridAuto);
- if (!autoRowsValue)
</del><ins>+ RefPtr<CSSValue> templateRows;
+ RefPtr<CSSValue> templateColumns;
+ RefPtr<CSSValue> gridAutoFlow;
+ if (value->id == CSSValueDense || value->id == CSSValueAutoFlow) {
+ // 2- [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>
+ gridAutoFlow = parseImplicitAutoFlow(*m_valueList, CSSValuePool::singleton().createIdentifierValue(CSSValueRow));
+ if (!gridAutoFlow)
</ins><span class="cx"> return false;
</span><del>- if (m_valueList->current()) {
- if (!isForwardSlashOperator(*m_valueList->current()) || !m_valueList->next())
</del><ins>+ if (!m_valueList->current())
+ return false;
+ if (isForwardSlashOperator(*m_valueList->current()))
+ autoRowsValue = CSSValuePool::singleton().createImplicitInitialValue();
+ else {
+ autoRowsValue = parseGridTrackList(GridAuto);
+ if (!autoRowsValue)
</ins><span class="cx"> return false;
</span><ins>+ if (!(m_valueList->current() && isForwardSlashOperator(*m_valueList->current())))
+ return false;
+ }
+ if (!m_valueList->next())
+ return false;
+ templateColumns = parseGridTrackList(GridTemplate);
+ if (!templateColumns)
+ return false;
+ templateRows = CSSValuePool::singleton().createImplicitInitialValue();
+ autoColumnsValue = CSSValuePool::singleton().createImplicitInitialValue();
+ } else {
+ // 3- <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?
+ templateRows = parseGridTrackList(GridTemplate);
+ if (!templateRows)
+ return false;
+ if (!(m_valueList->current() && isForwardSlashOperator(*m_valueList->current())))
+ return false;
+ if (!m_valueList->next())
+ return false;
+ gridAutoFlow = parseImplicitAutoFlow(*m_valueList, CSSValuePool::singleton().createIdentifierValue(CSSValueColumn));
+ if (!gridAutoFlow)
+ return false;
+ if (!m_valueList->current())
+ autoColumnsValue = CSSValuePool::singleton().createImplicitInitialValue();
+ else {
</ins><span class="cx"> autoColumnsValue = parseGridTrackList(GridAuto);
</span><span class="cx"> if (!autoColumnsValue)
</span><span class="cx"> return false;
</span><span class="cx"> }
</span><del>- if (m_valueList->current())
- return false;
- } else {
- // Other omitted values are set to their initial values.
- autoColumnsValue = CSSValuePool::singleton().createImplicitInitialValue();
</del><ins>+ templateColumns = CSSValuePool::singleton().createImplicitInitialValue();
</ins><span class="cx"> autoRowsValue = CSSValuePool::singleton().createImplicitInitialValue();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // if <grid-auto-rows> value is omitted, it is set to the value specified for grid-auto-columns.
- if (!autoColumnsValue)
- autoColumnsValue = autoRowsValue;
</del><ins>+ if (m_valueList->current())
+ return false;
</ins><span class="cx">
</span><del>- addProperty(CSSPropertyGridAutoColumns, autoColumnsValue.releaseNonNull(), important);
- addProperty(CSSPropertyGridAutoRows, autoRowsValue.releaseNonNull(), important);
-
</del><span class="cx"> // It can only be specified the explicit or the implicit grid properties in a single grid declaration.
</span><span class="cx"> // The sub-properties not specified are set to their initial value, as normal for shorthands.
</span><del>- addProperty(CSSPropertyGridTemplateColumns, CSSValuePool::singleton().createImplicitInitialValue(), important);
- addProperty(CSSPropertyGridTemplateRows, CSSValuePool::singleton().createImplicitInitialValue(), important);
</del><ins>+ addProperty(CSSPropertyGridTemplateColumns, templateColumns.releaseNonNull(), important);
+ addProperty(CSSPropertyGridTemplateRows, templateRows.releaseNonNull(), important);
</ins><span class="cx"> addProperty(CSSPropertyGridTemplateAreas, CSSValuePool::singleton().createImplicitInitialValue(), important);
</span><ins>+ addProperty(CSSPropertyGridAutoFlow, gridAutoFlow.releaseNonNull(), important);
+ addProperty(CSSPropertyGridAutoColumns, autoColumnsValue.releaseNonNull(), important);
+ addProperty(CSSPropertyGridAutoRows, autoRowsValue.releaseNonNull(), important);
</ins><span class="cx"> addProperty(CSSPropertyGridColumnGap, CSSValuePool::singleton().createImplicitInitialValue(), important);
</span><span class="cx"> addProperty(CSSPropertyGridRowGap, CSSValuePool::singleton().createImplicitInitialValue(), important);
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>