<!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>[169349] 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/169349">169349</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2014-05-26 09:25:25 -0700 (Mon, 26 May 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>[CSS Grid Layout] Implementation of the "grid" shorthand.
https://bugs.webkit.org/show_bug.cgi?id=132122
Patch by Javier Fernandez <jfernandez@igalia.com> on 2014-05-26
Reviewed by Darin Adler.
Source/WebCore:
The grid property is a shorthand that sets all of the explicit
grid properties (grid-template-rows, grid-template-columns, and
grid-template-areas) as well as all the implicit grid properties
(grid-auto-rows, grid-auto-columns, and grid-auto-flow) in a
single declaration
Notice that either explicit or implicit grid can be specified,
assigning the initial values to the omitted properties.
Test: fast/css-grid-layout/grid-shorthand-get-set.html
* css/CSSComputedStyleDeclaration.cpp:
(WebCore::ComputedStyleExtractor::propertyValue):
* css/CSSParser.cpp:
(WebCore::CSSParser::parseValue):
(WebCore::CSSParser::parseGridShorthand):
* css/CSSParser.h:
* css/CSSPropertyNames.in:
* css/StylePropertyShorthand.cpp:
(WebCore::webkitGridShorthand):
* css/StylePropertyShorthand.h:
LayoutTests:
Layout Test for the basic functionality of the 'grid' shorthand. It was
also added a new javascript file with some utility functions.
* fast/css-grid-layout/grid-shorthand-get-set-expected.txt: Added.
* fast/css-grid-layout/grid-shorthand-get-set.html: Added.
* fast/css-grid-layout/resources/grid-shorthand-parsing-utils.js: Added.
(testGridDefinitionsValues):
(testGridDefinitionsSetJSValues):
(testNonGridDefinitionsSetJSValues):
(checkGridDefinitionsSetJSValues):
(testGridDefinitionsSetBadJSValues):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</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="#trunkSourceWebCorecssStylePropertiescpp">trunk/Source/WebCore/css/StyleProperties.cpp</a></li>
<li><a href="#trunkSourceWebCorecssStylePropertyShorthandcpp">trunk/Source/WebCore/css/StylePropertyShorthand.cpp</a></li>
<li><a href="#trunkSourceWebCorecssStylePropertyShorthandh">trunk/Source/WebCore/css/StylePropertyShorthand.h</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<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="#trunkLayoutTestsfastcssgridlayoutresourcesgridshorthandparsingutilsjs">trunk/LayoutTests/fast/css-grid-layout/resources/grid-shorthand-parsing-utils.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (169348 => 169349)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-05-26 16:11:41 UTC (rev 169348)
+++ trunk/LayoutTests/ChangeLog 2014-05-26 16:25:25 UTC (rev 169349)
</span><span class="lines">@@ -1,3 +1,22 @@
</span><ins>+2014-05-26 Javier Fernandez <jfernandez@igalia.com>
+
+ [CSS Grid Layout] Implementation of the "grid" shorthand.
+ https://bugs.webkit.org/show_bug.cgi?id=132122
+
+ Reviewed by Darin Adler.
+
+ Layout Test for the basic functionality of the 'grid' shorthand. It was
+ also added a new javascript file with some utility functions.
+
+ * fast/css-grid-layout/grid-shorthand-get-set-expected.txt: Added.
+ * fast/css-grid-layout/grid-shorthand-get-set.html: Added.
+ * fast/css-grid-layout/resources/grid-shorthand-parsing-utils.js: Added.
+ (testGridDefinitionsValues):
+ (testGridDefinitionsSetJSValues):
+ (testNonGridDefinitionsSetJSValues):
+ (checkGridDefinitionsSetJSValues):
+ (testGridDefinitionsSetBadJSValues):
+
</ins><span class="cx"> 2014-05-26 Michał Pakuła vel Rutka <m.pakula@samsung.com>
</span><span class="cx">
</span><span class="cx"> Unreviewed EFL gardening
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridshorthandgetsetexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt (0 => 169349)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt 2014-05-26 16:25:25 UTC (rev 169349)
</span><span class="lines">@@ -0,0 +1,222 @@
</span><ins>+This test checks that the 'grid' shorthand is properly parsed and the longhand properties correctly assigned.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Test getting the longhand values when shorthand is set through CSS.
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-template-columns') is "15px"
+PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-rows') is "20px"
+PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-flow') is "column"
+PASS window.getComputedStyle(gridWithAutoFlowAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-rows') is "20px"
+
+Test setting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'none')
+PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+
+Test getting and setting 'grid' shorthand through JS
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
+PASS element.style.webkitGridTemplateColumns is "10px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "20px"
+PASS element.style.webkitGridTemplateRows is "20px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS element.style.webkitGridTemplateAreas is "none"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS element.style.webkitGridAutoFlow is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS element.style.webkitGridAutoColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS element.style.webkitGridAutoRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
+PASS element.style.webkitGridTemplateColumns is "10px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "(line) 20px"
+PASS element.style.webkitGridTemplateRows is "(line) 20px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
+PASS element.style.webkitGridTemplateAreas is "\"a\""
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS element.style.webkitGridAutoFlow is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS element.style.webkitGridAutoColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS element.style.webkitGridAutoRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS element.style.webkitGridTemplateColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS element.style.webkitGridTemplateRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS element.style.webkitGridTemplateAreas is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
+PASS element.style.webkitGridAutoFlow is "row"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "20px"
+PASS element.style.webkitGridAutoColumns is "20px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is "20px"
+PASS element.style.webkitGridAutoRows is "20px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS element.style.webkitGridTemplateColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS element.style.webkitGridTemplateRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS element.style.webkitGridTemplateAreas is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "column"
+PASS element.style.webkitGridAutoFlow is "column"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "20px"
+PASS element.style.webkitGridAutoColumns is "20px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
+PASS element.style.webkitGridAutoRows is "10px"
+
+Test the initial value
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is 'auto'
+
+Test setting grid-template-columns and grid-template-rows back to 'none' through JS
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS element.style.webkitGridTemplateColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS element.style.webkitGridTemplateRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS element.style.webkitGridTemplateAreas is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "column"
+PASS element.style.webkitGridAutoFlow is "column"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
+PASS element.style.webkitGridAutoColumns is "10px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is "20px"
+PASS element.style.webkitGridAutoRows is "20px"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS element.style.webkitGridTemplateColumns is "none"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS element.style.webkitGridTemplateRows is "none"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS element.style.webkitGridTemplateAreas is "none"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS element.style.webkitGridAutoFlow is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS element.style.webkitGridAutoColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS element.style.webkitGridAutoRows is "initial"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridshorthandgetsethtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html (0 => 169349)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html 2014-05-26 16:25:25 UTC (rev 169349)
</span><span class="lines">@@ -0,0 +1,152 @@
</span><ins>+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<head>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+#gridWithNone {
+ -webkit-grid: none;
+}
+#gridWithTemplate {
+ -webkit-grid: 15px / 10px;
+}
+#gridWithTemplate1 {
+ -webkit-grid: none / 10px;
+}
+#gridWithAutoFlowNoneAndColumnsAndRows {
+ -webkit-grid: none 10px / 20px;
+}
+#gridWithAutoFlowAndColumns {
+ -webkit-grid: row 10px;
+}
+#gridWithAutoFlowNone {
+ -webkit-grid: none 10px;
+}
+#gridWithAutoFlowAndColumnsAndRows {
+ -webkit-grid: column 10px / 20px;
+}
+
+/* Bad values. */
+
+#gridWithExplicitAndImplicit {
+ -webkit-grid: 10px / 20px column;
+}
+#gridWithMisplacedNone1 {
+ -webkit-grid: column 10px / none 20px;
+}
+#gridWithMisplacedNone2 {
+ -webkit-grid: 10px / 20px none;
+}
+#gridWithWrongSlash1 {
+ -webkit-grid: column / 10px;
+}
+#gridWithWrongSlash2 {
+ -webkit-grid: column 10px 20px;
+}
+#gridWithWrongSlash3 {
+ -webkit-grid: 5x / 10px / 20px;
+}
+#gridWithAutoFlowRowAndColumn {
+ -webkit-grid: row column 10px;
+}
+#gridWithoutAutoFlowAndExtraBreath {
+ -webkit-grid: row 10px / 20px 30px;
+}
+#gridWithAutoFlowString1 {
+ -webkit-grid: row 10px "a";
+}
+#gridWithAutoFlowString2 {
+ -webkit-grid: row "a" 10px;
+}
+#gridWithAutoFlowString3 {
+ -webkit-grid: row "a";
+}
+#gridWithTemplateAndAutoFlow {
+ -webkit-grid: 10px / 10px row;
+}
+#gridWithTemplateAndMisplacedString1 {
+ -webkit-grid: 10px / 10px "a";
+}
+</style>
+<script src="../../resources/js-test.js"></script>
+</head>
+<body>
+<div class="grid" id="gridWithNone"></div>
+<div class="grid" id="gridWithTemplate"></div>
+<div class="grid" id="gridWithTemplate1"></div>
+<div class="grid" id="gridWithAutoFlowNoneAndColumnsAndRows"></div>
+<div class="grid" id="gridWithAutoFlowAndColumns"></div>
+<div class="grid" id="gridWithAutoFlowNone"></div>
+<div class="grid" id="gridWithAutoFlowAndColumnsAndRows"></div>
+<div class="grid" id="gridWithExplicitAndImplicit"></div>
+<div class="grid" id="gridWithMisplacedNone1"></div>
+<div class="grid" id="gridWithMisplacedNone2"></div>
+<div class="grid" id="gridWithWrongSlash1"></div>
+<div class="grid" id="gridWithWrongSlash2"></div>
+<div class="grid" id="gridWithWrongSlash3"></div>
+<div class="grid" id="gridWithAutoFlowRowAndColumn"></div>
+<div class="grid" id="gridWithoutAutoFlowAndExtraBreath"></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>
+<script src="resources/grid-shorthand-parsing-utils.js"></script>
+<script>
+ description("This test checks that the 'grid' shorthand is properly parsed and the longhand properties correctly assigned.");
+
+ debug("Test getting the longhand values when shorthand is set through CSS.");
+ testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", "none", "none", "none", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px", "10px", "none", "none", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithTemplate1"), "none", "10px", "none", "none", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNoneAndColumnsAndRows"), "none", "none", "none", "none", "10px", "20px");
+ testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumns"), "none", "none", "none", "row", "10px", "10px");
+ testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), "none", "none", "none", "none", "10px", "10px");
+ testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumnsAndRows"), "none", "none", "none", "column", "10px", "20px");
+
+ debug("");
+ debug("Test setting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'none')");
+ testGridDefinitionsValues(document.getElementById("gridWithExplicitAndImplicit"), "none", "none", "none", "none", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"), "none", "none", "none", "none", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"), "none", "none", "none", "none", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithWrongSlash1"), "none", "none", "none", "none", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithWrongSlash2"), "none", "none", "none", "none", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithWrongSlash3"), "none", "none", "none", "none", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithAutoFlowRowAndColumn"), "none", "none", "none", "none", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithoutAutoFlowAndExtraBreath"), "none", "none", "none", "none", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithAutoFlowString1"), "none", "none", "none", "none", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithAutoFlowString2"), "none", "none", "none", "none", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithAutoFlowString3"), "none", "none", "none", "none", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithTemplateAndAutoFlow"), "none", "none", "none", "none", "auto", "auto");
+ testGridDefinitionsValues(document.getElementById("gridWithTemplateAndMisplacedString1"), "none", "none", "none", "none", "auto", "auto");
+
+ debug("");
+ debug("Test getting and setting 'grid' shorthand through JS");
+ testGridDefinitionsSetJSValues("10px / 20px", "10px", "20px", "none", "none", "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial");
+ testGridDefinitionsSetJSValues("10px / (line) 'a' 20px", "10px", "(line) 20px", "\"a\"", "none", "auto", "auto", "10px", "(line) 20px", "\"a\"", "initial", "initial", "initial");
+ testGridDefinitionsSetJSValues("row 20px", "none", "none", "none", "row", "20px", "20px", "initial", "initial", "initial", "row", "20px", "20px");
+ testGridDefinitionsSetJSValues("column 20px / 10px", "none", "none", "none", "column", "20px", "10px", "initial", "initial", "initial", "column", "20px", "10px");
+
+ debug("");
+ debug("Test the initial value");
+ var element = document.createElement("div");
+ document.body.appendChild(element);
+ testGridDefinitionsValues(element, "none", "none", "none", "none", "auto", "auto");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'none'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'none'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas')", "'none'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'none'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'auto'");
+
+ debug("");
+ debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
+ testGridDefinitionsSetJSValues("column 10px / 20px", "none", "none", "none", "column", "10px", "20px", "initial", "initial", "initial", "column", "10px", "20px");
+ testGridDefinitionsSetJSValues("none", "none", "none", "none", "none", "auto", "auto", "none", "none", "none", "initial", "initial", "initial");
+
+</script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridshorthandparsingutilsjs"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/resources/grid-shorthand-parsing-utils.js (0 => 169349)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-shorthand-parsing-utils.js (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-shorthand-parsing-utils.js 2014-05-26 16:25:25 UTC (rev 169349)
</span><span class="lines">@@ -0,0 +1,57 @@
</span><ins>+function testGridDefinitionsValues(element, columnsValue, rowsValue, areasValue, autoFlowValue, autoColumnsValue, autoRowsValue)
+{
+ window.element = element;
+ var elementID = element.id || "element";
+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-template-columns')", columnsValue);
+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-template-rows')", rowsValue);
+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-template-areas')", areasValue);
+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-auto-flow')", autoFlowValue);
+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-auto-columns')", autoColumnsValue);
+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-auto-rows')", autoRowsValue);
+}
+
+function testGridDefinitionsSetJSValues(shorthandValue, computedColumnsValue, computedRowsValue, computedAreasValue, computedAutoFlowValue, computedAutoColumnsValue, computedAutoRowsValue, jsColumnsValue, jsRowsValue, jsAreasValue, jsAutoFlowValue, jsAutoColumnsValue, jsAutoRowsValue)
+{
+ checkGridDefinitionsSetJSValues(true, shorthandValue, computedColumnsValue, computedRowsValue, computedAreasValue, computedAutoFlowValue, computedAutoColumnsValue, computedAutoRowsValue, jsColumnsValue, jsRowsValue, jsAreasValue, jsAutoFlowValue, jsAutoColumnsValue, jsAutoRowsValue);
+}
+
+function testNonGridDefinitionsSetJSValues(shorthandValue, computedColumnsValue, computedRowsValue, computedAreasValue, computedAutoFlowValue, computedAutoColumnsValue, computedAutoRowsValue, jsColumnsValue, jsRowsValue, jsAreasValue, jsAutoFlowValue, jsAutoColumnsValue, jsAutoRowValue)
+{
+ checkGridDefinitionsSetJSValues(false, shorthandValue, computedColumnsValue, computedRowsValue, computedAreasValue, computedAutoFlowValue, computedAutoColumnsValue, computedAutoRowsValue, jsColumnsValue, jsRowsValue, jsAreasValue, jsAutoFlowValue, jsAutoColumnsValue, jsAutoRowValue);
+}
+
+function checkGridDefinitionsSetJSValues(useGrid, shorthandValue, computedColumnsValue, computedRowsValue, computedAreasValue, computedAutoFlowValue, computedAutoColumnsValue, computedAutoRowsValue, jsColumnsValue, jsRowsValue, jsAreasValue, jsAutoFlowValue, jsAutoColumnsValue, jsAutoRowsValue)
+{
+ window.element = document.createElement("div");
+ document.body.appendChild(element);
+ if (useGrid) {
+ element.style.display = "-webkit-grid";
+ element.style.width = "800px";
+ element.style.height = "600px";
+ }
+ element.style.font = "10px Ahem"; // Used to resolve em font consistently.
+ element.style.webkitGrid = shorthandValue;
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", computedColumnsValue);
+ shouldBeEqualToString("element.style.webkitGridTemplateColumns", jsColumnsValue || computedColumnsValue);
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", computedRowsValue);
+ shouldBeEqualToString("element.style.webkitGridTemplateRows", jsRowsValue || computedRowsValue);
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas')", computedAreasValue);
+ shouldBeEqualToString("element.style.webkitGridTemplateAreas", jsAreasValue || computedAreasValue);
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", computedAutoFlowValue);
+ shouldBeEqualToString("element.style.webkitGridAutoFlow", jsAutoFlowValue || computedAutoFlowValue);
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", computedAutoColumnsValue);
+ shouldBeEqualToString("element.style.webkitGridAutoColumns", jsAutoColumnsValue || computedAutoColumnsValue);
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", computedAutoRowsValue);
+ shouldBeEqualToString("element.style.webkitGridAutoRows", jsAutoRowsValue || computedAutoRowsValue);
+ document.body.removeChild(element);
+}
+
+function testGridDefinitionsSetBadJSValues(shorthandValue)
+{
+ window.element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.webkitGrid = shorthandValue;
+ // We can't use testSetJSValues as element.style.webkitGridTemplateRows returns "".
+ testGridDefinitionsValues(element, "none", "none", "none");
+ document.body.removeChild(element);
+}
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (169348 => 169349)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2014-05-26 16:11:41 UTC (rev 169348)
+++ trunk/Source/WebCore/ChangeLog 2014-05-26 16:25:25 UTC (rev 169349)
</span><span class="lines">@@ -1,3 +1,32 @@
</span><ins>+2014-05-26 Javier Fernandez <jfernandez@igalia.com>
+
+ [CSS Grid Layout] Implementation of the "grid" shorthand.
+ https://bugs.webkit.org/show_bug.cgi?id=132122
+
+ Reviewed by Darin Adler.
+
+ The grid property is a shorthand that sets all of the explicit
+ grid properties (grid-template-rows, grid-template-columns, and
+ grid-template-areas) as well as all the implicit grid properties
+ (grid-auto-rows, grid-auto-columns, and grid-auto-flow) in a
+ single declaration
+
+ Notice that either explicit or implicit grid can be specified,
+ assigning the initial values to the omitted properties.
+
+ Test: fast/css-grid-layout/grid-shorthand-get-set.html
+
+ * css/CSSComputedStyleDeclaration.cpp:
+ (WebCore::ComputedStyleExtractor::propertyValue):
+ * css/CSSParser.cpp:
+ (WebCore::CSSParser::parseValue):
+ (WebCore::CSSParser::parseGridShorthand):
+ * css/CSSParser.h:
+ * css/CSSPropertyNames.in:
+ * css/StylePropertyShorthand.cpp:
+ (WebCore::webkitGridShorthand):
+ * css/StylePropertyShorthand.h:
+
</ins><span class="cx"> 2014-05-26 Zalan Bujtas <zalan@apple.com>
</span><span class="cx">
</span><span class="cx"> Subpixel layout: Legacy Element.offset* client* return values are invalid in certain cases.
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSComputedStyleDeclarationcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (169348 => 169349)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2014-05-26 16:11:41 UTC (rev 169348)
+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2014-05-26 16:25:25 UTC (rev 169349)
</span><span class="lines">@@ -2084,6 +2084,8 @@
</span><span class="cx"> return getCSSPropertyValuesForGridShorthand(webkitGridAreaShorthand());
</span><span class="cx"> case CSSPropertyWebkitGridTemplate:
</span><span class="cx"> return getCSSPropertyValuesForGridShorthand(webkitGridTemplateShorthand());
</span><ins>+ case CSSPropertyWebkitGrid:
+ return getCSSPropertyValuesForGridShorthand(webkitGridShorthand());
</ins><span class="cx"> case CSSPropertyWebkitGridColumn:
</span><span class="cx"> return getCSSPropertyValuesForGridShorthand(webkitGridColumnShorthand());
</span><span class="cx"> case CSSPropertyWebkitGridRow:
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSParser.cpp (169348 => 169349)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSParser.cpp 2014-05-26 16:11:41 UTC (rev 169348)
+++ trunk/Source/WebCore/css/CSSParser.cpp 2014-05-26 16:25:25 UTC (rev 169349)
</span><span class="lines">@@ -2585,6 +2585,9 @@
</span><span class="cx"> case CSSPropertyWebkitGridTemplate:
</span><span class="cx"> return parseGridTemplateShorthand(important);
</span><span class="cx">
</span><ins>+ case CSSPropertyWebkitGrid:
+ return parseGridShorthand(important);
+
</ins><span class="cx"> case CSSPropertyWebkitGridArea:
</span><span class="cx"> return parseGridAreaShorthand(important);
</span><span class="cx">
</span><span class="lines">@@ -4887,6 +4890,69 @@
</span><span class="cx"> return parseGridTemplateRowsAndAreas(columnsValue, important);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+bool CSSParser::parseGridShorthand(bool important)
+{
+ ShorthandScope scope(this, CSSPropertyWebkitGrid);
+ ASSERT(shorthandForProperty(CSSPropertyWebkitGrid).length() == 6);
+
+ // 1- <grid-template>
+ if (parseGridTemplateShorthand(important)) {
+ // It can only be specified the explicit or the implicit grid properties in a single grid declaration.
+ // The sub-properties not specified are set to their initial value, as normal for shorthands.
+ addProperty(CSSPropertyWebkitGridAutoFlow, cssValuePool().createImplicitInitialValue(), important);
+ addProperty(CSSPropertyWebkitGridAutoColumns, cssValuePool().createImplicitInitialValue(), important);
+ addProperty(CSSPropertyWebkitGridAutoRows, cssValuePool().createImplicitInitialValue(), important);
+ return true;
+ }
+
+ // Need to rewind parsing to explore the alternative syntax of this shorthand.
+ m_valueList->setCurrentIndex(0);
+
+ // 2- <grid-auto-flow> [ <grid-auto-columns> [ / <grid-auto-rows> ]? ]
+ CSSValueID id = m_valueList->current()->id;
+ if (id != CSSValueRow && id != CSSValueColumn && id != CSSValueNone)
+ return false;
+
+ RefPtr<CSSValue> autoFlowValue = cssValuePool().createIdentifierValue(id);
+ RefPtr<CSSValue> autoColumnsValue;
+ RefPtr<CSSValue> autoRowsValue;
+
+ if (m_valueList->next()) {
+ autoColumnsValue = parseGridTrackSize(*m_valueList);
+ if (!autoColumnsValue)
+ return false;
+ if (m_valueList->current()) {
+ if (!isForwardSlashOperator(m_valueList->current()) || !m_valueList->next())
+ return false;
+ autoRowsValue = parseGridTrackSize(*m_valueList);
+ if (!autoRowsValue)
+ return false;
+ }
+ if (m_valueList->current())
+ return false;
+ } else {
+ // Other omitted values are set to their initial values.
+ autoColumnsValue = cssValuePool().createImplicitInitialValue();
+ autoRowsValue = cssValuePool().createImplicitInitialValue();
+ }
+
+ // if <grid-auto-rows> value is omitted, it is set to the value specified for grid-auto-columns.
+ if (!autoRowsValue)
+ autoRowsValue = autoColumnsValue;
+
+ addProperty(CSSPropertyWebkitGridAutoFlow, autoFlowValue.release(), important);
+ addProperty(CSSPropertyWebkitGridAutoColumns, autoColumnsValue.release(), important);
+ addProperty(CSSPropertyWebkitGridAutoRows, autoRowsValue.release(), important);
+
+ // It can only be specified the explicit or the implicit grid properties in a single grid declaration.
+ // The sub-properties not specified are set to their initial value, as normal for shorthands.
+ addProperty(CSSPropertyWebkitGridTemplateColumns, cssValuePool().createImplicitInitialValue(), important);
+ addProperty(CSSPropertyWebkitGridTemplateRows, cssValuePool().createImplicitInitialValue(), important);
+ addProperty(CSSPropertyWebkitGridTemplateAreas, cssValuePool().createImplicitInitialValue(), important);
+
+ return true;
+}
+
</ins><span class="cx"> bool CSSParser::parseGridAreaShorthand(bool important)
</span><span class="cx"> {
</span><span class="cx"> ShorthandScope scope(this, CSSPropertyWebkitGridArea);
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSParserh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSParser.h (169348 => 169349)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSParser.h 2014-05-26 16:11:41 UTC (rev 169348)
+++ trunk/Source/WebCore/css/CSSParser.h 2014-05-26 16:25:25 UTC (rev 169349)
</span><span class="lines">@@ -162,6 +162,7 @@
</span><span class="cx"> bool parseGridItemPositionShorthand(CSSPropertyID, bool important);
</span><span class="cx"> bool parseGridTemplateRowsAndAreas(PassRefPtr<CSSValue>, bool important);
</span><span class="cx"> bool parseGridTemplateShorthand(bool important);
</span><ins>+ bool parseGridShorthand(bool important);
</ins><span class="cx"> bool parseGridAreaShorthand(bool important);
</span><span class="cx"> bool parseSingleGridAreaLonghand(RefPtr<CSSValue>&);
</span><span class="cx"> PassRefPtr<CSSValue> parseGridTrackList();
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSPropertyNamesin"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSPropertyNames.in (169348 => 169349)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSPropertyNames.in 2014-05-26 16:11:41 UTC (rev 169348)
+++ trunk/Source/WebCore/css/CSSPropertyNames.in 2014-05-26 16:25:25 UTC (rev 169349)
</span><span class="lines">@@ -305,6 +305,7 @@
</span><span class="cx"> -webkit-justify-content
</span><span class="cx"> -webkit-font-size-delta
</span><span class="cx"> #if defined(ENABLE_CSS_GRID_LAYOUT) && ENABLE_CSS_GRID_LAYOUT
</span><ins>+-webkit-grid
</ins><span class="cx"> -webkit-grid-area
</span><span class="cx"> -webkit-grid-auto-columns
</span><span class="cx"> -webkit-grid-auto-rows
</span></span></pre></div>
<a id="trunkSourceWebCorecssStylePropertiescpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleProperties.cpp (169348 => 169349)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleProperties.cpp 2014-05-26 16:11:41 UTC (rev 169348)
+++ trunk/Source/WebCore/css/StyleProperties.cpp 2014-05-26 16:25:25 UTC (rev 169349)
</span><span class="lines">@@ -162,6 +162,8 @@
</span><span class="cx"> return getShorthandValue(webkitGridAreaShorthand());
</span><span class="cx"> case CSSPropertyWebkitGridTemplate:
</span><span class="cx"> return getShorthandValue(webkitGridTemplateShorthand());
</span><ins>+ case CSSPropertyWebkitGrid:
+ return getShorthandValue(webkitGridShorthand());
</ins><span class="cx"> case CSSPropertyWebkitGridColumn:
</span><span class="cx"> return getShorthandValue(webkitGridColumnShorthand());
</span><span class="cx"> case CSSPropertyWebkitGridRow:
</span></span></pre></div>
<a id="trunkSourceWebCorecssStylePropertyShorthandcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StylePropertyShorthand.cpp (169348 => 169349)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StylePropertyShorthand.cpp 2014-05-26 16:11:41 UTC (rev 169348)
+++ trunk/Source/WebCore/css/StylePropertyShorthand.cpp 2014-05-26 16:25:25 UTC (rev 169349)
</span><span class="lines">@@ -352,6 +352,19 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span><ins>+StylePropertyShorthand webkitGridShorthand()
+{
+ static const CSSPropertyID webkitGridProperties[] = {
+ CSSPropertyWebkitGridTemplateColumns,
+ CSSPropertyWebkitGridTemplateRows,
+ CSSPropertyWebkitGridTemplateAreas,
+ CSSPropertyWebkitGridAutoFlow,
+ CSSPropertyWebkitGridAutoColumns,
+ CSSPropertyWebkitGridAutoRows
+ };
+ return StylePropertyShorthand(CSSPropertyWebkitGrid, webkitGridProperties, WTF_ARRAY_LENGTH(webkitGridProperties));
+}
+
</ins><span class="cx"> StylePropertyShorthand webkitGridTemplateShorthand()
</span><span class="cx"> {
</span><span class="cx"> static const CSSPropertyID webkitGridTemplateProperties[] = {
</span><span class="lines">@@ -569,6 +582,8 @@
</span><span class="cx"> return webkitGridAreaShorthand();
</span><span class="cx"> case CSSPropertyWebkitGridTemplate:
</span><span class="cx"> return webkitGridTemplateShorthand();
</span><ins>+ case CSSPropertyWebkitGrid:
+ return webkitGridShorthand();
</ins><span class="cx"> case CSSPropertyWebkitGridColumn:
</span><span class="cx"> return webkitGridColumnShorthand();
</span><span class="cx"> case CSSPropertyWebkitGridRow:
</span><span class="lines">@@ -772,7 +787,11 @@
</span><span class="cx"> case CSSPropertyWebkitGridTemplateColumns:
</span><span class="cx"> case CSSPropertyWebkitGridTemplateRows:
</span><span class="cx"> case CSSPropertyWebkitGridTemplateAreas:
</span><del>- return makeVector(webkitGridTemplateShorthand());
</del><ins>+ return makeVector(webkitGridTemplateShorthand(), webkitGridShorthand());
+ case CSSPropertyWebkitGridAutoFlow:
+ case CSSPropertyWebkitGridAutoColumns:
+ case CSSPropertyWebkitGridAutoRows:
+ return makeVector(webkitGridShorthand());
</ins><span class="cx"> #endif
</span><span class="cx"> case CSSPropertyWebkitMarginBeforeCollapse:
</span><span class="cx"> case CSSPropertyWebkitMarginAfterCollapse:
</span></span></pre></div>
<a id="trunkSourceWebCorecssStylePropertyShorthandh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StylePropertyShorthand.h (169348 => 169349)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StylePropertyShorthand.h 2014-05-26 16:11:41 UTC (rev 169348)
+++ trunk/Source/WebCore/css/StylePropertyShorthand.h 2014-05-26 16:25:25 UTC (rev 169349)
</span><span class="lines">@@ -99,6 +99,7 @@
</span><span class="cx"> StylePropertyShorthand webkitColumnRuleShorthand();
</span><span class="cx"> StylePropertyShorthand webkitFlexFlowShorthand();
</span><span class="cx"> StylePropertyShorthand webkitFlexShorthand();
</span><ins>+StylePropertyShorthand webkitGridShorthand();
</ins><span class="cx"> StylePropertyShorthand webkitGridTemplateShorthand();
</span><span class="cx"> StylePropertyShorthand webkitGridAreaShorthand();
</span><span class="cx"> StylePropertyShorthand webkitGridColumnShorthand();
</span></span></pre>
</div>
</div>
</body>
</html>