<!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>[214564] 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/214564">214564</a></dd>
<dt>Author</dt> <dd>jfernandez@igalia.com</dd>
<dt>Date</dt> <dd>2017-03-29 15:01:11 -0700 (Wed, 29 Mar 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-align] Adapt self-alignment properties to the new baseline syntax
https://bugs.webkit.org/show_bug.cgi?id=170235
Reviewed by David Hyatt.
Source/WebCore:
The baseline-position syntax has changed recently, so we need to update
the CSS properties using the old syntax. This patch address only the
self-alignment (align-self and justify-self) and default-alignment
(align-items and justify-items).
The content-distribution properties (align-content and justify-content)
will be updated in a follow up patch.
The new baseline syntax is "[first | last ]? baseline" which implies
modifying the parsing and computed value logic.
There are several layout tests affected by this change, so I'll update
them accordingly.
No new tests, just added/modified some cases to the tests we already have using the new baseline values.
* css/CSSComputedStyleDeclaration.cpp:
(WebCore::valueForItemPositionWithOverflowAlignment):
* css/CSSValueKeywords.in:
* css/StyleBuilderConverter.h:
(WebCore::StyleBuilderConverter::convertSelfOrDefaultAlignmentData):
* css/parser/CSSPropertyParser.cpp:
(WebCore::consumeBaselineKeyword):
(WebCore::consumeSelfPositionOverflowPosition):
LayoutTests:
Added new cases to the alignment properties parsing tests so that we can verify the new
baseline-alignment syntax is parsed as expected.
Additionally, I modified the tests so that they use the testharness format.
* css3/parse-align-items-expected.txt:
* css3/parse-align-items.html:
* css3/parse-align-self-expected.txt:
* css3/parse-align-self.html:
* css3/resources/alignment-parsing-utils-th.js:
(checkValues):
* 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-th.js: Copied from LayoutTests/css3/resources/alignment-parsing-utils-th.js.
(checkValues):
(checkBadValues):
(checkInitialValues):
(checkInheritValues):
(checkLegacyValues):
(checkSupportedValues):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</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="#trunkLayoutTestscss3resourcesalignmentparsingutilsthjs">trunk/LayoutTests/css3/resources/alignment-parsing-utils-th.js</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="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssCSSComputedStyleDeclarationcpp">trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp</a></li>
<li><a href="#trunkSourceWebCorecssCSSValueKeywordsin">trunk/Source/WebCore/css/CSSValueKeywords.in</a></li>
<li><a href="#trunkSourceWebCorecssStyleBuilderConverterh">trunk/Source/WebCore/css/StyleBuilderConverter.h</a></li>
<li><a href="#trunkSourceWebCorecssparserCSSPropertyParsercpp">trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssresourcesalignmentparsingutilsthjs">trunk/LayoutTests/fast/css/resources/alignment-parsing-utils-th.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (214563 => 214564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2017-03-29 21:58:40 UTC (rev 214563)
+++ trunk/LayoutTests/ChangeLog 2017-03-29 22:01:11 UTC (rev 214564)
</span><span class="lines">@@ -1,3 +1,32 @@
</span><ins>+2017-03-29 Javier Fernandez <jfernandez@igalia.com>
+
+ [css-align] Adapt self-alignment properties to the new baseline syntax
+ https://bugs.webkit.org/show_bug.cgi?id=170235
+
+ Reviewed by David Hyatt.
+
+ Added new cases to the alignment properties parsing tests so that we can verify the new
+ baseline-alignment syntax is parsed as expected.
+ Additionally, I modified the tests so that they use the testharness format.
+
+ * css3/parse-align-items-expected.txt:
+ * css3/parse-align-items.html:
+ * css3/parse-align-self-expected.txt:
+ * css3/parse-align-self.html:
+ * css3/resources/alignment-parsing-utils-th.js:
+ (checkValues):
+ * 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-th.js: Copied from LayoutTests/css3/resources/alignment-parsing-utils-th.js.
+ (checkValues):
+ (checkBadValues):
+ (checkInitialValues):
+ (checkInheritValues):
+ (checkLegacyValues):
+ (checkSupportedValues):
+
</ins><span class="cx"> 2017-03-29 Chris Dumez <cdumez@apple.com>
</span><span class="cx">
</span><span class="cx"> Animated SVG images are not paused in pages loaded in the background
</span></span></pre></div>
<a id="trunkLayoutTestscss3parsealignitemsexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/parse-align-items-expected.txt (214563 => 214564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-align-items-expected.txt 2017-03-29 21:58:40 UTC (rev 214563)
+++ trunk/LayoutTests/css3/parse-align-items-expected.txt 2017-03-29 22:01:11 UTC (rev 214564)
</span><span class="lines">@@ -1,139 +1,12 @@
</span><span class="cx"> Test that setting and getting align-items works as expected
</span><span class="cx">
</span><del>-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</del><span class="cx">
</span><ins>+PASS Test getting align-items set through CSS.
+PASS Test initial value of align-items through JS
+PASS Test getting and setting align-items through JS
+PASS Test bad combinations of align-items
+PASS Test the value 'initial'
+PASS Test the value 'initial' for grid containers
+PASS Test the value 'initial' for flex containers
+PASS Test the value 'inherit'
</ins><span class="cx">
</span><del>-Test getting align-items set through CSS
-PASS getComputedStyle(alignItemsBaseline, '').getPropertyValue('-webkit-align-items') is 'baseline'
-PASS getComputedStyle(alignItemsLastBaseline, '').getPropertyValue('-webkit-align-items') is 'last-baseline'
-PASS getComputedStyle(alignItemsStretch, '').getPropertyValue('-webkit-align-items') is 'stretch'
-PASS getComputedStyle(alignItemsStart, '').getPropertyValue('-webkit-align-items') is 'start'
-PASS getComputedStyle(alignItemsEnd, '').getPropertyValue('-webkit-align-items') is 'end'
-PASS getComputedStyle(alignItemsCenter, '').getPropertyValue('-webkit-align-items') is 'center'
-PASS getComputedStyle(alignItemsSelfEnd, '').getPropertyValue('-webkit-align-items') is 'self-end'
-PASS getComputedStyle(alignItemsSelfStart, '').getPropertyValue('-webkit-align-items') is 'self-start'
-PASS getComputedStyle(alignItemsLeft, '').getPropertyValue('-webkit-align-items') is 'left'
-PASS getComputedStyle(alignItemsRight, '').getPropertyValue('-webkit-align-items') is 'right'
-PASS getComputedStyle(alignItemsFlexStart, '').getPropertyValue('-webkit-align-items') is 'flex-start'
-PASS getComputedStyle(alignItemsFlexEnd, '').getPropertyValue('-webkit-align-items') is 'flex-end'
-PASS getComputedStyle(alignItemsEndUnsafe, '').getPropertyValue('-webkit-align-items') is 'end unsafe'
-PASS getComputedStyle(alignItemsCenterUnsafe, '').getPropertyValue('-webkit-align-items') is 'center unsafe'
-PASS getComputedStyle(alignItemsSelfEndSafe, '').getPropertyValue('-webkit-align-items') is 'self-end safe'
-PASS getComputedStyle(alignItemsSelfStartSafe, '').getPropertyValue('-webkit-align-items') is 'self-start safe'
-PASS getComputedStyle(alignItemsRightSafe, '').getPropertyValue('-webkit-align-items') is 'right safe'
-PASS getComputedStyle(alignItemsLeftUnsafe, '').getPropertyValue('-webkit-align-items') is 'left unsafe'
-PASS getComputedStyle(alignItemsFlexStartUnsafe, '').getPropertyValue('-webkit-align-items') is 'flex-start unsafe'
-PASS getComputedStyle(alignItemsFlexEndSafe, '').getPropertyValue('-webkit-align-items') is 'flex-end safe'
-
-Test initial value of align-items through JS
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is 'normal'
-
-Test getting and setting align-items through JS
-PASS element.style.webkitAlignItems is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
-PASS element.style.webkitAlignItems is "start unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start unsafe"
-PASS element.style.webkitAlignItems is "flex-end safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "flex-end safe"
-PASS element.style.webkitAlignItems is "right"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "right"
-PASS element.style.webkitAlignItems is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
-PASS element.style.webkitAlignItems is "self-start"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "self-start"
-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"
-PASS element.style.webkitAlignItems is "self-end"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "self-end"
-
-Test bad combinations of align-items
-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"
-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"
-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"
-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"
-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"
-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"
-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"
-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"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-
-Test the value 'initial'
-PASS element.style.webkitAlignItems is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
-PASS element.style.webkitAlignItems is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-
-Test the value 'initial' for grid containers
-PASS element.style.webkitAlignItems is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "left safe"
-PASS element.style.webkitAlignItems is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-
-Test the value 'initial' for flex containers
-PASS element.style.webkitAlignItems is "right unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "right unsafe"
-PASS element.style.webkitAlignItems is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-
-Test the value 'inherit'
-PASS element.style.webkitAlignItems is "end"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "end"
-PASS element.style.webkitAlignItems is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "end"
-PASS element.style.webkitAlignItems is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "left safe"
-PASS element.style.webkitAlignItems is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "left safe"
-PASS element.style.webkitAlignItems is "center unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center unsafe"
-PASS element.style.webkitAlignItems is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center unsafe"
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
</del></span></pre></div>
<a id="trunkLayoutTestscss3parsealignitemshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/parse-align-items.html (214563 => 214564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-align-items.html 2017-03-29 21:58:40 UTC (rev 214563)
+++ trunk/LayoutTests/css3/parse-align-items.html 2017-03-29 22:01:11 UTC (rev 214564)
</span><span class="lines">@@ -1,92 +1,92 @@
</span><span class="cx"> <!DOCTYPE html>
</span><del>-<html>
-<head>
</del><span class="cx"> <style>
</span><span class="cx"> #alignItemsBaseline {
</span><del>- -webkit-align-items: baseline;
</del><ins>+ align-items: baseline;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+#alignItemsFirstBaseline {
+ align-items: first baseline;
+}
+
</ins><span class="cx"> #alignItemsLastBaseline {
</span><del>- -webkit-align-items: last-baseline;
</del><ins>+ align-items: last baseline;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsStretch {
</span><del>- -webkit-align-items: stretch;
</del><ins>+ align-items: stretch;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsStart {
</span><del>- -webkit-align-items: start;
</del><ins>+ align-items: start;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsEnd {
</span><del>- -webkit-align-items: end;
</del><ins>+ align-items: end;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsCenter {
</span><del>- -webkit-align-items: center;
</del><ins>+ align-items: center;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsSelfStart {
</span><del>- -webkit-align-items: self-start;
</del><ins>+ align-items: self-start;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsSelfEnd {
</span><del>- -webkit-align-items: self-end;
</del><ins>+ align-items: self-end;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsLeft {
</span><del>- -webkit-align-items: left;
</del><ins>+ align-items: left;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsRight {
</span><del>- -webkit-align-items: right;
</del><ins>+ align-items: right;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsFlexStart {
</span><del>- -webkit-align-items: flex-start;
</del><ins>+ align-items: flex-start;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsFlexEnd {
</span><del>- -webkit-align-items: flex-end;
</del><ins>+ align-items: flex-end;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsEndUnsafe {
</span><del>- -webkit-align-items: end unsafe;
</del><ins>+ align-items: end unsafe;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsCenterUnsafe {
</span><del>- -webkit-align-items: center unsafe;
</del><ins>+ align-items: center unsafe;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsSelfEndSafe {
</span><del>- -webkit-align-items: self-end safe;
</del><ins>+ align-items: self-end safe;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsSelfStartSafe {
</span><del>- -webkit-align-items: self-start safe;
</del><ins>+ align-items: self-start safe;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsRightSafe {
</span><del>- -webkit-align-items: right safe;
</del><ins>+ align-items: right safe;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsLeftUnsafe {
</span><del>- -webkit-align-items: left unsafe;
</del><ins>+ align-items: left unsafe;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsFlexStartUnsafe {
</span><del>- -webkit-align-items: flex-start unsafe;
</del><ins>+ align-items: flex-start unsafe;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignItemsFlexEndSafe {
</span><del>- -webkit-align-items: flex-end safe;
</del><ins>+ align-items: flex-end safe;
</ins><span class="cx"> }
</span><del>-
</del><span class="cx"> </style>
</span><del>-<script src="../resources/js-test.js"></script>
-</head>
-<body>
</del><ins>+<p>Test that setting and getting align-items works as expected</p>
</ins><span class="cx"> <div id="alignItemsBaseline"></div>
</span><ins>+<div id="alignItemsFirstBaseline"></div>
</ins><span class="cx"> <div id="alignItemsLastBaseline"></div>
</span><span class="cx"> <div id="alignItemsStretch"></div>
</span><span class="cx"> <div id="alignItemsStart"></div>
</span><span class="lines">@@ -107,167 +107,153 @@
</span><span class="cx"> <div id="alignItemsLeftUnsafe"></div>
</span><span class="cx"> <div id="alignItemsFlexStartUnsafe"></div>
</span><span class="cx"> <div id="alignItemsFlexEndSafe"></div>
</span><del>-<script src="resources/alignment-parsing-utils.js"></script>
</del><ins>+<script src="../resources/testharness.js"></script>
+<script src="../resources/testharnessreport.js"></script>
+<script src="resources/alignment-parsing-utils-th.js"></script>
</ins><span class="cx"> <script>
</span><del>-description('Test that setting and getting align-items works as expected');
</del><ins>+test(function() {
+ var alignItemsBaseline = document.getElementById("alignItemsBaseline");
+ checkValues(alignItemsBaseline, "alignItems", "align-items", "", "baseline");
+ var alignItemsFirstBaseline = document.getElementById("alignItemsFirstBaseline");
+ checkValues(alignItemsFirstBaseline, "alignItems", "align-items", "", "baseline");
+ var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline");
+ checkValues(alignItemsLastBaseline, "alignItems", "align-items", "", "last baseline");
+ var alignItemsStretch = document.getElementById("alignItemsStretch");
+ checkValues(alignItemsStretch, "alignItems", "align-items", "", "stretch");
+ var alignItemsStart = document.getElementById("alignItemsStart");
+ checkValues(alignItemsStart, "alignItems", "align-items", "", "start");
+ var alignItemsEnd = document.getElementById("alignItemsEnd");
+ checkValues(alignItemsEnd, "alignItems", "align-items", "", "end");
+ var alignItemsCenter = document.getElementById("alignItemsCenter");
+ checkValues(alignItemsCenter, "alignItems", "align-items", "", "center");
+ var alignItemsSelfEnd = document.getElementById("alignItemsSelfEnd");
+ checkValues(alignItemsSelfEnd, "alignItems", "align-items", "", "self-end");
+ var alignItemsSelfStart = document.getElementById("alignItemsSelfStart");
+ checkValues(alignItemsSelfStart, "alignItems", "align-items", "", "self-start");
+ var alignItemsLeft = document.getElementById("alignItemsLeft");
+ checkValues(alignItemsLeft, "alignItems", "align-items", "", "left");
+ var alignItemsRight = document.getElementById("alignItemsRight");
+ checkValues(alignItemsRight, "alignItems", "align-items", "", "right");
+ var alignItemsFlexStart = document.getElementById("alignItemsFlexStart");
+ checkValues(alignItemsFlexStart, "alignItems", "align-items", "", "flex-start");
+ var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd");
+ checkValues(alignItemsFlexEnd, "alignItems", "align-items", "", "flex-end");
</ins><span class="cx">
</span><del>-debug("Test getting align-items set through CSS");
-var alignItemsBaseline = document.getElementById("alignItemsBaseline");
-shouldBe("getComputedStyle(alignItemsBaseline, '').getPropertyValue('-webkit-align-items')", "'baseline'");
</del><ins>+ var alignItemsEndUnsafe = document.getElementById("alignItemsEndUnsafe");
+ checkValues(alignItemsEndUnsafe, "alignItems", "align-items", "", "end unsafe");
+ var alignItemsCenterUnsafe = document.getElementById("alignItemsCenterUnsafe");
+ checkValues(alignItemsCenterUnsafe, "alignItems", "align-items", "", "center unsafe");
+ var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe");
+ checkValues(alignItemsSelfEndSafe, "alignItems", "align-items", "", "self-end safe");
+ var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSafe");
+ checkValues(alignItemsSelfStartSafe, "alignItems", "align-items", "", "self-start safe");
+ var alignItemsRightSafe = document.getElementById("alignItemsRightSafe");
+ checkValues(alignItemsRightSafe, "alignItems", "align-items", "", "right safe");
+ var alignItemsLeftUnsafe = document.getElementById("alignItemsLeftUnsafe");
+ checkValues(alignItemsLeftUnsafe, "alignItems", "align-items", "", "left unsafe");
+ var alignItemsFlexStartUnsafe = document.getElementById("alignItemsFlexStartUnsafe");
+ checkValues(alignItemsFlexStartUnsafe, "alignItems", "align-items", "", "flex-start unsafe");
+ var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe");
+ checkValues(alignItemsFlexEndSafe, "alignItems", "align-items", "", "flex-end safe");
+}, "Test getting align-items set through CSS.");
</ins><span class="cx">
</span><del>-var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline");
-shouldBe("getComputedStyle(alignItemsLastBaseline, '').getPropertyValue('-webkit-align-items')", "'last-baseline'");
</del><ins>+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ checkValues(element, "alignItems", "align-items", "", "normal");
+}, "Test initial value of align-items through JS");
</ins><span class="cx">
</span><del>-var alignItemsStretch = document.getElementById("alignItemsStretch");
-shouldBe("getComputedStyle(alignItemsStretch, '').getPropertyValue('-webkit-align-items')", "'stretch'");
</del><ins>+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.alignItems = "center";
+ checkValues(element, "alignItems", "align-items", "center", "center");
</ins><span class="cx">
</span><del>-var alignItemsStart = document.getElementById("alignItemsStart");
-shouldBe("getComputedStyle(alignItemsStart, '').getPropertyValue('-webkit-align-items')", "'start'");
</del><ins>+ element.style.alignItems = "unsafe start";
+ checkValues(element, "alignItems", "align-items", "start unsafe", "start unsafe");
</ins><span class="cx">
</span><del>-var alignItemsEnd = document.getElementById("alignItemsEnd");
-shouldBe("getComputedStyle(alignItemsEnd, '').getPropertyValue('-webkit-align-items')", "'end'");
</del><ins>+ element.style.alignItems = "flex-end safe";
+ checkValues(element, "alignItems", "align-items", "flex-end safe", "flex-end safe");
</ins><span class="cx">
</span><del>-var alignItemsCenter = document.getElementById("alignItemsCenter");
-shouldBe("getComputedStyle(alignItemsCenter, '').getPropertyValue('-webkit-align-items')", "'center'");
</del><ins>+ element.style.alignItems = "right";
+ checkValues(element, "alignItems", "align-items", "right", "right");
</ins><span class="cx">
</span><del>-var alignItemsSelfEnd = document.getElementById("alignItemsSelfEnd");
-shouldBe("getComputedStyle(alignItemsSelfEnd, '').getPropertyValue('-webkit-align-items')", "'self-end'");
</del><ins>+ element.style.alignItems = "center";
+ checkValues(element, "alignItems", "align-items", "center", "center");
</ins><span class="cx">
</span><del>-var alignItemsSelfStart = document.getElementById("alignItemsSelfStart");
-shouldBe("getComputedStyle(alignItemsSelfStart, '').getPropertyValue('-webkit-align-items')", "'self-start'");
</del><ins>+ element.style.alignItems = "self-start";
+ checkValues(element, "alignItems", "align-items", "self-start", "self-start");
</ins><span class="cx">
</span><del>-var alignItemsLeft = document.getElementById("alignItemsLeft");
-shouldBe("getComputedStyle(alignItemsLeft, '').getPropertyValue('-webkit-align-items')", "'left'");
</del><ins>+ // The 'auto' value is not valid for the align-items property.
+ element.style.alignItems = "";
+ element.style.alignItems = "auto";
+ checkValues(element, "alignItems", "align-items", "", "normal");
</ins><span class="cx">
</span><del>-var alignItemsRight = document.getElementById("alignItemsRight");
-shouldBe("getComputedStyle(alignItemsRight, '').getPropertyValue('-webkit-align-items')", "'right'");
</del><ins>+ element.style.display = "flex";
+ element.style.alignItems = "auto";
+ checkValues(element, "alignItems", "align-items", "", "normal");
</ins><span class="cx">
</span><del>-var alignItemsFlexStart = document.getElementById("alignItemsFlexStart");
-shouldBe("getComputedStyle(alignItemsFlexStart, '').getPropertyValue('-webkit-align-items')", "'flex-start'");
</del><ins>+ element.style.display = "grid";
+ element.style.alignItems = "auto";
+ checkValues(element, "alignItems", "align-items", "", "normal");
</ins><span class="cx">
</span><del>-var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd");
-shouldBe("getComputedStyle(alignItemsFlexEnd, '').getPropertyValue('-webkit-align-items')", "'flex-end'");
</del><ins>+ element.style.alignItems = "self-end";
+ checkValues(element, "alignItems", "align-items", "self-end", "self-end");
+}, "Test getting and setting align-items through JS");
</ins><span class="cx">
</span><del>-var alignItemsEndUnsafe = document.getElementById("alignItemsEndUnsafe");
-shouldBe("getComputedStyle(alignItemsEndUnsafe, '').getPropertyValue('-webkit-align-items')", "'end unsafe'");
</del><ins>+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
</ins><span class="cx">
</span><del>-var alignItemsCenterUnsafe = document.getElementById("alignItemsCenterUnsafe");
-shouldBe("getComputedStyle(alignItemsCenterUnsafe, '').getPropertyValue('-webkit-align-items')", "'center unsafe'");
</del><ins>+ checkBadValues(element, "alignItems", "align-items", "auto");
+ checkBadValues(element, "alignItems", "align-items", "unsafe auto");
+ checkBadValues(element, "alignItems", "align-items", "auto safe");
+ checkBadValues(element, "alignItems", "align-items", "auto left");
+ checkBadValues(element, "alignItems", "align-items", "baseline safe");
+ checkBadValues(element, "alignItems", "align-items", "baseline center");
+ checkBadValues(element, "alignItems", "align-items", "first baseline center");
+ checkBadValues(element, "alignItems", "align-items", "last baseline center");
+ checkBadValues(element, "alignItems", "align-items", "baseline last");
+ checkBadValues(element, "alignItems", "align-items", "baseline first");
+ checkBadValues(element, "alignItems", "align-items", "stretch unsafe");
+ checkBadValues(element, "alignItems", "align-items", "stretch right");
+ checkBadValues(element, "alignItems", "align-items", "unsafe unsafe");
+ checkBadValues(element, "alignItems", "align-items", "unsafe safe");
+ checkBadValues(element, "alignItems", "align-items", "center start");
+ checkBadValues(element, "alignItems", "align-items", "stretch unsafe");
+ checkBadValues(element, "alignItems", "align-items", "safe stretch");
+ checkBadValues(element, "alignItems", "align-items", "baseline safe");
+ checkBadValues(element, "alignItems", "align-items", "unsafe baseline");
+ checkBadValues(element, "alignItems", "align-items", "unsafe safe left");
+ checkBadValues(element, "alignItems", "align-items", "unsafe left safe");
+ checkBadValues(element, "alignItems", "align-items", "left safe unsafe safe");
+ checkBadValues(element, "alignItems", "align-items", "legacy start");
+ checkBadValues(element, "alignItems", "align-items", "legacy end");
+ checkBadValues(element, "alignItems", "align-items", "legacy right unsafe");
+ checkBadValues(element, "alignItems", "align-items", "legacy auto");
+ checkBadValues(element, "alignItems", "align-items", "legacy stretch");
+ checkBadValues(element, "alignItems", "align-items", "legacy");
+ checkBadValues(element, "alignItems", "align-items", "legacy left right");
+}, "Test bad combinations of align-items");
</ins><span class="cx">
</span><del>-var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe");
-shouldBe("getComputedStyle(alignItemsSelfEndSafe, '').getPropertyValue('-webkit-align-items')", "'self-end safe'");
</del><ins>+test(function() {
+ element.style.display = "";
+ checkInitialValues(element, "alignItems", "align-items", "center", "normal");
+}, "Test the value 'initial'");
</ins><span class="cx">
</span><del>-var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSafe");
-shouldBe("getComputedStyle(alignItemsSelfStartSafe, '').getPropertyValue('-webkit-align-items')", "'self-start safe'");
</del><ins>+test(function() {
+ element.style.display = "grid";
+ checkInitialValues(element, "alignItems", "align-items", "left safe", "normal");
+}, "Test the value 'initial' for grid containers");
</ins><span class="cx">
</span><del>-var alignItemsRightSafe = document.getElementById("alignItemsRightSafe");
-shouldBe("getComputedStyle(alignItemsRightSafe, '').getPropertyValue('-webkit-align-items')", "'right safe'");
</del><ins>+test(function() {
+ element.style.display = "flex";
+ checkInitialValues(element, "alignItems", "align-items", "right unsafe", "normal");
+}, "Test the value 'initial' for flex containers");
</ins><span class="cx">
</span><del>-var alignItemsLeftUnsafe = document.getElementById("alignItemsLeftUnsafe");
-shouldBe("getComputedStyle(alignItemsLeftUnsafe, '').getPropertyValue('-webkit-align-items')", "'left unsafe'");
-
-var alignItemsFlexStartUnsafe = document.getElementById("alignItemsFlexStartUnsafe");
-shouldBe("getComputedStyle(alignItemsFlexStartUnsafe, '').getPropertyValue('-webkit-align-items')", "'flex-start unsafe'");
-
-var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe");
-shouldBe("getComputedStyle(alignItemsFlexEndSafe, '').getPropertyValue('-webkit-align-items')", "'flex-end safe'");
-
-debug("");
-debug("Test initial value of align-items through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-align-items')", "'normal'");
-
-debug("");
-debug("Test getting and setting align-items through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-element.style.webkitAlignItems = "center";
-checkValues(element, "webkitAlignItems", "-webkit-align-items", "center", "center");
-
-element.style.webkitAlignItems = "unsafe start";
-checkValues(element, "webkitAlignItems", "-webkit-align-items", "start unsafe", "start unsafe");
-
-element.style.webkitAlignItems = "flex-end safe";
-checkValues(element, "webkitAlignItems", "-webkit-align-items", "flex-end safe", "flex-end safe");
-
-element.style.webkitAlignItems = "right";
-checkValues(element, "webkitAlignItems", "-webkit-align-items", "right", "right");
-
-element.style.webkitAlignItems = "center";
-checkValues(element, "webkitAlignItems", "-webkit-align-items", "center", "center");
-
-element.style.webkitAlignItems = "self-start";
-checkValues(element, "webkitAlignItems", "-webkit-align-items", "self-start", "self-start");
-
-<!-- The 'auto' value is no valid for the align-items property. -->
-element.style.webkitAlignItems = "";
-element.style.webkitAlignItems = "auto";
-checkValues(element, "webkitAlignItems", "-webkit-align-items", "", "normal");
-
-element.style.display = "-webkit-flex";
-element.style.webkitAlignItems = "auto";
-checkValues(element, "webkitAlignItems", "-webkit-align-items", "", "normal");
-
-element.style.display = "grid";
-element.style.webkitAlignItems = "auto";
-checkValues(element, "webkitAlignItems", "-webkit-align-items", "", "normal");
-
-element.style.webkitAlignItems = "self-end";
-checkValues(element, "webkitAlignItems", "-webkit-align-items", "self-end", "self-end");
-
-debug("");
-debug("Test bad combinations of align-items");
-element = document.createElement("div");
-document.body.appendChild(element);
-
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "auto");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "unsafe auto");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "auto safe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "auto left");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "baseline safe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "baseline center");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "stretch unsafe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "stretch right");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "unsafe unsafe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "unsafe safe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "center start");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "stretch unsafe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "safe stretch");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "baseline safe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "unsafe baseline");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "unsafe safe left");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "unsafe left safe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "left safe unsafe safe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "legacy start");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "legacy end");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "legacy right unsafe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "legacy auto");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "legacy stretch");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "legacy");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items", "legacy left right");
-
-debug("");
-debug("Test the value 'initial'");
-element.style.display = "";
-checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "center", "normal");
-
-debug("");
-debug("Test the value 'initial' for grid containers");
-element.style.display = "-webkit-grid";
-checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "left safe", "normal");
-
-debug("");
-debug("Test the value 'initial' for flex containers");
-element.style.display = "-webkit-flex";
-checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "right unsafe", "normal");
-
-debug("");
-debug("Test the value 'inherit'");
-checkInheritValues("webkitAlignItems", "-webkit-align-items", "end");
-checkInheritValues("webkitAlignItems", "-webkit-align-items", "left safe");
-checkInheritValues("webkitAlignItems", "-webkit-align-items", "center unsafe");
-
</del><ins>+test(function() {
+ checkInheritValues("alignItems", "align-items", "end");
+ checkInheritValues("alignItems", "align-items", "left safe");
+ checkInheritValues("alignItems", "align-items", "center unsafe");
+}, "Test the value 'inherit'");
</ins><span class="cx"> </script>
</span><del>-</body>
-</html>
</del></span></pre></div>
<a id="trunkLayoutTestscss3parsealignselfexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/parse-align-self-expected.txt (214563 => 214564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-align-self-expected.txt 2017-03-29 21:58:40 UTC (rev 214563)
+++ trunk/LayoutTests/css3/parse-align-self-expected.txt 2017-03-29 22:01:11 UTC (rev 214564)
</span><span class="lines">@@ -1,159 +1,16 @@
</span><span class="cx"> Test that setting and getting align-self works as expected
</span><span class="cx">
</span><del>-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</del><span class="cx">
</span><ins>+PASS Test getting align-self set through CSS.
+PASS Test initial value of align-self through JS
+PASS Test getting and setting align-self through JS
+PASS Test 'auto' value resolution for the root node
+PASS Test bad combinations of align-self
+PASS Test the value 'initial'
+PASS Test the value 'initial' for grid containers
+PASS Test the value 'initial' for flex containers
+PASS Test the value 'initial' for positioned elements
+PASS Test the value 'initial' for positioned elements in grid containers
+PASS Test the value 'initial' for positioned elements in grid containers
+PASS Test the value 'inherit'
</ins><span class="cx">
</span><del>-Test getting align-self set through CSS
-PASS getComputedStyle(alignSelfBaseline, '').getPropertyValue('-webkit-align-self') is 'baseline'
-PASS getComputedStyle(alignSelfLastBaseline, '').getPropertyValue('-webkit-align-self') is 'last-baseline'
-PASS getComputedStyle(alignSelfStretch, '').getPropertyValue('-webkit-align-self') is 'stretch'
-PASS getComputedStyle(alignSelfStart, '').getPropertyValue('-webkit-align-self') is 'start'
-PASS getComputedStyle(alignSelfEnd, '').getPropertyValue('-webkit-align-self') is 'end'
-PASS getComputedStyle(alignSelfCenter, '').getPropertyValue('-webkit-align-self') is 'center'
-PASS getComputedStyle(alignSelfSelfEnd, '').getPropertyValue('-webkit-align-self') is 'self-end'
-PASS getComputedStyle(alignSelfSelfStart, '').getPropertyValue('-webkit-align-self') is 'self-start'
-PASS getComputedStyle(alignSelfLeft, '').getPropertyValue('-webkit-align-self') is 'left'
-PASS getComputedStyle(alignSelfRight, '').getPropertyValue('-webkit-align-self') is 'right'
-PASS getComputedStyle(alignSelfFlexStart, '').getPropertyValue('-webkit-align-self') is 'flex-start'
-PASS getComputedStyle(alignSelfFlexEnd, '').getPropertyValue('-webkit-align-self') is 'flex-end'
-PASS getComputedStyle(alignSelfEndUnsafe, '').getPropertyValue('-webkit-align-self') is 'end unsafe'
-PASS getComputedStyle(alignSelfCenterUnsafe, '').getPropertyValue('-webkit-align-self') is 'center unsafe'
-PASS getComputedStyle(alignSelfSelfEndSafe, '').getPropertyValue('-webkit-align-self') is 'self-end safe'
-PASS getComputedStyle(alignSelfSelfStartSafe, '').getPropertyValue('-webkit-align-self') is 'self-start safe'
-PASS getComputedStyle(alignSelfRightSafe, '').getPropertyValue('-webkit-align-self') is 'right safe'
-PASS getComputedStyle(alignSelfLeftUnsafe, '').getPropertyValue('-webkit-align-self') is 'left unsafe'
-PASS getComputedStyle(alignSelfFlexStartUnsafe, '').getPropertyValue('-webkit-align-self') is 'flex-start unsafe'
-PASS getComputedStyle(alignSelfFlexEndSafe, '').getPropertyValue('-webkit-align-self') is 'flex-end safe'
-
-Test initial value of align-self through JS
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is 'normal'
-
-Test getting and setting align-self through JS
-PASS element.style.webkitAlignSelf is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"
-PASS element.style.webkitAlignSelf is "start unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start unsafe"
-PASS element.style.webkitAlignSelf is "flex-end safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "flex-end safe"
-PASS element.style.webkitAlignSelf is "right"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "right"
-PASS element.style.webkitAlignSelf is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"
-PASS element.style.webkitAlignSelf is "self-start"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "self-start"
-PASS element.style.webkitAlignSelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is "self-end"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "self-end"
-
-Test 'auto' value resolution for the root node
-PASS element.style.webkitAlignSelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Test bad combinations of align-self
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Test the value 'initial'
-PASS element.style.webkitAlignSelf is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"
-PASS element.style.webkitAlignSelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Test the value 'initial' for grid containers
-PASS element.style.webkitAlignSelf is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "left safe"
-PASS element.style.webkitAlignSelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Test the value 'initial' for flex containers
-PASS element.style.webkitAlignSelf is "right unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "right unsafe"
-PASS element.style.webkitAlignSelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Test the value 'initial' for positioned elements
-PASS element.style.webkitAlignSelf is "left"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "left"
-PASS element.style.webkitAlignSelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Test the value 'initial' for positioned elements in grid containers
-PASS element.style.webkitAlignSelf is "right"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "right"
-PASS element.style.webkitAlignSelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Test the value 'initial' for positioned elements in grid containers
-PASS element.style.webkitAlignSelf is "end"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "end"
-PASS element.style.webkitAlignSelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Test the value 'inherit'
-PASS element.style.webkitAlignSelf is "end"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "end"
-PASS element.style.webkitAlignSelf is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "end"
-PASS element.style.webkitAlignSelf is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "left safe"
-PASS element.style.webkitAlignSelf is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "left safe"
-PASS element.style.webkitAlignSelf is "center unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center unsafe"
-PASS element.style.webkitAlignSelf is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center unsafe"
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
</del></span></pre></div>
<a id="trunkLayoutTestscss3parsealignselfhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/parse-align-self.html (214563 => 214564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-align-self.html 2017-03-29 21:58:40 UTC (rev 214563)
+++ trunk/LayoutTests/css3/parse-align-self.html 2017-03-29 22:01:11 UTC (rev 214564)
</span><span class="lines">@@ -1,91 +1,92 @@
</span><span class="cx"> <!DOCTYPE html>
</span><del>-<html>
-<head>
</del><span class="cx"> <style>
</span><span class="cx"> #alignSelfBaseline {
</span><del>- -webkit-align-self: baseline;
</del><ins>+ align-self: baseline;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+#alignSelfFirstBaseline {
+ align-self: first baseline;
+}
+
</ins><span class="cx"> #alignSelfLastBaseline {
</span><del>- -webkit-align-self: last-baseline;
</del><ins>+ align-self: last baseline;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignSelfStretch {
</span><del>- -webkit-align-self: stretch;
</del><ins>+ align-self: stretch;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignSelfStart {
</span><del>- -webkit-align-self: start;
</del><ins>+ align-self: start;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignSelfEnd {
</span><del>- -webkit-align-self: end;
</del><ins>+ align-self: end;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignSelfCenter {
</span><del>- -webkit-align-self: center;
</del><ins>+ align-self: center;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignSelfSelfStart {
</span><del>- -webkit-align-self: self-start;
</del><ins>+ align-self: self-start;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignSelfSelfEnd {
</span><del>- -webkit-align-self: self-end;
</del><ins>+ align-self: self-end;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignSelfLeft {
</span><del>- -webkit-align-self: left;
</del><ins>+ align-self: left;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignSelfRight {
</span><del>- -webkit-align-self: right;
</del><ins>+ align-self: right;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignSelfFlexStart {
</span><del>- -webkit-align-self: flex-start;
</del><ins>+ align-self: flex-start;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignSelfFlexEnd {
</span><del>- -webkit-align-self: flex-end;
</del><ins>+ align-self: flex-end;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignSelfEndUnsafe {
</span><del>- -webkit-align-self: end unsafe;
</del><ins>+ align-self: end unsafe;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignSelfCenterUnsafe {
</span><del>- -webkit-align-self: center unsafe;
</del><ins>+ align-self: center unsafe;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignSelfSelfEndSafe {
</span><del>- -webkit-align-self: self-end safe;
-x}
</del><ins>+ align-self: self-end safe;
+}
</ins><span class="cx">
</span><span class="cx"> #alignSelfSelfStartSafe {
</span><del>- -webkit-align-self: self-start safe;
</del><ins>+ align-self: self-start safe;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignSelfRightSafe {
</span><del>- -webkit-align-self: right safe;
</del><ins>+ align-self: right safe;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignSelfLeftUnsafe {
</span><del>- -webkit-align-self: left unsafe;
</del><ins>+ align-self: left unsafe;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignSelfFlexStartUnsafe {
</span><del>- -webkit-align-self: flex-start unsafe;
</del><ins>+ align-self: flex-start unsafe;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignSelfFlexEndSafe {
</span><del>- -webkit-align-self: flex-end safe;
</del><ins>+ align-self: flex-end safe;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><del>-<script src="../resources/js-test.js"></script>
-</head>
-<body>
</del><ins>+<p>Test that setting and getting align-self works as expected</p>
</ins><span class="cx"> <div id="alignSelfBaseline"></div>
</span><ins>+<div id="alignSelfFirstBaseline"></div>
</ins><span class="cx"> <div id="alignSelfLastBaseline"></div>
</span><span class="cx"> <div id="alignSelfStretch"></div>
</span><span class="cx"> <div id="alignSelfStart"></div>
</span><span class="lines">@@ -106,191 +107,172 @@
</span><span class="cx"> <div id="alignSelfLeftUnsafe"></div>
</span><span class="cx"> <div id="alignSelfFlexStartUnsafe"></div>
</span><span class="cx"> <div id="alignSelfFlexEndSafe"></div>
</span><del>-<script src="resources/alignment-parsing-utils.js"></script>
</del><ins>+<script src="../resources/testharness.js"></script>
+<script src="../resources/testharnessreport.js"></script>
+<script src="resources/alignment-parsing-utils-th.js"></script>
</ins><span class="cx"> <script>
</span><del>-description('Test that setting and getting align-self works as expected');
</del><ins>+test(function() {
+ var alignSelfBaseline = document.getElementById("alignSelfBaseline");
+ checkValues(alignSelfBaseline, "alignSelf", "align-self", "", "baseline");
+ var alignSelfFirstBaseline = document.getElementById("alignSelfFirstBaseline");
+ checkValues(alignSelfFirstBaseline, "alignSelf", "align-self", "", "baseline");
+ var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline");
+ checkValues(alignSelfLastBaseline, "alignSelf", "align-self", "", "last baseline");
+ var alignSelfStretch = document.getElementById("alignSelfStretch");
+ checkValues(alignSelfStretch, "alignSelf", "align-self", "", "stretch");
+ var alignSelfStart = document.getElementById("alignSelfStart");
+ checkValues(alignSelfStart, "alignSelf", "align-self", "", "start");
+ var alignSelfEnd = document.getElementById("alignSelfEnd");
+ checkValues(alignSelfEnd, "alignSelf", "align-self", "", "end");
+ var alignSelfCenter = document.getElementById("alignSelfCenter");
+ checkValues(alignSelfCenter, "alignSelf", "align-self", "", "center");
+ var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd");
+ checkValues(alignSelfSelfEnd, "alignSelf", "align-self", "", "self-end");
+ var alignSelfSelfStart = document.getElementById("alignSelfSelfStart");
+ checkValues(alignSelfSelfStart, "alignSelf", "align-self", "", "self-start");
+ var alignSelfLeft = document.getElementById("alignSelfLeft");
+ checkValues(alignSelfLeft, "alignSelf", "align-self", "", "left");
+ var alignSelfRight = document.getElementById("alignSelfRight");
+ checkValues(alignSelfRight, "alignSelf", "align-self", "", "right");
+ var alignSelfFlexStart = document.getElementById("alignSelfFlexStart");
+ checkValues(alignSelfFlexStart, "alignSelf", "align-self", "", "flex-start");
+ var alignSelfFlexEnd = document.getElementById("alignSelfFlexEnd");
+ checkValues(alignSelfFlexEnd, "alignSelf", "align-self", "", "flex-end");
</ins><span class="cx">
</span><del>-debug("Test getting align-self set through CSS");
-var alignSelfBaseline = document.getElementById("alignSelfBaseline");
-shouldBe("getComputedStyle(alignSelfBaseline, '').getPropertyValue('-webkit-align-self')", "'baseline'");
</del><ins>+ var alignSelfEndUnsafe = document.getElementById("alignSelfEndUnsafe");
+ checkValues(alignSelfEndUnsafe, "alignSelf", "align-self", "", "end unsafe");
+ var alignSelfCenterUnsafe = document.getElementById("alignSelfCenterUnsafe");
+ checkValues(alignSelfCenterUnsafe, "alignSelf", "align-self", "", "center unsafe");
+ var alignSelfSelfEndSafe = document.getElementById("alignSelfSelfEndSafe");
+ checkValues(alignSelfSelfEndSafe, "alignSelf", "align-self", "", "self-end safe");
+ var alignSelfSelfStartSafe = document.getElementById("alignSelfSelfStartSafe");
+ checkValues(alignSelfSelfStartSafe, "alignSelf", "align-self", "", "self-start safe");
+ var alignSelfRightSafe = document.getElementById("alignSelfRightSafe");
+ checkValues(alignSelfRightSafe, "alignSelf", "align-self", "", "right safe");
+ var alignSelfLeftUnsafe = document.getElementById("alignSelfLeftUnsafe");
+ checkValues(alignSelfLeftUnsafe, "alignSelf", "align-self", "", "left unsafe");
+ var alignSelfFlexStartUnsafe = document.getElementById("alignSelfFlexStartUnsafe");
+ checkValues(alignSelfFlexStartUnsafe, "alignSelf", "align-self", "", "flex-start unsafe");
+ var alignSelfFlexEndSafe = document.getElementById("alignSelfFlexEndSafe");
+ checkValues(alignSelfFlexEndSafe, "alignSelf", "align-self", "", "flex-end safe");
+}, "Test getting align-self set through CSS.");
</ins><span class="cx">
</span><del>-var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline");
-shouldBe("getComputedStyle(alignSelfLastBaseline, '').getPropertyValue('-webkit-align-self')", "'last-baseline'");
</del><ins>+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ checkValues(element, "alignSelf", "align-self", "", "normal");
+}, "Test initial value of align-self through JS");
</ins><span class="cx">
</span><del>-var alignSelfStretch = document.getElementById("alignSelfStretch");
-shouldBe("getComputedStyle(alignSelfStretch, '').getPropertyValue('-webkit-align-self')", "'stretch'");
</del><ins>+test(function() {
+ container = document.createElement("div");
+ element = document.createElement("div");
+ container.appendChild(element);
+ document.body.appendChild(container);
+ element.style.alignSelf = "center";
+ checkValues(element, "alignSelf", "align-self", "center", "center");
</ins><span class="cx">
</span><del>-var alignSelfStart = document.getElementById("alignSelfStart");
-shouldBe("getComputedStyle(alignSelfStart, '').getPropertyValue('-webkit-align-self')", "'start'");
</del><ins>+ element.style.alignSelf = "unsafe start";
+ checkValues(element, "alignSelf", "align-self", "start unsafe", "start unsafe");
</ins><span class="cx">
</span><del>-var alignSelfEnd = document.getElementById("alignSelfEnd");
-shouldBe("getComputedStyle(alignSelfEnd, '').getPropertyValue('-webkit-align-self')", "'end'");
</del><ins>+ element.style.alignSelf = "flex-end safe";
+ checkValues(element, "alignSelf", "align-self", "flex-end safe", "flex-end safe");
</ins><span class="cx">
</span><del>-var alignSelfCenter = document.getElementById("alignSelfCenter");
-shouldBe("getComputedStyle(alignSelfCenter, '').getPropertyValue('-webkit-align-self')", "'center'");
</del><ins>+ element.style.alignSelf = "right";
+ checkValues(element, "alignSelf", "align-self", "right", "right");
</ins><span class="cx">
</span><del>-var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd");
-shouldBe("getComputedStyle(alignSelfSelfEnd, '').getPropertyValue('-webkit-align-self')", "'self-end'");
</del><ins>+ element.style.alignSelf = "center";
+ checkValues(element, "alignSelf", "align-self", "center", "center");
</ins><span class="cx">
</span><del>-var alignSelfSelfStart = document.getElementById("alignSelfSelfStart");
-shouldBe("getComputedStyle(alignSelfSelfStart, '').getPropertyValue('-webkit-align-self')", "'self-start'");
</del><ins>+ element.style.alignSelf = "self-start";
+ checkValues(element, "alignSelf", "align-self", "self-start", "self-start");
</ins><span class="cx">
</span><del>-var alignSelfLeft = document.getElementById("alignSelfLeft");
-shouldBe("getComputedStyle(alignSelfLeft, '').getPropertyValue('-webkit-align-self')", "'left'");
</del><ins>+ element.style.alignSelf = "auto";
+ checkValues(element, "alignSelf", "align-self", "auto", "normal");
</ins><span class="cx">
</span><del>-var alignSelfRight = document.getElementById("alignSelfRight");
-shouldBe("getComputedStyle(alignSelfRight, '').getPropertyValue('-webkit-align-self')", "'right'");
</del><ins>+ container.style.display = "flex";
+ element.style.alignSelf = "auto";
+ checkValues(element, "alignSelf", "align-self", "auto", "normal");
</ins><span class="cx">
</span><del>-var alignSelfFlexStart = document.getElementById("alignSelfFlexStart");
-shouldBe("getComputedStyle(alignSelfFlexStart, '').getPropertyValue('-webkit-align-self')", "'flex-start'");
</del><ins>+ container.style.display = "grid";
+ element.style.alignSelf = "auto";
+ checkValues(element, "alignSelf", "align-self", "auto", "normal");
</ins><span class="cx">
</span><del>-var alignSelfFlexEnd = document.getElementById("alignSelfFlexEnd");
-shouldBe("getComputedStyle(alignSelfFlexEnd, '').getPropertyValue('-webkit-align-self')", "'flex-end'");
</del><ins>+ element.style.alignSelf = "self-end";
+ checkValues(element, "alignSelf", "align-self", "self-end", "self-end");
+}, "Test getting and setting align-self through JS");
</ins><span class="cx">
</span><del>-var alignSelfEndUnsafe = document.getElementById("alignSelfEndUnsafe");
-shouldBe("getComputedStyle(alignSelfEndUnsafe, '').getPropertyValue('-webkit-align-self')", "'end unsafe'");
</del><ins>+test(function() {
+ document.documentElement.style.alignSelf = "auto";
+ checkValues(document.documentElement, "alignSelf", "align-self", "auto", "normal");
+}, "Test 'auto' value resolution for the root node");
</ins><span class="cx">
</span><del>-var alignSelfCenterUnsafe = document.getElementById("alignSelfCenterUnsafe");
-shouldBe("getComputedStyle(alignSelfCenterUnsafe, '').getPropertyValue('-webkit-align-self')", "'center unsafe'");
</del><ins>+test(function() {
+ container = document.createElement("div");
+ element = document.createElement("div");
+ container.appendChild(element);
+ document.body.appendChild(container);
</ins><span class="cx">
</span><del>-var alignSelfSelfEndSafe = document.getElementById("alignSelfSelfEndSafe");
-shouldBe("getComputedStyle(alignSelfSelfEndSafe, '').getPropertyValue('-webkit-align-self')", "'self-end safe'");
</del><ins>+ checkBadValues(element, "alignSelf", "align-self", "auto safe");
+ checkBadValues(element, "alignSelf", "align-self", "auto left");
+ checkBadValues(element, "alignSelf", "align-self", "baseline safe");
+ checkBadValues(element, "alignSelf", "align-self", "baseline center");
+ checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
+ checkBadValues(element, "alignSelf", "align-self", "stretch right");
+ checkBadValues(element, "alignSelf", "align-self", "unsafe unsafe");
+ checkBadValues(element, "alignSelf", "align-self", "unsafe safe");
+ checkBadValues(element, "alignSelf", "align-self", "center start");
+ checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
+ checkBadValues(element, "alignSelf", "align-self", "safe stretch");
+ checkBadValues(element, "alignSelf", "align-self", "baseline safe");
+ checkBadValues(element, "alignSelf", "align-self", "unsafe baseline");
+ checkBadValues(element, "alignSelf", "align-self", "unsafe safe left");
+ checkBadValues(element, "alignSelf", "align-self", "unsafe left safe");
+ checkBadValues(element, "alignSelf", "align-self", "left safe unsafe safe");
+ checkBadValues(element, "alignSelf", "align-self", "legacy start");
+ checkBadValues(element, "alignSelf", "align-self", "legacy end");
+ checkBadValues(element, "alignSelf", "align-self", "legacy right unsafe");
+ checkBadValues(element, "alignSelf", "align-self", "legacy auto");
+ checkBadValues(element, "alignSelf", "align-self", "legacy stretch");
+ checkBadValues(element, "alignSelf", "align-self", "legacy");
+ checkBadValues(element, "alignSelf", "align-self", "legacy left right");
+}, "Test bad combinations of align-self");
</ins><span class="cx">
</span><del>-var alignSelfSelfStartSafe = document.getElementById("alignSelfSelfStartSafe");
-shouldBe("getComputedStyle(alignSelfSelfStartSafe, '').getPropertyValue('-webkit-align-self')", "'self-start safe'");
</del><ins>+test(function() {
+ container.style.display = "";
+ checkInitialValues(element, "alignSelf", "align-self", "center", "normal");
+}, "Test the value 'initial'");
</ins><span class="cx">
</span><del>-var alignSelfRightSafe = document.getElementById("alignSelfRightSafe");
-shouldBe("getComputedStyle(alignSelfRightSafe, '').getPropertyValue('-webkit-align-self')", "'right safe'");
</del><ins>+test(function() {
+ container.style.display = "grid";
+ checkInitialValues(element, "alignSelf", "align-self", "left safe", "normal");
+}, "Test the value 'initial' for grid containers");
</ins><span class="cx">
</span><del>-var alignSelfLeftUnsafe = document.getElementById("alignSelfLeftUnsafe");
-shouldBe("getComputedStyle(alignSelfLeftUnsafe, '').getPropertyValue('-webkit-align-self')", "'left unsafe'");
</del><ins>+test(function() {
+ container.style.display = "flex";
+ checkInitialValues(element, "alignSelf", "align-self", "right unsafe", "normal");
+}, "Test the value 'initial' for flex containers");
</ins><span class="cx">
</span><del>-var alignSelfFlexStartUnsafe = document.getElementById("alignSelfFlexStartUnsafe");
-shouldBe("getComputedStyle(alignSelfFlexStartUnsafe, '').getPropertyValue('-webkit-align-self')", "'flex-start unsafe'");
</del><ins>+test(function() {
+ container.style.display = "";
+ element.style.position = "absolute";
+ checkInitialValues(element, "alignSelf", "align-self", "left", "normal");
+}, "Test the value 'initial' for positioned elements");
</ins><span class="cx">
</span><del>-var alignSelfFlexEndSafe = document.getElementById("alignSelfFlexEndSafe");
-shouldBe("getComputedStyle(alignSelfFlexEndSafe, '').getPropertyValue('-webkit-align-self')", "'flex-end safe'");
</del><ins>+test(function() {
+ container.style.display = "grid";
+ element.style.position = "absolute";
+ checkInitialValues(element, "alignSelf", "align-self", "right", "normal");
+}, "Test the value 'initial' for positioned elements in grid containers");
</ins><span class="cx">
</span><del>-debug("");
-debug("Test initial value of align-self through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-align-self')", "'normal'");
</del><ins>+test(function() {
+ container.style.display = "flex";
+ element.style.position = "absolute";
+ checkInitialValues(element, "alignSelf", "align-self", "end", "normal");
+}, "Test the value 'initial' for positioned elements in grid containers");
</ins><span class="cx">
</span><del>-debug("");
-debug("Test getting and setting align-self through JS");
-container = document.createElement("div");
-element = document.createElement("div");
-container.appendChild(element);
-document.body.appendChild(container);
-element.style.webkitAlignSelf = "center";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self", "center", "center");
-
-element.style.webkitAlignSelf = "unsafe start";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self", "start unsafe", "start unsafe");
-
-element.style.webkitAlignSelf = "flex-end safe";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self", "flex-end safe", "flex-end safe");
-
-element.style.webkitAlignSelf = "right";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self", "right", "right");
-
-element.style.webkitAlignSelf = "center";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self", "center", "center");
-
-element.style.webkitAlignSelf = "self-start";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self", "self-start", "self-start");
-
-element.style.webkitAlignSelf = "auto";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self", "auto", "normal");
-
-container.style.display = "-webkit-flex";
-element.style.webkitAlignSelf = "auto";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self", "auto", "normal");
-
-container.style.display = "grid";
-element.style.webkitAlignSelf = "auto";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self", "auto", "normal");
-
-element.style.webkitAlignSelf = "self-end";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self", "self-end", "self-end");
-
-debug("");
-debug("Test 'auto' value resolution for the root node");
-document.documentElement.style.webkitAlignSelf = "auto";
-checkValues(document.documentElement, "webkitAlignSelf", "-webkit-align-self", "auto", "normal");
-
-debug("");
-debug("Test bad combinations of align-self");
-container = document.createElement("div");
-element = document.createElement("div");
-container.appendChild(element);
-document.body.appendChild(container);
-
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "unsafe auto");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "auto safe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "auto left");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "baseline safe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "baseline center");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "stretch unsafe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "stretch right");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "unsafe unsafe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "unsafe safe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "center start");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "stretch unsafe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "safe stretch");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "baseline safe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "unsafe baseline");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "unsafe safe left");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "unsafe left safe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "left safe unsafe safe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "legacy start");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "legacy end");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "legacy right unsafe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "legacy auto");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "legacy stretch");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "legacy");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self", "legacy left right");
-
-debug("");
-debug("Test the value 'initial'");
-container.style.display = "";
-checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "center", "normal");
-
-debug("");
-debug("Test the value 'initial' for grid containers");
-container.style.display = "-webkit-grid";
-checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "left safe", "normal");
-
-debug("");
-debug("Test the value 'initial' for flex containers");
-container.style.display = "-webkit-flex";
-checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "right unsafe", "normal");
-
-debug("");
-debug("Test the value 'initial' for positioned elements");
-container.style.display = "";
-element.style.position = "absolute";
-checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "left", "normal");
-
-debug("");
-debug("Test the value 'initial' for positioned elements in grid containers");
-container.style.display = "grid";
-element.style.position = "absolute";
-checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "right", "normal");
-
-debug("");
-debug("Test the value 'initial' for positioned elements in grid containers");
-container.style.display = "-webkit-flex";
-element.style.position = "absolute";
-checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "end", "normal");
-
-debug("");
-debug("Test the value 'inherit'");
-checkInheritValues("webkitAlignSelf", "-webkit-align-self", "end");
-checkInheritValues("webkitAlignSelf", "-webkit-align-self", "left safe");
-checkInheritValues("webkitAlignSelf", "-webkit-align-self", "center unsafe");
-
</del><ins>+test(function() {
+ checkInheritValues("alignSelf", "align-self", "end");
+ checkInheritValues("alignSelf", "align-self", "left safe");
+ checkInheritValues("alignSelf", "align-self", "center unsafe");
+}, "Test the value 'inherit'");
</ins><span class="cx"> </script>
</span><del>-</body>
-</html>
</del></span></pre></div>
<a id="trunkLayoutTestscss3resourcesalignmentparsingutilsthjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/resources/alignment-parsing-utils-th.js (214563 => 214564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/resources/alignment-parsing-utils-th.js 2017-03-29 21:58:40 UTC (rev 214563)
+++ trunk/LayoutTests/css3/resources/alignment-parsing-utils-th.js 2017-03-29 22:01:11 UTC (rev 214564)
</span><span class="lines">@@ -3,7 +3,7 @@
</span><span class="cx"> window.element = element;
</span><span class="cx"> var elementID = element.id || "element";
</span><span class="cx"> assert_equals(eval('element.style.' + property), value, property + ' specified value is not what it should.');
</span><del>- assert_equals(eval("window.getComputedStyle(" + elementID + ", '').getPropertyValue('" + propertyID + "')"), computedValue, property + " is not what it should.");
</del><ins>+ assert_equals(eval("window.getComputedStyle(" + elementID + ", '').getPropertyValue('" + propertyID + "')"), computedValue, property + " is not what is should.");
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function checkBadValues(element, property, propertyID, value)
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssparsejustifyitemsexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/parse-justify-items-expected.txt (214563 => 214564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/parse-justify-items-expected.txt 2017-03-29 21:58:40 UTC (rev 214563)
+++ trunk/LayoutTests/fast/css/parse-justify-items-expected.txt 2017-03-29 22:01:11 UTC (rev 214564)
</span><span class="lines">@@ -1,157 +1,14 @@
</span><span class="cx"> Test that setting and getting justify-items works as expected
</span><span class="cx">
</span><del>-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</del><span class="cx">
</span><ins>+PASS Test getting justify-items set through CSS.
+PASS Test initial value of justify-items through JS
+PASS Test getting and setting justify-items through JS
+PASS Test 'auto' value resolution for the root node
+PASS Test bad combinations of justify-items
+PASS Test the value 'initial'
+PASS Test the value 'initial' for grid containers
+PASS Test the value 'initial' for flex containers
+PASS Test the value 'inherit'
+PASS Test the value 'legacy'
</ins><span class="cx">
</span><del>-Test getting justify-items set through CSS
-PASS getComputedStyle(justifyItemsBaseline, '').getPropertyValue('justify-items') is 'baseline'
-PASS getComputedStyle(justifyItemsLastBaseline, '').getPropertyValue('justify-items') is 'last-baseline'
-PASS getComputedStyle(justifyItemsStretch, '').getPropertyValue('justify-items') is 'stretch'
-PASS getComputedStyle(justifyItemsStart, '').getPropertyValue('justify-items') is 'start'
-PASS getComputedStyle(justifyItemsEnd, '').getPropertyValue('justify-items') is 'end'
-PASS getComputedStyle(justifyItemsCenter, '').getPropertyValue('justify-items') is 'center'
-PASS getComputedStyle(justifyItemsSelfEnd, '').getPropertyValue('justify-items') is 'self-end'
-PASS getComputedStyle(justifyItemsSelfStart, '').getPropertyValue('justify-items') is 'self-start'
-PASS getComputedStyle(justifyItemsLeft, '').getPropertyValue('justify-items') is 'left'
-PASS getComputedStyle(justifyItemsRight, '').getPropertyValue('justify-items') is 'right'
-PASS getComputedStyle(justifyItemsFlexStart, '').getPropertyValue('justify-items') is 'flex-start'
-PASS getComputedStyle(justifyItemsFlexEnd, '').getPropertyValue('justify-items') is 'flex-end'
-PASS getComputedStyle(justifyItemsEndUnsafe, '').getPropertyValue('justify-items') is 'end unsafe'
-PASS getComputedStyle(justifyItemsCenterUnsafe, '').getPropertyValue('justify-items') is 'center unsafe'
-PASS getComputedStyle(justifyItemsSelfEndSafe, '').getPropertyValue('justify-items') is 'self-end safe'
-PASS getComputedStyle(justifyItemsSelfStartSafe, '').getPropertyValue('justify-items') is 'self-start safe'
-PASS getComputedStyle(justifyItemsRightSafe, '').getPropertyValue('justify-items') is 'right safe'
-PASS getComputedStyle(justifyItemsLeftUnsafe, '').getPropertyValue('justify-items') is 'left unsafe'
-PASS getComputedStyle(justifyItemsFlexStartUnsafe, '').getPropertyValue('justify-items') is 'flex-start unsafe'
-PASS getComputedStyle(justifyItemsFlexEndSafe, '').getPropertyValue('justify-items') is 'flex-end safe'
-PASS getComputedStyle(justifyItemsLegacyLeft, '').getPropertyValue('justify-items') is 'legacy left'
-PASS getComputedStyle(justifyItemsLegacyCenter, '').getPropertyValue('justify-items') is 'legacy center'
-PASS getComputedStyle(justifyItemsLegacyRight, '').getPropertyValue('justify-items') is 'legacy right'
-PASS getComputedStyle(justifyItemsLeftLegacy, '').getPropertyValue('justify-items') is 'legacy left'
-PASS getComputedStyle(justifyItemsCenterLegacy, '').getPropertyValue('justify-items') is 'legacy center'
-PASS getComputedStyle(justifyItemsRightLegacy, '').getPropertyValue('justify-items') is 'legacy right'
-
-Test initial value of justify-items through JS
-PASS getComputedStyle(element, '').getPropertyValue('justify-items') is 'normal'
-
-Test getting and setting justify-items through JS
-PASS element.style.justifyItems is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "center"
-PASS element.style.justifyItems is "start unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start unsafe"
-PASS element.style.justifyItems is "flex-end safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "flex-end safe"
-PASS element.style.justifyItems is "legacy right"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy right"
-PASS element.style.justifyItems is "legacy center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
-PASS element.style.justifyItems is "legacy left"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy left"
-PASS element.style.justifyItems is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is "self-end"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "self-end"
-
-Test bad combinations of justify-items
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-
-Test the value 'initial'
-PASS element.style.justifyItems is "legacy center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
-PASS element.style.justifyItems is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-
-Test the value 'initial' for grid containers
-PASS element.style.justifyItems is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "left safe"
-PASS element.style.justifyItems is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-
-Test the value 'initial' for flex containers
-PASS element.style.justifyItems is "right unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "right unsafe"
-PASS element.style.justifyItems is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-
-Test the value 'inherit'
-PASS element.style.justifyItems is "end"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "end"
-PASS element.style.justifyItems is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "end"
-PASS element.style.justifyItems is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "left safe"
-PASS element.style.justifyItems is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "left safe"
-PASS element.style.justifyItems is "legacy center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
-PASS element.style.justifyItems is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
-
-Test the value 'legacy'
-PASS element.style.justifyItems is "legacy left"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy left"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy left"
-PASS element.style.justifyItems is "legacy center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
-PASS element.style.justifyItems is "legacy right"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy right"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy right"
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
</del></span></pre></div>
<a id="trunkLayoutTestsfastcssparsejustifyitemshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/parse-justify-items.html (214563 => 214564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/parse-justify-items.html 2017-03-29 21:58:40 UTC (rev 214563)
+++ trunk/LayoutTests/fast/css/parse-justify-items.html 2017-03-29 22:01:11 UTC (rev 214564)
</span><span class="lines">@@ -1,13 +1,15 @@
</span><span class="cx"> <!DOCTYPE html>
</span><del>-<html>
-<head>
</del><span class="cx"> <style>
</span><span class="cx"> #justifyItemsBaseline {
</span><span class="cx"> justify-items: baseline;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+#justifyItemsFirstBaseline {
+ justify-items: first baseline;
+}
+
</ins><span class="cx"> #justifyItemsLastBaseline {
</span><del>- justify-items: last-baseline;
</del><ins>+ justify-items: last baseline;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #justifyItemsStretch {
</span><span class="lines">@@ -106,10 +108,9 @@
</span><span class="cx"> justify-items: right legacy;
</span><span class="cx"> }
</span><span class="cx"> </style>
</span><del>-<script src="../../resources/js-test.js"></script>
-</head>
-<body>
</del><ins>+<p>Test that setting and getting justify-items works as expected</p>
</ins><span class="cx"> <div id="justifyItemsBaseline"></div>
</span><ins>+<div id="justifyItemsFirstBaseline"></div>
</ins><span class="cx"> <div id="justifyItemsLastBaseline"></div>
</span><span class="cx"> <div id="justifyItemsStretch"></div>
</span><span class="cx"> <div id="justifyItemsStart"></div>
</span><span class="lines">@@ -136,188 +137,171 @@
</span><span class="cx"> <div id="justifyItemsLeftLegacy"></div>
</span><span class="cx"> <div id="justifyItemsCenterLegacy"></div>
</span><span class="cx"> <div id="justifyItemsRightLegacy"></div>
</span><del>-<script src="resources/alignment-parsing-utils.js"></script>
</del><ins>+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="resources/alignment-parsing-utils-th.js"></script>
</ins><span class="cx"> <script>
</span><del>-description('Test that setting and getting justify-items works as expected');
</del><ins>+test(function() {
+ var justifyItemsBaseline = document.getElementById("justifyItemsBaseline");
+ checkValues(justifyItemsBaseline, "justifyItems", "justify-items", "", "baseline");
+ var justifyItemsFirstBaseline = document.getElementById("justifyItemsFirstBaseline");
+ checkValues(justifyItemsFirstBaseline, "justifyItems", "justify-items", "", "baseline");
+ var justifyItemsLastBaseline = document.getElementById("justifyItemsLastBaseline");
+ checkValues(justifyItemsLastBaseline, "justifyItems", "justify-items", "", "last baseline");
+ var justifyItemsStretch = document.getElementById("justifyItemsStretch");
+ checkValues(justifyItemsStretch, "justifyItems", "justify-items", "", "stretch");
+ var justifyItemsStart = document.getElementById("justifyItemsStart");
+ checkValues(justifyItemsStart, "justifyItems", "justify-items", "", "start");
+ var justifyItemsEnd = document.getElementById("justifyItemsEnd");
+ checkValues(justifyItemsEnd, "justifyItems", "justify-items", "", "end");
+ var justifyItemsCenter = document.getElementById("justifyItemsCenter");
+ checkValues(justifyItemsCenter, "justifyItems", "justify-items", "", "center");
+ var justifyItemsSelfEnd = document.getElementById("justifyItemsSelfEnd");
+ checkValues(justifyItemsSelfEnd, "justifyItems", "justify-items", "", "self-end");
+ var justifyItemsSelfStart = document.getElementById("justifyItemsSelfStart");
+ checkValues(justifyItemsSelfStart, "justifyItems", "justify-items", "", "self-start");
+ var justifyItemsLeft = document.getElementById("justifyItemsLeft");
+ checkValues(justifyItemsLeft, "justifyItems", "justify-items", "", "left");
+ var justifyItemsRight = document.getElementById("justifyItemsRight");
+ checkValues(justifyItemsRight, "justifyItems", "justify-items", "", "right");
+ var justifyItemsFlexStart = document.getElementById("justifyItemsFlexStart");
+ checkValues(justifyItemsFlexStart, "justifyItems", "justify-items", "", "flex-start");
+ var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd");
+ checkValues(justifyItemsFlexEnd, "justifyItems", "justify-items", "", "flex-end");
</ins><span class="cx">
</span><del>-debug("Test getting justify-items set through CSS");
-var justifyItemsBaseline = document.getElementById("justifyItemsBaseline");
-shouldBe("getComputedStyle(justifyItemsBaseline, '').getPropertyValue('justify-items')", "'baseline'");
</del><ins>+ var justifyItemsEndUnsafe = document.getElementById("justifyItemsEndUnsafe");
+ checkValues(justifyItemsEndUnsafe, "justifyItems", "justify-items", "", "end unsafe");
+ var justifyItemsCenterUnsafe = document.getElementById("justifyItemsCenterUnsafe");
+ checkValues(justifyItemsCenterUnsafe, "justifyItems", "justify-items", "", "center unsafe");
+ var justifyItemsSelfEndSafe = document.getElementById("justifyItemsSelfEndSafe");
+ checkValues(justifyItemsSelfEndSafe, "justifyItems", "justify-items", "", "self-end safe");
+ var justifyItemsSelfStartSafe = document.getElementById("justifyItemsSelfStartSafe");
+ checkValues(justifyItemsSelfStartSafe, "justifyItems", "justify-items", "", "self-start safe");
+ var justifyItemsRightSafe = document.getElementById("justifyItemsRightSafe");
+ checkValues(justifyItemsRightSafe, "justifyItems", "justify-items", "", "right safe");
+ var justifyItemsLeftUnsafe = document.getElementById("justifyItemsLeftUnsafe");
+ checkValues(justifyItemsLeftUnsafe, "justifyItems", "justify-items", "", "left unsafe");
+ var justifyItemsFlexStartUnsafe = document.getElementById("justifyItemsFlexStartUnsafe");
+ checkValues(justifyItemsFlexStartUnsafe, "justifyItems", "justify-items", "", "flex-start unsafe");
+ var justifyItemsFlexEndSafe = document.getElementById("justifyItemsFlexEndSafe");
+ checkValues(justifyItemsFlexEndSafe, "justifyItems", "justify-items", "", "flex-end safe");
+ var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft");
+ checkValues(justifyItemsLegacyLeft, "justifyItems", "justify-items", "", "legacy left");
+ var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter");
+ checkValues(justifyItemsLegacyCenter, "justifyItems", "justify-items", "", "legacy center");
+ var justifyItemsLegacyRight = document.getElementById("justifyItemsLegacyRight");
+ checkValues(justifyItemsLegacyRight, "justifyItems", "justify-items", "", "legacy right");
+ var justifyItemsLeftLegacy = document.getElementById("justifyItemsLeftLegacy");
+ checkValues(justifyItemsLeftLegacy, "justifyItems", "justify-items", "", "legacy left");
+ var justifyItemsCenterLegacy = document.getElementById("justifyItemsCenterLegacy");
+ checkValues(justifyItemsCenterLegacy, "justifyItems", "justify-items", "", "legacy center");
+ var justifyItemsRightLegacy = document.getElementById("justifyItemsRightLegacy");
+ checkValues(justifyItemsRightLegacy, "justifyItems", "justify-items", "", "legacy right");
+}, "Test getting justify-items set through CSS.");
</ins><span class="cx">
</span><del>-var justifyItemsLastBaseline = document.getElementById("justifyItemsLastBaseline");
-shouldBe("getComputedStyle(justifyItemsLastBaseline, '').getPropertyValue('justify-items')", "'last-baseline'");
</del><ins>+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ checkValues(element, "justifyItems", "justify-items", "", "normal");
+}, "Test initial value of justify-items through JS");
</ins><span class="cx">
</span><del>-var justifyItemsStretch = document.getElementById("justifyItemsStretch");
-shouldBe("getComputedStyle(justifyItemsStretch, '').getPropertyValue('justify-items')", "'stretch'");
</del><ins>+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.justifyItems = "center";
+ checkValues(element, "justifyItems", "justify-items", "center", "center");
</ins><span class="cx">
</span><del>-var justifyItemsStart = document.getElementById("justifyItemsStart");
-shouldBe("getComputedStyle(justifyItemsStart, '').getPropertyValue('justify-items')", "'start'");
</del><ins>+ element.style.justifyItems = "unsafe start";
+ checkValues(element, "justifyItems", "justify-items", "start unsafe", "start unsafe");
</ins><span class="cx">
</span><del>-var justifyItemsEnd = document.getElementById("justifyItemsEnd");
-shouldBe("getComputedStyle(justifyItemsEnd, '').getPropertyValue('justify-items')", "'end'");
</del><ins>+ element.style.justifyItems = "flex-end safe";
+ checkValues(element, "justifyItems", "justify-items", "flex-end safe", "flex-end safe");
</ins><span class="cx">
</span><del>-var justifyItemsCenter = document.getElementById("justifyItemsCenter");
-shouldBe("getComputedStyle(justifyItemsCenter, '').getPropertyValue('justify-items')", "'center'");
</del><ins>+ element.style.justifyItems = "right legacy";
+ checkValues(element, "justifyItems", "justify-items", "legacy right", "legacy right");
</ins><span class="cx">
</span><del>-var justifyItemsSelfEnd = document.getElementById("justifyItemsSelfEnd");
-shouldBe("getComputedStyle(justifyItemsSelfEnd, '').getPropertyValue('justify-items')", "'self-end'");
</del><ins>+ element.style.justifyItems = "center legacy";
+ checkValues(element, "justifyItems", "justify-items", "legacy center", "legacy center");
</ins><span class="cx">
</span><del>-var justifyItemsSelfStart = document.getElementById("justifyItemsSelfStart");
-shouldBe("getComputedStyle(justifyItemsSelfStart, '').getPropertyValue('justify-items')", "'self-start'");
</del><ins>+ element.style.justifyItems = "left legacy";
+ checkValues(element, "justifyItems", "justify-items", "legacy left", "legacy left");
</ins><span class="cx">
</span><del>-var justifyItemsLeft = document.getElementById("justifyItemsLeft");
-shouldBe("getComputedStyle(justifyItemsLeft, '').getPropertyValue('justify-items')", "'left'");
</del><ins>+ element.style.justifyItems = "auto";
+ checkValues(element, "justifyItems", "justify-items", "auto", "normal");
</ins><span class="cx">
</span><del>-var justifyItemsRight = document.getElementById("justifyItemsRight");
-shouldBe("getComputedStyle(justifyItemsRight, '').getPropertyValue('justify-items')", "'right'");
</del><ins>+ element.style.display = "flex";
+ element.style.justifyItems = "auto";
+ checkValues(element, "justifyItems", "justify-items", "auto", "normal");
</ins><span class="cx">
</span><del>-var justifyItemsFlexStart = document.getElementById("justifyItemsFlexStart");
-shouldBe("getComputedStyle(justifyItemsFlexStart, '').getPropertyValue('justify-items')", "'flex-start'");
</del><ins>+ element.style.display = "grid";
+ element.style.justifyItems = "auto";
+ checkValues(element, "justifyItems", "justify-items", "auto", "normal");
</ins><span class="cx">
</span><del>-var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd");
-shouldBe("getComputedStyle(justifyItemsFlexEnd, '').getPropertyValue('justify-items')", "'flex-end'");
</del><ins>+ element.style.justifyItems = "self-end";
+ checkValues(element, "justifyItems", "justify-items", "self-end", "self-end");
+}, "Test getting and setting justify-items through JS");
</ins><span class="cx">
</span><del>-var justifyItemsEndUnsafe = document.getElementById("justifyItemsEndUnsafe");
-shouldBe("getComputedStyle(justifyItemsEndUnsafe, '').getPropertyValue('justify-items')", "'end unsafe'");
</del><ins>+test(function() {
+ document.documentElement.style.justifyItems = "auto";
+ checkValues(document.documentElement, "justifyItems", "justify-items", "auto", "normal");
+}, "Test 'auto' value resolution for the root node");
</ins><span class="cx">
</span><del>-var justifyItemsCenterUnsafe = document.getElementById("justifyItemsCenterUnsafe");
-shouldBe("getComputedStyle(justifyItemsCenterUnsafe, '').getPropertyValue('justify-items')", "'center unsafe'");
</del><ins>+test(function() {
+ container = document.createElement("div");
+ element = document.createElement("div");
+ container.appendChild(element);
+ document.body.appendChild(container);
</ins><span class="cx">
</span><del>-var justifyItemsSelfEndSafe = document.getElementById("justifyItemsSelfEndSafe");
-shouldBe("getComputedStyle(justifyItemsSelfEndSafe, '').getPropertyValue('justify-items')", "'self-end safe'");
</del><ins>+ checkBadValues(element, "justifyItems", "justify-items", "unsafe auto");
+ checkBadValues(element, "justifyItems", "justify-items", "auto safe");
+ checkBadValues(element, "justifyItems", "justify-items", "auto left");
+ checkBadValues(element, "justifyItems", "justify-items", "baseline safe");
+ checkBadValues(element, "justifyItems", "justify-items", "baseline center");
+ checkBadValues(element, "justifyItems", "justify-items", "stretch unsafe");
+ checkBadValues(element, "justifyItems", "justify-items", "stretch right");
+ checkBadValues(element, "justifyItems", "justify-items", "unsafe unsafe");
+ checkBadValues(element, "justifyItems", "justify-items", "unsafe safe");
+ checkBadValues(element, "justifyItems", "justify-items", "center start");
+ checkBadValues(element, "justifyItems", "justify-items", "stretch unsafe");
+ checkBadValues(element, "justifyItems", "justify-items", "safe stretch");
+ checkBadValues(element, "justifyItems", "justify-items", "baseline safe");
+ checkBadValues(element, "justifyItems", "justify-items", "unsafe baseline");
+ checkBadValues(element, "justifyItems", "justify-items", "unsafe safe left");
+ checkBadValues(element, "justifyItems", "justify-items", "unsafe left safe");
+ checkBadValues(element, "justifyItems", "justify-items", "left safe unsafe safe");
+ checkBadValues(element, "justifyItems", "justify-items", "legacy start");
+ checkBadValues(element, "justifyItems", "justify-items", "legacy end");
+ checkBadValues(element, "justifyItems", "justify-items", "legacy right unsafe");
+ checkBadValues(element, "justifyItems", "justify-items", "legacy auto");
+ checkBadValues(element, "justifyItems", "justify-items", "legacy stretch");
+ checkBadValues(element, "justifyItems", "justify-items", "legacy");
+ checkBadValues(element, "justifyItems", "justify-items", "legacy left right");
+}, "Test bad combinations of justify-items");
</ins><span class="cx">
</span><del>-var justifyItemsSelfStartSafe = document.getElementById("justifyItemsSelfStartSafe");
-shouldBe("getComputedStyle(justifyItemsSelfStartSafe, '').getPropertyValue('justify-items')", "'self-start safe'");
</del><ins>+test(function() {
+ element.style.display = "";
+ checkInitialValues(element, "justifyItems", "justify-items", "legacy center", "normal");
+}, "Test the value 'initial'");
</ins><span class="cx">
</span><del>-var justifyItemsRightSafe = document.getElementById("justifyItemsRightSafe");
-shouldBe("getComputedStyle(justifyItemsRightSafe, '').getPropertyValue('justify-items')", "'right safe'");
</del><ins>+test(function() {
+ element.style.display = "grid";
+ checkInitialValues(element, "justifyItems", "justify-items", "left safe", "normal");
+}, "Test the value 'initial' for grid containers");
</ins><span class="cx">
</span><del>-var justifyItemsLeftUnsafe = document.getElementById("justifyItemsLeftUnsafe");
-shouldBe("getComputedStyle(justifyItemsLeftUnsafe, '').getPropertyValue('justify-items')", "'left unsafe'");
</del><ins>+test(function() {
+ element.style.display = "flex";
+ checkInitialValues(element, "justifyItems", "justify-items", "right unsafe", "normal");
+}, "Test the value 'initial' for flex containers");
</ins><span class="cx">
</span><del>-var justifyItemsFlexStartUnsafe = document.getElementById("justifyItemsFlexStartUnsafe");
-shouldBe("getComputedStyle(justifyItemsFlexStartUnsafe, '').getPropertyValue('justify-items')", "'flex-start unsafe'");
</del><ins>+test(function() {
+ checkInheritValues("justifyItems", "justify-items", "end");
+ checkInheritValues("justifyItems", "justify-items", "left safe");
+ checkInheritValues("justifyItems", "justify-items", "legacy center");
+}, "Test the value 'inherit'");
</ins><span class="cx">
</span><del>-var justifyItemsFlexEndSafe = document.getElementById("justifyItemsFlexEndSafe");
-shouldBe("getComputedStyle(justifyItemsFlexEndSafe, '').getPropertyValue('justify-items')", "'flex-end safe'");
-
-var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft");
-shouldBe("getComputedStyle(justifyItemsLegacyLeft, '').getPropertyValue('justify-items')", "'legacy left'");
-
-var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter");
-shouldBe("getComputedStyle(justifyItemsLegacyCenter, '').getPropertyValue('justify-items')", "'legacy center'");
-
-var justifyItemsLegacyRight = document.getElementById("justifyItemsLegacyRight");
-shouldBe("getComputedStyle(justifyItemsLegacyRight, '').getPropertyValue('justify-items')", "'legacy right'");
-
-var justifyItemsLeftLegacy = document.getElementById("justifyItemsLeftLegacy");
-shouldBe("getComputedStyle(justifyItemsLeftLegacy, '').getPropertyValue('justify-items')", "'legacy left'");
-
-var justifyItemsCenterLegacy = document.getElementById("justifyItemsCenterLegacy");
-shouldBe("getComputedStyle(justifyItemsCenterLegacy, '').getPropertyValue('justify-items')", "'legacy center'");
-
-var justifyItemsRightLegacy = document.getElementById("justifyItemsRightLegacy");
-shouldBe("getComputedStyle(justifyItemsRightLegacy, '').getPropertyValue('justify-items')", "'legacy right'");
-
-debug("");
-debug("Test initial value of justify-items through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'normal'");
-
-debug("");
-debug("Test getting and setting justify-items through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-element.style.justifyItems = "center";
-checkValues(element, "justifyItems", "justify-items", "center", "center");
-
-element.style.justifyItems = "unsafe start";
-checkValues(element, "justifyItems", "justify-items", "start unsafe", "start unsafe");
-
-element.style.justifyItems = "flex-end safe";
-checkValues(element, "justifyItems", "justify-items", "flex-end safe", "flex-end safe");
-
-element.style.justifyItems = "right legacy";
-checkValues(element, "justifyItems", "justify-items", "legacy right", "legacy right");
-
-element.style.justifyItems = "center legacy";
-checkValues(element, "justifyItems", "justify-items", "legacy center", "legacy center");
-
-element.style.justifyItems = "left legacy";
-checkValues(element, "justifyItems", "justify-items", "legacy left", "legacy left");
-
-element.style.justifyItems = "auto";
-checkValues(element, "justifyItems", "justify-items", "auto", "normal");
-
-element.style.display = "flex";
-element.style.justifyItems = "auto";
-checkValues(element, "justifyItems", "justify-items", "auto", "normal");
-
-element.style.display = "grid";
-element.style.justifyItems = "auto";
-checkValues(element, "justifyItems", "justify-items", "auto", "normal");
-
-element.style.justifyItems = "self-end";
-checkValues(element, "justifyItems", "justify-items", "self-end", "self-end");
-
-debug("");
-debug("Test bad combinations of justify-items");
-element = document.createElement("div");
-document.body.appendChild(element);
-
-checkBadValues(element, "justifyItems", "justify-items", "unsafe auto");
-checkBadValues(element, "justifyItems", "justify-items", "auto safe");
-checkBadValues(element, "justifyItems", "justify-items", "auto left");
-checkBadValues(element, "justifyItems", "justify-items", "baseline safe");
-checkBadValues(element, "justifyItems", "justify-items", "baseline center");
-checkBadValues(element, "justifyItems", "justify-items", "stretch unsafe");
-checkBadValues(element, "justifyItems", "justify-items", "stretch right");
-checkBadValues(element, "justifyItems", "justify-items", "unsafe unsafe");
-checkBadValues(element, "justifyItems", "justify-items", "unsafe safe");
-checkBadValues(element, "justifyItems", "justify-items", "center start");
-checkBadValues(element, "justifyItems", "justify-items", "stretch unsafe");
-checkBadValues(element, "justifyItems", "justify-items", "safe stretch");
-checkBadValues(element, "justifyItems", "justify-items", "baseline safe");
-checkBadValues(element, "justifyItems", "justify-items", "unsafe baseline");
-checkBadValues(element, "justifyItems", "justify-items", "unsafe safe left");
-checkBadValues(element, "justifyItems", "justify-items", "unsafe left safe");
-checkBadValues(element, "justifyItems", "justify-items", "left safe unsafe safe");
-checkBadValues(element, "justifyItems", "justify-items", "legacy start");
-checkBadValues(element, "justifyItems", "justify-items", "legacy end");
-checkBadValues(element, "justifyItems", "justify-items", "legacy right unsafe");
-checkBadValues(element, "justifyItems", "justify-items", "legacy auto");
-checkBadValues(element, "justifyItems", "justify-items", "legacy stretch");
-checkBadValues(element, "justifyItems", "justify-items", "legacy");
-checkBadValues(element, "justifyItems", "justify-items", "legacy left right");
-
-debug("");
-debug("Test the value 'initial'");
-element.style.display = "";
-checkInitialValues(element, "justifyItems", "justify-items", "legacy center", "normal");
-
-debug("");
-debug("Test the value 'initial' for grid containers");
-element.style.display = "grid";
-checkInitialValues(element, "justifyItems", "justify-items", "left safe", "normal");
-
-debug("");
-debug("Test the value 'initial' for flex containers");
-element.style.display = "flex";
-checkInitialValues(element, "justifyItems", "justify-items", "right unsafe", "normal");
-
-debug("");
-debug("Test the value 'inherit'");
-checkInheritValues("justifyItems", "justify-items", "end");
-checkInheritValues("justifyItems", "justify-items", "left safe");
-checkInheritValues("justifyItems", "justify-items", "legacy center");
-
-debug("");
-debug("Test the value 'legacy'");
-checkLegacyValues("justifyItems", "justify-items", "legacy left");
-checkLegacyValues("justifyItems", "justify-items", "legacy center");
-checkLegacyValues("justifyItems", "justify-items", "legacy right");
-
</del><ins>+test(function() {
+ checkLegacyValues("justifyItems", "justify-items", "legacy left");
+ checkLegacyValues("justifyItems", "justify-items", "legacy center");
+ checkLegacyValues("justifyItems", "justify-items", "legacy right");
+}, "Test the value 'legacy'");
</ins><span class="cx"> </script>
</span><del>-</body>
-</html>
</del></span></pre></div>
<a id="trunkLayoutTestsfastcssparsejustifyselfexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/parse-justify-self-expected.txt (214563 => 214564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/parse-justify-self-expected.txt 2017-03-29 21:58:40 UTC (rev 214563)
+++ trunk/LayoutTests/fast/css/parse-justify-self-expected.txt 2017-03-29 22:01:11 UTC (rev 214564)
</span><span class="lines">@@ -1,155 +1,16 @@
</span><span class="cx"> Test that setting and getting justify-self works as expected
</span><span class="cx">
</span><del>-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</del><span class="cx">
</span><ins>+PASS Test getting justify-self set through CSS.
+PASS Test initial value of justify-self through JS
+PASS Test getting and setting justify-self through JS
+PASS Test 'auto' value resolution for the root node
+PASS Test bad combinations of justify-self
+PASS Test the value 'initial'
+PASS Test the value 'initial' for grid containers
+PASS Test the value 'initial' for flex containers
+PASS Test the value 'initial' for positioned elements
+PASS Test the value 'initial' for positioned elements in grid containers
+PASS Test the value 'initial' for positioned elements in grid containers
+PASS Test the value 'inherit'
</ins><span class="cx">
</span><del>-Test getting justify-self set through CSS
-PASS getComputedStyle(justifySelfBaseline, '').getPropertyValue('justify-self') is 'baseline'
-PASS getComputedStyle(justifySelfLastBaseline, '').getPropertyValue('justify-self') is 'last-baseline'
-PASS getComputedStyle(justifySelfStretch, '').getPropertyValue('justify-self') is 'stretch'
-PASS getComputedStyle(justifySelfStart, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(justifySelfEnd, '').getPropertyValue('justify-self') is 'end'
-PASS getComputedStyle(justifySelfCenter, '').getPropertyValue('justify-self') is 'center'
-PASS getComputedStyle(justifySelfSelfEnd, '').getPropertyValue('justify-self') is 'self-end'
-PASS getComputedStyle(justifySelfSelfStart, '').getPropertyValue('justify-self') is 'self-start'
-PASS getComputedStyle(justifySelfLeft, '').getPropertyValue('justify-self') is 'left'
-PASS getComputedStyle(justifySelfRight, '').getPropertyValue('justify-self') is 'right'
-PASS getComputedStyle(justifySelfFlexStart, '').getPropertyValue('justify-self') is 'flex-start'
-PASS getComputedStyle(justifySelfFlexEnd, '').getPropertyValue('justify-self') is 'flex-end'
-PASS getComputedStyle(justifySelfEndUnsafe, '').getPropertyValue('justify-self') is 'end unsafe'
-PASS getComputedStyle(justifySelfCenterUnsafe, '').getPropertyValue('justify-self') is 'center unsafe'
-PASS getComputedStyle(justifySelfSelfEndSafe, '').getPropertyValue('justify-self') is 'self-end safe'
-PASS getComputedStyle(justifySelfSelfStartSafe, '').getPropertyValue('justify-self') is 'self-start safe'
-PASS getComputedStyle(justifySelfRightSafe, '').getPropertyValue('justify-self') is 'right safe'
-PASS getComputedStyle(justifySelfLeftUnsafe, '').getPropertyValue('justify-self') is 'left unsafe'
-PASS getComputedStyle(justifySelfFlexStartUnsafe, '').getPropertyValue('justify-self') is 'flex-start unsafe'
-PASS getComputedStyle(justifySelfFlexEndSafe, '').getPropertyValue('justify-self') is 'flex-end safe'
-
-Test initial value of justify-self through JS
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'normal'
-
-Test getting and setting justify-self through JS
-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"
-
-Test bad combinations of justify-self
-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"
-
-Test the value 'initial'
-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"
-
-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"
-
-Test the value 'inherit'
-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"
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
</del></span></pre></div>
<a id="trunkLayoutTestsfastcssparsejustifyselfhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/parse-justify-self.html (214563 => 214564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/parse-justify-self.html 2017-03-29 21:58:40 UTC (rev 214563)
+++ trunk/LayoutTests/fast/css/parse-justify-self.html 2017-03-29 22:01:11 UTC (rev 214564)
</span><span class="lines">@@ -1,13 +1,15 @@
</span><span class="cx"> <!DOCTYPE html>
</span><del>-<html>
-<head>
</del><span class="cx"> <style>
</span><span class="cx"> #justifySelfBaseline {
</span><span class="cx"> justify-self: baseline;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+#justifySelfFirstBaseline {
+ justify-self: first baseline;
+}
+
</ins><span class="cx"> #justifySelfLastBaseline {
</span><del>- justify-self: last-baseline;
</del><ins>+ justify-self: last baseline;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #justifySelfStretch {
</span><span class="lines">@@ -82,10 +84,9 @@
</span><span class="cx"> justify-self: flex-end safe;
</span><span class="cx"> }
</span><span class="cx"> </style>
</span><del>-<script src="../../resources/js-test.js"></script>
-</head>
-<body>
</del><ins>+<p>Test that setting and getting justify-self works as expected</p>
</ins><span class="cx"> <div id="justifySelfBaseline"></div>
</span><ins>+<div id="justifySelfFirstBaseline"></div>
</ins><span class="cx"> <div id="justifySelfLastBaseline"></div>
</span><span class="cx"> <div id="justifySelfStretch"></div>
</span><span class="cx"> <div id="justifySelfStart"></div>
</span><span class="lines">@@ -106,186 +107,173 @@
</span><span class="cx"> <div id="justifySelfLeftUnsafe"></div>
</span><span class="cx"> <div id="justifySelfFlexStartUnsafe"></div>
</span><span class="cx"> <div id="justifySelfFlexEndSafe"></div>
</span><del>-<script src="resources/alignment-parsing-utils.js"></script>
</del><ins>+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="resources/alignment-parsing-utils-th.js"></script>
</ins><span class="cx"> <script>
</span><del>-description('Test that setting and getting justify-self works as expected');
</del><ins>+test(function() {
+ var justifySelfBaseline = document.getElementById("justifySelfBaseline");
+ checkValues(justifySelfBaseline, "justifySelf", "justify-self", "", "baseline");
+ var justifySelfFirstBaseline = document.getElementById("justifySelfFirstBaseline");
+ checkValues(justifySelfFirstBaseline, "justifySelf", "justify-self", "", "baseline");
+ var justifySelfLastBaseline = document.getElementById("justifySelfLastBaseline");
+ checkValues(justifySelfLastBaseline, "justifySelf", "justify-self", "", "last baseline");
+ var justifySelfStretch = document.getElementById("justifySelfStretch");
+ checkValues(justifySelfStretch, "justifySelf", "justify-self", "", "stretch");
+ var justifySelfStart = document.getElementById("justifySelfStart");
+ checkValues(justifySelfStart, "justifySelf", "justify-self", "", "start");
+ var justifySelfEnd = document.getElementById("justifySelfEnd");
+ checkValues(justifySelfEnd, "justifySelf", "justify-self", "", "end");
+ var justifySelfCenter = document.getElementById("justifySelfCenter");
+ checkValues(justifySelfCenter, "justifySelf", "justify-self", "", "center");
+ var justifySelfSelfEnd = document.getElementById("justifySelfSelfEnd");
+ checkValues(justifySelfSelfEnd, "justifySelf", "justify-self", "", "self-end");
+ var justifySelfSelfStart = document.getElementById("justifySelfSelfStart");
+ checkValues(justifySelfSelfStart, "justifySelf", "justify-self", "", "self-start");
+ var justifySelfLeft = document.getElementById("justifySelfLeft");
+ checkValues(justifySelfLeft, "justifySelf", "justify-self", "", "left");
+ var justifySelfRight = document.getElementById("justifySelfRight");
+ checkValues(justifySelfRight, "justifySelf", "justify-self", "", "right");
+ var justifySelfFlexStart = document.getElementById("justifySelfFlexStart");
+ checkValues(justifySelfFlexStart, "justifySelf", "justify-self", "", "flex-start");
+ var justifySelfFlexEnd = document.getElementById("justifySelfFlexEnd");
+ checkValues(justifySelfFlexEnd, "justifySelf", "justify-self", "", "flex-end");
</ins><span class="cx">
</span><del>-debug("Test getting justify-self set through CSS");
-var justifySelfBaseline = document.getElementById("justifySelfBaseline");
-shouldBe("getComputedStyle(justifySelfBaseline, '').getPropertyValue('justify-self')", "'baseline'");
</del><ins>+ var justifySelfEndUnsafe = document.getElementById("justifySelfEndUnsafe");
+ checkValues(justifySelfEndUnsafe, "justifySelf", "justify-self", "", "end unsafe");
+ var justifySelfCenterUnsafe = document.getElementById("justifySelfCenterUnsafe");
+ checkValues(justifySelfCenterUnsafe, "justifySelf", "justify-self", "", "center unsafe");
+ var justifySelfSelfEndSafe = document.getElementById("justifySelfSelfEndSafe");
+ checkValues(justifySelfSelfEndSafe, "justifySelf", "justify-self", "", "self-end safe");
+ var justifySelfSelfStartSafe = document.getElementById("justifySelfSelfStartSafe");
+ checkValues(justifySelfSelfStartSafe, "justifySelf", "justify-self", "", "self-start safe");
+ var justifySelfRightSafe = document.getElementById("justifySelfRightSafe");
+ checkValues(justifySelfRightSafe, "justifySelf", "justify-self", "", "right safe");
+ var justifySelfLeftUnsafe = document.getElementById("justifySelfLeftUnsafe");
+ checkValues(justifySelfLeftUnsafe, "justifySelf", "justify-self", "", "left unsafe");
+ var justifySelfFlexStartUnsafe = document.getElementById("justifySelfFlexStartUnsafe");
+ checkValues(justifySelfFlexStartUnsafe, "justifySelf", "justify-self", "", "flex-start unsafe");
+ var justifySelfFlexEndSafe = document.getElementById("justifySelfFlexEndSafe");
+ checkValues(justifySelfFlexEndSafe, "justifySelf", "justify-self", "", "flex-end safe");
+}, "Test getting justify-self set through CSS.");
</ins><span class="cx">
</span><del>-var justifySelfLastBaseline = document.getElementById("justifySelfLastBaseline");
-shouldBe("getComputedStyle(justifySelfLastBaseline, '').getPropertyValue('justify-self')", "'last-baseline'");
</del><ins>+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ checkValues(element, "justifySelf", "justify-self", "", "normal");
+}, "Test initial value of justify-self through JS");
</ins><span class="cx">
</span><del>-var justifySelfStretch = document.getElementById("justifySelfStretch");
-shouldBe("getComputedStyle(justifySelfStretch, '').getPropertyValue('justify-self')", "'stretch'");
</del><ins>+test(function() {
+ container = document.createElement("div");
+ element = document.createElement("div");
+ container.appendChild(element);
+ document.body.appendChild(container);
+ element.style.justifySelf = "center";
+ checkValues(element, "justifySelf", "justify-self", "center", "center");
</ins><span class="cx">
</span><del>-var justifySelfStart = document.getElementById("justifySelfStart");
-shouldBe("getComputedStyle(justifySelfStart, '').getPropertyValue('justify-self')", "'start'");
</del><ins>+ element.style.justifySelf = "unsafe start";
+ checkValues(element, "justifySelf", "justify-self", "start unsafe", "start unsafe");
</ins><span class="cx">
</span><del>-var justifySelfEnd = document.getElementById("justifySelfEnd");
-shouldBe("getComputedStyle(justifySelfEnd, '').getPropertyValue('justify-self')", "'end'");
</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>-var justifySelfCenter = document.getElementById("justifySelfCenter");
-shouldBe("getComputedStyle(justifySelfCenter, '').getPropertyValue('justify-self')", "'center'");
</del><ins>+ element.style.justifySelf = "right";
+ checkValues(element, "justifySelf", "justify-self", "right", "right");
</ins><span class="cx">
</span><del>-var justifySelfSelfEnd = document.getElementById("justifySelfSelfEnd");
-shouldBe("getComputedStyle(justifySelfSelfEnd, '').getPropertyValue('justify-self')", "'self-end'");
</del><ins>+ element.style.justifySelf = "center";
+ checkValues(element, "justifySelf", "justify-self", "center", "center");
</ins><span class="cx">
</span><del>-var justifySelfSelfStart = document.getElementById("justifySelfSelfStart");
-shouldBe("getComputedStyle(justifySelfSelfStart, '').getPropertyValue('justify-self')", "'self-start'");
</del><ins>+ element.style.justifySelf = "self-start";
+ checkValues(element, "justifySelf", "justify-self", "self-start", "self-start");
</ins><span class="cx">
</span><del>-var justifySelfLeft = document.getElementById("justifySelfLeft");
-shouldBe("getComputedStyle(justifySelfLeft, '').getPropertyValue('justify-self')", "'left'");
</del><ins>+ element.style.justifySelf = "auto";
+ checkValues(element, "justifySelf", "justify-self", "auto", "normal");
</ins><span class="cx">
</span><del>-var justifySelfRight = document.getElementById("justifySelfRight");
-shouldBe("getComputedStyle(justifySelfRight, '').getPropertyValue('justify-self')", "'right'");
</del><ins>+ container.style.display = "flex";
+ element.style.justifySelf = "auto";
+ checkValues(element, "justifySelf", "justify-self", "auto", "normal");
</ins><span class="cx">
</span><del>-var justifySelfFlexStart = document.getElementById("justifySelfFlexStart");
-shouldBe("getComputedStyle(justifySelfFlexStart, '').getPropertyValue('justify-self')", "'flex-start'");
</del><ins>+ container.style.display = "grid";
+ element.style.justifySelf = "auto";
+ checkValues(element, "justifySelf", "justify-self", "auto", "normal");
</ins><span class="cx">
</span><del>-var justifySelfFlexEnd = document.getElementById("justifySelfFlexEnd");
-shouldBe("getComputedStyle(justifySelfFlexEnd, '').getPropertyValue('justify-self')", "'flex-end'");
</del><ins>+ element.style.justifySelf = "self-end";
+ checkValues(element, "justifySelf", "justify-self", "self-end", "self-end");
+}, "Test getting and setting justify-self through JS");
</ins><span class="cx">
</span><del>-var justifySelfEndUnsafe = document.getElementById("justifySelfEndUnsafe");
-shouldBe("getComputedStyle(justifySelfEndUnsafe, '').getPropertyValue('justify-self')", "'end unsafe'");
</del><ins>+test(function() {
+ document.documentElement.style.justifySelf = "auto";
+ checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "normal");
+}, "Test 'auto' value resolution for the root node");
</ins><span class="cx">
</span><del>-var justifySelfCenterUnsafe = document.getElementById("justifySelfCenterUnsafe");
-shouldBe("getComputedStyle(justifySelfCenterUnsafe, '').getPropertyValue('justify-self')", "'center unsafe'");
</del><ins>+test(function() {
+ container = document.createElement("div");
+ element = document.createElement("div");
+ container.appendChild(element);
+ document.body.appendChild(container);
</ins><span class="cx">
</span><del>-var justifySelfSelfEndSafe = document.getElementById("justifySelfSelfEndSafe");
-shouldBe("getComputedStyle(justifySelfSelfEndSafe, '').getPropertyValue('justify-self')", "'self-end safe'");
</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");
+}, "Test bad combinations of justify-self");
</ins><span class="cx">
</span><del>-var justifySelfSelfStartSafe = document.getElementById("justifySelfSelfStartSafe");
-shouldBe("getComputedStyle(justifySelfSelfStartSafe, '').getPropertyValue('justify-self')", "'self-start safe'");
</del><ins>+test(function() {
+ container.style.display = "";
+ checkInitialValues(element, "justifySelf", "justify-self", "center", "normal");
+}, "Test the value 'initial'");
</ins><span class="cx">
</span><del>-var justifySelfRightSafe = document.getElementById("justifySelfRightSafe");
-shouldBe("getComputedStyle(justifySelfRightSafe, '').getPropertyValue('justify-self')", "'right safe'");
</del><ins>+test(function() {
+ container.style.display = "grid";
+ checkInitialValues(element, "justifySelf", "justify-self", "left safe", "normal");
+}, "Test the value 'initial' for grid containers");
</ins><span class="cx">
</span><del>-var justifySelfLeftUnsafe = document.getElementById("justifySelfLeftUnsafe");
-shouldBe("getComputedStyle(justifySelfLeftUnsafe, '').getPropertyValue('justify-self')", "'left unsafe'");
</del><ins>+test(function() {
+ container.style.display = "flex";
+ checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "normal");
+}, "Test the value 'initial' for flex containers");
</ins><span class="cx">
</span><del>-var justifySelfFlexStartUnsafe = document.getElementById("justifySelfFlexStartUnsafe");
-shouldBe("getComputedStyle(justifySelfFlexStartUnsafe, '').getPropertyValue('justify-self')", "'flex-start unsafe'");
</del><ins>+test(function() {
+ container.style.display = "";
+ element.style.position = "absolute";
+ checkInitialValues(element, "justifySelf", "justify-self", "left", "normal");
+}, "Test the value 'initial' for positioned elements");
</ins><span class="cx">
</span><del>-var justifySelfFlexEndSafe = document.getElementById("justifySelfFlexEndSafe");
-shouldBe("getComputedStyle(justifySelfFlexEndSafe, '').getPropertyValue('justify-self')", "'flex-end safe'");
</del><ins>+test(function() {
+ container.style.display = "grid";
+ element.style.position = "absolute";
+ checkInitialValues(element, "justifySelf", "justify-self", "right", "normal");
+}, "Test the value 'initial' for positioned elements in grid containers");
</ins><span class="cx">
</span><del>-debug("");
-debug("Test initial value of justify-self through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'normal'");
</del><ins>+test(function() {
+ container.style.display = "flex";
+ element.style.position = "absolute";
+ checkInitialValues(element, "justifySelf", "justify-self", "end", "normal");
+}, "Test the value 'initial' for positioned elements in grid containers");
</ins><span class="cx">
</span><del>-debug("");
-debug("Test getting and setting justify-self through JS");
-container = document.createElement("div");
-element = document.createElement("div");
-container.appendChild(element);
-document.body.appendChild(container);
-element.style.justifySelf = "center";
-checkValues(element, "justifySelf", "justify-self", "center", "center");
-
-element.style.justifySelf = "unsafe start";
-checkValues(element, "justifySelf", "justify-self", "start unsafe", "start unsafe");
-
-element.style.justifySelf = "flex-end safe";
-checkValues(element, "justifySelf", "justify-self", "flex-end safe", "flex-end safe");
-
-element.style.justifySelf = "right";
-checkValues(element, "justifySelf", "justify-self", "right", "right");
-
-element.style.justifySelf = "center";
-checkValues(element, "justifySelf", "justify-self", "center", "center");
-
-element.style.justifySelf = "self-start";
-checkValues(element, "justifySelf", "justify-self", "self-start", "self-start");
-
-element.style.justifySelf = "auto";
-checkValues(element, "justifySelf", "justify-self", "auto", "normal");
-
-container.style.display = "flex";
-element.style.justifySelf = "auto";
-checkValues(element, "justifySelf", "justify-self", "auto", "normal");
-
-container.style.display = "grid";
-element.style.justifySelf = "auto";
-checkValues(element, "justifySelf", "justify-self", "auto", "normal");
-
-element.style.justifySelf = "self-end";
-checkValues(element, "justifySelf", "justify-self", "self-end", "self-end");
-
-debug("");
-debug("Test bad combinations of justify-self");
-container = document.createElement("div");
-element = document.createElement("div");
-container.appendChild(element);
-document.body.appendChild(container);
-
-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");
-
-debug("");
-debug("Test the value 'initial'");
-container.style.display = "";
-checkInitialValues(element, "justifySelf", "justify-self", "center", "normal");
-
-debug("");
-debug("Test the value 'initial' for grid containers");
-container.style.display = "grid";
-checkInitialValues(element, "justifySelf", "justify-self", "left safe", "normal");
-
-debug("");
-debug("Test the value 'initial' for flex containers");
-container.style.display = "flex";
-checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "normal");
-
-debug("");
-debug("Test the value 'initial' for positioned elements");
-container.style.display = "";
-element.style.position = "absolute";
-checkInitialValues(element, "justifySelf", "justify-self", "left", "normal");
-
-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");
-
-debug("");
-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");
-
-debug("");
-debug("Test the value 'inherit'");
-checkInheritValues("justifySelf", "justify-self", "end");
-checkInheritValues("justifySelf", "justify-self", "left safe");
-checkInheritValues("justifySelf", "justify-self", "center unsafe");
-
</del><ins>+test(function() {
+ checkInheritValues("justifySelf", "justify-self", "end");
+ checkInheritValues("justifySelf", "justify-self", "left safe");
+ checkInheritValues("justifySelf", "justify-self", "center unsafe");
+}, "Test the value 'inherit'");
</ins><span class="cx"> </script>
</span><del>-</body>
-</html>
</del></span></pre></div>
<a id="trunkLayoutTestsfastcssresourcesalignmentparsingutilsthjsfromrev214563trunkLayoutTestscss3resourcesalignmentparsingutilsthjs"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/fast/css/resources/alignment-parsing-utils-th.js (from rev 214563, trunk/LayoutTests/css3/resources/alignment-parsing-utils-th.js) (0 => 214564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/resources/alignment-parsing-utils-th.js (rev 0)
+++ trunk/LayoutTests/fast/css/resources/alignment-parsing-utils-th.js 2017-03-29 22:01:11 UTC (rev 214564)
</span><span class="lines">@@ -0,0 +1,55 @@
</span><ins>+function checkValues(element, property, propertyID, value, computedValue)
+{
+ window.element = element;
+ var elementID = element.id || "element";
+ assert_equals(eval('element.style.' + property), value, property + ' specified value is not what it should.');
+ assert_equals(eval("window.getComputedStyle(" + elementID + ", '').getPropertyValue('" + propertyID + "')"), computedValue, property + " is not what is should.");
+}
+
+function checkBadValues(element, property, propertyID, value)
+{
+ var elementID = element.id || "element";
+ var initialValue = eval("window.getComputedStyle(" + elementID + " , '').getPropertyValue('" + propertyID + "')");
+ element.style[property] = value;
+ checkValues(element, property, propertyID, "", initialValue);
+}
+
+function checkInitialValues(element, property, propertyID, value, initial)
+{
+ element.style[property] = value;
+ checkValues(element, property, propertyID, value, value);
+ element.style[property] = "initial";
+ checkValues(element, property, propertyID, "initial", initial);
+}
+
+function checkInheritValues(property, propertyID, value)
+{
+ var parentElement = document.createElement("div");
+ document.body.appendChild(parentElement);
+ parentElement.style[property] = value;
+ checkValues(parentElement, property, propertyID, value, value);
+
+ var element = document.createElement("div");
+ parentElement.appendChild(element);
+ element.style[property] = "inherit";
+ checkValues(element, property, propertyID, "inherit", value);
+}
+
+function checkLegacyValues(property, propertyID, value)
+{
+ var parentElement = document.createElement("div");
+ document.body.appendChild(parentElement);
+ parentElement.style[property] = value;
+ checkValues(parentElement, property, propertyID, value, value);
+
+ var element = document.createElement("div");
+ parentElement.appendChild(element);
+ checkValues(element, property, propertyID, "", value);
+}
+
+function checkSupportedValues(elementID, property)
+{
+ var value = eval("window.getComputedStyle(" + elementID + " , '').getPropertyValue('" + property + "')");
+ var value1 = eval("window.getComputedStyle(" + elementID + " , '')");
+ shouldBeTrue("CSS.supports('" + property + "', '" + value + "')");
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (214563 => 214564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2017-03-29 21:58:40 UTC (rev 214563)
+++ trunk/Source/WebCore/ChangeLog 2017-03-29 22:01:11 UTC (rev 214564)
</span><span class="lines">@@ -1,3 +1,35 @@
</span><ins>+2017-03-29 Javier Fernandez <jfernandez@igalia.com>
+
+ [css-align] Adapt self-alignment properties to the new baseline syntax
+ https://bugs.webkit.org/show_bug.cgi?id=170235
+
+ Reviewed by David Hyatt.
+
+ The baseline-position syntax has changed recently, so we need to update
+ the CSS properties using the old syntax. This patch address only the
+ self-alignment (align-self and justify-self) and default-alignment
+ (align-items and justify-items).
+
+ The content-distribution properties (align-content and justify-content)
+ will be updated in a follow up patch.
+
+ The new baseline syntax is "[first | last ]? baseline" which implies
+ modifying the parsing and computed value logic.
+
+ There are several layout tests affected by this change, so I'll update
+ them accordingly.
+
+ No new tests, just added/modified some cases to the tests we already have using the new baseline values.
+
+ * css/CSSComputedStyleDeclaration.cpp:
+ (WebCore::valueForItemPositionWithOverflowAlignment):
+ * css/CSSValueKeywords.in:
+ * css/StyleBuilderConverter.h:
+ (WebCore::StyleBuilderConverter::convertSelfOrDefaultAlignmentData):
+ * css/parser/CSSPropertyParser.cpp:
+ (WebCore::consumeBaselineKeyword):
+ (WebCore::consumeSelfPositionOverflowPosition):
+
</ins><span class="cx"> 2017-03-29 Chris Dumez <cdumez@apple.com>
</span><span class="cx">
</span><span class="cx"> Animated SVG images are not paused in pages loaded in the background
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSComputedStyleDeclarationcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (214563 => 214564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2017-03-29 21:58:40 UTC (rev 214563)
+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2017-03-29 22:01:11 UTC (rev 214564)
</span><span class="lines">@@ -2462,7 +2462,13 @@
</span><span class="cx"> auto result = CSSValueList::createSpaceSeparated();
</span><span class="cx"> if (data.positionType() == LegacyPosition)
</span><span class="cx"> result->append(cssValuePool.createIdentifierValue(CSSValueLegacy));
</span><del>- result->append(cssValuePool.createValue(data.position()));
</del><ins>+ if (data.position() == ItemPositionBaseline)
+ result->append(cssValuePool.createIdentifierValue(CSSValueBaseline));
+ else if (data.position() == ItemPositionLastBaseline) {
+ result->append(cssValuePool.createIdentifierValue(CSSValueLast));
+ result->append(cssValuePool.createIdentifierValue(CSSValueBaseline));
+ } else
+ result->append(cssValuePool.createValue(data.position()));
</ins><span class="cx"> if (data.position() >= ItemPositionCenter && data.overflow() != OverflowAlignmentDefault)
</span><span class="cx"> result->append(cssValuePool.createValue(data.overflow()));
</span><span class="cx"> ASSERT(result->length() <= 2);
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSValueKeywordsin"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSValueKeywords.in (214563 => 214564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSValueKeywords.in 2017-03-29 21:58:40 UTC (rev 214563)
+++ trunk/Source/WebCore/css/CSSValueKeywords.in 2017-03-29 22:01:11 UTC (rev 214564)
</span><span class="lines">@@ -606,7 +606,8 @@
</span><span class="cx"> // auto
</span><span class="cx"> // stretch
</span><span class="cx"> // baseline
</span><del>-// last-baseline
</del><ins>+// last baseline
+// first baseline
</ins><span class="cx"> // center
</span><span class="cx"> // start
</span><span class="cx"> // end
</span></span></pre></div>
<a id="trunkSourceWebCorecssStyleBuilderConverterh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleBuilderConverter.h (214563 => 214564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleBuilderConverter.h 2017-03-29 21:58:40 UTC (rev 214563)
+++ trunk/Source/WebCore/css/StyleBuilderConverter.h 2017-03-29 22:01:11 UTC (rev 214564)
</span><span class="lines">@@ -1361,6 +1361,10 @@
</span><span class="cx"> if (pairValue->first()->valueID() == CSSValueLegacy) {
</span><span class="cx"> alignmentData.setPositionType(LegacyPosition);
</span><span class="cx"> alignmentData.setPosition(*pairValue->second());
</span><ins>+ } else if (pairValue->first()->valueID() == CSSValueFirst) {
+ alignmentData.setPosition(ItemPositionBaseline);
+ } else if (pairValue->first()->valueID() == CSSValueLast) {
+ alignmentData.setPosition(ItemPositionLastBaseline);
</ins><span class="cx"> } else {
</span><span class="cx"> alignmentData.setPosition(*pairValue->first());
</span><span class="cx"> alignmentData.setOverflow(*pairValue->second());
</span></span></pre></div>
<a id="trunkSourceWebCorecssparserCSSPropertyParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp (214563 => 214564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp 2017-03-29 21:58:40 UTC (rev 214563)
+++ trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp 2017-03-29 22:01:11 UTC (rev 214564)
</span><span class="lines">@@ -3017,11 +3017,27 @@
</span><span class="cx"> return nullptr;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+static RefPtr<CSSValue> consumeBaselineKeyword(CSSParserTokenRange& range)
+{
+ CSSValueID id = range.peek().id();
+ if (identMatches<CSSValueBaseline>(id))
+ return consumeIdent(range);
+
+ if (RefPtr<CSSPrimitiveValue> preference = consumeIdent<CSSValueFirst, CSSValueLast>(range)) {
+ if (range.peek().id() == CSSValueBaseline)
+ return createPrimitiveValuePair(preference.releaseNonNull(), consumeIdent(range), Pair::IdenticalValueEncoding::Coalesce);
+ }
+ return nullptr;
+}
+
</ins><span class="cx"> static RefPtr<CSSValue> consumeSelfPositionOverflowPosition(CSSParserTokenRange& range)
</span><span class="cx"> {
</span><del>- if (identMatches<CSSValueAuto, CSSValueNormal, CSSValueStretch, CSSValueBaseline, CSSValueLastBaseline>(range.peek().id()))
</del><ins>+ if (identMatches<CSSValueAuto, CSSValueNormal, CSSValueStretch>(range.peek().id()))
</ins><span class="cx"> return consumeIdent(range);
</span><span class="cx">
</span><ins>+ if (identMatches<CSSValueFirst, CSSValueLast, CSSValueBaseline>(range.peek().id()))
+ return consumeBaselineKeyword(range);
+
</ins><span class="cx"> RefPtr<CSSPrimitiveValue> overflowPosition = consumeIdent<CSSValueUnsafe, CSSValueSafe>(range);
</span><span class="cx"> RefPtr<CSSPrimitiveValue> selfPosition = consumeSelfPositionKeyword(range);
</span><span class="cx"> if (!selfPosition)
</span></span></pre>
</div>
</div>
</body>
</html>