<!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>[201498] 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/201498">201498</a></dd>
<dt>Author</dt> <dd>jfernandez@igalia.com</dd>
<dt>Date</dt> <dd>2016-05-30 01:14:31 -0700 (Mon, 30 May 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[CSS Box Alignment] New CSS Value 'normal' for Self Alignment
https://bugs.webkit.org/show_bug.cgi?id=156254
Reviewed by Darin Adler.
Source/WebCore:
The Box Alignment specification defines a new value 'normal' to be used
as default for the different layout models, which will define the
specific behavior for each case. This patch adds a new CSS value in the
parsing logic and adapts the Self Alignment properties to the new
value.
The 'auto' value is no longer valid for the 'align-items' property and
the Computed Value will be always the specified value. Hence, I removed
the StyleResolver logic because is not required now; the specific
behavior of the 'normal' value will be resolved at layout time.
Additionally, this patch updates the layout logic as well, for both
Flexbox and Grid layout models.
Test: css3/parse-alignment-of-root-elements.html
* css/CSSComputedStyleDeclaration.cpp:
(WebCore::resolveLegacyJustifyItems): Added.
(WebCore::resolveJustifyItemsAuto): Added.
(WebCore::resolveJustifySelfAuto): Added.
(WebCore::resolveAlignSelfAuto): Added.
(WebCore::valueForItemPositionWithOverflowAlignment): Using a StyleSelfAlignmentData argument.
(WebCore::ComputedStyleExtractor::propertyValue): Using the new resolving functions.
* css/CSSParser.cpp:
(WebCore::CSSParser::parseItemPositionOverflowPosition): A new value 'normal' is now valid.
* css/CSSPrimitiveValueMappings.h:
(WebCore::CSSPrimitiveValue::CSSPrimitiveValue): Mappings for the new value 'normal'.
(WebCore::CSSPrimitiveValue::operator ItemPosition): Mappings for the new value 'normal'.
* css/CSSPropertyNames.in:
* css/StyleResolver.cpp:
(WebCore::StyleResolver::adjustRenderStyle): We don't need to resolve 'legacy" keyword.
* rendering/RenderBox.cpp:
(WebCore::flexItemHasStretchAlignment):
(WebCore::RenderBox::hasStretchedLogicalWidth):
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::styleDidChange):
(WebCore::RenderFlexibleBox::alignmentForChild):
(WebCore::contentAlignmentNormalBehaviorFlexibleBox):
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
(WebCore::RenderFlexibleBox::layoutColumnReverse):
(WebCore::RenderFlexibleBox::alignFlexLines):
(WebCore::RenderFlexibleBox::alignChildren):
* rendering/RenderGrid.cpp:
(WebCore::defaultAlignmentChangedToStretchInRowAxis):
(WebCore::defaultAlignmentChangedFromStretchInRowAxis):
(WebCore::defaultAlignmentChangedFromStretchInColumnAxis):
(WebCore::selfAlignmentChangedToStretchInRowAxis):
(WebCore::selfAlignmentChangedFromStretchInRowAxis):
(WebCore::selfAlignmentChangedFromStretchInColumnAxis):
(WebCore::contentAlignmentNormalBehaviorGrid):
(WebCore::RenderGrid::applyStretchAlignmentToTracksIfNeeded):
(WebCore::RenderGrid::needToStretchChildLogicalHeight):
(WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded):
(WebCore::RenderGrid::columnAxisPositionForChild):
(WebCore::RenderGrid::rowAxisPositionForChild):
(WebCore::RenderGrid::columnAxisOffsetForChild):
(WebCore::RenderGrid::rowAxisOffsetForChild):
(WebCore::RenderGrid::computeContentPositionAndDistributionOffset):
* rendering/style/RenderStyle.cpp:
(WebCore::resolvedSelfAlignment):
(WebCore::RenderStyle::resolvedAlignItems):
(WebCore::RenderStyle::resolvedAlignSelf):
(WebCore::RenderStyle::resolvedJustifyItems):
(WebCore::RenderStyle::resolvedJustifySelf):
* rendering/style/RenderStyle.h:
* rendering/style/RenderStyleConstants.h:
* rendering/style/StyleRareNonInheritedData.cpp:
(WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData): align-items uses now a different initial function.
LayoutTests:
Changes in the already defined tests for the alignment properties to
consider the new CSS value 'normal', which is the default for align-items
and the value to resolve 'auto' when there is no parent.
Added a new test to verify the Self-Alignment properties work as expected
with root elements.
* css3/flexbox/css-properties-expected.txt:
* css3/flexbox/css-properties.html:
* css3/parse-align-items-expected.txt:
* css3/parse-align-items.html:
* css3/parse-align-self-expected.txt:
* css3/parse-align-self.html:
* css3/parse-alignment-of-root-elements-expected.txt: Added.
* css3/parse-alignment-of-root-elements.html: Added.
* fast/css/getComputedStyle/computed-style-expected.txt:
* fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
* fast/css/parse-justify-items-expected.txt:
* fast/css/parse-justify-items.html:
* fast/css/parse-justify-self-expected.txt:
* fast/css/parse-justify-self.html:
* fast/css/resources/alignment-parsing-utils.js:
* svg/css/getComputedStyle-basic-expected.txt:
(checkBadValues):
* svg/css/getComputedStyle-basic-expected.txt:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestscss3flexboxcsspropertiesexpectedtxt">trunk/LayoutTests/css3/flexbox/css-properties-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3flexboxcsspropertieshtml">trunk/LayoutTests/css3/flexbox/css-properties.html</a></li>
<li><a href="#trunkLayoutTestscss3parsealignitemsexpectedtxt">trunk/LayoutTests/css3/parse-align-items-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3parsealignitemshtml">trunk/LayoutTests/css3/parse-align-items.html</a></li>
<li><a href="#trunkLayoutTestscss3parsealignselfexpectedtxt">trunk/LayoutTests/css3/parse-align-self-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3parsealignselfhtml">trunk/LayoutTests/css3/parse-align-self.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgetComputedStylecomputedstyleexpectedtxt">trunk/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgetComputedStylecomputedstylewithoutrendererexpectedtxt">trunk/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssparsejustifyitemsexpectedtxt">trunk/LayoutTests/fast/css/parse-justify-items-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssparsejustifyitemshtml">trunk/LayoutTests/fast/css/parse-justify-items.html</a></li>
<li><a href="#trunkLayoutTestsfastcssparsejustifyselfexpectedtxt">trunk/LayoutTests/fast/css/parse-justify-self-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssparsejustifyselfhtml">trunk/LayoutTests/fast/css/parse-justify-self.html</a></li>
<li><a href="#trunkLayoutTestsfastcssresourcesalignmentparsingutilsjs">trunk/LayoutTests/fast/css/resources/alignment-parsing-utils.js</a></li>
<li><a href="#trunkLayoutTestssvgcssgetComputedStylebasicexpectedtxt">trunk/LayoutTests/svg/css/getComputedStyle-basic-expected.txt</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="#trunkSourceWebCorecssCSSPrimitiveValueMappingsh">trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h</a></li>
<li><a href="#trunkSourceWebCorecssCSSPropertyNamesin">trunk/Source/WebCore/css/CSSPropertyNames.in</a></li>
<li><a href="#trunkSourceWebCorecssStyleResolvercpp">trunk/Source/WebCore/css/StyleResolver.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderBoxcpp">trunk/Source/WebCore/rendering/RenderBox.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderFlexibleBoxcpp">trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridcpp">trunk/Source/WebCore/rendering/RenderGrid.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleRenderStylecpp">trunk/Source/WebCore/rendering/style/RenderStyle.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleRenderStyleh">trunk/Source/WebCore/rendering/style/RenderStyle.h</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleRenderStyleConstantsh">trunk/Source/WebCore/rendering/style/RenderStyleConstants.h</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleStyleRareNonInheritedDatacpp">trunk/Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestscss3parsealignmentofrootelementsexpectedtxt">trunk/LayoutTests/css3/parse-alignment-of-root-elements-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3parsealignmentofrootelementshtml">trunk/LayoutTests/css3/parse-alignment-of-root-elements.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/LayoutTests/ChangeLog 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -1,3 +1,36 @@
</span><ins>+2016-05-30 Javier Fernandez <jfernandez@igalia.com>
+
+ [CSS Box Alignment] New CSS Value 'normal' for Self Alignment
+ https://bugs.webkit.org/show_bug.cgi?id=156254
+
+ Reviewed by Darin Adler.
+
+ Changes in the already defined tests for the alignment properties to
+ consider the new CSS value 'normal', which is the default for align-items
+ and the value to resolve 'auto' when there is no parent.
+
+ Added a new test to verify the Self-Alignment properties work as expected
+ with root elements.
+
+ * css3/flexbox/css-properties-expected.txt:
+ * css3/flexbox/css-properties.html:
+ * css3/parse-align-items-expected.txt:
+ * css3/parse-align-items.html:
+ * css3/parse-align-self-expected.txt:
+ * css3/parse-align-self.html:
+ * css3/parse-alignment-of-root-elements-expected.txt: Added.
+ * css3/parse-alignment-of-root-elements.html: Added.
+ * fast/css/getComputedStyle/computed-style-expected.txt:
+ * fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
+ * fast/css/parse-justify-items-expected.txt:
+ * fast/css/parse-justify-items.html:
+ * fast/css/parse-justify-self-expected.txt:
+ * fast/css/parse-justify-self.html:
+ * fast/css/resources/alignment-parsing-utils.js:
+ * svg/css/getComputedStyle-basic-expected.txt:
+ (checkBadValues):
+ * svg/css/getComputedStyle-basic-expected.txt:
+
</ins><span class="cx"> 2016-05-25 Skachkov Oleksandr <gskachkov@gmail.com>
</span><span class="cx">
</span><span class="cx"> [ESNext] Support trailing commas in function param lists
</span></span></pre></div>
<a id="trunkLayoutTestscss3flexboxcsspropertiesexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/css-properties-expected.txt (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/flexbox/css-properties-expected.txt 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/LayoutTests/css3/flexbox/css-properties-expected.txt 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -29,12 +29,12 @@
</span><span class="cx"> PASS flexbox.style.webkitJustifyContent is ""
</span><span class="cx"> PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "normal"
</span><span class="cx"> PASS flexbox.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "start"
-PASS window.getComputedStyle(document.documentElement, null).webkitAlignSelf is "start"
</del><ins>+PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "normal"
+PASS window.getComputedStyle(document.documentElement, null).webkitAlignSelf is "normal"
</ins><span class="cx"> PASS flexbox.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "start"
</del><ins>+PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "normal"
</ins><span class="cx"> PASS flexbox.style.webkitAlignSelf is "auto"
</span><del>-PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "start"
</del><ins>+PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "normal"
</ins><span class="cx"> PASS flexbox.style.webkitAlignSelf is "flex-start"
</span><span class="cx"> PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "flex-start"
</span><span class="cx"> PASS flexbox.style.webkitAlignSelf is "flex-end"
</span><span class="lines">@@ -46,19 +46,19 @@
</span><span class="cx"> PASS flexbox.style.webkitAlignSelf is "baseline"
</span><span class="cx"> PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "baseline"
</span><span class="cx"> PASS flexbox.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "start"
</del><ins>+PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "normal"
</ins><span class="cx"> PASS flexbox.style.webkitAlignItems is ""
</span><span class="cx"> PASS flexitem.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "stretch"
-PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "stretch"
</del><ins>+PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "normal"
+PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "normal"
</ins><span class="cx"> PASS flexbox.style.webkitAlignItems is ""
</span><span class="cx"> PASS flexitem.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "stretch"
-PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "stretch"
-PASS flexbox.style.webkitAlignItems is "auto"
</del><ins>+PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "normal"
+PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "normal"
+PASS flexbox.style.webkitAlignItems is ""
</ins><span class="cx"> PASS flexitem.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "stretch"
-PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "stretch"
</del><ins>+PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "normal"
+PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "normal"
</ins><span class="cx"> PASS flexbox.style.webkitAlignItems is "flex-start"
</span><span class="cx"> PASS flexitem.style.webkitAlignSelf is ""
</span><span class="cx"> PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "flex-start"
</span><span class="lines">@@ -76,11 +76,11 @@
</span><span class="cx"> PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "baseline"
</span><span class="cx"> PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "baseline"
</span><span class="cx"> PASS flexbox.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "stretch"
-PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "stretch"
</del><ins>+PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "normal"
+PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "normal"
</ins><span class="cx"> PASS flexbox.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "auto"
-PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "auto"
</del><ins>+PASS window.getComputedStyle(flexbox, null).webkitAlignItems is "normal"
+PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is "normal"
</ins><span class="cx"> PASS window.getComputedStyle(detachedFlexbox, null).webkitAlignSelf is ""
</span><span class="cx"> PASS window.getComputedStyle(detachedFlexItem, null).webkitAlignSelf is ""
</span><span class="cx"> PASS flexbox.style.webkitFlexDirection is ""
</span></span></pre></div>
<a id="trunkLayoutTestscss3flexboxcsspropertieshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/css-properties.html (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/flexbox/css-properties.html 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/LayoutTests/css3/flexbox/css-properties.html 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -82,16 +82,16 @@
</span><span class="cx">
</span><span class="cx"> shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
</span><span class="cx"> // The initial value is 'auto', which will be resolved depending on parent's style (except for the 'document' element).
</span><del>-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'start');
-shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).webkitAlignSelf', 'start');
</del><ins>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'normal');
+shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).webkitAlignSelf', 'normal');
</ins><span class="cx">
</span><span class="cx"> flexbox.style.webkitAlignSelf = 'foo';
</span><span class="cx"> shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
</span><del>-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'start');
</del><ins>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'normal');
</ins><span class="cx">
</span><span class="cx"> flexbox.style.webkitAlignSelf = 'auto';
</span><span class="cx"> shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'auto');
</span><del>-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'start');
</del><ins>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'normal');
</ins><span class="cx">
</span><span class="cx"> flexbox.style.webkitAlignSelf = 'flex-start';
</span><span class="cx"> shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-start');
</span><span class="lines">@@ -115,25 +115,26 @@
</span><span class="cx">
</span><span class="cx"> flexbox.style.webkitAlignSelf = '';
</span><span class="cx"> shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
</span><del>-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'start');
</del><ins>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'normal');
</ins><span class="cx">
</span><span class="cx"> shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
</span><span class="cx"> shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');
</span><del>-// The initial value is 'auto', which will be resolved to 'stretch' in case of flexbox containers.
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
-shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
</del><ins>+// The initial value is 'auto', which will be resolved to 'normal' in case of flexbox containers.
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'normal');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'normal');
</ins><span class="cx">
</span><span class="cx"> flexbox.style.webkitAlignItems = 'foo';
</span><span class="cx"> shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
</span><span class="cx"> shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');
</span><del>-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
-shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
</del><ins>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'normal');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'normal');
</ins><span class="cx">
</span><ins>+// The 'auto' value is not valid for the align-items property.
</ins><span class="cx"> flexbox.style.webkitAlignItems = 'auto';
</span><del>-shouldBeEqualToString('flexbox.style.webkitAlignItems', 'auto');
</del><ins>+shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
</ins><span class="cx"> shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');
</span><del>-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
-shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
</del><ins>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'normal');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'normal');
</ins><span class="cx">
</span><span class="cx"> flexbox.style.webkitAlignItems = 'flex-start';
</span><span class="cx"> shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-start');
</span><span class="lines">@@ -163,13 +164,13 @@
</span><span class="cx">
</span><span class="cx"> flexbox.style.webkitAlignItems = '';
</span><span class="cx"> shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
</span><del>-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
-shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
</del><ins>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'normal');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'normal');
</ins><span class="cx">
</span><span class="cx"> flexbox.style.display = 'none';
</span><span class="cx"> shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
</span><del>-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'auto');
-shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'auto');
</del><ins>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'normal');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'normal');
</ins><span class="cx"> flexbox.style.display = '';
</span><span class="cx">
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestscss3parsealignitemsexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/parse-align-items-expected.txt (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-align-items-expected.txt 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/LayoutTests/css3/parse-align-items-expected.txt 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -26,7 +26,7 @@
</span><span class="cx"> PASS getComputedStyle(alignItemsFlexEndSafe, '').getPropertyValue('-webkit-align-items') is 'flex-end safe'
</span><span class="cx">
</span><span class="cx"> Test initial value of align-items through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is 'start'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is 'normal'
</ins><span class="cx">
</span><span class="cx"> Test getting and setting align-items through JS
</span><span class="cx"> PASS element.style.webkitAlignItems is "center"
</span><span class="lines">@@ -41,82 +41,84 @@
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
</span><span class="cx"> PASS element.style.webkitAlignItems is "self-start"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "self-start"
</span><del>-PASS element.style.webkitAlignItems is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
-PASS element.style.webkitAlignItems is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "stretch"
-PASS element.style.webkitAlignItems is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "stretch"
</del><ins>+PASS element.style.webkitAlignItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
+PASS element.style.webkitAlignItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
+PASS element.style.webkitAlignItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is "self-end"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "self-end"
</span><span class="cx">
</span><span class="cx"> Test bad combinations of align-items
</span><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
+PASS element.style.webkitAlignItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx">
</span><span class="cx"> Test the value 'initial'
</span><span class="cx"> PASS element.style.webkitAlignItems is "center"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
</span><span class="cx"> PASS element.style.webkitAlignItems is "initial"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx">
</span><span class="cx"> Test the value 'initial' for grid containers
</span><span class="cx"> PASS element.style.webkitAlignItems is "left safe"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "left safe"
</span><span class="cx"> PASS element.style.webkitAlignItems is "initial"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "stretch"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx">
</span><span class="cx"> Test the value 'initial' for flex containers
</span><span class="cx"> PASS element.style.webkitAlignItems is "right unsafe"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "right unsafe"
</span><span class="cx"> PASS element.style.webkitAlignItems is "initial"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "stretch"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
</ins><span class="cx">
</span><span class="cx"> Test the value 'inherit'
</span><span class="cx"> PASS element.style.webkitAlignItems is "end"
</span></span></pre></div>
<a id="trunkLayoutTestscss3parsealignitemshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/parse-align-items.html (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-align-items.html 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/LayoutTests/css3/parse-align-items.html 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -176,7 +176,7 @@
</span><span class="cx"> debug("Test initial value of align-items through JS");
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-align-items')", "'start'");
</del><ins>+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-align-items')", "'normal'");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test getting and setting align-items through JS");
</span><span class="lines">@@ -200,16 +200,18 @@
</span><span class="cx"> element.style.webkitAlignItems = "self-start";
</span><span class="cx"> checkValues(element, "webkitAlignItems", "-webkit-align-items", "self-start", "self-start");
</span><span class="cx">
</span><ins>+<!-- The 'auto' value is no valid for the align-items property. -->
+element.style.webkitAlignItems = "";
</ins><span class="cx"> element.style.webkitAlignItems = "auto";
</span><del>-checkValues(element, "webkitAlignItems", "-webkit-align-items", "auto", "start");
</del><ins>+checkValues(element, "webkitAlignItems", "-webkit-align-items", "", "normal");
</ins><span class="cx">
</span><span class="cx"> element.style.display = "-webkit-flex";
</span><span class="cx"> element.style.webkitAlignItems = "auto";
</span><del>-checkValues(element, "webkitAlignItems", "-webkit-align-items", "auto", "stretch");
</del><ins>+checkValues(element, "webkitAlignItems", "-webkit-align-items", "", "normal");
</ins><span class="cx">
</span><span class="cx"> element.style.display = "grid";
</span><span class="cx"> element.style.webkitAlignItems = "auto";
</span><del>-checkValues(element, "webkitAlignItems", "-webkit-align-items", "auto", "stretch");
</del><ins>+checkValues(element, "webkitAlignItems", "-webkit-align-items", "", "normal");
</ins><span class="cx">
</span><span class="cx"> element.style.webkitAlignItems = "self-end";
</span><span class="cx"> checkValues(element, "webkitAlignItems", "-webkit-align-items", "self-end", "self-end");
</span><span class="lines">@@ -219,6 +221,7 @@
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx">
</span><ins>+checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "auto");
</ins><span class="cx"> checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "unsafe auto");
</span><span class="cx"> checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "auto safe");
</span><span class="cx"> checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "auto left");
</span><span class="lines">@@ -247,17 +250,17 @@
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial'");
</span><span class="cx"> element.style.display = "";
</span><del>-checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "center", "start");
</del><ins>+checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "center", "normal");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial' for grid containers");
</span><del>-element.style.display = "grid";
-checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "left safe", "stretch");
</del><ins>+element.style.display = "-webkit-grid";
+checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "left safe", "normal");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial' for flex containers");
</span><span class="cx"> element.style.display = "-webkit-flex";
</span><del>-checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "right unsafe", "stretch");
</del><ins>+checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "right unsafe", "normal");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'inherit'");
</span></span></pre></div>
<a id="trunkLayoutTestscss3parsealignselfexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/parse-align-self-expected.txt (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-align-self-expected.txt 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/LayoutTests/css3/parse-align-self-expected.txt 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -26,7 +26,7 @@
</span><span class="cx"> PASS getComputedStyle(alignSelfFlexEndSafe, '').getPropertyValue('-webkit-align-self') is 'flex-end safe'
</span><span class="cx">
</span><span class="cx"> Test initial value of align-self through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is 'start'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is 'normal'
</ins><span class="cx">
</span><span class="cx"> Test getting and setting align-self through JS
</span><span class="cx"> PASS element.style.webkitAlignSelf is "center"
</span><span class="lines">@@ -42,99 +42,103 @@
</span><span class="cx"> PASS element.style.webkitAlignSelf is "self-start"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "self-start"
</span><span class="cx"> PASS element.style.webkitAlignSelf is "auto"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is "auto"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "stretch"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is "auto"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "stretch"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is "self-end"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "self-end"
</span><span class="cx">
</span><ins>+Test 'auto' value resolution for the root node
+PASS element.style.webkitAlignSelf is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
+
</ins><span class="cx"> Test bad combinations of align-self
</span><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx"> PASS element.style.webkitAlignSelf is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx">
</span><span class="cx"> Test the value 'initial'
</span><span class="cx"> PASS element.style.webkitAlignSelf is "center"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"
</span><span class="cx"> PASS element.style.webkitAlignSelf is "initial"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx">
</span><span class="cx"> Test the value 'initial' for grid containers
</span><span class="cx"> PASS element.style.webkitAlignSelf is "left safe"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "left safe"
</span><span class="cx"> PASS element.style.webkitAlignSelf is "initial"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "stretch"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx">
</span><span class="cx"> Test the value 'initial' for flex containers
</span><span class="cx"> PASS element.style.webkitAlignSelf is "right unsafe"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "right unsafe"
</span><span class="cx"> PASS element.style.webkitAlignSelf is "initial"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "stretch"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx">
</span><span class="cx"> Test the value 'initial' for positioned elements
</span><span class="cx"> PASS element.style.webkitAlignSelf is "left"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "left"
</span><span class="cx"> PASS element.style.webkitAlignSelf is "initial"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "auto"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx">
</span><span class="cx"> Test the value 'initial' for positioned elements in grid containers
</span><span class="cx"> PASS element.style.webkitAlignSelf is "right"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "right"
</span><span class="cx"> PASS element.style.webkitAlignSelf is "initial"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "auto"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx">
</span><span class="cx"> Test the value 'initial' for positioned elements in grid containers
</span><span class="cx"> PASS element.style.webkitAlignSelf is "end"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "end"
</span><span class="cx"> PASS element.style.webkitAlignSelf is "initial"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "auto"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
</ins><span class="cx">
</span><span class="cx"> Test the value 'inherit'
</span><span class="cx"> PASS element.style.webkitAlignSelf is "end"
</span></span></pre></div>
<a id="trunkLayoutTestscss3parsealignselfhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/parse-align-self.html (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-align-self.html 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/LayoutTests/css3/parse-align-self.html 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -60,7 +60,7 @@
</span><span class="cx">
</span><span class="cx"> #alignSelfSelfEndSafe {
</span><span class="cx"> -webkit-align-self: self-end safe;
</span><del>-}
</del><ins>+x}
</ins><span class="cx">
</span><span class="cx"> #alignSelfSelfStartSafe {
</span><span class="cx"> -webkit-align-self: self-start safe;
</span><span class="lines">@@ -175,7 +175,7 @@
</span><span class="cx"> debug("Test initial value of align-self through JS");
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-align-self')", "'start'");
</del><ins>+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-align-self')", "'normal'");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test getting and setting align-self through JS");
</span><span class="lines">@@ -202,20 +202,25 @@
</span><span class="cx"> checkValues(element, "webkitAlignSelf", "-webkit-align-self", "self-start", "self-start");
</span><span class="cx">
</span><span class="cx"> element.style.webkitAlignSelf = "auto";
</span><del>-checkValues(element, "webkitAlignSelf", "-webkit-align-self", "auto", "start");
</del><ins>+checkValues(element, "webkitAlignSelf", "-webkit-align-self", "auto", "normal");
</ins><span class="cx">
</span><span class="cx"> container.style.display = "-webkit-flex";
</span><span class="cx"> element.style.webkitAlignSelf = "auto";
</span><del>-checkValues(element, "webkitAlignSelf", "-webkit-align-self", "auto", "stretch");
</del><ins>+checkValues(element, "webkitAlignSelf", "-webkit-align-self", "auto", "normal");
</ins><span class="cx">
</span><span class="cx"> container.style.display = "grid";
</span><span class="cx"> element.style.webkitAlignSelf = "auto";
</span><del>-checkValues(element, "webkitAlignSelf", "-webkit-align-self", "auto", "stretch");
</del><ins>+checkValues(element, "webkitAlignSelf", "-webkit-align-self", "auto", "normal");
</ins><span class="cx">
</span><span class="cx"> element.style.webkitAlignSelf = "self-end";
</span><span class="cx"> checkValues(element, "webkitAlignSelf", "-webkit-align-self", "self-end", "self-end");
</span><span class="cx">
</span><span class="cx"> debug("");
</span><ins>+debug("Test 'auto' value resolution for the root node");
+document.documentElement.style.webkitAlignSelf = "auto";
+checkValues(document.documentElement, "webkitAlignSelf", "-webkit-align-self", "auto", "normal");
+
+debug("");
</ins><span class="cx"> debug("Test bad combinations of align-self");
</span><span class="cx"> container = document.createElement("div");
</span><span class="cx"> element = document.createElement("div");
</span><span class="lines">@@ -250,35 +255,35 @@
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial'");
</span><span class="cx"> container.style.display = "";
</span><del>-checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "center", "start");
</del><ins>+checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "center", "normal");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial' for grid containers");
</span><del>-container.style.display = "grid";
-checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "left safe", "stretch");
</del><ins>+container.style.display = "-webkit-grid";
+checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "left safe", "normal");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial' for flex containers");
</span><span class="cx"> container.style.display = "-webkit-flex";
</span><del>-checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "right unsafe", "stretch");
</del><ins>+checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "right unsafe", "normal");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial' for positioned elements");
</span><span class="cx"> container.style.display = "";
</span><span class="cx"> element.style.position = "absolute";
</span><del>-checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "left", "auto");
</del><ins>+checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "left", "normal");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial' for positioned elements in grid containers");
</span><span class="cx"> container.style.display = "grid";
</span><span class="cx"> element.style.position = "absolute";
</span><del>-checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "right", "auto");
</del><ins>+checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "right", "normal");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial' for positioned elements in grid containers");
</span><span class="cx"> container.style.display = "-webkit-flex";
</span><span class="cx"> element.style.position = "absolute";
</span><del>-checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "end", "auto");
</del><ins>+checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "end", "normal");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'inherit'");
</span></span></pre></div>
<a id="trunkLayoutTestscss3parsealignmentofrootelementsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/parse-alignment-of-root-elements-expected.txt (0 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-alignment-of-root-elements-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/parse-alignment-of-root-elements-expected.txt 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -0,0 +1,83 @@
</span><ins>+Test to verify auto value resolution works as expected in root elements (eg. document root / shadow roots / slotted elements / elements inside<slot>)
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+*** Test 'auto' value resolution for the document root node. ***
+
+Check out how the DOM's root element resolves the align-self 'auto' values.
+PASS element.style.webkitAlignSelf is "center"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"
+PASS element.style.webkitAlignSelf is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
+
+Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.
+PASS element.style.webkitAlignItems is "center"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
+PASS element.style.webkitAlignItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
+PASS element.style.webkitAlignSelf is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"
+PASS element.style.webkitAlignItems is ""
+PASS window.getComputedStyle(host, '').getPropertyValue('-webkit-align-items') is "normal"
+PASS element.style.webkitAlignSelf is "auto"
+PASS window.getComputedStyle(host, '').getPropertyValue('-webkit-align-self') is "normal"
+
+Check out how the DOM's root element deals with 'auto' value in align-items.
+PASS element.style.webkitAlignItems is "center"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
+PASS element.style.webkitAlignItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
+
+Check out how the DOM's root element resolves the justify-self 'auto' values.
+PASS element.style.justifySelf is "left"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "left"
+PASS element.style.justifySelf is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+
+Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.
+PASS element.style.justifyItems is "center"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "center"
+PASS element.style.justifyItems is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
+PASS element.style.justifySelf is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center"
+PASS element.style.justifyItems is "auto"
+PASS window.getComputedStyle(host, '').getPropertyValue('justify-items') is "normal"
+PASS element.style.justifySelf is "auto"
+PASS window.getComputedStyle(host, '').getPropertyValue('justify-self') is "normal"
+
+Check out how the DOM's root element deals with 'auto' value in justify-items.
+PASS element.style.justifyItems is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
+PASS element.style.justifySelf is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is "auto"
+PASS window.getComputedStyle(host, '').getPropertyValue('justify-self') is "normal"
+
+Check out how the DOM's root element justify-items's value with 'legacy' keyword is used to resolve any descendant's justify-items 'auto' values.
+PASS element.style.justifyItems is "legacy center"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
+PASS element.style.justifyItems is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
+PASS element.style.justifySelf is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center"
+PASS element.style.justifyItems is "auto"
+PASS window.getComputedStyle(host, '').getPropertyValue('justify-items') is "legacy center"
+PASS element.style.justifySelf is "auto"
+PASS window.getComputedStyle(host, '').getPropertyValue('justify-self') is "center"
+
+Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value.
+PASS element.style.justifyItems is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
+PASS element.style.justifySelf is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifyItems is "auto"
+PASS window.getComputedStyle(host, '').getPropertyValue('justify-items') is "normal"
+PASS element.style.justifySelf is "auto"
+PASS window.getComputedStyle(host, '').getPropertyValue('justify-self') is "normal"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestscss3parsealignmentofrootelementshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/parse-alignment-of-root-elements.html (0 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-alignment-of-root-elements.html (rev 0)
+++ trunk/LayoutTests/css3/parse-alignment-of-root-elements.html 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -0,0 +1,95 @@
</span><ins>+<!DOCTYPE html>
+<script src="../resources/js-test.js"></script>
+<html>
+ <body>
+ <div id="host">
+ <div id="slotted" slot="s1"></div>
+ </div>
+<script src="resources/alignment-parsing-utils.js"></script>
+<script>
+description('Test to verify auto value resolution works as expected in root elements (eg. document root / shadow roots / slotted elements / elements inside&lt;slot&gt;)');
+
+var block = document.getElementById("host");
+
+debug("");
+debug("*** Test 'auto' value resolution for the document root node. ***");
+
+debug("");
+debug("Check out how the DOM's root element resolves the align-self 'auto' values.");
+document.documentElement.style.webkitAlignSelf = "center";
+checkValues(document.documentElement, "webkitAlignSelf", "-webkit-align-self", "center", "center");
+document.documentElement.style.webkitAlignSelf = "auto";
+checkValues(document.documentElement, "webkitAlignSelf", "-webkit-align-self", "auto", "normal");
+
+debug("");
+debug("Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.");
+document.documentElement.style.webkitAlignItems = "center";
+checkValues(document.documentElement, "webkitAlignItems", "-webkit-align-items", "center", "center");
+document.body.style.webkitAlignItems = "auto"; // The 'auto' value is not valid for align-items.
+document.body.style.webkitAlignSelf = "auto";
+checkValues(document.body, "webkitAlignItems", "-webkit-align-items", "", "normal");
+checkValues(document.body, "webkitAlignSelf", "-webkit-align-self", "auto", "center");
+block.style.webkitAlignItems = ""; // Default value is 'normal' for align-items.
+block.style.webkitAlignSelf = "auto";
+checkValues(block, "webkitAlignItems", "-webkit-align-items", "", "normal");
+checkValues(block, "webkitAlignSelf", "-webkit-align-self", "auto", "normal");
+
+debug("");
+debug("Check out how the DOM's root element deals with 'auto' value in align-items.");
+document.documentElement.style.webkitAlignItems = "auto"; // The 'auto' value is not valid for align-items.
+checkValues(document.documentElement, "webkitAlignItems", "-webkit-align-items", "center", "center");
+document.documentElement.style.webkitAlignItems = ""; // Default value is 'normal' for align-items.
+checkValues(document.documentElement, "webkitAlignItems", "-webkit-align-items", "", "normal");
+
+debug("");
+debug("Check out how the DOM's root element resolves the justify-self 'auto' values.");
+document.documentElement.style.justifySelf = "left";
+checkValues(document.documentElement, "justifySelf", "justify-self", "left", "left");
+document.documentElement.style.justifySelf = "auto";
+checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "normal");
+
+debug("");
+debug("Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.");
+document.documentElement.style.justifyItems = "center";
+checkValues(document.documentElement, "justifyItems", "justify-items", "center", "center");
+document.body.style.justifyItems = "auto";
+document.body.style.justifySelf = "auto";
+checkValues(document.body, "justifyItems", "justify-items", "auto", "normal");
+checkValues(document.body, "justifySelf", "justify-self", "auto", "center");
+block.style.justifyItems = "auto";
+block.style.justifySelf = "auto";
+checkValues(block, "justifyItems", "justify-items", "auto", "normal");
+checkValues(block, "justifySelf", "justify-self", "auto", "normal");
+
+debug("");
+debug("Check out how the DOM's root element deals with 'auto' value in justify-items.");
+document.documentElement.style.justifyItems = "auto";
+checkValues(document.documentElement, "justifyItems", "justify-items", "auto", "normal");
+checkValues(document.body, "justifySelf", "justify-self", "auto", "normal");
+checkValues(block, "justifySelf", "justify-self", "auto", "normal");
+
+debug("");
+debug("Check out how the DOM's root element justify-items's value with 'legacy' keyword is used to resolve any descendant's justify-items 'auto' values.");
+document.documentElement.style.justifyItems = "legacy center";
+checkValues(document.documentElement, "justifyItems", "justify-items", "legacy center", "legacy center");
+document.body.style.justifyItems = "auto";
+document.body.style.justifySelf = "auto";
+checkValues(document.body, "justifyItems", "justify-items", "auto", "legacy center");
+checkValues(document.body, "justifySelf", "justify-self", "auto", "center");
+block.style.justifyItems = "auto";
+block.style.justifySelf = "auto";
+checkValues(block, "justifyItems", "justify-items", "auto", "legacy center");
+checkValues(block, "justifySelf", "justify-self", "auto", "center");
+
+debug("");
+debug("Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value.");
+document.documentElement.style.justifyItems = "auto";
+checkValues(document.body, "justifyItems", "justify-items", "auto", "normal");
+checkValues(document.body, "justifySelf", "justify-self", "auto", "normal");
+checkValues(block, "justifyItems", "justify-items", "auto", "normal");
+checkValues(block, "justifySelf", "justify-self", "auto", "normal");
+
+</script>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgetComputedStylecomputedstyleexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -149,14 +149,14 @@
</span><span class="cx"> column-span: none;
</span><span class="cx"> column-width: auto;
</span><span class="cx"> align-content: normal;
</span><del>-align-items: start;
-align-self: start;
</del><ins>+align-items: normal;
+align-self: normal;
</ins><span class="cx"> filter: none;
</span><span class="cx"> flex-direction: row;
</span><span class="cx"> flex-wrap: nowrap;
</span><span class="cx"> justify-content: normal;
</span><del>-justify-self: start;
-justify-items: start;
</del><ins>+justify-self: normal;
+justify-items: normal;
</ins><span class="cx"> -webkit-font-kerning: auto;
</span><span class="cx"> -webkit-font-smoothing: auto;
</span><span class="cx"> font-variant-ligatures: normal;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgetComputedStylecomputedstylewithoutrendererexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -148,14 +148,14 @@
</span><span class="cx"> column-span: none
</span><span class="cx"> column-width: auto
</span><span class="cx"> align-content: normal
</span><del>-align-items: auto
-align-self: auto
</del><ins>+align-items: normal
+align-self: normal
</ins><span class="cx"> filter: none
</span><span class="cx"> flex-direction: row
</span><span class="cx"> flex-wrap: nowrap
</span><span class="cx"> justify-content: normal
</span><del>-justify-self: auto
-justify-items: auto
</del><ins>+justify-self: normal
+justify-items: normal
</ins><span class="cx"> -webkit-font-kerning: auto
</span><span class="cx"> -webkit-font-smoothing: auto
</span><span class="cx"> font-variant-ligatures: normal
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssparsejustifyitemsexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/parse-justify-items-expected.txt (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/parse-justify-items-expected.txt 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/LayoutTests/fast/css/parse-justify-items-expected.txt 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -32,7 +32,7 @@
</span><span class="cx"> PASS getComputedStyle(justifyItemsRightLegacy, '').getPropertyValue('justify-items') is 'legacy right'
</span><span class="cx">
</span><span class="cx"> Test initial value of justify-items through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('justify-items') is 'start'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('justify-items') is 'normal'
</ins><span class="cx">
</span><span class="cx"> Test getting and setting justify-items through JS
</span><span class="cx"> PASS element.style.justifyItems is "center"
</span><span class="lines">@@ -48,83 +48,81 @@
</span><span class="cx"> PASS element.style.justifyItems is "legacy left"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy left"
</span><span class="cx"> PASS element.style.justifyItems is "auto"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is "auto"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "stretch"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is "auto"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "stretch"
-PASS getComputedStyle(element, '').getPropertyValue('justify-items') is 'stretch'
-PASS element.style.justifyItems is 'auto'
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is "self-end"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "self-end"
</span><span class="cx">
</span><span class="cx"> Test bad combinations of justify-items
</span><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx"> PASS element.style.justifyItems is ""
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx">
</span><span class="cx"> Test the value 'initial'
</span><del>-PASS element.style.justifyItems is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "center"
</del><ins>+PASS element.style.justifyItems is "legacy center"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
</ins><span class="cx"> PASS element.style.justifyItems is "initial"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx">
</span><span class="cx"> Test the value 'initial' for grid containers
</span><span class="cx"> PASS element.style.justifyItems is "left safe"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "left safe"
</span><span class="cx"> PASS element.style.justifyItems is "initial"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "stretch"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx">
</span><span class="cx"> Test the value 'initial' for flex containers
</span><span class="cx"> PASS element.style.justifyItems is "right unsafe"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "right unsafe"
</span><span class="cx"> PASS element.style.justifyItems is "initial"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "stretch"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
</ins><span class="cx">
</span><span class="cx"> Test the value 'inherit'
</span><span class="cx"> PASS element.style.justifyItems is "end"
</span><span class="lines">@@ -135,10 +133,10 @@
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "left safe"
</span><span class="cx"> PASS element.style.justifyItems is "inherit"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "left safe"
</span><del>-PASS element.style.justifyItems is "center unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "center unsafe"
</del><ins>+PASS element.style.justifyItems is "legacy center"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
</ins><span class="cx"> PASS element.style.justifyItems is "inherit"
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "center unsafe"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
</ins><span class="cx">
</span><span class="cx"> Test the value 'legacy'
</span><span class="cx"> PASS element.style.justifyItems is "legacy left"
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssparsejustifyitemshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/parse-justify-items.html (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/parse-justify-items.html 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/LayoutTests/fast/css/parse-justify-items.html 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -223,7 +223,7 @@
</span><span class="cx"> debug("Test initial value of justify-items through JS");
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
</del><ins>+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'normal'");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test getting and setting justify-items through JS");
</span><span class="lines">@@ -248,17 +248,15 @@
</span><span class="cx"> checkValues(element, "justifyItems", "justify-items", "legacy left", "legacy left");
</span><span class="cx">
</span><span class="cx"> element.style.justifyItems = "auto";
</span><del>-checkValues(element, "justifyItems", "justify-items", "auto", "start");
</del><ins>+checkValues(element, "justifyItems", "justify-items", "auto", "normal");
</ins><span class="cx">
</span><span class="cx"> element.style.display = "flex";
</span><span class="cx"> element.style.justifyItems = "auto";
</span><del>-checkValues(element, "justifyItems", "justify-items", "auto", "stretch");
</del><ins>+checkValues(element, "justifyItems", "justify-items", "auto", "normal");
</ins><span class="cx">
</span><span class="cx"> element.style.display = "grid";
</span><span class="cx"> element.style.justifyItems = "auto";
</span><del>-checkValues(element, "justifyItems", "justify-items", "auto", "stretch");
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'stretch'");
-shouldBe("element.style.justifyItems", "'auto'");
</del><ins>+checkValues(element, "justifyItems", "justify-items", "auto", "normal");
</ins><span class="cx">
</span><span class="cx"> element.style.justifyItems = "self-end";
</span><span class="cx"> checkValues(element, "justifyItems", "justify-items", "self-end", "self-end");
</span><span class="lines">@@ -296,24 +294,23 @@
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial'");
</span><span class="cx"> element.style.display = "";
</span><del>-checkInitialValues(element, "justifyItems", "justify-items", "center", "start");
</del><ins>+checkInitialValues(element, "justifyItems", "justify-items", "legacy center", "normal");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial' for grid containers");
</span><span class="cx"> element.style.display = "grid";
</span><del>-checkInitialValues(element, "justifyItems", "justify-items", "left safe", "stretch");
</del><ins>+checkInitialValues(element, "justifyItems", "justify-items", "left safe", "normal");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial' for flex containers");
</span><del>-element.style.display = "-webkit-flex";
-checkInitialValues(element, "justifyItems", "justify-items", "right unsafe", "stretch");
</del><ins>+element.style.display = "flex";
+checkInitialValues(element, "justifyItems", "justify-items", "right unsafe", "normal");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'inherit'");
</span><del>-parentElement = document.createElement("div");
</del><span class="cx"> checkInheritValues("justifyItems", "justify-items", "end");
</span><span class="cx"> checkInheritValues("justifyItems", "justify-items", "left safe");
</span><del>-checkInheritValues("justifyItems", "justify-items", "center unsafe");
</del><ins>+checkInheritValues("justifyItems", "justify-items", "legacy center");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'legacy'");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssparsejustifyselfexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/parse-justify-self-expected.txt (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/parse-justify-self-expected.txt 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/LayoutTests/fast/css/parse-justify-self-expected.txt 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -5,6 +5,7 @@
</span><span class="cx">
</span><span class="cx"> Test getting justify-self set through CSS
</span><span class="cx"> PASS getComputedStyle(justifySelfBaseline, '').getPropertyValue('justify-self') is 'baseline'
</span><ins>+PASS getComputedStyle(justifySelfLastBaseline, '').getPropertyValue('justify-self') is 'last-baseline'
</ins><span class="cx"> PASS getComputedStyle(justifySelfStretch, '').getPropertyValue('justify-self') is 'stretch'
</span><span class="cx"> PASS getComputedStyle(justifySelfStart, '').getPropertyValue('justify-self') is 'start'
</span><span class="cx"> PASS getComputedStyle(justifySelfEnd, '').getPropertyValue('justify-self') is 'end'
</span><span class="lines">@@ -13,47 +14,141 @@
</span><span class="cx"> PASS getComputedStyle(justifySelfSelfStart, '').getPropertyValue('justify-self') is 'self-start'
</span><span class="cx"> PASS getComputedStyle(justifySelfLeft, '').getPropertyValue('justify-self') is 'left'
</span><span class="cx"> PASS getComputedStyle(justifySelfRight, '').getPropertyValue('justify-self') is 'right'
</span><ins>+PASS getComputedStyle(justifySelfFlexStart, '').getPropertyValue('justify-self') is 'flex-start'
+PASS getComputedStyle(justifySelfFlexEnd, '').getPropertyValue('justify-self') is 'flex-end'
</ins><span class="cx"> PASS getComputedStyle(justifySelfEndUnsafe, '').getPropertyValue('justify-self') is 'end unsafe'
</span><span class="cx"> PASS getComputedStyle(justifySelfCenterUnsafe, '').getPropertyValue('justify-self') is 'center unsafe'
</span><span class="cx"> PASS getComputedStyle(justifySelfSelfEndSafe, '').getPropertyValue('justify-self') is 'self-end safe'
</span><span class="cx"> PASS getComputedStyle(justifySelfSelfStartSafe, '').getPropertyValue('justify-self') is 'self-start safe'
</span><span class="cx"> PASS getComputedStyle(justifySelfRightSafe, '').getPropertyValue('justify-self') is 'right safe'
</span><span class="cx"> PASS getComputedStyle(justifySelfLeftUnsafe, '').getPropertyValue('justify-self') is 'left unsafe'
</span><ins>+PASS getComputedStyle(justifySelfFlexStartUnsafe, '').getPropertyValue('justify-self') is 'flex-start unsafe'
+PASS getComputedStyle(justifySelfFlexEndSafe, '').getPropertyValue('justify-self') is 'flex-end safe'
</ins><span class="cx">
</span><span class="cx"> Test initial value of justify-self through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'normal'
</ins><span class="cx">
</span><span class="cx"> Test getting and setting justify-self through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'center'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start unsafe'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
</del><ins>+PASS element.style.justifySelf is "center"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center"
+PASS element.style.justifySelf is "start unsafe"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "start unsafe"
+PASS element.style.justifySelf is "flex-end safe"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "flex-end safe"
+PASS element.style.justifySelf is "right"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "right"
+PASS element.style.justifySelf is "center"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center"
+PASS element.style.justifySelf is "self-start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "self-start"
+PASS element.style.justifySelf is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is "self-end"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "self-end"
</ins><span class="cx">
</span><span class="cx"> Test bad combinations of justify-self
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
</del><ins>+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+PASS element.style.justifySelf is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
</ins><span class="cx">
</span><span class="cx"> Test the value 'initial'
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'center'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
</del><ins>+PASS element.style.justifySelf is "center"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center"
+PASS element.style.justifySelf is "initial"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
</ins><span class="cx">
</span><ins>+Test the value 'initial' for grid containers
+PASS element.style.justifySelf is "left safe"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "left safe"
+PASS element.style.justifySelf is "initial"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+
+Test the value 'initial' for flex containers
+PASS element.style.justifySelf is "right unsafe"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "right unsafe"
+PASS element.style.justifySelf is "initial"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+
+Test the value 'initial' for positioned elements
+PASS element.style.justifySelf is "left"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "left"
+PASS element.style.justifySelf is "initial"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+
+Test the value 'initial' for positioned elements in grid containers
+PASS element.style.justifySelf is "right"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "right"
+PASS element.style.justifySelf is "initial"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+
+Test the value 'initial' for positioned elements in grid containers
+PASS element.style.justifySelf is "end"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "end"
+PASS element.style.justifySelf is "initial"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
+
</ins><span class="cx"> Test the value 'inherit'
</span><del>-PASS getComputedStyle(parentElement, '').getPropertyValue('justify-self') is 'end'
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'end'
</del><ins>+PASS element.style.justifySelf is "end"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "end"
+PASS element.style.justifySelf is "inherit"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "end"
+PASS element.style.justifySelf is "left safe"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "left safe"
+PASS element.style.justifySelf is "inherit"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "left safe"
+PASS element.style.justifySelf is "center unsafe"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center unsafe"
+PASS element.style.justifySelf is "inherit"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center unsafe"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssparsejustifyselfhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/parse-justify-self.html (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/parse-justify-self.html 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/LayoutTests/fast/css/parse-justify-self.html 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -6,6 +6,10 @@
</span><span class="cx"> justify-self: baseline;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+#justifySelfLastBaseline {
+ justify-self: last-baseline;
+}
+
</ins><span class="cx"> #justifySelfStretch {
</span><span class="cx"> justify-self: stretch;
</span><span class="cx"> }
</span><span class="lines">@@ -38,6 +42,14 @@
</span><span class="cx"> justify-self: right;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+#justifySelfFlexStart {
+ justify-self: flex-start;
+}
+
+#justifySelfFlexEnd {
+ justify-self: flex-end;
+}
+
</ins><span class="cx"> #justifySelfEndUnsafe {
</span><span class="cx"> justify-self: end unsafe;
</span><span class="cx"> }
</span><span class="lines">@@ -61,11 +73,20 @@
</span><span class="cx"> #justifySelfLeftUnsafe {
</span><span class="cx"> justify-self: left unsafe;
</span><span class="cx"> }
</span><ins>+
+#justifySelfFlexStartUnsafe {
+ justify-self: flex-start unsafe;
+}
+
+#justifySelfFlexEndSafe {
+ justify-self: flex-end safe;
+}
</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><span class="cx"> <div id="justifySelfBaseline"></div>
</span><ins>+<div id="justifySelfLastBaseline"></div>
</ins><span class="cx"> <div id="justifySelfStretch"></div>
</span><span class="cx"> <div id="justifySelfStart"></div>
</span><span class="cx"> <div id="justifySelfEnd"></div>
</span><span class="lines">@@ -74,6 +95,8 @@
</span><span class="cx"> <div id="justifySelfSelfEnd"></div>
</span><span class="cx"> <div id="justifySelfLeft"></div>
</span><span class="cx"> <div id="justifySelfRight"></div>
</span><ins>+<div id="justifySelfFlexStart"></div>
+<div id="justifySelfFlexEnd"></div>
</ins><span class="cx">
</span><span class="cx"> <div id="justifySelfEndUnsafe"></div>
</span><span class="cx"> <div id="justifySelfCenterUnsafe"></div>
</span><span class="lines">@@ -81,6 +104,9 @@
</span><span class="cx"> <div id="justifySelfSelfStartSafe"></div>
</span><span class="cx"> <div id="justifySelfRightSafe"></div>
</span><span class="cx"> <div id="justifySelfLeftUnsafe"></div>
</span><ins>+<div id="justifySelfFlexStartUnsafe"></div>
+<div id="justifySelfFlexEndSafe"></div>
+<script src="resources/alignment-parsing-utils.js"></script>
</ins><span class="cx"> <script>
</span><span class="cx"> description('Test that setting and getting justify-self works as expected');
</span><span class="cx">
</span><span class="lines">@@ -88,6 +114,9 @@
</span><span class="cx"> var justifySelfBaseline = document.getElementById("justifySelfBaseline");
</span><span class="cx"> shouldBe("getComputedStyle(justifySelfBaseline, '').getPropertyValue('justify-self')", "'baseline'");
</span><span class="cx">
</span><ins>+var justifySelfLastBaseline = document.getElementById("justifySelfLastBaseline");
+shouldBe("getComputedStyle(justifySelfLastBaseline, '').getPropertyValue('justify-self')", "'last-baseline'");
+
</ins><span class="cx"> var justifySelfStretch = document.getElementById("justifySelfStretch");
</span><span class="cx"> shouldBe("getComputedStyle(justifySelfStretch, '').getPropertyValue('justify-self')", "'stretch'");
</span><span class="cx">
</span><span class="lines">@@ -112,6 +141,12 @@
</span><span class="cx"> var justifySelfRight = document.getElementById("justifySelfRight");
</span><span class="cx"> shouldBe("getComputedStyle(justifySelfRight, '').getPropertyValue('justify-self')", "'right'");
</span><span class="cx">
</span><ins>+var justifySelfFlexStart = document.getElementById("justifySelfFlexStart");
+shouldBe("getComputedStyle(justifySelfFlexStart, '').getPropertyValue('justify-self')", "'flex-start'");
+
+var justifySelfFlexEnd = document.getElementById("justifySelfFlexEnd");
+shouldBe("getComputedStyle(justifySelfFlexEnd, '').getPropertyValue('justify-self')", "'flex-end'");
+
</ins><span class="cx"> var justifySelfEndUnsafe = document.getElementById("justifySelfEndUnsafe");
</span><span class="cx"> shouldBe("getComputedStyle(justifySelfEndUnsafe, '').getPropertyValue('justify-self')", "'end unsafe'");
</span><span class="cx">
</span><span class="lines">@@ -130,100 +165,127 @@
</span><span class="cx"> var justifySelfLeftUnsafe = document.getElementById("justifySelfLeftUnsafe");
</span><span class="cx"> shouldBe("getComputedStyle(justifySelfLeftUnsafe, '').getPropertyValue('justify-self')", "'left unsafe'");
</span><span class="cx">
</span><ins>+var justifySelfFlexStartUnsafe = document.getElementById("justifySelfFlexStartUnsafe");
+shouldBe("getComputedStyle(justifySelfFlexStartUnsafe, '').getPropertyValue('justify-self')", "'flex-start unsafe'");
+
+var justifySelfFlexEndSafe = document.getElementById("justifySelfFlexEndSafe");
+shouldBe("getComputedStyle(justifySelfFlexEndSafe, '').getPropertyValue('justify-self')", "'flex-end safe'");
+
</ins><span class="cx"> debug("");
</span><span class="cx"> debug("Test initial value of justify-self through JS");
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'normal'");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test getting and setting justify-self through JS");
</span><ins>+container = document.createElement("div");
</ins><span class="cx"> element = document.createElement("div");
</span><del>-document.body.appendChild(element);
</del><ins>+container.appendChild(element);
+document.body.appendChild(container);
</ins><span class="cx"> element.style.justifySelf = "center";
</span><del>-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'center'");
</del><ins>+checkValues(element, "justifySelf", "justify-self", "center", "center");
</ins><span class="cx">
</span><del>-element = document.createElement("div");
-document.body.appendChild(element);
</del><span class="cx"> element.style.justifySelf = "unsafe start";
</span><del>-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start unsafe'");
</del><ins>+checkValues(element, "justifySelf", "justify-self", "start unsafe", "start unsafe");
</ins><span class="cx">
</span><del>-element.style.justifySelf = "start";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+element.style.justifySelf = "flex-end safe";
+checkValues(element, "justifySelf", "justify-self", "flex-end safe", "flex-end safe");
</ins><span class="cx">
</span><del>-debug("");
-debug("Test bad combinations of justify-self");
-element = document.createElement("div");
-document.body.appendChild(element);
-element.style.justifySelf = "start left";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+element.style.justifySelf = "right";
+checkValues(element, "justifySelf", "justify-self", "right", "right");
</ins><span class="cx">
</span><del>-element.style.justifySelf = "baseline safe";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+element.style.justifySelf = "center";
+checkValues(element, "justifySelf", "justify-self", "center", "center");
</ins><span class="cx">
</span><del>-element.style.justifySelf = "baseline center";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+element.style.justifySelf = "self-start";
+checkValues(element, "justifySelf", "justify-self", "self-start", "self-start");
</ins><span class="cx">
</span><del>-element.style.justifySelf = "stretch unsafe";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+element.style.justifySelf = "auto";
+checkValues(element, "justifySelf", "justify-self", "auto", "normal");
</ins><span class="cx">
</span><del>-element.style.justifySelf = "stretch right";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+container.style.display = "flex";
+element.style.justifySelf = "auto";
+checkValues(element, "justifySelf", "justify-self", "auto", "normal");
</ins><span class="cx">
</span><del>-element.style.justifySelf = "unsafe unsafe";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+container.style.display = "grid";
+element.style.justifySelf = "auto";
+checkValues(element, "justifySelf", "justify-self", "auto", "normal");
</ins><span class="cx">
</span><del>-element.style.justifySelf = "unsafe";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+element.style.justifySelf = "self-end";
+checkValues(element, "justifySelf", "justify-self", "self-end", "self-end");
</ins><span class="cx">
</span><del>-element.style.justifySelf = "unsafe safe";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+debug("");
+debug("Test bad combinations of justify-self");
+container = document.createElement("div");
+element = document.createElement("div");
+container.appendChild(element);
+document.body.appendChild(container);
</ins><span class="cx">
</span><del>-element.style.justifySelf = "center start";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+checkBadValues(element, "justifySelf", "justify-self", "unsafe auto");
+checkBadValues(element, "justifySelf", "justify-self", "auto safe");
+checkBadValues(element, "justifySelf", "justify-self", "auto left");
+checkBadValues(element, "justifySelf", "justify-self", "baseline safe");
+checkBadValues(element, "justifySelf", "justify-self", "baseline center");
+checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe");
+checkBadValues(element, "justifySelf", "justify-self", "stretch right");
+checkBadValues(element, "justifySelf", "justify-self", "unsafe unsafe");
+checkBadValues(element, "justifySelf", "justify-self", "unsafe safe");
+checkBadValues(element, "justifySelf", "justify-self", "center start");
+checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe");
+checkBadValues(element, "justifySelf", "justify-self", "safe stretch");
+checkBadValues(element, "justifySelf", "justify-self", "baseline safe");
+checkBadValues(element, "justifySelf", "justify-self", "unsafe baseline");
+checkBadValues(element, "justifySelf", "justify-self", "unsafe safe left");
+checkBadValues(element, "justifySelf", "justify-self", "unsafe left safe");
+checkBadValues(element, "justifySelf", "justify-self", "left safe unsafe safe");
+checkBadValues(element, "justifySelf", "justify-self", "legacy start");
+checkBadValues(element, "justifySelf", "justify-self", "legacy end");
+checkBadValues(element, "justifySelf", "justify-self", "legacy right unsafe");
+checkBadValues(element, "justifySelf", "justify-self", "legacy auto");
+checkBadValues(element, "justifySelf", "justify-self", "legacy stretch");
+checkBadValues(element, "justifySelf", "justify-self", "legacy");
+checkBadValues(element, "justifySelf", "justify-self", "legacy left right");
</ins><span class="cx">
</span><del>-element.style.justifySelf = "stretch unsafe";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+debug("");
+debug("Test the value 'initial'");
+container.style.display = "";
+checkInitialValues(element, "justifySelf", "justify-self", "center", "normal");
</ins><span class="cx">
</span><del>-element.style.justifySelf = "safe stretch";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+debug("");
+debug("Test the value 'initial' for grid containers");
+container.style.display = "grid";
+checkInitialValues(element, "justifySelf", "justify-self", "left safe", "normal");
</ins><span class="cx">
</span><del>-element.style.justifySelf = "baseline safe";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+debug("");
+debug("Test the value 'initial' for flex containers");
+container.style.display = "flex";
+checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "normal");
</ins><span class="cx">
</span><del>-element.style.justifySelf = "unsafe baseline";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+debug("");
+debug("Test the value 'initial' for positioned elements");
+container.style.display = "";
+element.style.position = "absolute";
+checkInitialValues(element, "justifySelf", "justify-self", "left", "normal");
</ins><span class="cx">
</span><del>-element.style.justifySelf = "unsafe safe";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+debug("");
+debug("Test the value 'initial' for positioned elements in grid containers");
+container.style.display = "grid";
+element.style.position = "absolute";
+checkInitialValues(element, "justifySelf", "justify-self", "right", "normal");
</ins><span class="cx">
</span><del>-element.style.justifySelf = "unsafe safe left";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
-
-element.style.justifySelf = "unsafe left safe";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
-
-element.style.justifySelf = "left safe unsafe safe";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
-
</del><span class="cx"> debug("");
</span><del>-debug("Test the value 'initial'");
-element.style.justifySelf = "center";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'center'");
-element.style.justifySelf = "initial";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+debug("Test the value 'initial' for positioned elements in grid containers");
+container.style.display = "flex";
+element.style.position = "absolute";
+checkInitialValues(element, "justifySelf", "justify-self", "end", "normal");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'inherit'");
</span><del>-parentElement = document.createElement("div");
-document.body.appendChild(parentElement);
-parentElement.style.justifySelf = "end";
-shouldBe("getComputedStyle(parentElement, '').getPropertyValue('justify-self')", "'end'");
</del><ins>+checkInheritValues("justifySelf", "justify-self", "end");
+checkInheritValues("justifySelf", "justify-self", "left safe");
+checkInheritValues("justifySelf", "justify-self", "center unsafe");
</ins><span class="cx">
</span><del>-element = document.createElement("div");
-parentElement.appendChild(element);
-element.style.justifySelf = "inherit";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'end'");
</del><span class="cx"> </script>
</span><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssresourcesalignmentparsingutilsjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/resources/alignment-parsing-utils.js (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/resources/alignment-parsing-utils.js 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/LayoutTests/fast/css/resources/alignment-parsing-utils.js 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -8,8 +8,10 @@
</span><span class="cx">
</span><span class="cx"> function checkBadValues(element, property, propertyID, value)
</span><span class="cx"> {
</span><ins>+ var elementID = element.id || "element";
+ var initialValue = eval("window.getComputedStyle(" + elementID + " , '').getPropertyValue('" + propertyID + "')");
</ins><span class="cx"> element.style[property] = value;
</span><del>- checkValues(element, property, propertyID, "", "start");
</del><ins>+ checkValues(element, property, propertyID, "", initialValue);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function checkInitialValues(element, property, propertyID, value, initial)
</span></span></pre></div>
<a id="trunkLayoutTestssvgcssgetComputedStylebasicexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/svg/css/getComputedStyle-basic-expected.txt (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/svg/css/getComputedStyle-basic-expected.txt 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/LayoutTests/svg/css/getComputedStyle-basic-expected.txt 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -296,9 +296,9 @@
</span><span class="cx"> rect: style.getPropertyCSSValue(column-width) : [object CSSPrimitiveValue]
</span><span class="cx"> rect: style.getPropertyValue(align-content) : normal
</span><span class="cx"> rect: style.getPropertyCSSValue(align-content) : [object CSSValueList]
</span><del>-rect: style.getPropertyValue(align-items) : start
</del><ins>+rect: style.getPropertyValue(align-items) : normal
</ins><span class="cx"> rect: style.getPropertyCSSValue(align-items) : [object CSSValueList]
</span><del>-rect: style.getPropertyValue(align-self) : start
</del><ins>+rect: style.getPropertyValue(align-self) : normal
</ins><span class="cx"> rect: style.getPropertyCSSValue(align-self) : [object CSSValueList]
</span><span class="cx"> rect: style.getPropertyValue(filter) : none
</span><span class="cx"> rect: style.getPropertyCSSValue(filter) : [object CSSPrimitiveValue]
</span><span class="lines">@@ -308,9 +308,9 @@
</span><span class="cx"> rect: style.getPropertyCSSValue(flex-wrap) : [object CSSPrimitiveValue]
</span><span class="cx"> rect: style.getPropertyValue(justify-content) : normal
</span><span class="cx"> rect: style.getPropertyCSSValue(justify-content) : [object CSSValueList]
</span><del>-rect: style.getPropertyValue(justify-self) : start
</del><ins>+rect: style.getPropertyValue(justify-self) : normal
</ins><span class="cx"> rect: style.getPropertyCSSValue(justify-self) : [object CSSValueList]
</span><del>-rect: style.getPropertyValue(justify-items) : start
</del><ins>+rect: style.getPropertyValue(justify-items) : normal
</ins><span class="cx"> rect: style.getPropertyCSSValue(justify-items) : [object CSSValueList]
</span><span class="cx"> rect: style.getPropertyValue(-webkit-font-kerning) : auto
</span><span class="cx"> rect: style.getPropertyCSSValue(-webkit-font-kerning) : [object CSSPrimitiveValue]
</span><span class="lines">@@ -830,9 +830,9 @@
</span><span class="cx"> g: style.getPropertyCSSValue(column-width) : [object CSSPrimitiveValue]
</span><span class="cx"> g: style.getPropertyValue(align-content) : normal
</span><span class="cx"> g: style.getPropertyCSSValue(align-content) : [object CSSValueList]
</span><del>-g: style.getPropertyValue(align-items) : start
</del><ins>+g: style.getPropertyValue(align-items) : normal
</ins><span class="cx"> g: style.getPropertyCSSValue(align-items) : [object CSSValueList]
</span><del>-g: style.getPropertyValue(align-self) : start
</del><ins>+g: style.getPropertyValue(align-self) : normal
</ins><span class="cx"> g: style.getPropertyCSSValue(align-self) : [object CSSValueList]
</span><span class="cx"> g: style.getPropertyValue(filter) : none
</span><span class="cx"> g: style.getPropertyCSSValue(filter) : [object CSSPrimitiveValue]
</span><span class="lines">@@ -842,9 +842,9 @@
</span><span class="cx"> g: style.getPropertyCSSValue(flex-wrap) : [object CSSPrimitiveValue]
</span><span class="cx"> g: style.getPropertyValue(justify-content) : normal
</span><span class="cx"> g: style.getPropertyCSSValue(justify-content) : [object CSSValueList]
</span><del>-g: style.getPropertyValue(justify-self) : start
</del><ins>+g: style.getPropertyValue(justify-self) : normal
</ins><span class="cx"> g: style.getPropertyCSSValue(justify-self) : [object CSSValueList]
</span><del>-g: style.getPropertyValue(justify-items) : start
</del><ins>+g: style.getPropertyValue(justify-items) : normal
</ins><span class="cx"> g: style.getPropertyCSSValue(justify-items) : [object CSSValueList]
</span><span class="cx"> g: style.getPropertyValue(-webkit-font-kerning) : auto
</span><span class="cx"> g: style.getPropertyCSSValue(-webkit-font-kerning) : [object CSSPrimitiveValue]
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/Source/WebCore/ChangeLog 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -1,3 +1,79 @@
</span><ins>+2016-05-30 Javier Fernandez <jfernandez@igalia.com>
+
+ [CSS Box Alignment] New CSS Value 'normal' for Self Alignment
+ https://bugs.webkit.org/show_bug.cgi?id=156254
+
+ Reviewed by Darin Adler.
+
+ The Box Alignment specification defines a new value 'normal' to be used
+ as default for the different layout models, which will define the
+ specific behavior for each case. This patch adds a new CSS value in the
+ parsing logic and adapts the Self Alignment properties to the new
+ value.
+
+ The 'auto' value is no longer valid for the 'align-items' property and
+ the Computed Value will be always the specified value. Hence, I removed
+ the StyleResolver logic because is not required now; the specific
+ behavior of the 'normal' value will be resolved at layout time.
+
+ Additionally, this patch updates the layout logic as well, for both
+ Flexbox and Grid layout models.
+
+ Test: css3/parse-alignment-of-root-elements.html
+
+ * css/CSSComputedStyleDeclaration.cpp:
+ (WebCore::resolveLegacyJustifyItems): Added.
+ (WebCore::resolveJustifyItemsAuto): Added.
+ (WebCore::resolveJustifySelfAuto): Added.
+ (WebCore::resolveAlignSelfAuto): Added.
+ (WebCore::valueForItemPositionWithOverflowAlignment): Using a StyleSelfAlignmentData argument.
+ (WebCore::ComputedStyleExtractor::propertyValue): Using the new resolving functions.
+ * css/CSSParser.cpp:
+ (WebCore::CSSParser::parseItemPositionOverflowPosition): A new value 'normal' is now valid.
+ * css/CSSPrimitiveValueMappings.h:
+ (WebCore::CSSPrimitiveValue::CSSPrimitiveValue): Mappings for the new value 'normal'.
+ (WebCore::CSSPrimitiveValue::operator ItemPosition): Mappings for the new value 'normal'.
+ * css/CSSPropertyNames.in:
+ * css/StyleResolver.cpp:
+ (WebCore::StyleResolver::adjustRenderStyle): We don't need to resolve 'legacy" keyword.
+ * rendering/RenderBox.cpp:
+ (WebCore::flexItemHasStretchAlignment):
+ (WebCore::RenderBox::hasStretchedLogicalWidth):
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::styleDidChange):
+ (WebCore::RenderFlexibleBox::alignmentForChild):
+ (WebCore::contentAlignmentNormalBehaviorFlexibleBox):
+ (WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
+ (WebCore::RenderFlexibleBox::layoutColumnReverse):
+ (WebCore::RenderFlexibleBox::alignFlexLines):
+ (WebCore::RenderFlexibleBox::alignChildren):
+ * rendering/RenderGrid.cpp:
+ (WebCore::defaultAlignmentChangedToStretchInRowAxis):
+ (WebCore::defaultAlignmentChangedFromStretchInRowAxis):
+ (WebCore::defaultAlignmentChangedFromStretchInColumnAxis):
+ (WebCore::selfAlignmentChangedToStretchInRowAxis):
+ (WebCore::selfAlignmentChangedFromStretchInRowAxis):
+ (WebCore::selfAlignmentChangedFromStretchInColumnAxis):
+ (WebCore::contentAlignmentNormalBehaviorGrid):
+ (WebCore::RenderGrid::applyStretchAlignmentToTracksIfNeeded):
+ (WebCore::RenderGrid::needToStretchChildLogicalHeight):
+ (WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded):
+ (WebCore::RenderGrid::columnAxisPositionForChild):
+ (WebCore::RenderGrid::rowAxisPositionForChild):
+ (WebCore::RenderGrid::columnAxisOffsetForChild):
+ (WebCore::RenderGrid::rowAxisOffsetForChild):
+ (WebCore::RenderGrid::computeContentPositionAndDistributionOffset):
+ * rendering/style/RenderStyle.cpp:
+ (WebCore::resolvedSelfAlignment):
+ (WebCore::RenderStyle::resolvedAlignItems):
+ (WebCore::RenderStyle::resolvedAlignSelf):
+ (WebCore::RenderStyle::resolvedJustifyItems):
+ (WebCore::RenderStyle::resolvedJustifySelf):
+ * rendering/style/RenderStyle.h:
+ * rendering/style/RenderStyleConstants.h:
+ * rendering/style/StyleRareNonInheritedData.cpp:
+ (WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData): align-items uses now a different initial function.
+
</ins><span class="cx"> 2016-05-29 Brady Eidson <beidson@apple.com>
</span><span class="cx">
</span><span class="cx"> Transition various Task/Function queues from std::function to NoncopyableFunction.
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSComputedStyleDeclarationcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -2275,25 +2275,47 @@
</span><span class="cx"> return &element;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-static ItemPosition resolveContainerAlignmentAuto(ItemPosition position, RenderObject* element)
</del><ins>+static StyleSelfAlignmentData resolveLegacyJustifyItems(const StyleSelfAlignmentData& data)
</ins><span class="cx"> {
</span><del>- if (position != ItemPositionAuto || !element)
- return position;
</del><ins>+ if (data.positionType() == LegacyPosition)
+ return { data.position(), OverflowAlignmentDefault };
+ return data;
+}
</ins><span class="cx">
</span><del>- return element->style().isDisplayFlexibleOrGridBox() ? ItemPositionStretch : ItemPositionStart;
</del><ins>+static StyleSelfAlignmentData resolveJustifyItemsAuto(const StyleSelfAlignmentData& data, Node* parent)
+{
+ if (data.position() != ItemPositionAuto)
+ return data;
+
+ // If the inherited value of justify-items includes the 'legacy' keyword, 'auto' computes to the inherited value.
+ const auto& inheritedValue = (!parent || !parent->computedStyle()) ? RenderStyle::initialDefaultAlignment() : parent->computedStyle()->justifyItems();
+ if (inheritedValue.positionType() == LegacyPosition)
+ return inheritedValue;
+ if (inheritedValue.position() == ItemPositionAuto)
+ return resolveJustifyItemsAuto(inheritedValue, parent->parentNode());
+ return { ItemPositionNormal, OverflowAlignmentDefault };
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-static ItemPosition resolveSelfAlignmentAuto(ItemPosition position, OverflowAlignment& overflow, RenderObject* element)
</del><ins>+static StyleSelfAlignmentData resolveJustifySelfAuto(const StyleSelfAlignmentData& data, Node* parent)
</ins><span class="cx"> {
</span><del>- if (position != ItemPositionAuto || !element || element->isOutOfFlowPositioned())
- return position;
</del><ins>+ if (data.position() != ItemPositionAuto)
+ return data;
</ins><span class="cx">
</span><del>- RenderBlock* parent = element->containingBlock();
- if (!parent)
- return ItemPositionStart;
</del><ins>+ // The 'auto' keyword computes to the computed value of justify-items on the parent or 'normal' if the box has no parent.
+ if (!parent || !parent->computedStyle())
+ return { ItemPositionNormal, OverflowAlignmentDefault };
+ return resolveLegacyJustifyItems(resolveJustifyItemsAuto(parent->computedStyle()->justifyItems(), parent->parentNode()));
+}
</ins><span class="cx">
</span><del>- overflow = parent->style().alignItemsOverflowAlignment();
- return resolveContainerAlignmentAuto(parent->style().alignItemsPosition(), parent);
</del><ins>+static StyleSelfAlignmentData resolveAlignSelfAuto(const StyleSelfAlignmentData& data, Node* parent)
+{
+ if (data.position() != ItemPositionAuto)
+ return data;
+
+ // The 'auto' keyword computes to the computed value of align-items on the parent or 'normal' if the box has no parent.
+ if (!parent || !parent->computedStyle())
+ return { ItemPositionNormal, OverflowAlignmentDefault };
+ return parent->computedStyle()->alignItems();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> RefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(CSSPropertyID propertyID, EUpdateLayout updateLayout) const
</span><span class="lines">@@ -2376,30 +2398,31 @@
</span><span class="cx"> }
</span><span class="cx"> #endif
</span><span class="cx">
</span><del>-static RefPtr<CSSValueList> valueForItemPositionWithOverflowAlignment(ItemPosition itemPosition, OverflowAlignment overflowAlignment, ItemPositionType positionType)
</del><ins>+static Ref<CSSValueList> valueForItemPositionWithOverflowAlignment(const StyleSelfAlignmentData& data)
</ins><span class="cx"> {
</span><span class="cx"> auto& cssValuePool = CSSValuePool::singleton();
</span><del>- RefPtr<CSSValueList> result = CSSValueList::createSpaceSeparated();
- if (positionType == LegacyPosition)
- result->append(CSSPrimitiveValue::createIdentifier(CSSValueLegacy));
- result->append(cssValuePool.createValue(itemPosition));
- if (overflowAlignment != OverflowAlignmentDefault)
- result->append(cssValuePool.createValue(overflowAlignment));
- ASSERT(result->length() <= 2);
</del><ins>+ auto result = CSSValueList::createSpaceSeparated();
+ if (data.positionType() == LegacyPosition)
+ result.get().append(cssValuePool.createIdentifierValue(CSSValueLegacy));
+ result.get().append(cssValuePool.createValue(data.position()));
+ if (data.position() >= ItemPositionCenter && data.overflow() != OverflowAlignmentDefault)
+ result.get().append(cssValuePool.createValue(data.overflow()));
+ ASSERT(result.get().length() <= 2);
</ins><span class="cx"> return result;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-static RefPtr<CSSValueList> valueForContentPositionAndDistributionWithOverflowAlignment(const StyleContentAlignmentData& data)
</del><ins>+static Ref<CSSValueList> valueForContentPositionAndDistributionWithOverflowAlignment(const StyleContentAlignmentData& data)
</ins><span class="cx"> {
</span><del>- RefPtr<CSSValueList> result = CSSValueList::createSpaceSeparated();
</del><ins>+ auto& cssValuePool = CSSValuePool::singleton();
+ auto result = CSSValueList::createSpaceSeparated();
</ins><span class="cx"> if (data.distribution() != ContentDistributionDefault)
</span><del>- result->append(CSSPrimitiveValue::create(data.distribution()));
</del><ins>+ result.get().append(cssValuePool.createValue(data.distribution()));
</ins><span class="cx"> if (data.distribution() == ContentDistributionDefault || data.position() != ContentPositionNormal)
</span><del>- result->append(CSSPrimitiveValue::create(data.position()));
</del><ins>+ result.get().append(cssValuePool.createValue(data.position()));
</ins><span class="cx"> if ((data.position() >= ContentPositionCenter || data.distribution() != ContentDistributionDefault) && data.overflow() != OverflowAlignmentDefault)
</span><del>- result->append(CSSPrimitiveValue::create(data.overflow()));
- ASSERT(result->length() > 0);
- ASSERT(result->length() <= 3);
</del><ins>+ result.get().append(cssValuePool.createValue(data.overflow()));
+ ASSERT(result.get().length() > 0);
+ ASSERT(result.get().length() <= 3);
</ins><span class="cx"> return result;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -2779,12 +2802,9 @@
</span><span class="cx"> case CSSPropertyAlignContent:
</span><span class="cx"> return valueForContentPositionAndDistributionWithOverflowAlignment(style->alignContent());
</span><span class="cx"> case CSSPropertyAlignItems:
</span><del>- return valueForItemPositionWithOverflowAlignment(resolveContainerAlignmentAuto(style->alignItemsPosition(), renderer), style->alignItemsOverflowAlignment(), NonLegacyPosition);
- case CSSPropertyAlignSelf: {
- OverflowAlignment overflow = style->alignSelfOverflowAlignment();
- ItemPosition alignSelf = resolveSelfAlignmentAuto(style->alignSelfPosition(), overflow, renderer);
- return valueForItemPositionWithOverflowAlignment(alignSelf, overflow, NonLegacyPosition);
- }
</del><ins>+ return valueForItemPositionWithOverflowAlignment(style->alignItems());
+ case CSSPropertyAlignSelf:
+ return valueForItemPositionWithOverflowAlignment(resolveAlignSelfAuto(style->alignSelf(), styledNode->parentNode()));
</ins><span class="cx"> case CSSPropertyFlex:
</span><span class="cx"> return getCSSPropertyValuesForShorthandProperties(flexShorthand());
</span><span class="cx"> case CSSPropertyFlexBasis:
</span><span class="lines">@@ -2802,12 +2822,9 @@
</span><span class="cx"> case CSSPropertyJustifyContent:
</span><span class="cx"> return valueForContentPositionAndDistributionWithOverflowAlignment(style->justifyContent());
</span><span class="cx"> case CSSPropertyJustifyItems:
</span><del>- return valueForItemPositionWithOverflowAlignment(resolveContainerAlignmentAuto(style->justifyItemsPosition(), renderer), style->justifyItemsOverflowAlignment(), style->justifyItemsPositionType());
- case CSSPropertyJustifySelf: {
- OverflowAlignment overflow = style->justifySelfOverflowAlignment();
- ItemPosition justifySelf = resolveSelfAlignmentAuto(style->justifySelfPosition(), overflow, renderer);
- return valueForItemPositionWithOverflowAlignment(justifySelf, overflow, NonLegacyPosition);
- }
</del><ins>+ return valueForItemPositionWithOverflowAlignment(resolveJustifyItemsAuto(style->justifyItems(), styledNode->parentNode()));
+ case CSSPropertyJustifySelf:
+ return valueForItemPositionWithOverflowAlignment(resolveJustifySelfAuto(style->justifySelf(), styledNode->parentNode()));
</ins><span class="cx"> case CSSPropertyOrder:
</span><span class="cx"> return cssValuePool.createValue(style->order(), CSSPrimitiveValue::CSS_NUMBER);
</span><span class="cx"> case CSSPropertyFloat:
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSParser.cpp (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSParser.cpp 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/Source/WebCore/css/CSSParser.cpp 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -3423,16 +3423,19 @@
</span><span class="cx">
</span><span class="cx"> bool CSSParser::parseItemPositionOverflowPosition(CSSPropertyID propId, bool important)
</span><span class="cx"> {
</span><del>- // auto | stretch | <baseline-position> | [<item-position> && <overflow-position>? ]
</del><ins>+ // auto | normal | stretch | <baseline-position> | [<item-position> && <overflow-position>? ]
</ins><span class="cx"> // <baseline-position> = baseline | last-baseline;
</span><span class="cx"> // <item-position> = center | start | end | self-start | self-end | flex-start | flex-end | left | right;
</span><del>- // <overflow-position> = true | safe
</del><ins>+ // <overflow-position> = unsafe | safe
</ins><span class="cx">
</span><span class="cx"> CSSParserValue* value = m_valueList->current();
</span><span class="cx"> if (!value)
</span><span class="cx"> return false;
</span><span class="cx">
</span><del>- if (value->id == CSSValueAuto || value->id == CSSValueStretch || isBaselinePositionKeyword(value->id)) {
</del><ins>+ if (value->id == CSSValueAuto || value->id == CSSValueNormal || value->id == CSSValueStretch || isBaselinePositionKeyword(value->id)) {
+ // align-items property does not allow the 'auto' value.
+ if (value->id == CSSValueAuto && propId == CSSPropertyAlignItems)
+ return false;
</ins><span class="cx"> if (m_valueList->next())
</span><span class="cx"> return false;
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSPrimitiveValueMappingsh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -5118,6 +5118,9 @@
</span><span class="cx"> case ItemPositionAuto:
</span><span class="cx"> m_value.valueID = CSSValueAuto;
</span><span class="cx"> break;
</span><ins>+ case ItemPositionNormal:
+ m_value.valueID = CSSValueNormal;
+ break;
</ins><span class="cx"> case ItemPositionStretch:
</span><span class="cx"> m_value.valueID = CSSValueStretch;
</span><span class="cx"> break;
</span><span class="lines">@@ -5162,6 +5165,8 @@
</span><span class="cx"> switch (m_value.valueID) {
</span><span class="cx"> case CSSValueAuto:
</span><span class="cx"> return ItemPositionAuto;
</span><ins>+ case CSSValueNormal:
+ return ItemPositionNormal;
</ins><span class="cx"> case CSSValueStretch:
</span><span class="cx"> return ItemPositionStretch;
</span><span class="cx"> case CSSValueBaseline:
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSPropertyNamesin"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSPropertyNames.in (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSPropertyNames.in 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/Source/WebCore/css/CSSPropertyNames.in 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -468,7 +468,7 @@
</span><span class="cx"> -webkit-filter = filter
</span><span class="cx"> align-content [Initial=initialContentAlignment, Converter=ContentAlignmentData]
</span><span class="cx"> -webkit-align-content = align-content
</span><del>-align-items [Initial=initialSelfAlignment, Converter=SelfOrDefaultAlignmentData]
</del><ins>+align-items [Initial=initialDefaultAlignment, Converter=SelfOrDefaultAlignmentData]
</ins><span class="cx"> -webkit-align-items = align-items
</span><span class="cx"> align-self [Initial=initialSelfAlignment, Converter=SelfOrDefaultAlignmentData]
</span><span class="cx"> -webkit-align-self = align-self
</span></span></pre></div>
<a id="trunkSourceWebCorecssStyleResolvercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleResolver.cpp (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleResolver.cpp 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/Source/WebCore/css/StyleResolver.cpp 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -1009,11 +1009,6 @@
</span><span class="cx"> if ((element->hasTagName(SVGNames::foreignObjectTag) || element->hasTagName(SVGNames::textTag)) && style.isDisplayInlineType())
</span><span class="cx"> style.setDisplay(BLOCK);
</span><span class="cx"> }
</span><del>-
- // If the inherited value of justify-items includes the legacy keyword, 'auto'
- // computes to the the inherited value.
- if (parentStyle.justifyItemsPositionType() == LegacyPosition && style.justifyItemsPosition() == ItemPositionAuto)
- style.setJustifyItems(parentStyle.justifyItems());
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> bool StyleResolver::checkRegionStyle(const Element* regionElement)
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBox.cpp 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -2519,7 +2519,7 @@
</span><span class="cx"> static bool flexItemHasStretchAlignment(const RenderBox& flexitem)
</span><span class="cx"> {
</span><span class="cx"> auto parent = flexitem.parent();
</span><del>- return RenderStyle::resolveAlignment(parent->style(), flexitem.style(), ItemPositionStretch) == ItemPositionStretch;
</del><ins>+ return flexitem.style().resolvedAlignSelf(parent->style(), ItemPositionStretch).position() == ItemPositionStretch;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> static bool isStretchingColumnFlexItem(const RenderBox& flexitem)
</span><span class="lines">@@ -2547,8 +2547,8 @@
</span><span class="cx"> return false;
</span><span class="cx"> }
</span><span class="cx"> if (containingBlock->isHorizontalWritingMode() != isHorizontalWritingMode())
</span><del>- return RenderStyle::resolveAlignment(containingBlock->style(), style, ItemPositionStretch) == ItemPositionStretch;
- return RenderStyle::resolveJustification(containingBlock->style(), style, ItemPositionStretch) == ItemPositionStretch;
</del><ins>+ return style.resolvedAlignSelf(containingBlock->style(), ItemPositionStretch).position() == ItemPositionStretch;
+ return style.resolvedJustifySelf(containingBlock->style(), ItemPositionStretch).position() == ItemPositionStretch;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> bool RenderBox::sizesLogicalWidthToFitContent(SizeType widthType) const
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderFlexibleBoxcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -39,6 +39,8 @@
</span><span class="cx">
</span><span class="cx"> namespace WebCore {
</span><span class="cx">
</span><ins>+static constexpr ItemPosition selfAlignmentNormalBehaviorFlexibleBox = ItemPositionStretch;
+
</ins><span class="cx"> struct RenderFlexibleBox::LineContext {
</span><span class="cx"> LineContext(LayoutUnit crossAxisOffset, LayoutUnit crossAxisExtent, size_t numberOfChildren, LayoutUnit maxAscent)
</span><span class="cx"> : crossAxisOffset(crossAxisOffset)
</span><span class="lines">@@ -231,12 +233,14 @@
</span><span class="cx"> {
</span><span class="cx"> RenderBlock::styleDidChange(diff, oldStyle);
</span><span class="cx">
</span><del>- if (oldStyle && (oldStyle->alignItemsPosition() == ItemPositionStretch || oldStyle->alignItemsPosition() == ItemPositionAuto) && diff == StyleDifferenceLayout) {
</del><ins>+ if (oldStyle && oldStyle->resolvedAlignItems(selfAlignmentNormalBehaviorFlexibleBox).position() == ItemPositionStretch && diff == StyleDifferenceLayout) {
</ins><span class="cx"> // Flex items that were previously stretching need to be relayed out so we can compute new available cross axis space.
</span><span class="cx"> // This is only necessary for stretching since other alignment values don't change the size of the box.
</span><ins>+ auto& newStyle = style();
</ins><span class="cx"> for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
</span><del>- ItemPosition previousAlignment = RenderStyle::resolveAlignment(*oldStyle, child->style(), ItemPositionStretch);
- if (previousAlignment == ItemPositionStretch && previousAlignment != RenderStyle::resolveAlignment(style(), child->style(), ItemPositionStretch))
</del><ins>+ auto& childStyle = child->style();
+ auto previousAlignment = childStyle.resolvedAlignSelf(*oldStyle, selfAlignmentNormalBehaviorFlexibleBox).position();
+ if (previousAlignment == ItemPositionStretch && previousAlignment != childStyle.resolvedAlignSelf(newStyle, selfAlignmentNormalBehaviorFlexibleBox).position())
</ins><span class="cx"> child->setChildNeedsLayout(MarkOnlyThis);
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -1046,7 +1050,7 @@
</span><span class="cx">
</span><span class="cx"> ItemPosition RenderFlexibleBox::alignmentForChild(RenderBox& child) const
</span><span class="cx"> {
</span><del>- ItemPosition align = RenderStyle::resolveAlignment(style(), child.style(), ItemPositionStretch);
</del><ins>+ ItemPosition align = child.style().resolvedAlignSelf(style(), selfAlignmentNormalBehaviorFlexibleBox).position();
</ins><span class="cx">
</span><span class="cx"> if (align == ItemPositionBaseline && hasOrthogonalFlow(child))
</span><span class="cx"> align = ItemPositionFlexStart;
</span><span class="lines">@@ -1094,7 +1098,7 @@
</span><span class="cx"> return child.style().overflowY();
</span><span class="cx"> }
</span><span class="cx">
</span><del>-static const StyleContentAlignmentData& normalValueBehaviorFlexibleBox()
</del><ins>+static const StyleContentAlignmentData& contentAlignmentNormalBehaviorFlexibleBox()
</ins><span class="cx"> {
</span><span class="cx"> // The justify-content property applies along the main axis, but since flexing
</span><span class="cx"> // in the main axis is controlled by flex, stretch behaves as flex-start (ignoring
</span><span class="lines">@@ -1108,8 +1112,8 @@
</span><span class="cx"> {
</span><span class="cx"> ASSERT(childSizes.size() == children.size());
</span><span class="cx">
</span><del>- ContentPosition position = style().resolvedJustifyContentPosition(normalValueBehaviorFlexibleBox());
- ContentDistributionType distribution = style().resolvedJustifyContentDistribution(normalValueBehaviorFlexibleBox());
</del><ins>+ auto position = style().resolvedJustifyContentPosition(contentAlignmentNormalBehaviorFlexibleBox());
+ auto distribution = style().resolvedJustifyContentDistribution(contentAlignmentNormalBehaviorFlexibleBox());
</ins><span class="cx">
</span><span class="cx"> size_t numberOfChildrenForJustifyContent = numberOfInFlowPositionedChildren(children);
</span><span class="cx"> LayoutUnit autoMarginOffset = autoMarginOffsetInMainAxis(children, availableFreeSpace);
</span><span class="lines">@@ -1192,8 +1196,8 @@
</span><span class="cx">
</span><span class="cx"> void RenderFlexibleBox::layoutColumnReverse(const OrderedFlexItemList& children, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace)
</span><span class="cx"> {
</span><del>- ContentPosition position = style().resolvedJustifyContentPosition(normalValueBehaviorFlexibleBox());
- ContentDistributionType distribution = style().resolvedJustifyContentDistribution(normalValueBehaviorFlexibleBox());
</del><ins>+ auto position = style().resolvedJustifyContentPosition(contentAlignmentNormalBehaviorFlexibleBox());
+ auto distribution = style().resolvedJustifyContentDistribution(contentAlignmentNormalBehaviorFlexibleBox());
</ins><span class="cx">
</span><span class="cx"> // This is similar to the logic in layoutAndPlaceChildren, except we place the children
</span><span class="cx"> // starting from the end of the flexbox. We also don't need to layout anything since we're
</span><span class="lines">@@ -1250,8 +1254,8 @@
</span><span class="cx">
</span><span class="cx"> void RenderFlexibleBox::alignFlexLines(Vector<LineContext>& lineContexts)
</span><span class="cx"> {
</span><del>- ContentPosition position = style().resolvedAlignContentPosition(normalValueBehaviorFlexibleBox());
- ContentDistributionType distribution = style().resolvedAlignContentDistribution(normalValueBehaviorFlexibleBox());
</del><ins>+ ContentPosition position = style().resolvedAlignContentPosition(contentAlignmentNormalBehaviorFlexibleBox());
+ ContentDistributionType distribution = style().resolvedAlignContentDistribution(contentAlignmentNormalBehaviorFlexibleBox());
</ins><span class="cx">
</span><span class="cx"> if (!isMultiline() || position == ContentPositionFlexStart)
</span><span class="cx"> return;
</span><span class="lines">@@ -1313,6 +1317,7 @@
</span><span class="cx">
</span><span class="cx"> switch (alignmentForChild(*child)) {
</span><span class="cx"> case ItemPositionAuto:
</span><ins>+ case ItemPositionNormal:
</ins><span class="cx"> ASSERT_NOT_REACHED();
</span><span class="cx"> break;
</span><span class="cx"> case ItemPositionStart:
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -39,6 +39,7 @@
</span><span class="cx"> namespace WebCore {
</span><span class="cx">
</span><span class="cx"> static const int infinity = -1;
</span><ins>+static constexpr ItemPosition selfAlignmentNormalBehavior = ItemPositionStretch;
</ins><span class="cx">
</span><span class="cx"> class GridTrack {
</span><span class="cx"> public:
</span><span class="lines">@@ -264,35 +265,35 @@
</span><span class="cx">
</span><span class="cx"> static inline bool defaultAlignmentChangedToStretchInRowAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle)
</span><span class="cx"> {
</span><del>- return !defaultAlignmentIsStretch(oldStyle.justifyItemsPosition()) && defaultAlignmentIsStretch(newStyle.justifyItemsPosition());
</del><ins>+ return !defaultAlignmentIsStretch(oldStyle.justifyItems().position()) && defaultAlignmentIsStretch(newStyle.justifyItems().position());
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> static inline bool defaultAlignmentChangedFromStretchInRowAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle)
</span><span class="cx"> {
</span><del>- return defaultAlignmentIsStretch(oldStyle.justifyItemsPosition()) && !defaultAlignmentIsStretch(newStyle.justifyItemsPosition());
</del><ins>+ return defaultAlignmentIsStretch(oldStyle.justifyItems().position()) && !defaultAlignmentIsStretch(newStyle.justifyItems().position());
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> static inline bool defaultAlignmentChangedFromStretchInColumnAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle)
</span><span class="cx"> {
</span><del>- return defaultAlignmentIsStretch(oldStyle.alignItemsPosition()) && !defaultAlignmentIsStretch(newStyle.alignItemsPosition());
</del><ins>+ return defaultAlignmentIsStretch(oldStyle.alignItems().position()) && !defaultAlignmentIsStretch(newStyle.alignItems().position());
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> static inline bool selfAlignmentChangedToStretchInRowAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderStyle& childStyle)
</span><span class="cx"> {
</span><del>- return RenderStyle::resolveJustification(oldStyle, childStyle, ItemPositionStretch) != ItemPositionStretch
- && RenderStyle::resolveJustification(newStyle, childStyle, ItemPositionStretch) == ItemPositionStretch;
</del><ins>+ return childStyle.resolvedJustifySelf(oldStyle, selfAlignmentNormalBehavior).position() != ItemPositionStretch
+ && childStyle.resolvedJustifySelf(newStyle, selfAlignmentNormalBehavior).position() == ItemPositionStretch;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> static inline bool selfAlignmentChangedFromStretchInRowAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderStyle& childStyle)
</span><span class="cx"> {
</span><del>- return RenderStyle::resolveJustification(oldStyle, childStyle, ItemPositionStretch) == ItemPositionStretch
- && RenderStyle::resolveJustification(newStyle, childStyle, ItemPositionStretch) != ItemPositionStretch;
</del><ins>+ return childStyle.resolvedJustifySelf(oldStyle, selfAlignmentNormalBehavior).position() == ItemPositionStretch
+ && childStyle.resolvedJustifySelf(newStyle, selfAlignmentNormalBehavior).position() != ItemPositionStretch;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> static inline bool selfAlignmentChangedFromStretchInColumnAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderStyle& childStyle)
</span><span class="cx"> {
</span><del>- return RenderStyle::resolveAlignment(oldStyle, childStyle, ItemPositionStretch) == ItemPositionStretch
- && RenderStyle::resolveAlignment(newStyle, childStyle, ItemPositionStretch) != ItemPositionStretch;
</del><ins>+ return childStyle.resolvedAlignSelf(oldStyle, selfAlignmentNormalBehavior).position() == ItemPositionStretch
+ && childStyle.resolvedAlignSelf(newStyle, selfAlignmentNormalBehavior).position() != ItemPositionStretch;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> void RenderGrid::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle)
</span><span class="lines">@@ -1511,7 +1512,7 @@
</span><span class="cx"> m_gridItemArea.clear();
</span><span class="cx"> }
</span><span class="cx">
</span><del>-static const StyleContentAlignmentData& normalValueBehaviorGrid()
</del><ins>+static const StyleContentAlignmentData& contentAlignmentNormalBehaviorGrid()
</ins><span class="cx"> {
</span><span class="cx"> static const StyleContentAlignmentData normalBehavior = {ContentPositionNormal, ContentDistributionStretch};
</span><span class="cx"> return normalBehavior;
</span><span class="lines">@@ -1522,8 +1523,8 @@
</span><span class="cx"> Optional<LayoutUnit> freeSpace = sizingData.freeSpaceForDirection(direction);
</span><span class="cx"> if (!freeSpace
</span><span class="cx"> || freeSpace.value() <= 0
</span><del>- || (direction == ForColumns && style().resolvedJustifyContentDistribution(normalValueBehaviorGrid()) != ContentDistributionStretch)
- || (direction == ForRows && style().resolvedAlignContentDistribution(normalValueBehaviorGrid()) != ContentDistributionStretch))
</del><ins>+ || (direction == ForColumns && style().resolvedJustifyContentDistribution(contentAlignmentNormalBehaviorGrid()) != ContentDistributionStretch)
+ || (direction == ForRows && style().resolvedAlignContentDistribution(contentAlignmentNormalBehaviorGrid()) != ContentDistributionStretch))
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> // Spec defines auto-sized tracks as the ones with an 'auto' max-sizing function.
</span><span class="lines">@@ -1803,7 +1804,7 @@
</span><span class="cx"> // FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
</span><span class="cx"> bool RenderGrid::needToStretchChildLogicalHeight(const RenderBox& child) const
</span><span class="cx"> {
</span><del>- if (RenderStyle::resolveAlignment(style(), child.style(), ItemPositionStretch) != ItemPositionStretch)
</del><ins>+ if (child.style().resolvedAlignSelf(style(), selfAlignmentNormalBehavior).position() != ItemPositionStretch)
</ins><span class="cx"> return false;
</span><span class="cx">
</span><span class="cx"> return isHorizontalWritingMode() && child.style().height().isAuto();
</span><span class="lines">@@ -1852,7 +1853,7 @@
</span><span class="cx"> bool isHorizontalMode = isHorizontalWritingMode();
</span><span class="cx"> bool hasAutoSizeInColumnAxis = isHorizontalMode ? childStyle.height().isAuto() : childStyle.width().isAuto();
</span><span class="cx"> bool allowedToStretchChildAlongColumnAxis = hasAutoSizeInColumnAxis && !childStyle.marginBeforeUsing(&gridStyle).isAuto() && !childStyle.marginAfterUsing(&gridStyle).isAuto();
</span><del>- if (allowedToStretchChildAlongColumnAxis && RenderStyle::resolveAlignment(gridStyle, childStyle, ItemPositionStretch) == ItemPositionStretch) {
</del><ins>+ if (allowedToStretchChildAlongColumnAxis && childStyle.resolvedAlignSelf(style(), selfAlignmentNormalBehavior).position() == ItemPositionStretch) {
</ins><span class="cx"> // TODO (lajava): If the child has orthogonal flow, then it already has an override height set, so use it.
</span><span class="cx"> // TODO (lajava): grid track sizing and positioning do not support orthogonal modes yet.
</span><span class="cx"> if (child.isHorizontalWritingMode() == isHorizontalMode) {
</span><span class="lines">@@ -1933,7 +1934,7 @@
</span><span class="cx"> bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
</span><span class="cx"> bool hasSameWritingMode = child.style().writingMode() == style().writingMode();
</span><span class="cx">
</span><del>- switch (RenderStyle::resolveAlignment(style(), child.style(), ItemPositionStretch)) {
</del><ins>+ switch (child.style().resolvedAlignSelf(style(), selfAlignmentNormalBehavior).position()) {
</ins><span class="cx"> case ItemPositionSelfStart:
</span><span class="cx"> // If orthogonal writing-modes, this computes to 'start'.
</span><span class="cx"> // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
</span><span class="lines">@@ -1969,6 +1970,7 @@
</span><span class="cx"> // FIXME: Implement the previous values. For now, we always 'start' align the child.
</span><span class="cx"> return GridAxisStart;
</span><span class="cx"> case ItemPositionAuto:
</span><ins>+ case ItemPositionNormal:
</ins><span class="cx"> break;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1982,7 +1984,7 @@
</span><span class="cx"> bool hasSameDirection = child.style().direction() == style().direction();
</span><span class="cx"> bool isLTR = style().isLeftToRightDirection();
</span><span class="cx">
</span><del>- switch (RenderStyle::resolveJustification(style(), child.style(), ItemPositionStretch)) {
</del><ins>+ switch (child.style().resolvedJustifySelf(style(), selfAlignmentNormalBehavior).position()) {
</ins><span class="cx"> case ItemPositionSelfStart:
</span><span class="cx"> // For orthogonal writing-modes, this computes to 'start'
</span><span class="cx"> // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
</span><span class="lines">@@ -2011,6 +2013,7 @@
</span><span class="cx"> // FIXME: Implement the previous values. For now, we always 'start' align the child.
</span><span class="cx"> return GridAxisStart;
</span><span class="cx"> case ItemPositionAuto:
</span><ins>+ case ItemPositionNormal:
</ins><span class="cx"> break;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -2040,7 +2043,8 @@
</span><span class="cx"> if (childEndLine < m_rowPositions.size() - 1)
</span><span class="cx"> endOfRow -= guttersSize(ForRows, 2) + m_offsetBetweenRows;
</span><span class="cx"> LayoutUnit childBreadth = child.logicalHeight() + child.marginLogicalHeight();
</span><del>- LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveAlignmentOverflow(style(), child.style()), endOfRow - startOfRow, childBreadth);
</del><ins>+ auto overflow = child.style().resolvedAlignSelf(style(), selfAlignmentNormalBehavior).overflow();
+ LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(overflow, endOfRow - startOfRow, childBreadth);
</ins><span class="cx"> return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -2072,7 +2076,8 @@
</span><span class="cx"> if (childEndLine < m_columnPositions.size() - 1)
</span><span class="cx"> endOfColumn -= guttersSize(ForColumns, 2) + m_offsetBetweenColumns;
</span><span class="cx"> LayoutUnit childBreadth = child.logicalWidth() + child.marginLogicalWidth();
</span><del>- LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveJustificationOverflow(style(), child.style()), endOfColumn - startOfColumn, childBreadth);
</del><ins>+ auto overflow = child.style().resolvedJustifySelf(style(), selfAlignmentNormalBehavior).overflow();
+ LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(overflow, endOfColumn - startOfColumn, childBreadth);
</ins><span class="cx"> return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -2134,15 +2139,15 @@
</span><span class="cx"> ContentAlignmentData RenderGrid::computeContentPositionAndDistributionOffset(GridTrackSizingDirection direction, const LayoutUnit& availableFreeSpace, unsigned numberOfGridTracks) const
</span><span class="cx"> {
</span><span class="cx"> bool isRowAxis = direction == ForColumns;
</span><del>- ContentPosition position = isRowAxis ? style().resolvedJustifyContentPosition(normalValueBehaviorGrid()) : style().resolvedAlignContentPosition(normalValueBehaviorGrid());
- ContentDistributionType distribution = isRowAxis ? style().resolvedJustifyContentDistribution(normalValueBehaviorGrid()) : style().resolvedAlignContentDistribution(normalValueBehaviorGrid());
</del><ins>+ auto position = isRowAxis ? style().resolvedJustifyContentPosition(contentAlignmentNormalBehaviorGrid()) : style().resolvedAlignContentPosition(contentAlignmentNormalBehaviorGrid());
+ auto distribution = isRowAxis ? style().resolvedJustifyContentDistribution(contentAlignmentNormalBehaviorGrid()) : style().resolvedAlignContentDistribution(contentAlignmentNormalBehaviorGrid());
</ins><span class="cx"> // If <content-distribution> value can't be applied, 'position' will become the associated
</span><span class="cx"> // <content-position> fallback value.
</span><del>- ContentAlignmentData contentAlignment = contentDistributionOffset(availableFreeSpace, position, distribution, numberOfGridTracks);
</del><ins>+ auto contentAlignment = contentDistributionOffset(availableFreeSpace, position, distribution, numberOfGridTracks);
</ins><span class="cx"> if (contentAlignment.isValid())
</span><span class="cx"> return contentAlignment;
</span><span class="cx">
</span><del>- OverflowAlignment overflow = isRowAxis ? style().justifyContentOverflowAlignment() : style().alignContentOverflowAlignment();
</del><ins>+ auto overflow = isRowAxis ? style().justifyContentOverflowAlignment() : style().alignContentOverflowAlignment();
</ins><span class="cx"> if (availableFreeSpace <= 0 && overflow == OverflowAlignmentSafe)
</span><span class="cx"> return {0, 0};
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleRenderStylecpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/RenderStyle.cpp (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/RenderStyle.cpp 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/Source/WebCore/rendering/style/RenderStyle.cpp 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -190,40 +190,46 @@
</span><span class="cx"> #endif
</span><span class="cx"> }
</span><span class="cx">
</span><del>-static inline StyleSelfAlignmentData resolveAlignmentData(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer)
</del><ins>+static StyleSelfAlignmentData resolvedSelfAlignment(const StyleSelfAlignmentData& value, ItemPosition normalValueBehavior)
</ins><span class="cx"> {
</span><del>- // The auto keyword computes to the parent's align-items computed value, or to "stretch", if not set or "auto".
- if (childStyle.alignSelfPosition() == ItemPositionAuto)
- return (parentStyle.alignItemsPosition() == ItemPositionAuto) ? StyleSelfAlignmentData(resolvedAutoPositionForRenderer, OverflowAlignmentDefault) : parentStyle.alignItems();
- return childStyle.alignSelf();
</del><ins>+ ASSERT(value.position() != ItemPositionAuto);
+ if (value.position() == ItemPositionNormal)
+ return { normalValueBehavior, OverflowAlignmentDefault };
+ return value;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-static inline StyleSelfAlignmentData resolveJustificationData(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer)
</del><ins>+StyleSelfAlignmentData RenderStyle::resolvedAlignItems(ItemPosition normalValueBehaviour) const
</ins><span class="cx"> {
</span><del>- // The auto keyword computes to the parent's justify-items computed value, or to "stretch", if not set or "auto".
- if (childStyle.justifySelfPosition() == ItemPositionAuto)
- return (parentStyle.justifyItemsPosition() == ItemPositionAuto) ? StyleSelfAlignmentData(resolvedAutoPositionForRenderer, OverflowAlignmentDefault) : parentStyle.justifyItems();
- return childStyle.justifySelf();
</del><ins>+ return resolvedSelfAlignment(alignItems(), normalValueBehaviour);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-ItemPosition RenderStyle::resolveAlignment(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer)
</del><ins>+StyleSelfAlignmentData RenderStyle::resolvedAlignSelf(const RenderStyle& parentStyle, ItemPosition normalValueBehaviour) const
</ins><span class="cx"> {
</span><del>- return resolveAlignmentData(parentStyle, childStyle, resolvedAutoPositionForRenderer).position();
</del><ins>+ // The auto keyword computes to the parent's align-items computed value.
+ // We will return the behaviour of 'normal' value if needed, which is specific of each layout model.
+ if (alignSelfPosition() == ItemPositionAuto)
+ return parentStyle.resolvedAlignItems(normalValueBehaviour);
+ return resolvedSelfAlignment(alignSelf(), normalValueBehaviour);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-OverflowAlignment RenderStyle::resolveAlignmentOverflow(const RenderStyle& parentStyle, const RenderStyle& childStyle)
</del><ins>+StyleSelfAlignmentData RenderStyle::resolvedJustifyItems(ItemPosition normalValueBehaviour) const
</ins><span class="cx"> {
</span><del>- return resolveAlignmentData(parentStyle, childStyle, ItemPositionStretch).overflow();
-}
</del><ins>+ // FIXME: justify-items 'auto' value is allowed only to provide the 'legacy' keyword's behavior, which it's still not implemented for layout.
+ // "If the inherited value of justify-items includes the legacy keyword, auto computes to the inherited value."
+ // https://drafts.csswg.org/css-align/#justify-items-property
+ if (justifyItemsPosition() == ItemPositionAuto)
+ return { normalValueBehaviour, OverflowAlignmentDefault };
</ins><span class="cx">
</span><del>-ItemPosition RenderStyle::resolveJustification(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer)
-{
- return resolveJustificationData(parentStyle, childStyle, resolvedAutoPositionForRenderer).position();
</del><ins>+ return resolvedSelfAlignment(justifyItems(), normalValueBehaviour);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-OverflowAlignment RenderStyle::resolveJustificationOverflow(const RenderStyle& parentStyle, const RenderStyle& childStyle)
</del><ins>+StyleSelfAlignmentData RenderStyle::resolvedJustifySelf(const RenderStyle& parentStyle, ItemPosition normalValueBehaviour) const
</ins><span class="cx"> {
</span><del>- return resolveJustificationData(parentStyle, childStyle, ItemPositionStretch).overflow();
</del><ins>+ // The auto keyword computes to the parent's justify-items computed value.
+ // We will return the behaviour of 'normal' value if needed, which is specific of each layout model.
+ if (justifySelfPosition() == ItemPositionAuto)
+ return parentStyle.resolvedJustifyItems(normalValueBehaviour);
+ return resolvedSelfAlignment(justifySelf(), normalValueBehaviour);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> static inline ContentPosition resolvedContentAlignmentPosition(const StyleContentAlignmentData& value, const StyleContentAlignmentData& normalValueBehavior)
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleRenderStyleh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/RenderStyle.h (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/RenderStyle.h 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/Source/WebCore/rendering/style/RenderStyle.h 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -508,10 +508,10 @@
</span><span class="cx"> ContentDistributionType resolvedJustifyContentDistribution(const StyleContentAlignmentData& normalValueBehavior) const;
</span><span class="cx"> ContentPosition resolvedAlignContentPosition(const StyleContentAlignmentData& normalValueBehavior) const;
</span><span class="cx"> ContentDistributionType resolvedAlignContentDistribution(const StyleContentAlignmentData& normalValueBehavior) const;
</span><del>- static ItemPosition resolveAlignment(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer);
- static OverflowAlignment resolveAlignmentOverflow(const RenderStyle& parentStyle, const RenderStyle& childStyle);
- static ItemPosition resolveJustification(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer);
- static OverflowAlignment resolveJustificationOverflow(const RenderStyle& parentStyle, const RenderStyle& childStyle);
</del><ins>+ StyleSelfAlignmentData resolvedAlignItems(ItemPosition normalValueBehaviour) const;
+ StyleSelfAlignmentData resolvedAlignSelf(const RenderStyle& parentStyle, ItemPosition normalValueBehaviour) const;
+ StyleSelfAlignmentData resolvedJustifyItems(ItemPosition normalValueBehaviour) const;
+ StyleSelfAlignmentData resolvedJustifySelf(const RenderStyle& parentStyle, ItemPosition normalValueBehaviour) const;
</ins><span class="cx">
</span><span class="cx"> enum IsAtShadowBoundary {
</span><span class="cx"> AtShadowBoundary,
</span><span class="lines">@@ -2004,6 +2004,7 @@
</span><span class="cx"> static Length initialFlexBasis() { return Length(Auto); }
</span><span class="cx"> static int initialOrder() { return 0; }
</span><span class="cx"> static StyleSelfAlignmentData initialSelfAlignment() { return StyleSelfAlignmentData(ItemPositionAuto, OverflowAlignmentDefault); }
</span><ins>+ static StyleSelfAlignmentData initialDefaultAlignment() { return StyleSelfAlignmentData(ItemPositionNormal, OverflowAlignmentDefault); }
</ins><span class="cx"> static StyleContentAlignmentData initialContentAlignment() { return StyleContentAlignmentData(ContentPositionNormal, ContentDistributionDefault, OverflowAlignmentDefault); }
</span><span class="cx"> static EFlexDirection initialFlexDirection() { return FlowRow; }
</span><span class="cx"> static EFlexWrap initialFlexWrap() { return FlexNoWrap; }
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleRenderStyleConstantsh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/RenderStyleConstants.h (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/RenderStyleConstants.h 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/Source/WebCore/rendering/style/RenderStyleConstants.h 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -254,11 +254,11 @@
</span><span class="cx"> enum EAlignContent { AlignContentFlexStart, AlignContentFlexEnd, AlignContentCenter, AlignContentSpaceBetween, AlignContentSpaceAround, AlignContentStretch };
</span><span class="cx"> enum EFlexDirection { FlowRow, FlowRowReverse, FlowColumn, FlowColumnReverse };
</span><span class="cx"> enum EFlexWrap { FlexNoWrap, FlexWrap, FlexWrapReverse };
</span><del>-enum ItemPosition {ItemPositionAuto, ItemPositionStretch, ItemPositionBaseline, ItemPositionLastBaseline, ItemPositionCenter, ItemPositionStart, ItemPositionEnd, ItemPositionSelfStart, ItemPositionSelfEnd, ItemPositionFlexStart, ItemPositionFlexEnd, ItemPositionLeft, ItemPositionRight};
-enum OverflowAlignment {OverflowAlignmentDefault, OverflowAlignmentUnsafe, OverflowAlignmentSafe};
-enum ItemPositionType {NonLegacyPosition, LegacyPosition};
-enum ContentPosition {ContentPositionNormal, ContentPositionBaseline, ContentPositionLastBaseline, ContentPositionCenter, ContentPositionStart, ContentPositionEnd, ContentPositionFlexStart, ContentPositionFlexEnd, ContentPositionLeft, ContentPositionRight};
-enum ContentDistributionType {ContentDistributionDefault, ContentDistributionSpaceBetween, ContentDistributionSpaceAround, ContentDistributionSpaceEvenly, ContentDistributionStretch};
</del><ins>+enum ItemPosition { ItemPositionAuto, ItemPositionNormal, ItemPositionStretch, ItemPositionBaseline, ItemPositionLastBaseline, ItemPositionCenter, ItemPositionStart, ItemPositionEnd, ItemPositionSelfStart, ItemPositionSelfEnd, ItemPositionFlexStart, ItemPositionFlexEnd, ItemPositionLeft, ItemPositionRight };
+enum OverflowAlignment { OverflowAlignmentDefault, OverflowAlignmentUnsafe, OverflowAlignmentSafe };
+enum ItemPositionType { NonLegacyPosition, LegacyPosition };
+enum ContentPosition { ContentPositionNormal, ContentPositionBaseline, ContentPositionLastBaseline, ContentPositionCenter, ContentPositionStart, ContentPositionEnd, ContentPositionFlexStart, ContentPositionFlexEnd, ContentPositionLeft, ContentPositionRight };
+enum ContentDistributionType { ContentDistributionDefault, ContentDistributionSpaceBetween, ContentDistributionSpaceAround, ContentDistributionSpaceEvenly, ContentDistributionStretch };
</ins><span class="cx">
</span><span class="cx"> enum ETextSecurity {
</span><span class="cx"> TSNONE, TSDISC, TSCIRCLE, TSSQUARE
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleStyleRareNonInheritedDatacpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp (201497 => 201498)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp 2016-05-30 06:53:36 UTC (rev 201497)
+++ trunk/Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp 2016-05-30 08:14:31 UTC (rev 201498)
</span><span class="lines">@@ -75,7 +75,7 @@
</span><span class="cx"> , m_flowThread(RenderStyle::initialFlowThread())
</span><span class="cx"> , m_regionThread(RenderStyle::initialRegionThread())
</span><span class="cx"> , m_alignContent(RenderStyle::initialContentAlignment())
</span><del>- , m_alignItems(RenderStyle::initialSelfAlignment())
</del><ins>+ , m_alignItems(RenderStyle::initialDefaultAlignment())
</ins><span class="cx"> , m_alignSelf(RenderStyle::initialSelfAlignment())
</span><span class="cx"> , m_justifyContent(RenderStyle::initialContentAlignment())
</span><span class="cx"> , m_justifyItems(RenderStyle::initialSelfAlignment())
</span></span></pre>
</div>
</div>
</body>
</html>