<!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>[214624] 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/214624">214624</a></dd>
<dt>Author</dt> <dd>jfernandez@igalia.com</dd>
<dt>Date</dt> <dd>2017-03-30 14:27:09 -0700 (Thu, 30 Mar 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-align] Adapt content-alignment properties to the new baseline syntax
https://bugs.webkit.org/show_bug.cgi?id=170262
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
content-alignment (align-content and justify-content).
I used this patch to adapt the implementation of the parsing logic for
these properties to the new Blink's CSS Parsing Design.
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::valueForContentPositionAndDistributionWithOverflowAlignment):
* css/CSSContentDistributionValue.cpp:
(WebCore::CSSContentDistributionValue::customCSSText):
* css/CSSPrimitiveValueMappings.h:
(WebCore::CSSPrimitiveValue::operator ItemPosition):
(WebCore::CSSPrimitiveValue::operator ContentPosition):
* css/CSSValueKeywords.in:
* css/parser/CSSPropertyParser.cpp:
(WebCore::isBaselineKeyword):
(WebCore::consumeBaselineKeyword):
(WebCore::consumeContentDistributionOverflowPosition):
(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-content-expected.txt:
* css3/parse-align-content.html:
* css3/parse-justify-content-expected.txt:
* css3/parse-justify-content.html:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestscss3parsealigncontentexpectedtxt">trunk/LayoutTests/css3/parse-align-content-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3parsealigncontenthtml">trunk/LayoutTests/css3/parse-align-content.html</a></li>
<li><a href="#trunkLayoutTestscss3parsejustifycontentexpectedtxt">trunk/LayoutTests/css3/parse-justify-content-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3parsejustifycontenthtml">trunk/LayoutTests/css3/parse-justify-content.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="#trunkSourceWebCorecssCSSContentDistributionValuecpp">trunk/Source/WebCore/css/CSSContentDistributionValue.cpp</a></li>
<li><a href="#trunkSourceWebCorecssCSSPrimitiveValueMappingsh">trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h</a></li>
<li><a href="#trunkSourceWebCorecssCSSValueKeywordsin">trunk/Source/WebCore/css/CSSValueKeywords.in</a></li>
<li><a href="#trunkSourceWebCorecssparserCSSPropertyParsercpp">trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (214623 => 214624)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2017-03-30 21:13:21 UTC (rev 214623)
+++ trunk/LayoutTests/ChangeLog 2017-03-30 21:27:09 UTC (rev 214624)
</span><span class="lines">@@ -1,3 +1,19 @@
</span><ins>+2017-03-30 Javier Fernandez <jfernandez@igalia.com>
+
+ [css-align] Adapt content-alignment properties to the new baseline syntax
+ https://bugs.webkit.org/show_bug.cgi?id=170262
+
+ 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-content-expected.txt:
+ * css3/parse-align-content.html:
+ * css3/parse-justify-content-expected.txt:
+ * css3/parse-justify-content.html:
+
</ins><span class="cx"> 2017-03-30 James Craig <jcraig@apple.com>
</span><span class="cx">
</span><span class="cx"> AX: Expose a new AXSubrole for explicit ARIA "group" role
</span></span></pre></div>
<a id="trunkLayoutTestscss3parsealigncontentexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/parse-align-content-expected.txt (214623 => 214624)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-align-content-expected.txt 2017-03-30 21:13:21 UTC (rev 214623)
+++ trunk/LayoutTests/css3/parse-align-content-expected.txt 2017-03-30 21:27:09 UTC (rev 214624)
</span><span class="lines">@@ -1,144 +1,13 @@
</span><span class="cx"> Test that setting and getting align-content 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-content values previously set through CSS.
+PASS Test setting invalid values to align-content through CSS.
+PASS Test initial value of align-content through JS
+PASS Test getting and setting align-content through JS
+PASS Test bad combinations of align-content
+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-content set through CSS
-PASS getComputedStyle(alignContentAuto, '').getPropertyValue('align-content') is "normal"
-PASS getComputedStyle(alignContentBaseline, '').getPropertyValue('align-content') is "baseline"
-PASS getComputedStyle(alignContentLastBaseline, '').getPropertyValue('align-content') is "last-baseline"
-PASS getComputedStyle(alignContentSpaceBetween, '').getPropertyValue('align-content') is "space-between"
-PASS getComputedStyle(alignContentSpaceAround, '').getPropertyValue('align-content') is "space-around"
-PASS getComputedStyle(alignContentSpaceEvenly, '').getPropertyValue('align-content') is "space-evenly"
-PASS getComputedStyle(alignContentStretch, '').getPropertyValue('align-content') is "stretch"
-PASS getComputedStyle(alignContentStart, '').getPropertyValue('align-content') is "start"
-PASS getComputedStyle(alignContentEnd, '').getPropertyValue('align-content') is "end"
-PASS getComputedStyle(alignContentCenter, '').getPropertyValue('align-content') is "center"
-PASS getComputedStyle(alignContentLeft, '').getPropertyValue('align-content') is "left"
-PASS getComputedStyle(alignContentRight, '').getPropertyValue('align-content') is "right"
-PASS getComputedStyle(alignContentFlexStart, '').getPropertyValue('align-content') is "flex-start"
-PASS getComputedStyle(alignContentFlexEnd, '').getPropertyValue('align-content') is "flex-end"
-PASS getComputedStyle(alignContentEndUnsafe, '').getPropertyValue('align-content') is "end unsafe"
-PASS getComputedStyle(alignContentCenterUnsafe, '').getPropertyValue('align-content') is "center unsafe"
-PASS getComputedStyle(alignContentRightSafe, '').getPropertyValue('align-content') is "right safe"
-PASS getComputedStyle(alignContentLeftUnsafe, '').getPropertyValue('align-content') is "left unsafe"
-PASS getComputedStyle(alignContentFlexStartUnsafe, '').getPropertyValue('align-content') is "flex-start unsafe"
-PASS getComputedStyle(alignContentFlexEndSafe, '').getPropertyValue('align-content') is "flex-end safe"
-PASS getComputedStyle(alignContentSpaceBetweenLeft, '').getPropertyValue('align-content') is "space-between left"
-PASS getComputedStyle(alignContentSpaceAroundCenter, '').getPropertyValue('align-content') is "space-around center"
-PASS getComputedStyle(alignContentSpaceEvenlyRight, '').getPropertyValue('align-content') is "space-evenly right"
-PASS getComputedStyle(alignContentStretchStartSafe, '').getPropertyValue('align-content') is "stretch start safe"
-PASS getComputedStyle(alignContentSpaceAroundEndUnsafe, '').getPropertyValue('align-content') is "space-around end unsafe"
-PASS getComputedStyle(alignContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('align-content') is "space-evenly flex-start safe"
-PASS getComputedStyle(alignContentSpaceBetweenSafe, '').getPropertyValue('align-content') is "normal"
-PASS getComputedStyle(alignContentSpaceBetweenStretch, '').getPropertyValue('align-content') is "normal"
-PASS getComputedStyle(alignContentSafe, '').getPropertyValue('align-content') is "normal"
-PASS getComputedStyle(alignContentRightSafeUnsafe, '').getPropertyValue('align-content') is "normal"
-PASS getComputedStyle(alignContentCenterLeft, '').getPropertyValue('align-content') is "normal"
-
-Test initial value of align-content through JS
-PASS getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-
-Test getting and setting align-content through JS
-PASS element.style.alignContent is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "center"
-PASS element.style.alignContent is "start unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start unsafe"
-PASS element.style.alignContent is "flex-end safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "flex-end safe"
-PASS element.style.alignContent is "space-between right safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "space-between right safe"
-PASS element.style.alignContent is "stretch center"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
-PASS element.style.alignContent is "right unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "right unsafe"
-PASS element.style.alignContent is "normal"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is "normal"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is "normal"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is "flex-end"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "flex-end"
-
-Test bad combinations of align-content
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-
-Test the value 'initial'
-PASS element.style.alignContent is "stretch center"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
-PASS element.style.alignContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-
-Test the value 'initial' for grid containers
-PASS element.style.alignContent is "space-between left"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "space-between left"
-PASS element.style.alignContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-
-Test the value 'initial' for flex containers
-PASS element.style.alignContent is "right unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "right unsafe"
-PASS element.style.alignContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-
-Test the value 'inherit'
-PASS element.style.alignContent is "end"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "end"
-PASS element.style.alignContent is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "end"
-PASS element.style.alignContent is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "left safe"
-PASS element.style.alignContent is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "left safe"
-PASS element.style.alignContent is "stretch center"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
-PASS element.style.alignContent is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
</del></span></pre></div>
<a id="trunkLayoutTestscss3parsealigncontenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/parse-align-content.html (214623 => 214624)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-align-content.html 2017-03-30 21:13:21 UTC (rev 214623)
+++ trunk/LayoutTests/css3/parse-align-content.html 2017-03-30 21:27:09 UTC (rev 214624)
</span><span class="lines">@@ -1,6 +1,4 @@
</span><span class="cx"> <!DOCTYPE html>
</span><del>-<html>
-<head>
</del><span class="cx"> <style>
</span><span class="cx"> #alignContentAuto {
</span><span class="cx"> align-content: auto;
</span><span class="lines">@@ -10,8 +8,12 @@
</span><span class="cx"> align-content: baseline;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+#alignContentFirstBaseline {
+ align-content: first baseline;
+}
+
</ins><span class="cx"> #alignContentLastBaseline {
</span><del>- align-content: last-baseline;
</del><ins>+ align-content: last baseline;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #alignContentSpaceBetween {
</span><span class="lines">@@ -127,20 +129,15 @@
</span><span class="cx"> align-content: center left;
</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 align-content works as expected</p>
</ins><span class="cx"> <div id="alignContentAuto"></div>
</span><span class="cx"> <div id="alignContentBaseline"></div>
</span><ins>+<div id="alignContentFirstBaseline"></div>
</ins><span class="cx"> <div id="alignContentLastBaseline"></div>
</span><span class="cx"> <div id="alignContentSpaceBetween"></div>
</span><span class="cx"> <div id="alignContentSpaceAround"></div>
</span><span class="cx"> <div id="alignContentSpaceEvenly"></div>
</span><span class="cx"> <div id="alignContentStretch"></div>
</span><del>-<div id="alignContentSpaceBetweenSafe"></div>
-<div id="alignContentSpaceAroundUnsafe"></div>
-<div id="alignContentStretchUnsafe"></div>
-<div id="alignContentStretchrue"></div>
</del><span class="cx"> <div id="alignContentStart"></div>
</span><span class="cx"> <div id="alignContentEnd"></div>
</span><span class="cx"> <div id="alignContentCenter"></div>
</span><span class="lines">@@ -167,195 +164,177 @@
</span><span class="cx"> <div id="alignContentRightSafeUnsafe"></div>
</span><span class="cx"> <div id="alignContentCenterLeft"></div>
</span><span class="cx">
</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-content works as expected');
</del><ins>+test(function() {
+ var alignContentAuto = document.getElementById("alignContentAuto");
+ checkValues(alignContentAuto, "alignContent", "align-content", "", "normal");
+ var alignContentBaseline = document.getElementById("alignContentBaseline");
+ checkValues(alignContentBaseline, "alignContent", "align-content", "", "baseline");
+ var alignContentLastBaseline = document.getElementById("alignContentFirstBaseline");
+ checkValues(alignContentLastBaseline, "alignContent", "align-content", "", "baseline");
+ var alignContentLastBaseline = document.getElementById("alignContentLastBaseline");
+ checkValues(alignContentLastBaseline, "alignContent", "align-content", "", "last baseline");
+ var alignContentSpaceBetween = document.getElementById("alignContentSpaceBetween");
+ checkValues(alignContentSpaceBetween, "alignContent", "align-content", "", "space-between");
+ var alignContentSpaceAround = document.getElementById("alignContentSpaceAround");
+ checkValues(alignContentSpaceAround, "alignContent", "align-content", "", "space-around");
+ var alignContentSpaceEvenly = document.getElementById("alignContentSpaceEvenly");
+ checkValues(alignContentSpaceEvenly, "alignContent", "align-content", "", "space-evenly");
+ var alignContentStretch = document.getElementById("alignContentStretch");
+ checkValues(alignContentStretch, "alignContent", "align-content", "", "stretch");
+ var alignContentStart = document.getElementById("alignContentStart");
+ checkValues(alignContentStart, "alignContent", "align-content", "", "start");
+ var alignContentEnd = document.getElementById("alignContentEnd");
+ checkValues(alignContentEnd, "alignContent", "align-content", "", "end");
+ var alignContentCenter = document.getElementById("alignContentCenter");
+ checkValues(alignContentCenter, "alignContent", "align-content", "", "center");
+ var alignContentLeft = document.getElementById("alignContentLeft");
+ checkValues(alignContentLeft, "alignContent", "align-content", "", "left");
+ var alignContentRight = document.getElementById("alignContentRight");
+ checkValues(alignContentRight, "alignContent", "align-content", "", "right");
+ var alignContentFlexStart = document.getElementById("alignContentFlexStart");
+ checkValues(alignContentFlexStart, "alignContent", "align-content", "", "flex-start");
+ var alignContentFlexEnd = document.getElementById("alignContentFlexEnd");
+ checkValues(alignContentFlexEnd, "alignContent", "align-content", "", "flex-end");
+ var alignContentEndUnsafe = document.getElementById("alignContentEndUnsafe");
+ checkValues(alignContentEndUnsafe, "alignContent", "align-content", "", "end unsafe");
+ var alignContentCenterUnsafe = document.getElementById("alignContentCenterUnsafe");
+ checkValues(alignContentCenterUnsafe, "alignContent", "align-content", "", "center unsafe");
+ var alignContentRightSafe = document.getElementById("alignContentRightSafe");
+ checkValues(alignContentRightSafe, "alignContent", "align-content", "", "right safe");
+ var alignContentLeftUnsafe = document.getElementById("alignContentLeftUnsafe");
+ checkValues(alignContentLeftUnsafe, "alignContent", "align-content", "", "left unsafe");
+ var alignContentFlexStartUnsafe = document.getElementById("alignContentFlexStartUnsafe");
+ checkValues(alignContentFlexStartUnsafe, "alignContent", "align-content", "", "flex-start unsafe");
+ var alignContentFlexEndSafe = document.getElementById("alignContentFlexEndSafe");
+ checkValues(alignContentFlexEndSafe, "alignContent", "align-content", "", "flex-end safe");
+ var alignContentSpaceBetweenLeft = document.getElementById("alignContentSpaceBetweenLeft");
+ checkValues(alignContentSpaceBetweenLeft, "alignContent", "align-content", "", "space-between left");
+ var alignContentSpaceAroundCenter = document.getElementById("alignContentSpaceAroundCenter");
+ checkValues(alignContentSpaceAroundCenter, "alignContent", "align-content", "", "space-around center");
+ var alignContentSpaceEvenlyRight = document.getElementById("alignContentSpaceEvenlyRight");
+ checkValues(alignContentSpaceEvenlyRight, "alignContent", "align-content", "", "space-evenly right");
+ var alignContentStretchStartSafe = document.getElementById("alignContentStretchStartSafe");
+ checkValues(alignContentStretchStartSafe, "alignContent", "align-content", "", "stretch start safe");
+ var alignContentSpaceAroundEndUnsafe = document.getElementById("alignContentSpaceAroundEndUnsafe");
+ checkValues(alignContentSpaceAroundEndUnsafe, "alignContent", "align-content", "", "space-around end unsafe");
+ var alignContentSpaceEvenlyFlexStartSafe = document.getElementById("alignContentSpaceEvenlyFlexStartSafe");
+ checkValues(alignContentSpaceEvenlyFlexStartSafe, "alignContent", "align-content", "", "space-evenly flex-start safe");
+}, "Test getting align-content values previously set through CSS.");
</ins><span class="cx">
</span><del>-debug("Test getting align-content set through CSS");
-var alignContentAuto = document.getElementById("alignContentAuto");
-shouldBeEqualToString("getComputedStyle(alignContentAuto, '').getPropertyValue('align-content')", "normal");
</del><ins>+test(function() {
+ var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBetweenSafe");
+ checkValues(alignContentSpaceBetweenSafe, "alignContent", "align-content", "", "normal");
+ var alignContentSpaceBetweenStretch = document.getElementById("alignContentSpaceBetweenStretch");
+ checkValues(alignContentSpaceBetweenStretch, "alignContent", "align-content", "", "normal");
+ var alignContentSafe = document.getElementById("alignContentSafe");
+ checkValues(alignContentSafe, "alignContent", "align-content", "", "normal");
+ var alignContentRightSafeUnsafe = document.getElementById("alignContentRightSafeUnsafe");
+ checkValues(alignContentRightSafeUnsafe, "alignContent", "align-content", "", "normal");
+ var alignContentCenterLeft = document.getElementById("alignContentCenterLeft");
+ checkValues(alignContentCenterLeft, "alignContent", "align-content", "", "normal");
+}, "Test setting invalid values to align-content through CSS.");
</ins><span class="cx">
</span><del>-var alignContentBaseline = document.getElementById("alignContentBaseline");
-shouldBeEqualToString("getComputedStyle(alignContentBaseline, '').getPropertyValue('align-content')", "baseline");
</del><ins>+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ checkValues(element, "alignContent", "align-content", "", "normal");
+}, "Test initial value of align-content through JS");
</ins><span class="cx">
</span><del>-var alignContentLastBaseline = document.getElementById("alignContentLastBaseline");
-shouldBeEqualToString("getComputedStyle(alignContentLastBaseline, '').getPropertyValue('align-content')", "last-baseline");
</del><ins>+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.alignContent = "center";
+ checkValues(element, "alignContent", "align-content", "center", "center");
</ins><span class="cx">
</span><del>-var alignContentSpaceBetween = document.getElementById("alignContentSpaceBetween");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceBetween, '').getPropertyValue('align-content')", "space-between");
</del><ins>+ element.style.alignContent = "unsafe start";
+ checkValues(element, "alignContent", "align-content", "start unsafe", "start unsafe");
</ins><span class="cx">
</span><del>-var alignContentSpaceAround = document.getElementById("alignContentSpaceAround");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceAround, '').getPropertyValue('align-content')", "space-around");
</del><ins>+ element.style.alignContent = "flex-end safe";
+ checkValues(element, "alignContent", "align-content", "flex-end safe", "flex-end safe");
</ins><span class="cx">
</span><del>-var alignContentSpaceEvenly = document.getElementById("alignContentSpaceEvenly");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenly, '').getPropertyValue('align-content')", "space-evenly");
</del><ins>+ element.style.alignContent = "space-between right safe";
+ checkValues(element, "alignContent", "align-content", "space-between right safe", "space-between right safe");
</ins><span class="cx">
</span><del>-var alignContentStretch = document.getElementById("alignContentStretch");
-shouldBeEqualToString("getComputedStyle(alignContentStretch, '').getPropertyValue('align-content')", "stretch");
</del><ins>+ element.style.alignContent = "stretch center";
+ checkValues(element, "alignContent", "align-content", "stretch center", "stretch center");
</ins><span class="cx">
</span><del>-var alignContentStart = document.getElementById("alignContentStart");
-shouldBeEqualToString("getComputedStyle(alignContentStart, '').getPropertyValue('align-content')", "start");
</del><ins>+ element.style.alignContent = "right unsafe";
+ checkValues(element, "alignContent", "align-content", "right unsafe", "right unsafe");
</ins><span class="cx">
</span><del>-var alignContentEnd = document.getElementById("alignContentEnd");
-shouldBeEqualToString("getComputedStyle(alignContentEnd, '').getPropertyValue('align-content')", "end");
</del><ins>+ element.style.justifyContent = "first baseline";
+ checkValues(element, "justifyContent", "justify-content", "first baseline", "baseline");
</ins><span class="cx">
</span><del>-var alignContentCenter = document.getElementById("alignContentCenter");
-shouldBeEqualToString("getComputedStyle(alignContentCenter, '').getPropertyValue('align-content')", "center");
</del><ins>+ element.style.justifyContent = "last baseline";
+ checkValues(element, "justifyContent", "justify-content", "last baseline", "last baseline");
</ins><span class="cx">
</span><del>-var alignContentLeft = document.getElementById("alignContentLeft");
-shouldBeEqualToString("getComputedStyle(alignContentLeft, '').getPropertyValue('align-content')", "left");
</del><ins>+ element.style.alignContent = "normal";
+ checkValues(element, "alignContent", "align-content", "normal", "normal");
</ins><span class="cx">
</span><del>-var alignContentRight = document.getElementById("alignContentRight");
-shouldBeEqualToString("getComputedStyle(alignContentRight, '').getPropertyValue('align-content')", "right");
</del><ins>+ element.style.display = "flex";
+ element.style.alignContent = "normal";
+ checkValues(element, "alignContent", "align-content", "normal", "normal");
</ins><span class="cx">
</span><del>-var alignContentFlexStart = document.getElementById("alignContentFlexStart");
-shouldBeEqualToString("getComputedStyle(alignContentFlexStart, '').getPropertyValue('align-content')", "flex-start");
</del><ins>+ element.style.display = "grid";
+ element.style.alignContent = "normal";
+ checkValues(element, "alignContent", "align-content", "normal", "normal");
</ins><span class="cx">
</span><del>-var alignContentFlexEnd = document.getElementById("alignContentFlexEnd");
-shouldBeEqualToString("getComputedStyle(alignContentFlexEnd, '').getPropertyValue('align-content')", "flex-end");
</del><ins>+ element.style.alignContent = "flex-end";
+ checkValues(element, "alignContent", "align-content", "flex-end", "flex-end");
+}, "Test getting and setting align-content through JS");
</ins><span class="cx">
</span><del>-var alignContentEndUnsafe = document.getElementById("alignContentEndUnsafe");
-shouldBeEqualToString("getComputedStyle(alignContentEndUnsafe, '').getPropertyValue('align-content')", "end unsafe");
</del><ins>+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
</ins><span class="cx">
</span><del>-var alignContentCenterUnsafe = document.getElementById("alignContentCenterUnsafe");
-shouldBeEqualToString("getComputedStyle(alignContentCenterUnsafe, '').getPropertyValue('align-content')", "center unsafe");
</del><ins>+ checkBadValues(element, "alignContent", "align-content", "");
+ checkBadValues(element, "alignContent", "align-content", "auto");
+ checkBadValues(element, "alignContent", "align-content", "unsafe auto");
+ checkBadValues(element, "alignContent", "align-content", "auto safe");
+ checkBadValues(element, "alignContent", "align-content", "auto left");
+ checkBadValues(element, "alignContent", "align-content", "baseline safe");
+ checkBadValues(element, "alignContent", "align-content", "last-baseline center");
+ checkBadValues(element, "alignContent", "align-content", "unsafe unsafe");
+ checkBadValues(element, "alignContent", "align-content", "unsafe safe");
+ checkBadValues(element, "alignContent", "align-content", "center start");
+ checkBadValues(element, "alignContent", "align-content", "baseline safe");
+ checkBadValues(element, "alignContent", "align-content", "unsafe baseline");
+ checkBadValues(element, "alignContent", "align-content", "unsafe safe left");
+ checkBadValues(element, "alignContent", "align-content", "unsafe left safe");
+ checkBadValues(element, "alignContent", "align-content", "left safe unsafe safe");
+ checkBadValues(element, "alignContent", "align-content", "start right space-between");
+ checkBadValues(element, "alignContent", "align-content", "safe stretch");
+ checkBadValues(element, "alignContent", "align-content", "normal space-between");
+ checkBadValues(element, "alignContent", "align-content", "stretch normal");
+ checkBadValues(element, "alignContent", "align-content", "normal safe");
+ checkBadValues(element, "alignContent", "align-content", "space-around stretch");
+ checkBadValues(element, "alignContent", "align-content", "end space-between start");
+ checkBadValues(element, "alignContent", "align-content", "right safe left");
+ checkBadValues(element, "alignContent", "align-content", "unsafe");
+ checkBadValues(element, "alignContent", "align-content", "safe");
+}, "Test bad combinations of align-content");
</ins><span class="cx">
</span><del>-var alignContentRightSafe = document.getElementById("alignContentRightSafe");
-shouldBeEqualToString("getComputedStyle(alignContentRightSafe, '').getPropertyValue('align-content')", "right safe");
</del><ins>+test(function() {
+ element.style.display = "";
+ checkInitialValues(element, "alignContent", "align-content", "center", "normal");
+}, "Test the value 'initial'");
</ins><span class="cx">
</span><del>-var alignContentLeftUnsafe = document.getElementById("alignContentLeftUnsafe");
-shouldBeEqualToString("getComputedStyle(alignContentLeftUnsafe, '').getPropertyValue('align-content')", "left unsafe");
</del><ins>+test(function() {
+ element.style.display = "grid";
+ checkInitialValues(element, "alignContent", "align-content", "left safe", "normal");
+}, "Test the value 'initial' for grid containers");
</ins><span class="cx">
</span><del>-var alignContentFlexStartUnsafe = document.getElementById("alignContentFlexStartUnsafe");
-shouldBeEqualToString("getComputedStyle(alignContentFlexStartUnsafe, '').getPropertyValue('align-content')", "flex-start unsafe");
</del><ins>+test(function() {
+ element.style.display = "flex";
+ checkInitialValues(element, "alignContent", "align-content", "right unsafe", "normal");
+}, "Test the value 'initial' for flex containers");
</ins><span class="cx">
</span><del>-var alignContentFlexEndSafe = document.getElementById("alignContentFlexEndSafe");
-shouldBeEqualToString("getComputedStyle(alignContentFlexEndSafe, '').getPropertyValue('align-content')", "flex-end safe");
-
-var alignContentSpaceBetweenLeft = document.getElementById("alignContentSpaceBetweenLeft");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenLeft, '').getPropertyValue('align-content')", "space-between left");
-
-var alignContentSpaceAroundCenter = document.getElementById("alignContentSpaceAroundCenter");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceAroundCenter, '').getPropertyValue('align-content')", "space-around center");
-
-var alignContentSpaceEvenlyRight = document.getElementById("alignContentSpaceEvenlyRight");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenlyRight, '').getPropertyValue('align-content')", "space-evenly right");
-
-var alignContentStretchStartSafe = document.getElementById("alignContentStretchStartSafe");
-shouldBeEqualToString("getComputedStyle(alignContentStretchStartSafe, '').getPropertyValue('align-content')", "stretch start safe");
-
-var alignContentSpaceAroundEndUnsafe = document.getElementById("alignContentSpaceAroundEndUnsafe");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceAroundEndUnsafe, '').getPropertyValue('align-content')", "space-around end unsafe");
-
-var alignContentSpaceEvenlyFlexStartSafe = document.getElementById("alignContentSpaceEvenlyFlexStartSafe");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('align-content')", "space-evenly flex-start safe");
-
-var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBetweenSafe");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenSafe, '').getPropertyValue('align-content')", "normal");
-
-var alignContentSpaceAroundUnsafe = document.getElementById("alignContentSpaceBetweenStretch");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenStretch, '').getPropertyValue('align-content')", "normal");
-
-var alignContentSpaceAroundUnsafe = document.getElementById("alignContentSafe");
-shouldBeEqualToString("getComputedStyle(alignContentSafe, '').getPropertyValue('align-content')", "normal");
-
-var alignContentSpaceAroundUnsafe = document.getElementById("alignContentRightSafeUnsafe");
-shouldBeEqualToString("getComputedStyle(alignContentRightSafeUnsafe, '').getPropertyValue('align-content')", "normal");
-
-var alignContentSpaceAroundUnsafe = document.getElementById("alignContentCenterLeft");
-shouldBeEqualToString("getComputedStyle(alignContentCenterLeft, '').getPropertyValue('align-content')", "normal");
-
-debug("");
-debug("Test initial value of align-content through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('align-content')", "normal");
-
-debug("");
-debug("Test getting and setting align-content through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-element.style.alignContent = "center";
-checkValues(element, "alignContent", "align-content", "center", "center");
-
-element.style.alignContent = "unsafe start";
-checkValues(element, "alignContent", "align-content", "start unsafe", "start unsafe");
-
-element.style.alignContent = "flex-end safe";
-checkValues(element, "alignContent", "align-content", "flex-end safe", "flex-end safe");
-
-element.style.alignContent = "space-between right safe";
-checkValues(element, "alignContent", "align-content", "space-between right safe", "space-between right safe");
-
-element.style.alignContent = "stretch center";
-checkValues(element, "alignContent", "align-content", "stretch center", "stretch center");
-
-element.style.alignContent = "right unsafe";
-checkValues(element, "alignContent", "align-content", "right unsafe", "right unsafe");
-
-element.style.alignContent = "normal";
-checkValues(element, "alignContent", "align-content", "normal", "normal");
-
-element.style.display = "-webkit-flex";
-element.style.alignContent = "normal";
-checkValues(element, "alignContent", "align-content", "normal", "normal");
-
-element.style.display = "grid";
-element.style.alignContent = "normal";
-checkValues(element, "alignContent", "align-content", "normal", "normal");
-
-element.style.alignContent = "flex-end";
-checkValues(element, "alignContent", "align-content", "flex-end", "flex-end");
-
-debug("");
-debug("Test bad combinations of align-content");
-element = document.createElement("div");
-document.body.appendChild(element);
-
-checkBadValues(element, "alignContent", "align-content", "");
-checkBadValues(element, "alignContent", "align-content", "auto");
-checkBadValues(element, "alignContent", "align-content", "unsafe auto");
-checkBadValues(element, "alignContent", "align-content", "auto safe");
-checkBadValues(element, "alignContent", "align-content", "auto left");
-checkBadValues(element, "alignContent", "align-content", "baseline safe");
-checkBadValues(element, "alignContent", "align-content", "last baseline center");
-checkBadValues(element, "alignContent", "align-content", "unsafe unsafe");
-checkBadValues(element, "alignContent", "align-content", "unsafe safe");
-checkBadValues(element, "alignContent", "align-content", "center start");
-checkBadValues(element, "alignContent", "align-content", "baseline safe");
-checkBadValues(element, "alignContent", "align-content", "unsafe baseline");
-checkBadValues(element, "alignContent", "align-content", "unsafe safe left");
-checkBadValues(element, "alignContent", "align-content", "unsafe left safe");
-checkBadValues(element, "alignContent", "align-content", "left safe unsafe safe");
-checkBadValues(element, "alignContent", "align-content", "start right space-between");
-checkBadValues(element, "alignContent", "align-content", "safe stretch");
-checkBadValues(element, "alignContent", "align-content", "space-around stretch");
-checkBadValues(element, "alignContent", "align-content", "end space-between start");
-checkBadValues(element, "alignContent", "align-content", "right safe left");
-checkBadValues(element, "alignContent", "align-content", "unsafe");
-checkBadValues(element, "alignContent", "align-content", "safe");
-
-debug("");
-debug("Test the value 'initial'");
-element.style.display = "";
-checkInitialValues(element, "alignContent", "align-content", "stretch center", "normal");
-
-debug("");
-debug("Test the value 'initial' for grid containers");
-element.style.display = "grid";
-checkInitialValues(element, "alignContent", "align-content", "space-between left", "normal");
-
-debug("");
-debug("Test the value 'initial' for flex containers");
-element.style.display = "-webkit-flex";
-checkInitialValues(element, "alignContent", "align-content", "right unsafe", "normal");
-
-debug("");
-debug("Test the value 'inherit'");
-checkInheritValues("alignContent", "align-content", "end");
-checkInheritValues("alignContent", "align-content", "left safe");
-checkInheritValues("alignContent", "align-content", "stretch center");
-
</del><ins>+test(function() {
+ checkInheritValues("alignContent", "align-content", "end");
+ checkInheritValues("alignContent", "align-content", "left safe");
+ checkInheritValues("alignContent", "align-content", "center unsafe");
+}, "Test the value 'inherit'");
</ins><span class="cx"> </script>
</span><del>-</body>
-</html>
</del></span></pre></div>
<a id="trunkLayoutTestscss3parsejustifycontentexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/parse-justify-content-expected.txt (214623 => 214624)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-justify-content-expected.txt 2017-03-30 21:13:21 UTC (rev 214623)
+++ trunk/LayoutTests/css3/parse-justify-content-expected.txt 2017-03-30 21:27:09 UTC (rev 214624)
</span><span class="lines">@@ -1,144 +1,13 @@
</span><span class="cx"> Test that setting and getting justify-content 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-content values previously set through CSS.
+PASS Test setting invalid values to justify-content through CSS.
+PASS Test initial value of justify-content through JS
+PASS Test getting and setting justify-content through JS
+PASS Test bad combinations of justify-content
+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 justify-content set through CSS
-PASS getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content') is "normal"
-PASS getComputedStyle(justifyContentBaseline, '').getPropertyValue('justify-content') is "baseline"
-PASS getComputedStyle(justifyContentLastBaseline, '').getPropertyValue('justify-content') is "last-baseline"
-PASS getComputedStyle(justifyContentSpaceBetween, '').getPropertyValue('justify-content') is "space-between"
-PASS getComputedStyle(justifyContentSpaceAround, '').getPropertyValue('justify-content') is "space-around"
-PASS getComputedStyle(justifyContentSpaceEvenly, '').getPropertyValue('justify-content') is "space-evenly"
-PASS getComputedStyle(justifyContentStretch, '').getPropertyValue('justify-content') is "stretch"
-PASS getComputedStyle(justifyContentStart, '').getPropertyValue('justify-content') is "start"
-PASS getComputedStyle(justifyContentEnd, '').getPropertyValue('justify-content') is "end"
-PASS getComputedStyle(justifyContentCenter, '').getPropertyValue('justify-content') is "center"
-PASS getComputedStyle(justifyContentLeft, '').getPropertyValue('justify-content') is "left"
-PASS getComputedStyle(justifyContentRight, '').getPropertyValue('justify-content') is "right"
-PASS getComputedStyle(justifyContentFlexStart, '').getPropertyValue('justify-content') is "flex-start"
-PASS getComputedStyle(justifyContentFlexEnd, '').getPropertyValue('justify-content') is "flex-end"
-PASS getComputedStyle(justifyContentEndUnsafe, '').getPropertyValue('justify-content') is "end unsafe"
-PASS getComputedStyle(justifyContentCenterUnsafe, '').getPropertyValue('justify-content') is "center unsafe"
-PASS getComputedStyle(justifyContentRightSafe, '').getPropertyValue('justify-content') is "right safe"
-PASS getComputedStyle(justifyContentLeftUnsafe, '').getPropertyValue('justify-content') is "left unsafe"
-PASS getComputedStyle(justifyContentFlexStartUnsafe, '').getPropertyValue('justify-content') is "flex-start unsafe"
-PASS getComputedStyle(justifyContentFlexEndSafe, '').getPropertyValue('justify-content') is "flex-end safe"
-PASS getComputedStyle(justifyContentSpaceBetweenLeft, '').getPropertyValue('justify-content') is "space-between left"
-PASS getComputedStyle(justifyContentSpaceAroundCenter, '').getPropertyValue('justify-content') is "space-around center"
-PASS getComputedStyle(justifyContentSpaceEvenlyRight, '').getPropertyValue('justify-content') is "space-evenly right"
-PASS getComputedStyle(justifyContentStretchStartSafe, '').getPropertyValue('justify-content') is "stretch start safe"
-PASS getComputedStyle(justifyContentSpaceAroundEndUnsafe, '').getPropertyValue('justify-content') is "space-around end unsafe"
-PASS getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('justify-content') is "space-evenly flex-start safe"
-PASS getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content') is "normal"
-PASS getComputedStyle(justifyContentSpaceBetweenStretch, '').getPropertyValue('justify-content') is "normal"
-PASS getComputedStyle(justifyContentSafe, '').getPropertyValue('justify-content') is "normal"
-PASS getComputedStyle(justifyContentRightSafeUnsafe, '').getPropertyValue('justify-content') is "normal"
-PASS getComputedStyle(justifyContentCenterLeft, '').getPropertyValue('justify-content') is "normal"
-
-Test initial value of justify-content through JS
-PASS getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-
-Test getting and setting justify-content through JS
-PASS element.style.justifyContent is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "center"
-PASS element.style.justifyContent is "start unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start unsafe"
-PASS element.style.justifyContent is "flex-end safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "flex-end safe"
-PASS element.style.justifyContent is "space-between right safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "space-between right safe"
-PASS element.style.justifyContent is "stretch center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch center"
-PASS element.style.justifyContent is "right unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "right unsafe"
-PASS element.style.justifyContent is "normal"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is "normal"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is "normal"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is "flex-end"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "flex-end"
-
-Test bad combinations of justify-content
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-
-Test the value 'initial'
-PASS element.style.justifyContent is "stretch center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch center"
-PASS element.style.justifyContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-
-Test the value 'initial' for grid containers
-PASS element.style.justifyContent is "space-between left"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "space-between left"
-PASS element.style.justifyContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-
-Test the value 'initial' for flex containers
-PASS element.style.justifyContent is "right unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "right unsafe"
-PASS element.style.justifyContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-
-Test the value 'inherit'
-PASS element.style.justifyContent is "end"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "end"
-PASS element.style.justifyContent is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "end"
-PASS element.style.justifyContent is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "left safe"
-PASS element.style.justifyContent is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "left safe"
-PASS element.style.justifyContent is "stretch center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch center"
-PASS element.style.justifyContent is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch center"
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
</del></span></pre></div>
<a id="trunkLayoutTestscss3parsejustifycontenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/parse-justify-content.html (214623 => 214624)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-justify-content.html 2017-03-30 21:13:21 UTC (rev 214623)
+++ trunk/LayoutTests/css3/parse-justify-content.html 2017-03-30 21:27:09 UTC (rev 214624)
</span><span class="lines">@@ -1,6 +1,4 @@
</span><span class="cx"> <!DOCTYPE html>
</span><del>-<html>
-<head>
</del><span class="cx"> <style>
</span><span class="cx"> #justifyContentAuto {
</span><span class="cx"> justify-content: auto;
</span><span class="lines">@@ -10,8 +8,12 @@
</span><span class="cx"> justify-content: baseline;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+#justifyContentFirstBaseline {
+ justify-content: first baseline;
+}
+
</ins><span class="cx"> #justifyContentLastBaseline {
</span><del>- justify-content: last-baseline;
</del><ins>+ justify-content: last baseline;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #justifyContentSpaceBetween {
</span><span class="lines">@@ -127,11 +129,10 @@
</span><span class="cx"> justify-content: center left;
</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-content works as expected</p>
</ins><span class="cx"> <div id="justifyContentAuto"></div>
</span><span class="cx"> <div id="justifyContentBaseline"></div>
</span><ins>+<div id="justifyContentFirstBaseline"></div>
</ins><span class="cx"> <div id="justifyContentLastBaseline"></div>
</span><span class="cx"> <div id="justifyContentSpaceBetween"></div>
</span><span class="cx"> <div id="justifyContentSpaceAround"></div>
</span><span class="lines">@@ -163,195 +164,180 @@
</span><span class="cx"> <div id="justifyContentRightSafeUnsafe"></div>
</span><span class="cx"> <div id="justifyContentCenterLeft"></div>
</span><span class="cx">
</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-content works as expected');
</del><ins>+test(function() {
+ var justifyContentAuto = document.getElementById("justifyContentAuto");
+ checkValues(justifyContentAuto, "justifyContent", "justify-content", "", "normal");
+ var justifyContentBaseline = document.getElementById("justifyContentBaseline");
+ checkValues(justifyContentBaseline, "justifyContent", "justify-content", "", "baseline");
+ var justifyContentLastBaseline = document.getElementById("justifyContentFirstBaseline");
+ checkValues(justifyContentLastBaseline, "justifyContent", "justify-content", "", "baseline");
+ var justifyContentLastBaseline = document.getElementById("justifyContentLastBaseline");
+ checkValues(justifyContentLastBaseline, "justifyContent", "justify-content", "", "last baseline");
+ var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBetween");
+ checkValues(justifyContentSpaceBetween, "justifyContent", "justify-content", "", "space-between");
+ var justifyContentSpaceAround = document.getElementById("justifyContentSpaceAround");
+ checkValues(justifyContentSpaceAround, "justifyContent", "justify-content", "", "space-around");
+ var justifyContentSpaceEvenly = document.getElementById("justifyContentSpaceEvenly");
+ checkValues(justifyContentSpaceEvenly, "justifyContent", "justify-content", "", "space-evenly");
+ var justifyContentStretch = document.getElementById("justifyContentStretch");
+ checkValues(justifyContentStretch, "justifyContent", "justify-content", "", "stretch");
+ var justifyContentStart = document.getElementById("justifyContentStart");
+ checkValues(justifyContentStart, "justifyContent", "justify-content", "", "start");
+ var justifyContentEnd = document.getElementById("justifyContentEnd");
+ checkValues(justifyContentEnd, "justifyContent", "justify-content", "", "end");
+ var justifyContentCenter = document.getElementById("justifyContentCenter");
+ checkValues(justifyContentCenter, "justifyContent", "justify-content", "", "center");
+ var justifyContentLeft = document.getElementById("justifyContentLeft");
+ checkValues(justifyContentLeft, "justifyContent", "justify-content", "", "left");
+ var justifyContentRight = document.getElementById("justifyContentRight");
+ checkValues(justifyContentRight, "justifyContent", "justify-content", "", "right");
+ var justifyContentFlexStart = document.getElementById("justifyContentFlexStart");
+ checkValues(justifyContentFlexStart, "justifyContent", "justify-content", "", "flex-start");
+ var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd");
+ checkValues(justifyContentFlexEnd, "justifyContent", "justify-content", "", "flex-end");
+ var justifyContentEndUnsafe = document.getElementById("justifyContentEndUnsafe");
+ checkValues(justifyContentEndUnsafe, "justifyContent", "justify-content", "", "end unsafe");
+ var justifyContentCenterUnsafe = document.getElementById("justifyContentCenterUnsafe");
+ checkValues(justifyContentCenterUnsafe, "justifyContent", "justify-content", "", "center unsafe");
+ var justifyContentRightSafe = document.getElementById("justifyContentRightSafe");
+ checkValues(justifyContentRightSafe, "justifyContent", "justify-content", "", "right safe");
+ var justifyContentLeftUnsafe = document.getElementById("justifyContentLeftUnsafe");
+ checkValues(justifyContentLeftUnsafe, "justifyContent", "justify-content", "", "left unsafe");
+ var justifyContentFlexStartUnsafe = document.getElementById("justifyContentFlexStartUnsafe");
+ checkValues(justifyContentFlexStartUnsafe, "justifyContent", "justify-content", "", "flex-start unsafe");
+ var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSafe");
+ checkValues(justifyContentFlexEndSafe, "justifyContent", "justify-content", "", "flex-end safe");
+ var justifyContentSpaceBetweenLeft = document.getElementById("justifyContentSpaceBetweenLeft");
+ checkValues(justifyContentSpaceBetweenLeft, "justifyContent", "justify-content", "", "space-between left");
+ var justifyContentSpaceAroundCenter = document.getElementById("justifyContentSpaceAroundCenter");
+ checkValues(justifyContentSpaceAroundCenter, "justifyContent", "justify-content", "", "space-around center");
+ var justifyContentSpaceEvenlyRight = document.getElementById("justifyContentSpaceEvenlyRight");
+ checkValues(justifyContentSpaceEvenlyRight, "justifyContent", "justify-content", "", "space-evenly right");
+ var justifyContentStretchStartSafe = document.getElementById("justifyContentStretchStartSafe");
+ checkValues(justifyContentStretchStartSafe, "justifyContent", "justify-content", "", "stretch start safe");
+ var justifyContentSpaceAroundEndUnsafe = document.getElementById("justifyContentSpaceAroundEndUnsafe");
+ checkValues(justifyContentSpaceAroundEndUnsafe, "justifyContent", "justify-content", "", "space-around end unsafe");
+ var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyContentSpaceEvenlyFlexStartSafe");
+ checkValues(justifyContentSpaceEvenlyFlexStartSafe, "justifyContent", "justify-content", "", "space-evenly flex-start safe");
+}, "Test getting justify-content values previously set through CSS.");
</ins><span class="cx">
</span><del>-debug("Test getting justify-content set through CSS");
-var justifyContentAuto = document.getElementById("justifyContentAuto");
-shouldBeEqualToString("getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content')", "normal");
</del><ins>+test(function() {
+ var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpaceBetweenSafe");
+ checkValues(justifyContentSpaceBetweenSafe, "justifyContent", "justify-content", "", "normal");
+ var justifyContentSpaceBetweenStretch = document.getElementById("justifyContentSpaceBetweenStretch");
+ checkValues(justifyContentSpaceBetweenStretch, "justifyContent", "justify-content", "", "normal");
+ var justifyContentSafe = document.getElementById("justifyContentSafe");
+ checkValues(justifyContentSafe, "justifyContent", "justify-content", "", "normal");
+ var justifyContentRightSafeUnsafe = document.getElementById("justifyContentRightSafeUnsafe");
+ checkValues(justifyContentRightSafeUnsafe, "justifyContent", "justify-content", "", "normal");
+ var justifyContentCenterLeft = document.getElementById("justifyContentCenterLeft");
+ checkValues(justifyContentCenterLeft, "justifyContent", "justify-content", "", "normal");
+}, "Test setting invalid values to justify-content through CSS.");
</ins><span class="cx">
</span><del>-var justifyContentBaseline = document.getElementById("justifyContentBaseline");
-shouldBeEqualToString("getComputedStyle(justifyContentBaseline, '').getPropertyValue('justify-content')", "baseline");
</del><ins>+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ checkValues(element, "justifyContent", "justify-content", "", "normal");
+}, "Test initial value of justify-content through JS");
</ins><span class="cx">
</span><del>-var justifyContentLastBaseline = document.getElementById("justifyContentLastBaseline");
-shouldBeEqualToString("getComputedStyle(justifyContentLastBaseline, '').getPropertyValue('justify-content')", "last-baseline");
</del><ins>+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.justifyContent = "center";
+ checkValues(element, "justifyContent", "justify-content", "center", "center");
</ins><span class="cx">
</span><del>-var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBetween");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetween, '').getPropertyValue('justify-content')", "space-between");
</del><ins>+ element.style.justifyContent = "unsafe start";
+ checkValues(element, "justifyContent", "justify-content", "start unsafe", "start unsafe");
</ins><span class="cx">
</span><del>-var justifyContentSpaceAround = document.getElementById("justifyContentSpaceAround");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceAround, '').getPropertyValue('justify-content')", "space-around");
</del><ins>+ element.style.justifyContent = "flex-end safe";
+ checkValues(element, "justifyContent", "justify-content", "flex-end safe", "flex-end safe");
</ins><span class="cx">
</span><del>-var justifyContentSpaceEvenly = document.getElementById("justifyContentSpaceEvenly");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenly, '').getPropertyValue('justify-content')", "space-evenly");
</del><ins>+ element.style.justifyContent = "space-between right safe";
+ checkValues(element, "justifyContent", "justify-content", "space-between right safe", "space-between right safe");
</ins><span class="cx">
</span><del>-var justifyContentStretch = document.getElementById("justifyContentStretch");
-shouldBeEqualToString("getComputedStyle(justifyContentStretch, '').getPropertyValue('justify-content')", "stretch");
</del><ins>+ element.style.justifyContent = "center stretch";
+ checkValues(element, "justifyContent", "justify-content", "stretch center", "stretch center");
</ins><span class="cx">
</span><del>-var justifyContentStart = document.getElementById("justifyContentStart");
-shouldBeEqualToString("getComputedStyle(justifyContentStart, '').getPropertyValue('justify-content')", "start");
</del><ins>+ element.style.justifyContent = "right unsafe";
+ checkValues(element, "justifyContent", "justify-content", "right unsafe", "right unsafe");
</ins><span class="cx">
</span><del>-var justifyContentEnd = document.getElementById("justifyContentEnd");
-shouldBeEqualToString("getComputedStyle(justifyContentEnd, '').getPropertyValue('justify-content')", "end");
</del><ins>+ element.style.justifyContent = "first baseline";
+ checkValues(element, "justifyContent", "justify-content", "first baseline", "baseline");
</ins><span class="cx">
</span><del>-var justifyContentCenter = document.getElementById("justifyContentCenter");
-shouldBeEqualToString("getComputedStyle(justifyContentCenter, '').getPropertyValue('justify-content')", "center");
</del><ins>+ element.style.justifyContent = "last baseline";
+ checkValues(element, "justifyContent", "justify-content", "last baseline", "last baseline");
</ins><span class="cx">
</span><del>-var justifyContentLeft = document.getElementById("justifyContentLeft");
-shouldBeEqualToString("getComputedStyle(justifyContentLeft, '').getPropertyValue('justify-content')", "left");
</del><ins>+ element.style.justifyContent = "normal";
+ checkValues(element, "justifyContent", "justify-content", "normal", "normal");
</ins><span class="cx">
</span><del>-var justifyContentRight = document.getElementById("justifyContentRight");
-shouldBeEqualToString("getComputedStyle(justifyContentRight, '').getPropertyValue('justify-content')", "right");
</del><ins>+ element.style.display = "flex";
+ element.style.justifyContent = "normal";
+ checkValues(element, "justifyContent", "justify-content", "normal", "normal");
</ins><span class="cx">
</span><del>-var justifyContentFlexStart = document.getElementById("justifyContentFlexStart");
-shouldBeEqualToString("getComputedStyle(justifyContentFlexStart, '').getPropertyValue('justify-content')", "flex-start");
</del><ins>+ element.style.display = "grid";
+ element.style.justifyContent = "normal";
+ checkValues(element, "justifyContent", "justify-content", "normal", "normal");
</ins><span class="cx">
</span><del>-var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd");
-shouldBeEqualToString("getComputedStyle(justifyContentFlexEnd, '').getPropertyValue('justify-content')", "flex-end");
</del><ins>+ element.style.justifyContent = "flex-end";
+ checkValues(element, "justifyContent", "justify-content", "flex-end", "flex-end");
+}, "Test getting and setting justify-content through JS");
</ins><span class="cx">
</span><del>-var justifyContentEndUnsafe = document.getElementById("justifyContentEndUnsafe");
-shouldBeEqualToString("getComputedStyle(justifyContentEndUnsafe, '').getPropertyValue('justify-content')", "end unsafe");
</del><ins>+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
</ins><span class="cx">
</span><del>-var justifyContentCenterUnsafe = document.getElementById("justifyContentCenterUnsafe");
-shouldBeEqualToString("getComputedStyle(justifyContentCenterUnsafe, '').getPropertyValue('justify-content')", "center unsafe");
</del><ins>+ checkBadValues(element, "justifyContent", "justify-content", "");
+ checkBadValues(element, "justifyContent", "justify-content", "auto");
+ checkBadValues(element, "justifyContent", "justify-content", "unsafe auto");
+ checkBadValues(element, "justifyContent", "justify-content", "auto safe");
+ checkBadValues(element, "justifyContent", "justify-content", "auto left");
+ checkBadValues(element, "justifyContent", "justify-content", "baseline safe");
+ checkBadValues(element, "justifyContent", "justify-content", "last-baseline center");
+ checkBadValues(element, "justifyContent", "justify-content", "unsafe unsafe");
+ checkBadValues(element, "justifyContent", "justify-content", "unsafe safe");
+ checkBadValues(element, "justifyContent", "justify-content", "center start");
+ checkBadValues(element, "justifyContent", "justify-content", "baseline safe");
+ checkBadValues(element, "justifyContent", "justify-content", "unsafe baseline");
+ checkBadValues(element, "justifyContent", "justify-content", "unsafe safe left");
+ checkBadValues(element, "justifyContent", "justify-content", "unsafe left safe");
+ checkBadValues(element, "justifyContent", "justify-content", "left safe unsafe safe");
+ checkBadValues(element, "justifyContent", "justify-content", "start right space-between");
+ checkBadValues(element, "justifyContent", "justify-content", "safe stretch");
+ checkBadValues(element, "justifyContent", "justify-content", "normal space-between");
+ checkBadValues(element, "justifyContent", "justify-content", "stretch normal");
+ checkBadValues(element, "justifyContent", "justify-content", "normal safe");
+ checkBadValues(element, "justifyContent", "justify-content", "space-around stretch");
+ checkBadValues(element, "justifyContent", "justify-content", "end space-between start");
+ checkBadValues(element, "justifyContent", "justify-content", "right safe left");
+ checkBadValues(element, "justifyContent", "justify-content", "unsafe");
+ checkBadValues(element, "justifyContent", "justify-content", "safe");
+}, "Test bad combinations of justify-content");
</ins><span class="cx">
</span><del>-var justifyContentRightSafe = document.getElementById("justifyContentRightSafe");
-shouldBeEqualToString("getComputedStyle(justifyContentRightSafe, '').getPropertyValue('justify-content')", "right safe");
</del><ins>+test(function() {
+ element.style.display = "";
+ checkInitialValues(element, "justifyContent", "justify-content", "center", "normal");
+}, "Test the value 'initial'");
</ins><span class="cx">
</span><del>-var justifyContentLeftUnsafe = document.getElementById("justifyContentLeftUnsafe");
-shouldBeEqualToString("getComputedStyle(justifyContentLeftUnsafe, '').getPropertyValue('justify-content')", "left unsafe");
</del><ins>+test(function() {
+ element.style.display = "grid";
+ checkInitialValues(element, "justifyContent", "justify-content", "left safe", "normal");
+}, "Test the value 'initial' for grid containers");
</ins><span class="cx">
</span><del>-var justifyContentFlexStartUnsafe = document.getElementById("justifyContentFlexStartUnsafe");
-shouldBeEqualToString("getComputedStyle(justifyContentFlexStartUnsafe, '').getPropertyValue('justify-content')", "flex-start unsafe");
</del><ins>+test(function() {
+ element.style.display = "flex";
+ checkInitialValues(element, "justifyContent", "justify-content", "right unsafe", "normal");
+}, "Test the value 'initial' for flex containers");
</ins><span class="cx">
</span><del>-var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSafe");
-shouldBeEqualToString("getComputedStyle(justifyContentFlexEndSafe, '').getPropertyValue('justify-content')", "flex-end safe");
</del><ins>+test(function() {
+ checkInheritValues("justifyContent", "justify-content", "end");
+ checkInheritValues("justifyContent", "justify-content", "left safe");
+ checkInheritValues("justifyContent", "justify-content", "center unsafe");
+}, "Test the value 'inherit'");
</ins><span class="cx">
</span><del>-var justifyContentSpaceBetweenLeft = document.getElementById("justifyContentSpaceBetweenLeft");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenLeft, '').getPropertyValue('justify-content')", "space-between left");
-
-var justifyContentSpaceAroundCenter = document.getElementById("justifyContentSpaceAroundCenter");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundCenter, '').getPropertyValue('justify-content')", "space-around center");
-
-var justifyContentSpaceEvenlyRight = document.getElementById("justifyContentSpaceEvenlyRight");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyRight, '').getPropertyValue('justify-content')", "space-evenly right");
-
-var justifyContentStretchStartSafe = document.getElementById("justifyContentStretchStartSafe");
-shouldBeEqualToString("getComputedStyle(justifyContentStretchStartSafe, '').getPropertyValue('justify-content')", "stretch start safe");
-
-var justifyContentSpaceAroundEndUnsafe = document.getElementById("justifyContentSpaceAroundEndUnsafe");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundEndUnsafe, '').getPropertyValue('justify-content')", "space-around end unsafe");
-
-var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyContentSpaceEvenlyFlexStartSafe");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('justify-content')", "space-evenly flex-start safe");
-
-var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpaceBetweenSafe");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content')", "normal");
-
-var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSpaceBetweenStretch");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenStretch, '').getPropertyValue('justify-content')", "normal");
-
-var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSafe");
-shouldBeEqualToString("getComputedStyle(justifyContentSafe, '').getPropertyValue('justify-content')", "normal");
-
-var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentRightSafeUnsafe");
-shouldBeEqualToString("getComputedStyle(justifyContentRightSafeUnsafe, '').getPropertyValue('justify-content')", "normal");
-
-var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentCenterLeft");
-shouldBeEqualToString("getComputedStyle(justifyContentCenterLeft, '').getPropertyValue('justify-content')", "normal");
-
-debug("");
-debug("Test initial value of justify-content through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('justify-content')", "normal");
-
-debug("");
-debug("Test getting and setting justify-content through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-element.style.justifyContent = "center";
-checkValues(element, "justifyContent", "justify-content", "center", "center");
-
-element.style.justifyContent = "unsafe start";
-checkValues(element, "justifyContent", "justify-content", "start unsafe", "start unsafe");
-
-element.style.justifyContent = "flex-end safe";
-checkValues(element, "justifyContent", "justify-content", "flex-end safe", "flex-end safe");
-
-element.style.justifyContent = "space-between right safe";
-checkValues(element, "justifyContent", "justify-content", "space-between right safe", "space-between right safe");
-
-element.style.justifyContent = "center stretch";
-checkValues(element, "justifyContent", "justify-content", "stretch center", "stretch center");
-
-element.style.justifyContent = "right unsafe";
-checkValues(element, "justifyContent", "justify-content", "right unsafe", "right unsafe");
-
-element.style.justifyContent = "normal";
-checkValues(element, "justifyContent", "justify-content", "normal", "normal");
-
-element.style.display = "-webkit-flex";
-element.style.justifyContent = "normal";
-checkValues(element, "justifyContent", "justify-content", "normal", "normal");
-
-element.style.display = "grid";
-element.style.justifyContent = "normal";
-checkValues(element, "justifyContent", "justify-content", "normal", "normal");
-
-element.style.justifyContent = "flex-end";
-checkValues(element, "justifyContent", "justify-content", "flex-end", "flex-end");
-
-debug("");
-debug("Test bad combinations of justify-content");
-element = document.createElement("div");
-document.body.appendChild(element);
-
-checkBadValues(element, "justifyContent", "justify-content", "");
-checkBadValues(element, "justifyContent", "justify-content", "auto");
-checkBadValues(element, "justifyContent", "justify-content", "unsafe auto");
-checkBadValues(element, "justifyContent", "justify-content", "auto safe");
-checkBadValues(element, "justifyContent", "justify-content", "auto left");
-checkBadValues(element, "justifyContent", "justify-content", "baseline safe");
-checkBadValues(element, "justifyContent", "justify-content", "last baseline center");
-checkBadValues(element, "justifyContent", "justify-content", "unsafe unsafe");
-checkBadValues(element, "justifyContent", "justify-content", "unsafe safe");
-checkBadValues(element, "justifyContent", "justify-content", "center start");
-checkBadValues(element, "justifyContent", "justify-content", "baseline safe");
-checkBadValues(element, "justifyContent", "justify-content", "unsafe baseline");
-checkBadValues(element, "justifyContent", "justify-content", "unsafe safe left");
-checkBadValues(element, "justifyContent", "justify-content", "unsafe left safe");
-checkBadValues(element, "justifyContent", "justify-content", "left safe unsafe safe");
-checkBadValues(element, "justifyContent", "justify-content", "start right space-between");
-checkBadValues(element, "justifyContent", "justify-content", "safe stretch");
-checkBadValues(element, "justifyContent", "justify-content", "space-around stretch");
-checkBadValues(element, "justifyContent", "justify-content", "end space-between start");
-checkBadValues(element, "justifyContent", "justify-content", "right safe left");
-checkBadValues(element, "justifyContent", "justify-content", "unsafe");
-checkBadValues(element, "justifyContent", "justify-content", "safe");
-
-debug("");
-debug("Test the value 'initial'");
-element.style.display = "";
-checkInitialValues(element, "justifyContent", "justify-content", "stretch center", "normal");
-
-debug("");
-debug("Test the value 'initial' for grid containers");
-element.style.display = "grid";
-checkInitialValues(element, "justifyContent", "justify-content", "space-between left", "normal");
-
-debug("");
-debug("Test the value 'initial' for flex containers");
-element.style.display = "-webkit-flex";
-checkInitialValues(element, "justifyContent", "justify-content", "right unsafe", "normal");
-
-debug("");
-debug("Test the value 'inherit'");
-checkInheritValues("justifyContent", "justify-content", "end");
-checkInheritValues("justifyContent", "justify-content", "left safe");
-checkInheritValues("justifyContent", "justify-content", "stretch center");
-
</del><span class="cx"> </script>
</span><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (214623 => 214624)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2017-03-30 21:13:21 UTC (rev 214623)
+++ trunk/Source/WebCore/ChangeLog 2017-03-30 21:27:09 UTC (rev 214624)
</span><span class="lines">@@ -1,3 +1,40 @@
</span><ins>+2017-03-30 Javier Fernandez <jfernandez@igalia.com>
+
+ [css-align] Adapt content-alignment properties to the new baseline syntax
+ https://bugs.webkit.org/show_bug.cgi?id=170262
+
+ 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
+ content-alignment (align-content and justify-content).
+
+ I used this patch to adapt the implementation of the parsing logic for
+ these properties to the new Blink's CSS Parsing Design.
+
+ 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::valueForContentPositionAndDistributionWithOverflowAlignment):
+ * css/CSSContentDistributionValue.cpp:
+ (WebCore::CSSContentDistributionValue::customCSSText):
+ * css/CSSPrimitiveValueMappings.h:
+ (WebCore::CSSPrimitiveValue::operator ItemPosition):
+ (WebCore::CSSPrimitiveValue::operator ContentPosition):
+ * css/CSSValueKeywords.in:
+ * css/parser/CSSPropertyParser.cpp:
+ (WebCore::isBaselineKeyword):
+ (WebCore::consumeBaselineKeyword):
+ (WebCore::consumeContentDistributionOverflowPosition):
+ (WebCore::consumeSelfPositionOverflowPosition):
+
</ins><span class="cx"> 2017-03-30 James Craig <jcraig@apple.com>
</span><span class="cx">
</span><span class="cx"> AX: Expose a new AXSubrole for explicit ARIA "group" role
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSComputedStyleDeclarationcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (214623 => 214624)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2017-03-30 21:13:21 UTC (rev 214623)
+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2017-03-30 21:27:09 UTC (rev 214624)
</span><span class="lines">@@ -2479,16 +2479,29 @@
</span><span class="cx"> {
</span><span class="cx"> auto& cssValuePool = CSSValuePool::singleton();
</span><span class="cx"> auto result = CSSValueList::createSpaceSeparated();
</span><ins>+ // Handle content-distribution values
</ins><span class="cx"> if (data.distribution() != ContentDistributionDefault)
</span><span class="cx"> result->append(cssValuePool.createValue(data.distribution()));
</span><del>- if (data.distribution() == ContentDistributionDefault || data.position() != ContentPositionNormal) {
- bool gridEnabled = false;
- gridEnabled = RuntimeEnabledFeatures::sharedFeatures().isCSSGridLayoutEnabled();
- if (data.position() != ContentPositionNormal || gridEnabled)
- result->append(cssValuePool.createValue(data.position()));
- else
- result->append(cssValuePool.createIdentifierValue(normalBehaviorValueID));
</del><ins>+
+ bool gridEnabled = false;
+ gridEnabled = RuntimeEnabledFeatures::sharedFeatures().isCSSGridLayoutEnabled();
+
+ // Handle content-position values (either as fallback or actual value)
+ switch (data.position()) {
+ case ContentPositionNormal:
+ // Handle 'normal' value, not valid as content-distribution fallback.
+ if (data.distribution() == ContentDistributionDefault)
+ result->append(cssValuePool.createIdentifierValue(gridEnabled ? CSSValueNormal : normalBehaviorValueID));
+ break;
+ case ContentPositionLastBaseline:
+ result->append(cssValuePool.createIdentifierValue(CSSValueLast));
+ result->append(cssValuePool.createIdentifierValue(CSSValueBaseline));
+ break;
+ default:
+ result->append(cssValuePool.createValue(data.position()));
</ins><span class="cx"> }
</span><ins>+
+ // Handle overflow-alignment (only allowed for content-position values)
</ins><span class="cx"> if ((data.position() >= ContentPositionCenter || data.distribution() != ContentDistributionDefault) && data.overflow() != OverflowAlignmentDefault)
</span><span class="cx"> result->append(cssValuePool.createValue(data.overflow()));
</span><span class="cx"> ASSERT(result->length() > 0);
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSContentDistributionValuecpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSContentDistributionValue.cpp (214623 => 214624)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSContentDistributionValue.cpp 2017-03-30 21:13:21 UTC (rev 214623)
+++ trunk/Source/WebCore/css/CSSContentDistributionValue.cpp 2017-03-30 21:27:09 UTC (rev 214624)
</span><span class="lines">@@ -45,11 +45,18 @@
</span><span class="cx">
</span><span class="cx"> String CSSContentDistributionValue::customCSSText() const
</span><span class="cx"> {
</span><ins>+ auto& cssValuePool = CSSValuePool::singleton();
</ins><span class="cx"> auto list = CSSValueList::createSpaceSeparated();
</span><span class="cx"> if (m_distribution != CSSValueInvalid)
</span><span class="cx"> list->append(distribution());
</span><del>- if (m_position != CSSValueInvalid)
- list->append(position());
</del><ins>+ if (m_position != CSSValueInvalid) {
+ if (m_position == CSSValueFirstBaseline || m_position == CSSValueLastBaseline) {
+ CSSValueID preference = m_position == CSSValueFirstBaseline ? CSSValueFirst : CSSValueLast;
+ list->append(cssValuePool.createIdentifierValue(preference));
+ list->append(cssValuePool.createIdentifierValue(CSSValueBaseline));
+ } else
+ list->append(position());
+ }
</ins><span class="cx"> if (m_overflow != CSSValueInvalid)
</span><span class="cx"> list->append(overflow());
</span><span class="cx"> return list->customCSSText();
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSPrimitiveValueMappingsh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h (214623 => 214624)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h 2017-03-30 21:13:21 UTC (rev 214623)
+++ trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h 2017-03-30 21:27:09 UTC (rev 214624)
</span><span class="lines">@@ -5024,6 +5024,8 @@
</span><span class="cx"> return ItemPositionStretch;
</span><span class="cx"> case CSSValueBaseline:
</span><span class="cx"> return ItemPositionBaseline;
</span><ins>+ case CSSValueFirstBaseline:
+ return ItemPositionBaseline;
</ins><span class="cx"> case CSSValueLastBaseline:
</span><span class="cx"> return ItemPositionLastBaseline;
</span><span class="cx"> case CSSValueCenter:
</span><span class="lines">@@ -5127,6 +5129,8 @@
</span><span class="cx"> return ContentPositionNormal;
</span><span class="cx"> case CSSValueBaseline:
</span><span class="cx"> return ContentPositionBaseline;
</span><ins>+ case CSSValueFirstBaseline:
+ return ContentPositionBaseline;
</ins><span class="cx"> case CSSValueLastBaseline:
</span><span class="cx"> return ContentPositionLastBaseline;
</span><span class="cx"> case CSSValueCenter:
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSValueKeywordsin"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSValueKeywords.in (214623 => 214624)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSValueKeywords.in 2017-03-30 21:13:21 UTC (rev 214623)
+++ trunk/Source/WebCore/css/CSSValueKeywords.in 2017-03-30 21:27:09 UTC (rev 214624)
</span><span class="lines">@@ -588,6 +588,7 @@
</span><span class="cx"> // flex-end
</span><span class="cx"> // center
</span><span class="cx"> // baseline
</span><ins>+first-baseline
</ins><span class="cx"> last-baseline
</span><span class="cx"> // stretch
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorecssparserCSSPropertyParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp (214623 => 214624)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp 2017-03-30 21:13:21 UTC (rev 214623)
+++ trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp 2017-03-30 21:27:09 UTC (rev 214624)
</span><span class="lines">@@ -2619,11 +2619,46 @@
</span><span class="cx"> return list;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+static bool isBaselineKeyword(CSSValueID id)
+{
+ return identMatches<CSSValueFirst, CSSValueLast, CSSValueBaseline>(id);
+}
+
+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> consumeContentDistributionOverflowPosition(CSSParserTokenRange& range)
</span><span class="cx"> {
</span><del>- if (identMatches<CSSValueNormal, CSSValueBaseline, CSSValueLastBaseline>(range.peek().id()))
</del><ins>+ CSSValueID id = range.peek().id();
+ if (identMatches<CSSValueNormal>(id))
</ins><span class="cx"> return CSSContentDistributionValue::create(CSSValueInvalid, range.consumeIncludingWhitespace().id(), CSSValueInvalid);
</span><span class="cx">
</span><ins>+ if (isBaselineKeyword(id)) {
+ RefPtr<CSSValue> baseline = consumeBaselineKeyword(range);
+ if (!baseline)
+ return nullptr;
+ CSSValueID baselineID = CSSValueBaseline;
+ auto& primitiveValue = downcast<CSSPrimitiveValue>(*baseline);
+ if (auto* pairValue = primitiveValue.pairValue()) {
+ if (pairValue->first()->valueID() == CSSValueLast)
+ baselineID = CSSValueLastBaseline;
+ else
+ baselineID = CSSValueFirstBaseline;
+ }
+ return CSSContentDistributionValue::create(CSSValueInvalid, baselineID, CSSValueInvalid);
+ }
+
</ins><span class="cx"> CSSValueID distribution = CSSValueInvalid;
</span><span class="cx"> CSSValueID position = CSSValueInvalid;
</span><span class="cx"> CSSValueID overflow = CSSValueInvalid;
</span><span class="lines">@@ -3017,25 +3052,13 @@
</span><span class="cx"> return nullptr;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-static RefPtr<CSSValue> consumeBaselineKeyword(CSSParserTokenRange& range)
</del><ins>+static RefPtr<CSSValue> consumeSelfPositionOverflowPosition(CSSParserTokenRange& range)
</ins><span class="cx"> {
</span><span class="cx"> CSSValueID id = range.peek().id();
</span><del>- if (identMatches<CSSValueBaseline>(id))
</del><ins>+ if (identMatches<CSSValueAuto, CSSValueNormal, CSSValueStretch>(id))
</ins><span class="cx"> return consumeIdent(range);
</span><span class="cx">
</span><del>- if (RefPtr<CSSPrimitiveValue> preference = consumeIdent<CSSValueFirst, CSSValueLast>(range)) {
- if (range.peek().id() == CSSValueBaseline)
- return createPrimitiveValuePair(preference.releaseNonNull(), consumeIdent(range), Pair::IdenticalValueEncoding::Coalesce);
- }
- return nullptr;
-}
-
-static RefPtr<CSSValue> consumeSelfPositionOverflowPosition(CSSParserTokenRange& range)
-{
- if (identMatches<CSSValueAuto, CSSValueNormal, CSSValueStretch>(range.peek().id()))
- return consumeIdent(range);
-
- if (identMatches<CSSValueFirst, CSSValueLast, CSSValueBaseline>(range.peek().id()))
</del><ins>+ if (isBaselineKeyword(id))
</ins><span class="cx"> return consumeBaselineKeyword(range);
</span><span class="cx">
</span><span class="cx"> RefPtr<CSSPrimitiveValue> overflowPosition = consumeIdent<CSSValueUnsafe, CSSValueSafe>(range);
</span></span></pre>
</div>
</div>
</body>
</html>