Diff
Modified: trunk/LayoutTests/ChangeLog (214623 => 214624)
--- trunk/LayoutTests/ChangeLog 2017-03-30 21:13:21 UTC (rev 214623)
+++ trunk/LayoutTests/ChangeLog 2017-03-30 21:27:09 UTC (rev 214624)
@@ -1,3 +1,19 @@
+2017-03-30 Javier Fernandez <[email protected]>
+
+ [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:
+
2017-03-30 James Craig <[email protected]>
AX: Expose a new AXSubrole for explicit ARIA "group" role
Modified: trunk/LayoutTests/css3/parse-align-content-expected.txt (214623 => 214624)
--- 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)
@@ -1,144 +1,13 @@
Test that setting and getting align-content works as expected
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+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'
-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
-
Modified: trunk/LayoutTests/css3/parse-align-content.html (214623 => 214624)
--- 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)
@@ -1,6 +1,4 @@
<!DOCTYPE html>
-<html>
-<head>
<style>
#alignContentAuto {
align-content: auto;
@@ -10,8 +8,12 @@
align-content: baseline;
}
+#alignContentFirstBaseline {
+ align-content: first baseline;
+}
+
#alignContentLastBaseline {
- align-content: last-baseline;
+ align-content: last baseline;
}
#alignContentSpaceBetween {
@@ -127,20 +129,15 @@
align-content: center left;
}
</style>
-<script src=""
-</head>
-<body>
+<p>Test that setting and getting align-content works as expected</p>
<div id="alignContentAuto"></div>
<div id="alignContentBaseline"></div>
+<div id="alignContentFirstBaseline"></div>
<div id="alignContentLastBaseline"></div>
<div id="alignContentSpaceBetween"></div>
<div id="alignContentSpaceAround"></div>
<div id="alignContentSpaceEvenly"></div>
<div id="alignContentStretch"></div>
-<div id="alignContentSpaceBetweenSafe"></div>
-<div id="alignContentSpaceAroundUnsafe"></div>
-<div id="alignContentStretchUnsafe"></div>
-<div id="alignContentStretchrue"></div>
<div id="alignContentStart"></div>
<div id="alignContentEnd"></div>
<div id="alignContentCenter"></div>
@@ -167,195 +164,177 @@
<div id="alignContentRightSafeUnsafe"></div>
<div id="alignContentCenterLeft"></div>
-<script src=""
+<script src=""
+<script src=""
+<script src=""
<script>
-description('Test that setting and getting align-content works as expected');
+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.");
-debug("Test getting align-content set through CSS");
-var alignContentAuto = document.getElementById("alignContentAuto");
-shouldBeEqualToString("getComputedStyle(alignContentAuto, '').getPropertyValue('align-content')", "normal");
+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.");
-var alignContentBaseline = document.getElementById("alignContentBaseline");
-shouldBeEqualToString("getComputedStyle(alignContentBaseline, '').getPropertyValue('align-content')", "baseline");
+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ checkValues(element, "alignContent", "align-content", "", "normal");
+}, "Test initial value of align-content through JS");
-var alignContentLastBaseline = document.getElementById("alignContentLastBaseline");
-shouldBeEqualToString("getComputedStyle(alignContentLastBaseline, '').getPropertyValue('align-content')", "last-baseline");
+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.alignContent = "center";
+ checkValues(element, "alignContent", "align-content", "center", "center");
-var alignContentSpaceBetween = document.getElementById("alignContentSpaceBetween");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceBetween, '').getPropertyValue('align-content')", "space-between");
+ element.style.alignContent = "unsafe start";
+ checkValues(element, "alignContent", "align-content", "start unsafe", "start unsafe");
-var alignContentSpaceAround = document.getElementById("alignContentSpaceAround");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceAround, '').getPropertyValue('align-content')", "space-around");
+ element.style.alignContent = "flex-end safe";
+ checkValues(element, "alignContent", "align-content", "flex-end safe", "flex-end safe");
-var alignContentSpaceEvenly = document.getElementById("alignContentSpaceEvenly");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenly, '').getPropertyValue('align-content')", "space-evenly");
+ element.style.alignContent = "space-between right safe";
+ checkValues(element, "alignContent", "align-content", "space-between right safe", "space-between right safe");
-var alignContentStretch = document.getElementById("alignContentStretch");
-shouldBeEqualToString("getComputedStyle(alignContentStretch, '').getPropertyValue('align-content')", "stretch");
+ element.style.alignContent = "stretch center";
+ checkValues(element, "alignContent", "align-content", "stretch center", "stretch center");
-var alignContentStart = document.getElementById("alignContentStart");
-shouldBeEqualToString("getComputedStyle(alignContentStart, '').getPropertyValue('align-content')", "start");
+ element.style.alignContent = "right unsafe";
+ checkValues(element, "alignContent", "align-content", "right unsafe", "right unsafe");
-var alignContentEnd = document.getElementById("alignContentEnd");
-shouldBeEqualToString("getComputedStyle(alignContentEnd, '').getPropertyValue('align-content')", "end");
+ element.style.justifyContent = "first baseline";
+ checkValues(element, "justifyContent", "justify-content", "first baseline", "baseline");
-var alignContentCenter = document.getElementById("alignContentCenter");
-shouldBeEqualToString("getComputedStyle(alignContentCenter, '').getPropertyValue('align-content')", "center");
+ element.style.justifyContent = "last baseline";
+ checkValues(element, "justifyContent", "justify-content", "last baseline", "last baseline");
-var alignContentLeft = document.getElementById("alignContentLeft");
-shouldBeEqualToString("getComputedStyle(alignContentLeft, '').getPropertyValue('align-content')", "left");
+ element.style.alignContent = "normal";
+ checkValues(element, "alignContent", "align-content", "normal", "normal");
-var alignContentRight = document.getElementById("alignContentRight");
-shouldBeEqualToString("getComputedStyle(alignContentRight, '').getPropertyValue('align-content')", "right");
+ element.style.display = "flex";
+ element.style.alignContent = "normal";
+ checkValues(element, "alignContent", "align-content", "normal", "normal");
-var alignContentFlexStart = document.getElementById("alignContentFlexStart");
-shouldBeEqualToString("getComputedStyle(alignContentFlexStart, '').getPropertyValue('align-content')", "flex-start");
+ element.style.display = "grid";
+ element.style.alignContent = "normal";
+ checkValues(element, "alignContent", "align-content", "normal", "normal");
-var alignContentFlexEnd = document.getElementById("alignContentFlexEnd");
-shouldBeEqualToString("getComputedStyle(alignContentFlexEnd, '').getPropertyValue('align-content')", "flex-end");
+ element.style.alignContent = "flex-end";
+ checkValues(element, "alignContent", "align-content", "flex-end", "flex-end");
+}, "Test getting and setting align-content through JS");
-var alignContentEndUnsafe = document.getElementById("alignContentEndUnsafe");
-shouldBeEqualToString("getComputedStyle(alignContentEndUnsafe, '').getPropertyValue('align-content')", "end unsafe");
+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
-var alignContentCenterUnsafe = document.getElementById("alignContentCenterUnsafe");
-shouldBeEqualToString("getComputedStyle(alignContentCenterUnsafe, '').getPropertyValue('align-content')", "center unsafe");
+ 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");
-var alignContentRightSafe = document.getElementById("alignContentRightSafe");
-shouldBeEqualToString("getComputedStyle(alignContentRightSafe, '').getPropertyValue('align-content')", "right safe");
+test(function() {
+ element.style.display = "";
+ checkInitialValues(element, "alignContent", "align-content", "center", "normal");
+}, "Test the value 'initial'");
-var alignContentLeftUnsafe = document.getElementById("alignContentLeftUnsafe");
-shouldBeEqualToString("getComputedStyle(alignContentLeftUnsafe, '').getPropertyValue('align-content')", "left unsafe");
+test(function() {
+ element.style.display = "grid";
+ checkInitialValues(element, "alignContent", "align-content", "left safe", "normal");
+}, "Test the value 'initial' for grid containers");
-var alignContentFlexStartUnsafe = document.getElementById("alignContentFlexStartUnsafe");
-shouldBeEqualToString("getComputedStyle(alignContentFlexStartUnsafe, '').getPropertyValue('align-content')", "flex-start unsafe");
+test(function() {
+ element.style.display = "flex";
+ checkInitialValues(element, "alignContent", "align-content", "right unsafe", "normal");
+}, "Test the value 'initial' for flex containers");
-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");
-
+test(function() {
+ checkInheritValues("alignContent", "align-content", "end");
+ checkInheritValues("alignContent", "align-content", "left safe");
+ checkInheritValues("alignContent", "align-content", "center unsafe");
+}, "Test the value 'inherit'");
</script>
-</body>
-</html>
Modified: trunk/LayoutTests/css3/parse-justify-content-expected.txt (214623 => 214624)
--- 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)
@@ -1,144 +1,13 @@
Test that setting and getting justify-content works as expected
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+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'
-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
-
Modified: trunk/LayoutTests/css3/parse-justify-content.html (214623 => 214624)
--- 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)
@@ -1,6 +1,4 @@
<!DOCTYPE html>
-<html>
-<head>
<style>
#justifyContentAuto {
justify-content: auto;
@@ -10,8 +8,12 @@
justify-content: baseline;
}
+#justifyContentFirstBaseline {
+ justify-content: first baseline;
+}
+
#justifyContentLastBaseline {
- justify-content: last-baseline;
+ justify-content: last baseline;
}
#justifyContentSpaceBetween {
@@ -127,11 +129,10 @@
justify-content: center left;
}
</style>
-<script src=""
-</head>
-<body>
+<p>Test that setting and getting justify-content works as expected</p>
<div id="justifyContentAuto"></div>
<div id="justifyContentBaseline"></div>
+<div id="justifyContentFirstBaseline"></div>
<div id="justifyContentLastBaseline"></div>
<div id="justifyContentSpaceBetween"></div>
<div id="justifyContentSpaceAround"></div>
@@ -163,195 +164,180 @@
<div id="justifyContentRightSafeUnsafe"></div>
<div id="justifyContentCenterLeft"></div>
-<script src=""
+<script src=""
+<script src=""
+<script src=""
<script>
-description('Test that setting and getting justify-content works as expected');
+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.");
-debug("Test getting justify-content set through CSS");
-var justifyContentAuto = document.getElementById("justifyContentAuto");
-shouldBeEqualToString("getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content')", "normal");
+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.");
-var justifyContentBaseline = document.getElementById("justifyContentBaseline");
-shouldBeEqualToString("getComputedStyle(justifyContentBaseline, '').getPropertyValue('justify-content')", "baseline");
+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ checkValues(element, "justifyContent", "justify-content", "", "normal");
+}, "Test initial value of justify-content through JS");
-var justifyContentLastBaseline = document.getElementById("justifyContentLastBaseline");
-shouldBeEqualToString("getComputedStyle(justifyContentLastBaseline, '').getPropertyValue('justify-content')", "last-baseline");
+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.justifyContent = "center";
+ checkValues(element, "justifyContent", "justify-content", "center", "center");
-var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBetween");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetween, '').getPropertyValue('justify-content')", "space-between");
+ element.style.justifyContent = "unsafe start";
+ checkValues(element, "justifyContent", "justify-content", "start unsafe", "start unsafe");
-var justifyContentSpaceAround = document.getElementById("justifyContentSpaceAround");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceAround, '').getPropertyValue('justify-content')", "space-around");
+ element.style.justifyContent = "flex-end safe";
+ checkValues(element, "justifyContent", "justify-content", "flex-end safe", "flex-end safe");
-var justifyContentSpaceEvenly = document.getElementById("justifyContentSpaceEvenly");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenly, '').getPropertyValue('justify-content')", "space-evenly");
+ element.style.justifyContent = "space-between right safe";
+ checkValues(element, "justifyContent", "justify-content", "space-between right safe", "space-between right safe");
-var justifyContentStretch = document.getElementById("justifyContentStretch");
-shouldBeEqualToString("getComputedStyle(justifyContentStretch, '').getPropertyValue('justify-content')", "stretch");
+ element.style.justifyContent = "center stretch";
+ checkValues(element, "justifyContent", "justify-content", "stretch center", "stretch center");
-var justifyContentStart = document.getElementById("justifyContentStart");
-shouldBeEqualToString("getComputedStyle(justifyContentStart, '').getPropertyValue('justify-content')", "start");
+ element.style.justifyContent = "right unsafe";
+ checkValues(element, "justifyContent", "justify-content", "right unsafe", "right unsafe");
-var justifyContentEnd = document.getElementById("justifyContentEnd");
-shouldBeEqualToString("getComputedStyle(justifyContentEnd, '').getPropertyValue('justify-content')", "end");
+ element.style.justifyContent = "first baseline";
+ checkValues(element, "justifyContent", "justify-content", "first baseline", "baseline");
-var justifyContentCenter = document.getElementById("justifyContentCenter");
-shouldBeEqualToString("getComputedStyle(justifyContentCenter, '').getPropertyValue('justify-content')", "center");
+ element.style.justifyContent = "last baseline";
+ checkValues(element, "justifyContent", "justify-content", "last baseline", "last baseline");
-var justifyContentLeft = document.getElementById("justifyContentLeft");
-shouldBeEqualToString("getComputedStyle(justifyContentLeft, '').getPropertyValue('justify-content')", "left");
+ element.style.justifyContent = "normal";
+ checkValues(element, "justifyContent", "justify-content", "normal", "normal");
-var justifyContentRight = document.getElementById("justifyContentRight");
-shouldBeEqualToString("getComputedStyle(justifyContentRight, '').getPropertyValue('justify-content')", "right");
+ element.style.display = "flex";
+ element.style.justifyContent = "normal";
+ checkValues(element, "justifyContent", "justify-content", "normal", "normal");
-var justifyContentFlexStart = document.getElementById("justifyContentFlexStart");
-shouldBeEqualToString("getComputedStyle(justifyContentFlexStart, '').getPropertyValue('justify-content')", "flex-start");
+ element.style.display = "grid";
+ element.style.justifyContent = "normal";
+ checkValues(element, "justifyContent", "justify-content", "normal", "normal");
-var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd");
-shouldBeEqualToString("getComputedStyle(justifyContentFlexEnd, '').getPropertyValue('justify-content')", "flex-end");
+ element.style.justifyContent = "flex-end";
+ checkValues(element, "justifyContent", "justify-content", "flex-end", "flex-end");
+}, "Test getting and setting justify-content through JS");
-var justifyContentEndUnsafe = document.getElementById("justifyContentEndUnsafe");
-shouldBeEqualToString("getComputedStyle(justifyContentEndUnsafe, '').getPropertyValue('justify-content')", "end unsafe");
+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
-var justifyContentCenterUnsafe = document.getElementById("justifyContentCenterUnsafe");
-shouldBeEqualToString("getComputedStyle(justifyContentCenterUnsafe, '').getPropertyValue('justify-content')", "center unsafe");
+ 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");
-var justifyContentRightSafe = document.getElementById("justifyContentRightSafe");
-shouldBeEqualToString("getComputedStyle(justifyContentRightSafe, '').getPropertyValue('justify-content')", "right safe");
+test(function() {
+ element.style.display = "";
+ checkInitialValues(element, "justifyContent", "justify-content", "center", "normal");
+}, "Test the value 'initial'");
-var justifyContentLeftUnsafe = document.getElementById("justifyContentLeftUnsafe");
-shouldBeEqualToString("getComputedStyle(justifyContentLeftUnsafe, '').getPropertyValue('justify-content')", "left unsafe");
+test(function() {
+ element.style.display = "grid";
+ checkInitialValues(element, "justifyContent", "justify-content", "left safe", "normal");
+}, "Test the value 'initial' for grid containers");
-var justifyContentFlexStartUnsafe = document.getElementById("justifyContentFlexStartUnsafe");
-shouldBeEqualToString("getComputedStyle(justifyContentFlexStartUnsafe, '').getPropertyValue('justify-content')", "flex-start unsafe");
+test(function() {
+ element.style.display = "flex";
+ checkInitialValues(element, "justifyContent", "justify-content", "right unsafe", "normal");
+}, "Test the value 'initial' for flex containers");
-var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSafe");
-shouldBeEqualToString("getComputedStyle(justifyContentFlexEndSafe, '').getPropertyValue('justify-content')", "flex-end safe");
+test(function() {
+ checkInheritValues("justifyContent", "justify-content", "end");
+ checkInheritValues("justifyContent", "justify-content", "left safe");
+ checkInheritValues("justifyContent", "justify-content", "center unsafe");
+}, "Test the value 'inherit'");
-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");
-
</script>
</body>
</html>
Modified: trunk/Source/WebCore/ChangeLog (214623 => 214624)
--- 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)
@@ -1,3 +1,40 @@
+2017-03-30 Javier Fernandez <[email protected]>
+
+ [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):
+
2017-03-30 James Craig <[email protected]>
AX: Expose a new AXSubrole for explicit ARIA "group" role
Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (214623 => 214624)
--- 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)
@@ -2479,16 +2479,29 @@
{
auto& cssValuePool = CSSValuePool::singleton();
auto result = CSSValueList::createSpaceSeparated();
+ // Handle content-distribution values
if (data.distribution() != ContentDistributionDefault)
result->append(cssValuePool.createValue(data.distribution()));
- 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));
+
+ 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()));
}
+
+ // Handle overflow-alignment (only allowed for content-position values)
if ((data.position() >= ContentPositionCenter || data.distribution() != ContentDistributionDefault) && data.overflow() != OverflowAlignmentDefault)
result->append(cssValuePool.createValue(data.overflow()));
ASSERT(result->length() > 0);
Modified: trunk/Source/WebCore/css/CSSContentDistributionValue.cpp (214623 => 214624)
--- 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)
@@ -45,11 +45,18 @@
String CSSContentDistributionValue::customCSSText() const
{
+ auto& cssValuePool = CSSValuePool::singleton();
auto list = CSSValueList::createSpaceSeparated();
if (m_distribution != CSSValueInvalid)
list->append(distribution());
- if (m_position != CSSValueInvalid)
- list->append(position());
+ 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());
+ }
if (m_overflow != CSSValueInvalid)
list->append(overflow());
return list->customCSSText();
Modified: trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h (214623 => 214624)
--- 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)
@@ -5024,6 +5024,8 @@
return ItemPositionStretch;
case CSSValueBaseline:
return ItemPositionBaseline;
+ case CSSValueFirstBaseline:
+ return ItemPositionBaseline;
case CSSValueLastBaseline:
return ItemPositionLastBaseline;
case CSSValueCenter:
@@ -5127,6 +5129,8 @@
return ContentPositionNormal;
case CSSValueBaseline:
return ContentPositionBaseline;
+ case CSSValueFirstBaseline:
+ return ContentPositionBaseline;
case CSSValueLastBaseline:
return ContentPositionLastBaseline;
case CSSValueCenter:
Modified: trunk/Source/WebCore/css/CSSValueKeywords.in (214623 => 214624)
--- 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)
@@ -588,6 +588,7 @@
// flex-end
// center
// baseline
+first-baseline
last-baseline
// stretch
Modified: trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp (214623 => 214624)
--- 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)
@@ -2619,11 +2619,46 @@
return list;
}
+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;
+}
+
+
static RefPtr<CSSValue> consumeContentDistributionOverflowPosition(CSSParserTokenRange& range)
{
- if (identMatches<CSSValueNormal, CSSValueBaseline, CSSValueLastBaseline>(range.peek().id()))
+ CSSValueID id = range.peek().id();
+ if (identMatches<CSSValueNormal>(id))
return CSSContentDistributionValue::create(CSSValueInvalid, range.consumeIncludingWhitespace().id(), CSSValueInvalid);
+ 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);
+ }
+
CSSValueID distribution = CSSValueInvalid;
CSSValueID position = CSSValueInvalid;
CSSValueID overflow = CSSValueInvalid;
@@ -3017,25 +3052,13 @@
return nullptr;
}
-static RefPtr<CSSValue> consumeBaselineKeyword(CSSParserTokenRange& range)
+static RefPtr<CSSValue> consumeSelfPositionOverflowPosition(CSSParserTokenRange& range)
{
CSSValueID id = range.peek().id();
- if (identMatches<CSSValueBaseline>(id))
+ if (identMatches<CSSValueAuto, CSSValueNormal, CSSValueStretch>(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;
-}
-
-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()))
+ if (isBaselineKeyword(id))
return consumeBaselineKeyword(range);
RefPtr<CSSPrimitiveValue> overflowPosition = consumeIdent<CSSValueUnsafe, CSSValueSafe>(range);
