Diff
Modified: trunk/LayoutTests/ChangeLog (227296 => 227297)
--- trunk/LayoutTests/ChangeLog 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/LayoutTests/ChangeLog 2018-01-22 17:01:51 UTC (rev 227297)
@@ -1,3 +1,28 @@
+2018-01-22 Javier Fernandez <jfernan...@igalia.com>
+
+ [css-align] 'overflow' keyword must precede the self-position and content-position value
+ https://bugs.webkit.org/show_bug.cgi?id=181793
+
+ Reviewed by Antti Koivisto.
+
+ Rebaseline expected results of the test cases affected by this change.
+
+ * css3/parse-align-content.html:
+ * css3/parse-align-items.html:
+ * css3/parse-align-self.html:
+ * css3/parse-justify-content.html:
+ * css3/overwrite-self-alignment.html:
+ * css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled.html:
+ * css3/overwrite-content-alignment.html:
+ * fast/css-grid-layout/grid-content-alignment-overflow.html:
+ * fast/css-grid-layout/grid-align-justify-overflow.html:
+ * fast/css/parse-justify-items.html:
+ * fast/css/parse-justify-self.html:
+ * fast/repaint/align-items-overflow-change.html:
+ * fast/repaint/align-self-overflow-change.html:
+ * fast/repaint/justify-items-overflow-change.html:
+ * fast/repaint/justify-self-overflow-change.html:
+
2018-01-19 Per Arne Vollan <pvol...@apple.com>
Mark svg/filters/fePointLight-color.svg as failure on Windows.
Modified: trunk/LayoutTests/css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled.html (227296 => 227297)
--- trunk/LayoutTests/css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled.html 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/LayoutTests/css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled.html 2018-01-22 17:01:51 UTC (rev 227297)
@@ -43,10 +43,10 @@
item.style.webkitAlignSelf = "flex-start";
- checkAlignSelfValue("start unsafe", "start unsafe", gridEnabled)
+ checkAlignSelfValue("unsafe start", "unsafe start", gridEnabled)
checkAlignSelfValue("start", "start", gridEnabled)
checkAlignSelfValue("end", "end", gridEnabled)
- checkAlignSelfValue("flex-start safe", "flex-start safe", gridEnabled)
+ checkAlignSelfValue("safe flex-start", "safe flex-start", gridEnabled)
checkAlignSelfValue("self-start", "self-start", gridEnabled)
checkAlignSelfValue("self-end", "self-end", gridEnabled)
}
@@ -59,10 +59,10 @@
container.style.webkitAlignItems = "flex-end";
item.style.webkitAlignSelf = "auto";
- checkAlignItemsValue("start unsafe", "start unsafe", gridEnabled)
+ checkAlignItemsValue("unsafe start", "unsafe start", gridEnabled)
checkAlignItemsValue("start", "start", gridEnabled)
checkAlignItemsValue("end", "end", gridEnabled)
- checkAlignItemsValue("flex-start safe", "flex-start safe", gridEnabled)
+ checkAlignItemsValue("safe flex-start", "safe flex-start", gridEnabled)
checkAlignItemsValue("self-start", "self-start", gridEnabled)
checkAlignItemsValue("self-end", "self-end", gridEnabled)
}
Modified: trunk/LayoutTests/css3/overwrite-content-alignment-expected.txt (227296 => 227297)
--- trunk/LayoutTests/css3/overwrite-content-alignment-expected.txt 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/LayoutTests/css3/overwrite-content-alignment-expected.txt 2018-01-22 17:01:51 UTC (rev 227297)
@@ -3,8 +3,8 @@
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-content') is "flex-end unsafe"
-PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-content') is "center safe"
+PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-content') is "unsafe flex-end"
+PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-content') is "safe center"
PASS getComputedStyle(childOfParentId, '').getPropertyValue('justify-content') is "space-between"
PASS getComputedStyle(childOfParentId, '').getPropertyValue('align-content') is "space-around"
PASS successfullyParsed is true
Modified: trunk/LayoutTests/css3/overwrite-content-alignment.html (227296 => 227297)
--- trunk/LayoutTests/css3/overwrite-content-alignment.html 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/LayoutTests/css3/overwrite-content-alignment.html 2018-01-22 17:01:51 UTC (rev 227297)
@@ -5,8 +5,8 @@
}
.parent .child {
display: -webkit-flex;
- justify-content: flex-end unsafe;
- align-content: center safe;
+ justify-content: unsafe flex-end;
+ align-content: safe center;
}
#parentId .child {
justify-content: space-between;
@@ -25,8 +25,8 @@
description('Test overwriting justify-content and align-content works as expected');
var childOfDefaultParent = document.getElementById("childOfDefaultParent");
-shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-content')", "flex-end unsafe");
-shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-content')", "center safe");
+shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-content')", "unsafe flex-end");
+shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-content')", "safe center");
var childOfParentId = document.getElementById("childOfParentId");
shouldBeEqualToString("getComputedStyle(childOfParentId, '').getPropertyValue('justify-content')", "space-between");
Modified: trunk/LayoutTests/css3/overwrite-self-alignment-expected.txt (227296 => 227297)
--- trunk/LayoutTests/css3/overwrite-self-alignment-expected.txt 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/LayoutTests/css3/overwrite-self-alignment-expected.txt 2018-01-22 17:01:51 UTC (rev 227297)
@@ -5,8 +5,8 @@
PASS getComputedStyle(parent, '').getPropertyValue('justify-items') is "center"
PASS getComputedStyle(parent, '').getPropertyValue('align-items') is "stretch"
-PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-self') is "flex-end unsafe"
-PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-self') is "flex-start safe"
+PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-self') is "unsafe flex-end"
+PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-self') is "safe flex-start"
PASS getComputedStyle(childOfParentId, '').getPropertyValue('justify-self') is "center"
PASS getComputedStyle(childOfParentId, '').getPropertyValue('align-self') is "stretch"
PASS successfullyParsed is true
Modified: trunk/LayoutTests/css3/overwrite-self-alignment.html (227296 => 227297)
--- trunk/LayoutTests/css3/overwrite-self-alignment.html 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/LayoutTests/css3/overwrite-self-alignment.html 2018-01-22 17:01:51 UTC (rev 227297)
@@ -2,13 +2,13 @@
<style>
.parent {
display: -webkit-flex;
- justify-items: flex-end unsafe;
- align-items: flex-start safe;
+ justify-items: unsafe flex-end;
+ align-items: safe flex-start;
}
.parent .child {
display: -webkit-flex;
- justify-self: flex-end unsafe;
- align-self: flex-start safe;
+ justify-self: unsafe flex-end;
+ align-self: safe flex-start;
}
#parentId {
justify-items: center;
@@ -35,8 +35,8 @@
shouldBeEqualToString("getComputedStyle(parent, '').getPropertyValue('align-items')", "stretch");
var childOfDefaultParent = document.getElementById("childOfDefaultParent");
-shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-self')", "flex-end unsafe");
-shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-self')", "flex-start safe");
+shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-self')", "unsafe flex-end");
+shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-self')", "safe flex-start");
var childOfParentId = document.getElementById("childOfParentId");
shouldBeEqualToString("getComputedStyle(childOfParentId, '').getPropertyValue('justify-self')", "center");
Modified: trunk/LayoutTests/css3/parse-align-content.html (227296 => 227297)
--- trunk/LayoutTests/css3/parse-align-content.html 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/LayoutTests/css3/parse-align-content.html 2018-01-22 17:01:51 UTC (rev 227297)
@@ -60,30 +60,31 @@
align-content: flex-end;
}
-#alignContentEndUnsafe {
- align-content: end unsafe;
+#alignContentUnsafeEnd {
+ align-content: unsafe end ;
}
-#alignContentCenterUnsafe {
- align-content: center unsafe;
+#alignContentUnsafeCenter {
+ align-content: unsafe center ;
}
-#alignContentRightSafe {
- align-content: right safe;
+#alignContentSafeRight {
+ align-content: safe right;
}
-#alignContentLeftUnsafe {
- align-content: left unsafe;
+#alignContentUnsafeLeft {
+ align-content: unsafe left;
}
-#alignContentFlexStartUnsafe {
- align-content: flex-start unsafe;
+#alignContentUnsafeFlexStart {
+ align-content: unsafe flex-start;
}
-#alignContentFlexEndSafe {
- align-content: flex-end safe;
+#alignContentSafeFlexEnd {
+ align-content: safe flex-end;
}
+<!-- Invalid CSS cases -->
#alignContentSpaceBetweenLeft {
align-content: space-between left;
}
@@ -108,7 +109,6 @@
align-content: space-evenly flex-start safe;
}
-<!-- Invalid CSS cases -->
#alignContentSpaceBetweenSafe {
align-content: space-between safe;
}
@@ -145,6 +145,14 @@
<div id="alignContentRight"></div>
<div id="alignContentFlexStart"></div>
<div id="alignContentFlexEnd"></div>
+<div id="alignContentUnsafeEnd"></div>
+<div id="alignContentUnsafeCenter"></div>
+<div id="alignContentSafeSelfEnd"></div>
+<div id="alignContentSafeSelfStart"></div>
+<div id="alignContentSafeRight"></div>
+<div id="alignContentUnsafeLeft"></div>
+<div id="alignContentUnsafeFlexStart"></div>
+<div id="alignContentSafeFlexEnd"></div>
<div id="alignContentEndUnsafe"></div>
<div id="alignContentCenterUnsafe"></div>
<div id="alignContentRightSafe"></div>
@@ -151,6 +159,7 @@
<div id="alignContentLeftUnsafe"></div>
<div id="alignContentFlexStartUnsafe"></div>
<div id="alignContentFlexEndSafe"></div>
+
<div id="alignContentSpaceBetweenLeft"></div>
<div id="alignContentSpaceAroundCenter"></div>
<div id="alignContentSpaceEvenlyRight"></div>
@@ -157,7 +166,6 @@
<div id="alignContentStretchStartSafe"></div>
<div id="alignContentSpaceAroundEndUnsafe"></div>
<div id="alignContentSpaceEvenlyFlexStartSafe"></div>
-
<div id="alignContentSpaceBetweenSafe"></div>
<div id="alignContentSpaceBetweenStretch"></div>
<div id="alignContentSafe"></div>
@@ -199,33 +207,45 @@
checkValues(alignContentFlexStart, "alignContent", "align-content", "", "flex-start");
var alignContentFlexEnd = document.getElementById("alignContentFlexEnd");
checkValues(alignContentFlexEnd, "alignContent", "align-content", "", "flex-end");
+ var alignContentUnsafeEnd = document.getElementById("alignContentUnsafeEnd");
+ checkValues(alignContentUnsafeEnd, "alignContent", "align-content", "", "unsafe end");
+ var alignContentUnsafeCenter = document.getElementById("alignContentUnsafeCenter");
+ checkValues(alignContentUnsafeCenter, "alignContent", "align-content", "", "unsafe center");
+ var alignContentSafeRight = document.getElementById("alignContentSafeRight");
+ checkValues(alignContentSafeRight, "alignContent", "align-content", "", "safe right");
+ var alignContentUnsafeLeft = document.getElementById("alignContentUnsafeLeft");
+ checkValues(alignContentUnsafeLeft, "alignContent", "align-content", "", "unsafe left");
+ var alignContentUnsafeFlexStart = document.getElementById("alignContentUnsafeFlexStart");
+ checkValues(alignContentUnsafeFlexStart, "alignContent", "align-content", "", "unsafe flex-start");
+ var alignContentSafeFlexEnd = document.getElementById("alignContentSafeFlexEnd");
+ checkValues(alignContentSafeFlexEnd, "alignContent", "align-content", "", "safe flex-end");
+}, "Test getting align-content values previously set through CSS.");
+
+test(function() {
var alignContentEndUnsafe = document.getElementById("alignContentEndUnsafe");
- checkValues(alignContentEndUnsafe, "alignContent", "align-content", "", "end unsafe");
+ checkValues(alignContentEndUnsafe, "alignContent", "align-content", "", "normal");
var alignContentCenterUnsafe = document.getElementById("alignContentCenterUnsafe");
- checkValues(alignContentCenterUnsafe, "alignContent", "align-content", "", "center unsafe");
+ checkValues(alignContentCenterUnsafe, "alignContent", "align-content", "", "normal");
var alignContentRightSafe = document.getElementById("alignContentRightSafe");
- checkValues(alignContentRightSafe, "alignContent", "align-content", "", "right safe");
+ checkValues(alignContentRightSafe, "alignContent", "align-content", "", "normal");
var alignContentLeftUnsafe = document.getElementById("alignContentLeftUnsafe");
- checkValues(alignContentLeftUnsafe, "alignContent", "align-content", "", "left unsafe");
+ checkValues(alignContentLeftUnsafe, "alignContent", "align-content", "", "normal");
var alignContentFlexStartUnsafe = document.getElementById("alignContentFlexStartUnsafe");
- checkValues(alignContentFlexStartUnsafe, "alignContent", "align-content", "", "flex-start unsafe");
+ checkValues(alignContentFlexStartUnsafe, "alignContent", "align-content", "", "normal");
var alignContentFlexEndSafe = document.getElementById("alignContentFlexEndSafe");
- checkValues(alignContentFlexEndSafe, "alignContent", "align-content", "", "flex-end safe");
+ checkValues(alignContentFlexEndSafe, "alignContent", "align-content", "", "normal");
var alignContentSpaceBetweenLeft = document.getElementById("alignContentSpaceBetweenLeft");
- checkValues(alignContentSpaceBetweenLeft, "alignContent", "align-content", "", "space-between left");
+ checkValues(alignContentSpaceBetweenLeft, "alignContent", "align-content", "", "normal");
var alignContentSpaceAroundCenter = document.getElementById("alignContentSpaceAroundCenter");
- checkValues(alignContentSpaceAroundCenter, "alignContent", "align-content", "", "space-around center");
+ checkValues(alignContentSpaceAroundCenter, "alignContent", "align-content", "", "normal");
var alignContentSpaceEvenlyRight = document.getElementById("alignContentSpaceEvenlyRight");
- checkValues(alignContentSpaceEvenlyRight, "alignContent", "align-content", "", "space-evenly right");
+ checkValues(alignContentSpaceEvenlyRight, "alignContent", "align-content", "", "normal");
var alignContentStretchStartSafe = document.getElementById("alignContentStretchStartSafe");
- checkValues(alignContentStretchStartSafe, "alignContent", "align-content", "", "stretch start safe");
+ checkValues(alignContentStretchStartSafe, "alignContent", "align-content", "", "normal");
var alignContentSpaceAroundEndUnsafe = document.getElementById("alignContentSpaceAroundEndUnsafe");
- checkValues(alignContentSpaceAroundEndUnsafe, "alignContent", "align-content", "", "space-around end unsafe");
+ checkValues(alignContentSpaceAroundEndUnsafe, "alignContent", "align-content", "", "normal");
var alignContentSpaceEvenlyFlexStartSafe = document.getElementById("alignContentSpaceEvenlyFlexStartSafe");
- checkValues(alignContentSpaceEvenlyFlexStartSafe, "alignContent", "align-content", "", "space-evenly flex-start safe");
-}, "Test getting align-content values previously set through CSS.");
-
-test(function() {
+ checkValues(alignContentSpaceEvenlyFlexStartSafe, "alignContent", "align-content", "", "normal");
var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBetweenSafe");
checkValues(alignContentSpaceBetweenSafe, "alignContent", "align-content", "", "normal");
var alignContentSpaceBetweenStretch = document.getElementById("alignContentSpaceBetweenStretch");
@@ -251,20 +271,14 @@
checkValues(element, "alignContent", "align-content", "center", "center");
element.style.alignContent = "unsafe start";
- checkValues(element, "alignContent", "align-content", "start unsafe", "start unsafe");
+ checkValues(element, "alignContent", "align-content", "unsafe start", "unsafe start");
- element.style.alignContent = "flex-end safe";
- checkValues(element, "alignContent", "align-content", "flex-end safe", "flex-end safe");
+ element.style.alignContent = "safe flex-end";
+ checkValues(element, "alignContent", "align-content", "safe flex-end", "safe flex-end");
- element.style.alignContent = "space-between right safe";
- checkValues(element, "alignContent", "align-content", "space-between right safe", "space-between right safe");
+ element.style.alignContent = " unsafe right";
+ checkValues(element, "alignContent", "align-content", "unsafe right", "unsafe right");
- 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.justifyContent = "first baseline";
checkValues(element, "justifyContent", "justify-content", "first baseline", "baseline");
@@ -309,6 +323,8 @@
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", "stretch center");
+ checkBadValues(element, "alignContent", "align-content", "space-between right safe");
checkBadValues(element, "alignContent", "align-content", "normal safe");
checkBadValues(element, "alignContent", "align-content", "space-around stretch");
checkBadValues(element, "alignContent", "align-content", "end space-between start");
@@ -315,6 +331,8 @@
checkBadValues(element, "alignContent", "align-content", "right safe left");
checkBadValues(element, "alignContent", "align-content", "unsafe");
checkBadValues(element, "alignContent", "align-content", "safe");
+ checkBadValues(element, "alignContent", "align-content", "start safe");
+ checkBadValues(element, "alignContent", "align-content", "end unsafe");
}, "Test bad combinations of align-content");
test(function() {
@@ -324,17 +342,17 @@
test(function() {
element.style.display = "grid";
- checkInitialValues(element, "alignContent", "align-content", "left safe", "normal");
+ checkInitialValues(element, "alignContent", "align-content", "safe left", "normal");
}, "Test the value 'initial' for grid containers");
test(function() {
element.style.display = "flex";
- checkInitialValues(element, "alignContent", "align-content", "right unsafe", "normal");
+ checkInitialValues(element, "alignContent", "align-content", "unsafe right", "normal");
}, "Test the value 'initial' for flex containers");
test(function() {
checkInheritValues("alignContent", "align-content", "end");
- checkInheritValues("alignContent", "align-content", "left safe");
- checkInheritValues("alignContent", "align-content", "center unsafe");
+ checkInheritValues("alignContent", "align-content", "safe left");
+ checkInheritValues("alignContent", "align-content", "unsafe center");
}, "Test the value 'inherit'");
</script>
Modified: trunk/LayoutTests/css3/parse-align-items.html (227296 => 227297)
--- trunk/LayoutTests/css3/parse-align-items.html 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/LayoutTests/css3/parse-align-items.html 2018-01-22 17:01:51 UTC (rev 227297)
@@ -16,6 +16,10 @@
align-items: stretch;
}
+#alignItemsNormal {
+ align-items: normal;
+}
+
#alignItemsStart {
align-items: start;
}
@@ -52,36 +56,36 @@
align-items: flex-end;
}
-#alignItemsEndUnsafe {
- align-items: end unsafe;
+#alignItemsUnsafeEnd {
+ align-items: unsafe end ;
}
-#alignItemsCenterUnsafe {
- align-items: center unsafe;
+#alignItemsUnsafeCenter {
+ align-items: unsafe center ;
}
-#alignItemsSelfEndSafe {
- align-items: self-end safe;
+#alignItemsSafeSelfEnd {
+ align-items: safe self-end;
}
-#alignItemsSelfStartSafe {
- align-items: self-start safe;
+#alignItemsSafeSelfStart {
+ align-items: safe self-start;
}
-#alignItemsRightSafe {
- align-items: right safe;
+#alignItemsSafeRight {
+ align-items: safe right;
}
-#alignItemsLeftUnsafe {
- align-items: left unsafe;
+#alignItemsUnsafeLeft {
+ align-items: unsafe left;
}
-#alignItemsFlexStartUnsafe {
- align-items: flex-start unsafe;
+#alignItemsUnsafeFlexStart {
+ align-items: unsafe flex-start;
}
-#alignItemsFlexEndSafe {
- align-items: flex-end safe;
+#alignItemsSafeFlexEnd {
+ align-items: safe flex-end;
}
</style>
<p>Test that setting and getting align-items works as expected</p>
@@ -89,6 +93,7 @@
<div id="alignItemsFirstBaseline"></div>
<div id="alignItemsLastBaseline"></div>
<div id="alignItemsStretch"></div>
+<div id="alignItemsNormal"></div>
<div id="alignItemsStart"></div>
<div id="alignItemsEnd"></div>
<div id="alignItemsCenter"></div>
@@ -99,14 +104,14 @@
<div id="alignItemsFlexStart"></div>
<div id="alignItemsFlexEnd"></div>
-<div id="alignItemsEndUnsafe"></div>
-<div id="alignItemsCenterUnsafe"></div>
-<div id="alignItemsSelfEndSafe"></div>
-<div id="alignItemsSelfStartSafe"></div>
-<div id="alignItemsRightSafe"></div>
-<div id="alignItemsLeftUnsafe"></div>
-<div id="alignItemsFlexStartUnsafe"></div>
-<div id="alignItemsFlexEndSafe"></div>
+<div id="alignItemsUnsafeEnd"></div>
+<div id="alignItemsUnsafeCenter"></div>
+<div id="alignItemsSafeSelfEnd"></div>
+<div id="alignItemsSafeSelfStart"></div>
+<div id="alignItemsSafeRight"></div>
+<div id="alignItemsUnsafeLeft"></div>
+<div id="alignItemsUnsafeFlexStart"></div>
+<div id="alignItemsSafeFlexEnd"></div>
<script src=""
<script src=""
<script src=""
@@ -120,6 +125,8 @@
checkValues(alignItemsLastBaseline, "alignItems", "align-items", "", "last baseline");
var alignItemsStretch = document.getElementById("alignItemsStretch");
checkValues(alignItemsStretch, "alignItems", "align-items", "", "stretch");
+ var alignItemsNormal = document.getElementById("alignItemsNormal");
+ checkValues(alignItemsNormal, "alignItems", "align-items", "", "normal");
var alignItemsStart = document.getElementById("alignItemsStart");
checkValues(alignItemsStart, "alignItems", "align-items", "", "start");
var alignItemsEnd = document.getElementById("alignItemsEnd");
@@ -139,22 +146,22 @@
var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd");
checkValues(alignItemsFlexEnd, "alignItems", "align-items", "", "flex-end");
- var alignItemsEndUnsafe = document.getElementById("alignItemsEndUnsafe");
- checkValues(alignItemsEndUnsafe, "alignItems", "align-items", "", "end unsafe");
- var alignItemsCenterUnsafe = document.getElementById("alignItemsCenterUnsafe");
- checkValues(alignItemsCenterUnsafe, "alignItems", "align-items", "", "center unsafe");
- var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe");
- checkValues(alignItemsSelfEndSafe, "alignItems", "align-items", "", "self-end safe");
- var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSafe");
- checkValues(alignItemsSelfStartSafe, "alignItems", "align-items", "", "self-start safe");
- var alignItemsRightSafe = document.getElementById("alignItemsRightSafe");
- checkValues(alignItemsRightSafe, "alignItems", "align-items", "", "right safe");
- var alignItemsLeftUnsafe = document.getElementById("alignItemsLeftUnsafe");
- checkValues(alignItemsLeftUnsafe, "alignItems", "align-items", "", "left unsafe");
- var alignItemsFlexStartUnsafe = document.getElementById("alignItemsFlexStartUnsafe");
- checkValues(alignItemsFlexStartUnsafe, "alignItems", "align-items", "", "flex-start unsafe");
- var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe");
- checkValues(alignItemsFlexEndSafe, "alignItems", "align-items", "", "flex-end safe");
+ var alignItemsUnsafeEnd = document.getElementById("alignItemsUnsafeEnd");
+ checkValues(alignItemsUnsafeEnd, "alignItems", "align-items", "", "unsafe end");
+ var alignItemsUnsafeCenter = document.getElementById("alignItemsUnsafeCenter");
+ checkValues(alignItemsUnsafeCenter, "alignItems", "align-items", "", "unsafe center");
+ var alignItemsSafeSelfEnd = document.getElementById("alignItemsSafeSelfEnd");
+ checkValues(alignItemsSafeSelfEnd, "alignItems", "align-items", "", "safe self-end");
+ var alignItemsSafeSelfStart = document.getElementById("alignItemsSafeSelfStart");
+ checkValues(alignItemsSafeSelfStart, "alignItems", "align-items", "", "safe self-start");
+ var alignItemsSafeRight = document.getElementById("alignItemsSafeRight");
+ checkValues(alignItemsSafeRight, "alignItems", "align-items", "", "safe right");
+ var alignItemsUnsafeLeft = document.getElementById("alignItemsUnsafeLeft");
+ checkValues(alignItemsUnsafeLeft, "alignItems", "align-items", "", "unsafe left");
+ var alignItemsUnsafeFlexStart = document.getElementById("alignItemsUnsafeFlexStart");
+ checkValues(alignItemsUnsafeFlexStart, "alignItems", "align-items", "", "unsafe flex-start");
+ var alignItemsSafeFlexEnd = document.getElementById("alignItemsSafeFlexEnd");
+ checkValues(alignItemsSafeFlexEnd, "alignItems", "align-items", "", "safe flex-end");
}, "Test getting align-items set through CSS.");
test(function() {
@@ -170,10 +177,10 @@
checkValues(element, "alignItems", "align-items", "center", "center");
element.style.alignItems = "unsafe start";
- checkValues(element, "alignItems", "align-items", "start unsafe", "start unsafe");
+ checkValues(element, "alignItems", "align-items", "unsafe start", "unsafe start");
- element.style.alignItems = "flex-end safe";
- checkValues(element, "alignItems", "align-items", "flex-end safe", "flex-end safe");
+ element.style.alignItems = "safe flex-end";
+ checkValues(element, "alignItems", "align-items", "safe flex-end", "safe flex-end");
element.style.alignItems = "right";
checkValues(element, "alignItems", "align-items", "right", "right");
@@ -184,6 +191,9 @@
element.style.alignItems = "self-start";
checkValues(element, "alignItems", "align-items", "self-start", "self-start");
+ element.style.alignItems = "normal";
+ checkValues(element, "alignItems", "align-items", "normal", "normal");
+
// The 'auto' value is not valid for the align-items property.
element.style.alignItems = "";
element.style.alignItems = "auto";
@@ -209,6 +219,9 @@
checkBadValues(element, "alignItems", "align-items", "unsafe auto");
checkBadValues(element, "alignItems", "align-items", "auto safe");
checkBadValues(element, "alignItems", "align-items", "auto left");
+ checkBadValues(element, "alignItems", "align-items", "normal unsafe");
+ checkBadValues(element, "alignItems", "align-items", "normal stretch");
+ checkBadValues(element, "alignItems", "align-items", "baseline normal");
checkBadValues(element, "alignItems", "align-items", "baseline safe");
checkBadValues(element, "alignItems", "align-items", "baseline center");
checkBadValues(element, "alignItems", "align-items", "first baseline center");
@@ -234,6 +247,8 @@
checkBadValues(element, "alignItems", "align-items", "legacy stretch");
checkBadValues(element, "alignItems", "align-items", "legacy");
checkBadValues(element, "alignItems", "align-items", "legacy left right");
+ checkBadValues(element, "alignItems", "align-items", "start safe");
+ checkBadValues(element, "alignItems", "align-items", "end unsafe");
}, "Test bad combinations of align-items");
test(function() {
@@ -243,17 +258,17 @@
test(function() {
element.style.display = "grid";
- checkInitialValues(element, "alignItems", "align-items", "left safe", "normal");
+ checkInitialValues(element, "alignItems", "align-items", "safe left", "normal");
}, "Test the value 'initial' for grid containers");
test(function() {
element.style.display = "flex";
- checkInitialValues(element, "alignItems", "align-items", "right unsafe", "normal");
+ checkInitialValues(element, "alignItems", "align-items", "unsafe right", "normal");
}, "Test the value 'initial' for flex containers");
test(function() {
checkInheritValues("alignItems", "align-items", "end");
- checkInheritValues("alignItems", "align-items", "left safe");
- checkInheritValues("alignItems", "align-items", "center unsafe");
+ checkInheritValues("alignItems", "align-items", "safe left");
+ checkInheritValues("alignItems", "align-items", "unsafe center");
}, "Test the value 'inherit'");
</script>
Modified: trunk/LayoutTests/css3/parse-align-self.html (227296 => 227297)
--- trunk/LayoutTests/css3/parse-align-self.html 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/LayoutTests/css3/parse-align-self.html 2018-01-22 17:01:51 UTC (rev 227297)
@@ -56,36 +56,36 @@
align-self: flex-end;
}
-#alignSelfEndUnsafe {
- align-self: end unsafe;
+#alignSelfUnsafeEnd {
+ align-self: unsafe end ;
}
-#alignSelfCenterUnsafe {
- align-self: center unsafe;
+#alignSelfUnsafeCenter {
+ align-self: unsafe center ;
}
-#alignSelfSelfEndSafe {
- align-self: self-end safe;
+#alignSelfSafeSelfEnd {
+ align-self: safe self-end;
}
-#alignSelfSelfStartSafe {
- align-self: self-start safe;
+#alignSelfSafeSelfStart {
+ align-self: safe self-start;
}
-#alignSelfRightSafe {
- align-self: right safe;
+#alignSelfSafeRight {
+ align-self: safe right;
}
-#alignSelfLeftUnsafe {
- align-self: left unsafe;
+#alignSelfUnsafeLeft {
+ align-self: unsafe left;
}
-#alignSelfFlexStartUnsafe {
- align-self: flex-start unsafe;
+#alignSelfUnsafeFlexStart {
+ align-self: unsafe flex-start;
}
-#alignSelfFlexEndSafe {
- align-self: flex-end safe;
+#alignSelfSafeFlexEnd {
+ align-self: safe flex-end;
}
</style>
<p>Test that setting and getting align-self works as expected</p>
@@ -104,14 +104,14 @@
<div id="alignSelfFlexStart"></div>
<div id="alignSelfFlexEnd"></div>
-<div id="alignSelfEndUnsafe"></div>
-<div id="alignSelfCenterUnsafe"></div>
-<div id="alignSelfSelfEndSafe"></div>
-<div id="alignSelfSelfStartSafe"></div>
-<div id="alignSelfRightSafe"></div>
-<div id="alignSelfLeftUnsafe"></div>
-<div id="alignSelfFlexStartUnsafe"></div>
-<div id="alignSelfFlexEndSafe"></div>
+<div id="alignSelfUnsafeEnd"></div>
+<div id="alignSelfUnsafeCenter"></div>
+<div id="alignSelfSafeSelfEnd"></div>
+<div id="alignSelfSafeSelfStart"></div>
+<div id="alignSelfSafeRight"></div>
+<div id="alignSelfUnsafeLeft"></div>
+<div id="alignSelfUnsafeFlexStart"></div>
+<div id="alignSelfSafeFlexEnd"></div>
<script src=""
<script src=""
<script src=""
@@ -146,22 +146,22 @@
var alignSelfFlexEnd = document.getElementById("alignSelfFlexEnd");
checkValues(alignSelfFlexEnd, "alignSelf", "align-self", "", "flex-end");
- var alignSelfEndUnsafe = document.getElementById("alignSelfEndUnsafe");
- checkValues(alignSelfEndUnsafe, "alignSelf", "align-self", "", "end unsafe");
- var alignSelfCenterUnsafe = document.getElementById("alignSelfCenterUnsafe");
- checkValues(alignSelfCenterUnsafe, "alignSelf", "align-self", "", "center unsafe");
- var alignSelfSelfEndSafe = document.getElementById("alignSelfSelfEndSafe");
- checkValues(alignSelfSelfEndSafe, "alignSelf", "align-self", "", "self-end safe");
- var alignSelfSelfStartSafe = document.getElementById("alignSelfSelfStartSafe");
- checkValues(alignSelfSelfStartSafe, "alignSelf", "align-self", "", "self-start safe");
- var alignSelfRightSafe = document.getElementById("alignSelfRightSafe");
- checkValues(alignSelfRightSafe, "alignSelf", "align-self", "", "right safe");
- var alignSelfLeftUnsafe = document.getElementById("alignSelfLeftUnsafe");
- checkValues(alignSelfLeftUnsafe, "alignSelf", "align-self", "", "left unsafe");
- var alignSelfFlexStartUnsafe = document.getElementById("alignSelfFlexStartUnsafe");
- checkValues(alignSelfFlexStartUnsafe, "alignSelf", "align-self", "", "flex-start unsafe");
- var alignSelfFlexEndSafe = document.getElementById("alignSelfFlexEndSafe");
- checkValues(alignSelfFlexEndSafe, "alignSelf", "align-self", "", "flex-end safe");
+ var alignSelfUnsafeEnd = document.getElementById("alignSelfUnsafeEnd");
+ checkValues(alignSelfUnsafeEnd, "alignSelf", "align-self", "", "unsafe end");
+ var alignSelfUnsafeCenter = document.getElementById("alignSelfUnsafeCenter");
+ checkValues(alignSelfUnsafeCenter, "alignSelf", "align-self", "", "unsafe center");
+ var alignSelfSafeSelfEnd = document.getElementById("alignSelfSafeSelfEnd");
+ checkValues(alignSelfSafeSelfEnd, "alignSelf", "align-self", "", "safe self-end");
+ var alignSelfSafeSelfStart = document.getElementById("alignSelfSafeSelfStart");
+ checkValues(alignSelfSafeSelfStart, "alignSelf", "align-self", "", "safe self-start");
+ var alignSelfSafeRight = document.getElementById("alignSelfSafeRight");
+ checkValues(alignSelfSafeRight, "alignSelf", "align-self", "", "safe right");
+ var alignSelfUnsafeLeft = document.getElementById("alignSelfUnsafeLeft");
+ checkValues(alignSelfUnsafeLeft, "alignSelf", "align-self", "", "unsafe left");
+ var alignSelfUnsafeFlexStart = document.getElementById("alignSelfUnsafeFlexStart");
+ checkValues(alignSelfUnsafeFlexStart, "alignSelf", "align-self", "", "unsafe flex-start");
+ var alignSelfSafeFlexEnd = document.getElementById("alignSelfSafeFlexEnd");
+ checkValues(alignSelfSafeFlexEnd, "alignSelf", "align-self", "", "safe flex-end");
}, "Test getting align-self set through CSS.");
test(function() {
@@ -179,10 +179,10 @@
checkValues(element, "alignSelf", "align-self", "center", "center");
element.style.alignSelf = "unsafe start";
- checkValues(element, "alignSelf", "align-self", "start unsafe", "start unsafe");
+ checkValues(element, "alignSelf", "align-self", "unsafe start", "unsafe start");
- element.style.alignSelf = "flex-end safe";
- checkValues(element, "alignSelf", "align-self", "flex-end safe", "flex-end safe");
+ element.style.alignSelf = "safe flex-end";
+ checkValues(element, "alignSelf", "align-self", "safe flex-end", "safe flex-end");
element.style.alignSelf = "right";
checkValues(element, "alignSelf", "align-self", "right", "right");
@@ -229,6 +229,10 @@
checkBadValues(element, "alignSelf", "align-self", "baseline normal");
checkBadValues(element, "alignSelf", "align-self", "baseline safe");
checkBadValues(element, "alignSelf", "align-self", "baseline center");
+ checkBadValues(element, "alignSelf", "align-self", "first baseline center");
+ checkBadValues(element, "alignSelf", "align-self", "last baseline center");
+ checkBadValues(element, "alignSelf", "align-self", "baseline last");
+ checkBadValues(element, "alignSelf", "align-self", "baseline first");
checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
checkBadValues(element, "alignSelf", "align-self", "stretch right");
checkBadValues(element, "alignSelf", "align-self", "unsafe unsafe");
@@ -248,6 +252,8 @@
checkBadValues(element, "alignSelf", "align-self", "legacy stretch");
checkBadValues(element, "alignSelf", "align-self", "legacy");
checkBadValues(element, "alignSelf", "align-self", "legacy left right");
+ checkBadValues(element, "alignSelf", "align-self", "start safe");
+ checkBadValues(element, "alignSelf", "align-self", "end unsafe");
}, "Test bad combinations of align-self");
test(function() {
@@ -257,12 +263,12 @@
test(function() {
container.style.display = "grid";
- checkInitialValues(element, "alignSelf", "align-self", "left safe", "auto");
+ checkInitialValues(element, "alignSelf", "align-self", "safe left", "auto");
}, "Test the value 'initial' for grid containers");
test(function() {
container.style.display = "flex";
- checkInitialValues(element, "alignSelf", "align-self", "right unsafe", "auto");
+ checkInitialValues(element, "alignSelf", "align-self", "unsafe right", "auto");
}, "Test the value 'initial' for flex containers");
test(function() {
@@ -285,7 +291,7 @@
test(function() {
checkInheritValues("alignSelf", "align-self", "end");
- checkInheritValues("alignSelf", "align-self", "left safe");
- checkInheritValues("alignSelf", "align-self", "center unsafe");
+ checkInheritValues("alignSelf", "align-self", "safe left");
+ checkInheritValues("alignSelf", "align-self", "unsafe center");
}, "Test the value 'inherit'");
</script>
Modified: trunk/LayoutTests/css3/parse-justify-content.html (227296 => 227297)
--- trunk/LayoutTests/css3/parse-justify-content.html 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/LayoutTests/css3/parse-justify-content.html 2018-01-22 17:01:51 UTC (rev 227297)
@@ -60,30 +60,31 @@
justify-content: flex-end;
}
-#justifyContentEndUnsafe {
- justify-content: end unsafe;
+#justifyContentUnsafeEnd {
+ justify-content: unsafe end ;
}
-#justifyContentCenterUnsafe {
- justify-content: center unsafe;
+#justifyContentUnsafeCenter {
+ justify-content: unsafe center ;
}
-#justifyContentRightSafe {
- justify-content: right safe;
+#justifyContentSafeRight {
+ justify-content: safe right;
}
-#justifyContentLeftUnsafe {
- justify-content: left unsafe;
+#justifyContentUnsafeLeft {
+ justify-content: unsafe left;
}
-#justifyContentFlexStartUnsafe {
- justify-content: flex-start unsafe;
+#justifyContentUnsafeFlexStart {
+ justify-content: unsafe flex-start;
}
-#justifyContentFlexEndSafe {
- justify-content: flex-end safe;
+#justifyContentSafeFlexEnd {
+ justify-content: safe flex-end;
}
+<!-- Invalid CSS cases -->
#justifyContentSpaceBetweenLeft {
justify-content: space-between left;
}
@@ -108,7 +109,6 @@
justify-content: space-evenly flex-start safe;
}
-<!-- Invalid CSS cases -->
#justifyContentSpaceBetweenSafe {
justify-content: space-between safe;
}
@@ -145,6 +145,14 @@
<div id="justifyContentRight"></div>
<div id="justifyContentFlexStart"></div>
<div id="justifyContentFlexEnd"></div>
+<div id="justifyContentUnsafeEnd"></div>
+<div id="justifyContentUnsafeCenter"></div>
+<div id="justifyContentSafeSelfEnd"></div>
+<div id="justifyContentSafeSelfStart"></div>
+<div id="justifyContentSafeRight"></div>
+<div id="justifyContentUnsafeLeft"></div>
+<div id="justifyContentUnsafeFlexStart"></div>
+<div id="justifyContentSafeFlexEnd"></div>
<div id="justifyContentEndUnsafe"></div>
<div id="justifyContentCenterUnsafe"></div>
<div id="justifyContentRightSafe"></div>
@@ -151,6 +159,7 @@
<div id="justifyContentLeftUnsafe"></div>
<div id="justifyContentFlexStartUnsafe"></div>
<div id="justifyContentFlexEndSafe"></div>
+
<div id="justifyContentSpaceBetweenLeft"></div>
<div id="justifyContentSpaceAroundCenter"></div>
<div id="justifyContentSpaceEvenlyRight"></div>
@@ -157,7 +166,6 @@
<div id="justifyContentStretchStartSafe"></div>
<div id="justifyContentSpaceAroundEndUnsafe"></div>
<div id="justifyContentSpaceEvenlyFlexStartSafe"></div>
-
<div id="justifyContentSpaceBetweenSafe"></div>
<div id="justifyContentSpaceBetweenStretch"></div>
<div id="justifyContentSafe"></div>
@@ -199,33 +207,45 @@
checkValues(justifyContentFlexStart, "justifyContent", "justify-content", "", "flex-start");
var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd");
checkValues(justifyContentFlexEnd, "justifyContent", "justify-content", "", "flex-end");
+ var justifyContentUnsafeEnd = document.getElementById("justifyContentUnsafeEnd");
+ checkValues(justifyContentUnsafeEnd, "justifyContent", "justify-content", "", "unsafe end");
+ var justifyContentUnsafeCenter = document.getElementById("justifyContentUnsafeCenter");
+ checkValues(justifyContentUnsafeCenter, "justifyContent", "justify-content", "", "unsafe center");
+ var justifyContentSafeRight = document.getElementById("justifyContentSafeRight");
+ checkValues(justifyContentSafeRight, "justifyContent", "justify-content", "", "safe right");
+ var justifyContentUnsafeLeft = document.getElementById("justifyContentUnsafeLeft");
+ checkValues(justifyContentUnsafeLeft, "justifyContent", "justify-content", "", "unsafe left");
+ var justifyContentUnsafeFlexStart = document.getElementById("justifyContentUnsafeFlexStart");
+ checkValues(justifyContentUnsafeFlexStart, "justifyContent", "justify-content", "", "unsafe flex-start");
+ var justifyContentSafeFlexEnd = document.getElementById("justifyContentSafeFlexEnd");
+ checkValues(justifyContentSafeFlexEnd, "justifyContent", "justify-content", "", "safe flex-end");
+}, "Test getting justify-content values previously set through CSS.");
+
+test(function() {
var justifyContentEndUnsafe = document.getElementById("justifyContentEndUnsafe");
- checkValues(justifyContentEndUnsafe, "justifyContent", "justify-content", "", "end unsafe");
+ checkValues(justifyContentEndUnsafe, "justifyContent", "justify-content", "", "normal");
var justifyContentCenterUnsafe = document.getElementById("justifyContentCenterUnsafe");
- checkValues(justifyContentCenterUnsafe, "justifyContent", "justify-content", "", "center unsafe");
+ checkValues(justifyContentCenterUnsafe, "justifyContent", "justify-content", "", "normal");
var justifyContentRightSafe = document.getElementById("justifyContentRightSafe");
- checkValues(justifyContentRightSafe, "justifyContent", "justify-content", "", "right safe");
+ checkValues(justifyContentRightSafe, "justifyContent", "justify-content", "", "normal");
var justifyContentLeftUnsafe = document.getElementById("justifyContentLeftUnsafe");
- checkValues(justifyContentLeftUnsafe, "justifyContent", "justify-content", "", "left unsafe");
+ checkValues(justifyContentLeftUnsafe, "justifyContent", "justify-content", "", "normal");
var justifyContentFlexStartUnsafe = document.getElementById("justifyContentFlexStartUnsafe");
- checkValues(justifyContentFlexStartUnsafe, "justifyContent", "justify-content", "", "flex-start unsafe");
+ checkValues(justifyContentFlexStartUnsafe, "justifyContent", "justify-content", "", "normal");
var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSafe");
- checkValues(justifyContentFlexEndSafe, "justifyContent", "justify-content", "", "flex-end safe");
+ checkValues(justifyContentFlexEndSafe, "justifyContent", "justify-content", "", "normal");
var justifyContentSpaceBetweenLeft = document.getElementById("justifyContentSpaceBetweenLeft");
- checkValues(justifyContentSpaceBetweenLeft, "justifyContent", "justify-content", "", "space-between left");
+ checkValues(justifyContentSpaceBetweenLeft, "justifyContent", "justify-content", "", "normal");
var justifyContentSpaceAroundCenter = document.getElementById("justifyContentSpaceAroundCenter");
- checkValues(justifyContentSpaceAroundCenter, "justifyContent", "justify-content", "", "space-around center");
+ checkValues(justifyContentSpaceAroundCenter, "justifyContent", "justify-content", "", "normal");
var justifyContentSpaceEvenlyRight = document.getElementById("justifyContentSpaceEvenlyRight");
- checkValues(justifyContentSpaceEvenlyRight, "justifyContent", "justify-content", "", "space-evenly right");
+ checkValues(justifyContentSpaceEvenlyRight, "justifyContent", "justify-content", "", "normal");
var justifyContentStretchStartSafe = document.getElementById("justifyContentStretchStartSafe");
- checkValues(justifyContentStretchStartSafe, "justifyContent", "justify-content", "", "stretch start safe");
+ checkValues(justifyContentStretchStartSafe, "justifyContent", "justify-content", "", "normal");
var justifyContentSpaceAroundEndUnsafe = document.getElementById("justifyContentSpaceAroundEndUnsafe");
- checkValues(justifyContentSpaceAroundEndUnsafe, "justifyContent", "justify-content", "", "space-around end unsafe");
+ checkValues(justifyContentSpaceAroundEndUnsafe, "justifyContent", "justify-content", "", "normal");
var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyContentSpaceEvenlyFlexStartSafe");
- checkValues(justifyContentSpaceEvenlyFlexStartSafe, "justifyContent", "justify-content", "", "space-evenly flex-start safe");
-}, "Test getting justify-content values previously set through CSS.");
-
-test(function() {
+ checkValues(justifyContentSpaceEvenlyFlexStartSafe, "justifyContent", "justify-content", "", "normal");
var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpaceBetweenSafe");
checkValues(justifyContentSpaceBetweenSafe, "justifyContent", "justify-content", "", "normal");
var justifyContentSpaceBetweenStretch = document.getElementById("justifyContentSpaceBetweenStretch");
@@ -251,20 +271,14 @@
checkValues(element, "justifyContent", "justify-content", "center", "center");
element.style.justifyContent = "unsafe start";
- checkValues(element, "justifyContent", "justify-content", "start unsafe", "start unsafe");
+ checkValues(element, "justifyContent", "justify-content", "unsafe start", "unsafe start");
- element.style.justifyContent = "flex-end safe";
- checkValues(element, "justifyContent", "justify-content", "flex-end safe", "flex-end safe");
+ element.style.justifyContent = "safe flex-end";
+ checkValues(element, "justifyContent", "justify-content", "safe flex-end", "safe flex-end");
- element.style.justifyContent = "space-between right safe";
- checkValues(element, "justifyContent", "justify-content", "space-between right safe", "space-between right safe");
+ element.style.justifyContent = " unsafe right";
+ checkValues(element, "justifyContent", "justify-content", "unsafe right", "unsafe right");
- 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 = "first baseline";
checkValues(element, "justifyContent", "justify-content", "first baseline", "baseline");
@@ -309,6 +323,8 @@
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", "stretch center");
+ checkBadValues(element, "justifyContent", "justify-content", "space-between right safe");
checkBadValues(element, "justifyContent", "justify-content", "normal safe");
checkBadValues(element, "justifyContent", "justify-content", "space-around stretch");
checkBadValues(element, "justifyContent", "justify-content", "end space-between start");
@@ -315,6 +331,8 @@
checkBadValues(element, "justifyContent", "justify-content", "right safe left");
checkBadValues(element, "justifyContent", "justify-content", "unsafe");
checkBadValues(element, "justifyContent", "justify-content", "safe");
+ checkBadValues(element, "justifyContent", "justify-content", "start safe");
+ checkBadValues(element, "justifyContent", "justify-content", "end unsafe");
}, "Test bad combinations of justify-content");
test(function() {
@@ -324,20 +342,17 @@
test(function() {
element.style.display = "grid";
- checkInitialValues(element, "justifyContent", "justify-content", "left safe", "normal");
+ checkInitialValues(element, "justifyContent", "justify-content", "safe left", "normal");
}, "Test the value 'initial' for grid containers");
test(function() {
element.style.display = "flex";
- checkInitialValues(element, "justifyContent", "justify-content", "right unsafe", "normal");
+ checkInitialValues(element, "justifyContent", "justify-content", "unsafe right", "normal");
}, "Test the value 'initial' for flex containers");
test(function() {
checkInheritValues("justifyContent", "justify-content", "end");
- checkInheritValues("justifyContent", "justify-content", "left safe");
- checkInheritValues("justifyContent", "justify-content", "center unsafe");
+ checkInheritValues("justifyContent", "justify-content", "safe left");
+ checkInheritValues("justifyContent", "justify-content", "unsafe center");
}, "Test the value 'inherit'");
-
</script>
-</body>
-</html>
Modified: trunk/LayoutTests/fast/css/parse-justify-items.html (227296 => 227297)
--- trunk/LayoutTests/fast/css/parse-justify-items.html 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/LayoutTests/fast/css/parse-justify-items.html 2018-01-22 17:01:51 UTC (rev 227297)
@@ -16,6 +16,10 @@
justify-items: stretch;
}
+#justifyItemsNormal {
+ justify-items: normal;
+}
+
#justifyItemsStart {
justify-items: start;
}
@@ -52,36 +56,36 @@
justify-items: flex-end;
}
-#justifyItemsEndUnsafe {
- justify-items: end unsafe;
+#justifyItemsUnsafeEnd {
+ justify-items: unsafe end ;
}
-#justifyItemsCenterUnsafe {
- justify-items: center unsafe;
+#justifyItemsUnsafeCenter {
+ justify-items: unsafe center ;
}
-#justifyItemsSelfEndSafe {
- justify-items: self-end safe;
+#justifyItemsSafeSelfEnd {
+ justify-items: safe self-end;
}
-#justifyItemsSelfStartSafe {
- justify-items: self-start safe;
+#justifyItemsSafeSelfStart {
+ justify-items: safe self-start;
}
-#justifyItemsRightSafe {
- justify-items: right safe;
+#justifyItemsSafeRight {
+ justify-items: safe right;
}
-#justifyItemsLeftUnsafe {
- justify-items: left unsafe;
+#justifyItemsUnsafeLeft {
+ justify-items: unsafe left;
}
-#justifyItemsFlexStartUnsafe {
- justify-items: flex-start unsafe;
+#justifyItemsUnsafeFlexStart {
+ justify-items: unsafe flex-start;
}
-#justifyItemsFlexEndSafe {
- justify-items: flex-end safe;
+#justifyItemsSafeFlexEnd {
+ justify-items: safe flex-end;
}
#justifyItemsLegacyLeft {
@@ -113,6 +117,7 @@
<div id="justifyItemsFirstBaseline"></div>
<div id="justifyItemsLastBaseline"></div>
<div id="justifyItemsStretch"></div>
+<div id="justifyItemsNormal"></div>
<div id="justifyItemsStart"></div>
<div id="justifyItemsEnd"></div>
<div id="justifyItemsCenter"></div>
@@ -123,14 +128,14 @@
<div id="justifyItemsFlexStart"></div>
<div id="justifyItemsFlexEnd"></div>
-<div id="justifyItemsEndUnsafe"></div>
-<div id="justifyItemsCenterUnsafe"></div>
-<div id="justifyItemsSelfEndSafe"></div>
-<div id="justifyItemsSelfStartSafe"></div>
-<div id="justifyItemsRightSafe"></div>
-<div id="justifyItemsLeftUnsafe"></div>
-<div id="justifyItemsFlexStartUnsafe"></div>
-<div id="justifyItemsFlexEndSafe"></div>
+<div id="justifyItemsUnsafeEnd"></div>
+<div id="justifyItemsUnsafeCenter"></div>
+<div id="justifyItemsSafeSelfEnd"></div>
+<div id="justifyItemsSafeSelfStart"></div>
+<div id="justifyItemsSafeRight"></div>
+<div id="justifyItemsUnsafeLeft"></div>
+<div id="justifyItemsUnsafeFlexStart"></div>
+<div id="justifyItemsSafeFlexEnd"></div>
<div id="justifyItemsLegacyLeft"></div>
<div id="justifyItemsLegacyCenter"></div>
<div id="justifyItemsLegacyRight"></div>
@@ -150,6 +155,8 @@
checkValues(justifyItemsLastBaseline, "justifyItems", "justify-items", "", "last baseline");
var justifyItemsStretch = document.getElementById("justifyItemsStretch");
checkValues(justifyItemsStretch, "justifyItems", "justify-items", "", "stretch");
+ var justifyItemsNormal = document.getElementById("justifyItemsNormal");
+ checkValues(justifyItemsNormal, "justifyItems", "justify-items", "", "normal");
var justifyItemsStart = document.getElementById("justifyItemsStart");
checkValues(justifyItemsStart, "justifyItems", "justify-items", "", "start");
var justifyItemsEnd = document.getElementById("justifyItemsEnd");
@@ -169,22 +176,22 @@
var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd");
checkValues(justifyItemsFlexEnd, "justifyItems", "justify-items", "", "flex-end");
- var justifyItemsEndUnsafe = document.getElementById("justifyItemsEndUnsafe");
- checkValues(justifyItemsEndUnsafe, "justifyItems", "justify-items", "", "end unsafe");
- var justifyItemsCenterUnsafe = document.getElementById("justifyItemsCenterUnsafe");
- checkValues(justifyItemsCenterUnsafe, "justifyItems", "justify-items", "", "center unsafe");
- var justifyItemsSelfEndSafe = document.getElementById("justifyItemsSelfEndSafe");
- checkValues(justifyItemsSelfEndSafe, "justifyItems", "justify-items", "", "self-end safe");
- var justifyItemsSelfStartSafe = document.getElementById("justifyItemsSelfStartSafe");
- checkValues(justifyItemsSelfStartSafe, "justifyItems", "justify-items", "", "self-start safe");
- var justifyItemsRightSafe = document.getElementById("justifyItemsRightSafe");
- checkValues(justifyItemsRightSafe, "justifyItems", "justify-items", "", "right safe");
- var justifyItemsLeftUnsafe = document.getElementById("justifyItemsLeftUnsafe");
- checkValues(justifyItemsLeftUnsafe, "justifyItems", "justify-items", "", "left unsafe");
- var justifyItemsFlexStartUnsafe = document.getElementById("justifyItemsFlexStartUnsafe");
- checkValues(justifyItemsFlexStartUnsafe, "justifyItems", "justify-items", "", "flex-start unsafe");
- var justifyItemsFlexEndSafe = document.getElementById("justifyItemsFlexEndSafe");
- checkValues(justifyItemsFlexEndSafe, "justifyItems", "justify-items", "", "flex-end safe");
+ var justifyItemsUnsafeEnd = document.getElementById("justifyItemsUnsafeEnd");
+ checkValues(justifyItemsUnsafeEnd, "justifyItems", "justify-items", "", "unsafe end");
+ var justifyItemsUnsafeCenter = document.getElementById("justifyItemsUnsafeCenter");
+ checkValues(justifyItemsUnsafeCenter, "justifyItems", "justify-items", "", "unsafe center");
+ var justifyItemsSafeSelfEnd = document.getElementById("justifyItemsSafeSelfEnd");
+ checkValues(justifyItemsSafeSelfEnd, "justifyItems", "justify-items", "", "safe self-end");
+ var justifyItemsSafeSelfStart = document.getElementById("justifyItemsSafeSelfStart");
+ checkValues(justifyItemsSafeSelfStart, "justifyItems", "justify-items", "", "safe self-start");
+ var justifyItemsSafeRight = document.getElementById("justifyItemsSafeRight");
+ checkValues(justifyItemsSafeRight, "justifyItems", "justify-items", "", "safe right");
+ var justifyItemsUnsafeLeft = document.getElementById("justifyItemsUnsafeLeft");
+ checkValues(justifyItemsUnsafeLeft, "justifyItems", "justify-items", "", "unsafe left");
+ var justifyItemsUnsafeFlexStart = document.getElementById("justifyItemsUnsafeFlexStart");
+ checkValues(justifyItemsUnsafeFlexStart, "justifyItems", "justify-items", "", "unsafe flex-start");
+ var justifyItemsSafeFlexEnd = document.getElementById("justifyItemsSafeFlexEnd");
+ checkValues(justifyItemsSafeFlexEnd, "justifyItems", "justify-items", "", "safe flex-end");
var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft");
checkValues(justifyItemsLegacyLeft, "justifyItems", "justify-items", "", "legacy left");
var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter");
@@ -212,10 +219,10 @@
checkValues(element, "justifyItems", "justify-items", "center", "center");
element.style.justifyItems = "unsafe start";
- checkValues(element, "justifyItems", "justify-items", "start unsafe", "start unsafe");
+ checkValues(element, "justifyItems", "justify-items", "unsafe start", "unsafe start");
- element.style.justifyItems = "flex-end safe";
- checkValues(element, "justifyItems", "justify-items", "flex-end safe", "flex-end safe");
+ element.style.justifyItems = "safe flex-end";
+ checkValues(element, "justifyItems", "justify-items", "safe flex-end", "safe flex-end");
element.style.justifyItems = "right legacy";
checkValues(element, "justifyItems", "justify-items", "legacy right", "legacy right");
@@ -226,6 +233,18 @@
element.style.justifyItems = "left legacy";
checkValues(element, "justifyItems", "justify-items", "legacy left", "legacy left");
+ element.style.justifyItems = "right";
+ checkValues(element, "justifyItems", "justify-items", "right", "right");
+
+ element.style.justifyItems = "center";
+ checkValues(element, "justifyItems", "justify-items", "center", "center");
+
+ element.style.justifyItems = "self-start";
+ checkValues(element, "justifyItems", "justify-items", "self-start", "self-start");
+
+ element.style.justifyItems = "normal";
+ checkValues(element, "justifyItems", "justify-items", "normal", "normal");
+
element.style.justifyItems = "auto";
checkValues(element, "justifyItems", "justify-items", "auto", "normal");
@@ -255,8 +274,15 @@
checkBadValues(element, "justifyItems", "justify-items", "unsafe auto");
checkBadValues(element, "justifyItems", "justify-items", "auto safe");
checkBadValues(element, "justifyItems", "justify-items", "auto left");
+ checkBadValues(element, "justifyItems", "justify-items", "normal unsafe");
+ checkBadValues(element, "justifyItems", "justify-items", "normal stretch");
+ checkBadValues(element, "justifyItems", "justify-items", "baseline normal");
checkBadValues(element, "justifyItems", "justify-items", "baseline safe");
checkBadValues(element, "justifyItems", "justify-items", "baseline center");
+ checkBadValues(element, "justifyItems", "justify-items", "first baseline center");
+ checkBadValues(element, "justifyItems", "justify-items", "last baseline center");
+ checkBadValues(element, "justifyItems", "justify-items", "baseline last");
+ checkBadValues(element, "justifyItems", "justify-items", "baseline first");
checkBadValues(element, "justifyItems", "justify-items", "stretch unsafe");
checkBadValues(element, "justifyItems", "justify-items", "stretch right");
checkBadValues(element, "justifyItems", "justify-items", "unsafe unsafe");
@@ -276,6 +302,8 @@
checkBadValues(element, "justifyItems", "justify-items", "legacy stretch");
checkBadValues(element, "justifyItems", "justify-items", "legacy");
checkBadValues(element, "justifyItems", "justify-items", "legacy left right");
+ checkBadValues(element, "justifyItems", "justify-items", "start safe");
+ checkBadValues(element, "justifyItems", "justify-items", "end unsafe");
}, "Test bad combinations of justify-items");
test(function() {
@@ -285,18 +313,18 @@
test(function() {
element.style.display = "grid";
- checkInitialValues(element, "justifyItems", "justify-items", "left safe", "normal");
+ checkInitialValues(element, "justifyItems", "justify-items", "safe left", "normal");
}, "Test the value 'initial' for grid containers");
test(function() {
element.style.display = "flex";
- checkInitialValues(element, "justifyItems", "justify-items", "right unsafe", "normal");
+ checkInitialValues(element, "justifyItems", "justify-items", "unsafe right", "normal");
}, "Test the value 'initial' for flex containers");
test(function() {
checkInheritValues("justifyItems", "justify-items", "end");
- checkInheritValues("justifyItems", "justify-items", "left safe");
- checkInheritValues("justifyItems", "justify-items", "legacy center");
+ checkInheritValues("justifyItems", "justify-items", "safe left");
+ checkInheritValues("justifyItems", "justify-items", "unsafe center");
}, "Test the value 'inherit'");
test(function() {
Modified: trunk/LayoutTests/fast/css/parse-justify-self.html (227296 => 227297)
--- trunk/LayoutTests/fast/css/parse-justify-self.html 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/LayoutTests/fast/css/parse-justify-self.html 2018-01-22 17:01:51 UTC (rev 227297)
@@ -56,36 +56,36 @@
justify-self: flex-end;
}
-#justifySelfEndUnsafe {
- justify-self: end unsafe;
+#justifySelfUnsafeEnd {
+ justify-self: unsafe end ;
}
-#justifySelfCenterUnsafe {
- justify-self: center unsafe;
+#justifySelfUnsafeCenter {
+ justify-self: unsafe center ;
}
-#justifySelfSelfEndSafe {
- justify-self: self-end safe;
+#justifySelfSafeSelfEnd {
+ justify-self: safe self-end;
}
-#justifySelfSelfStartSafe {
- justify-self: self-start safe;
+#justifySelfSafeSelfStart {
+ justify-self: safe self-start;
}
-#justifySelfRightSafe {
- justify-self: right safe;
+#justifySelfSafeRight {
+ justify-self: safe right;
}
-#justifySelfLeftUnsafe {
- justify-self: left unsafe;
+#justifySelfUnsafeLeft {
+ justify-self: unsafe left;
}
-#justifySelfFlexStartUnsafe {
- justify-self: flex-start unsafe;
+#justifySelfUnsafeFlexStart {
+ justify-self: unsafe flex-start;
}
-#justifySelfFlexEndSafe {
- justify-self: flex-end safe;
+#justifySelfSafeFlexEnd {
+ justify-self: safe flex-end;
}
</style>
<p>Test that setting and getting justify-self works as expected</p>
@@ -104,14 +104,14 @@
<div id="justifySelfFlexStart"></div>
<div id="justifySelfFlexEnd"></div>
-<div id="justifySelfEndUnsafe"></div>
-<div id="justifySelfCenterUnsafe"></div>
-<div id="justifySelfSelfEndSafe"></div>
-<div id="justifySelfSelfStartSafe"></div>
-<div id="justifySelfRightSafe"></div>
-<div id="justifySelfLeftUnsafe"></div>
-<div id="justifySelfFlexStartUnsafe"></div>
-<div id="justifySelfFlexEndSafe"></div>
+<div id="justifySelfUnsafeEnd"></div>
+<div id="justifySelfUnsafeCenter"></div>
+<div id="justifySelfSafeSelfEnd"></div>
+<div id="justifySelfSafeSelfStart"></div>
+<div id="justifySelfSafeRight"></div>
+<div id="justifySelfUnsafeLeft"></div>
+<div id="justifySelfUnsafeFlexStart"></div>
+<div id="justifySelfSafeFlexEnd"></div>
<script src=""
<script src=""
<script src=""
@@ -146,22 +146,22 @@
var justifySelfFlexEnd = document.getElementById("justifySelfFlexEnd");
checkValues(justifySelfFlexEnd, "justifySelf", "justify-self", "", "flex-end");
- var justifySelfEndUnsafe = document.getElementById("justifySelfEndUnsafe");
- checkValues(justifySelfEndUnsafe, "justifySelf", "justify-self", "", "end unsafe");
- var justifySelfCenterUnsafe = document.getElementById("justifySelfCenterUnsafe");
- checkValues(justifySelfCenterUnsafe, "justifySelf", "justify-self", "", "center unsafe");
- var justifySelfSelfEndSafe = document.getElementById("justifySelfSelfEndSafe");
- checkValues(justifySelfSelfEndSafe, "justifySelf", "justify-self", "", "self-end safe");
- var justifySelfSelfStartSafe = document.getElementById("justifySelfSelfStartSafe");
- checkValues(justifySelfSelfStartSafe, "justifySelf", "justify-self", "", "self-start safe");
- var justifySelfRightSafe = document.getElementById("justifySelfRightSafe");
- checkValues(justifySelfRightSafe, "justifySelf", "justify-self", "", "right safe");
- var justifySelfLeftUnsafe = document.getElementById("justifySelfLeftUnsafe");
- checkValues(justifySelfLeftUnsafe, "justifySelf", "justify-self", "", "left unsafe");
- var justifySelfFlexStartUnsafe = document.getElementById("justifySelfFlexStartUnsafe");
- checkValues(justifySelfFlexStartUnsafe, "justifySelf", "justify-self", "", "flex-start unsafe");
- var justifySelfFlexEndSafe = document.getElementById("justifySelfFlexEndSafe");
- checkValues(justifySelfFlexEndSafe, "justifySelf", "justify-self", "", "flex-end safe");
+ var justifySelfUnsafeEnd = document.getElementById("justifySelfUnsafeEnd");
+ checkValues(justifySelfUnsafeEnd, "justifySelf", "justify-self", "", "unsafe end");
+ var justifySelfUnsafeCenter = document.getElementById("justifySelfUnsafeCenter");
+ checkValues(justifySelfUnsafeCenter, "justifySelf", "justify-self", "", "unsafe center");
+ var justifySelfSafeSelfEnd = document.getElementById("justifySelfSafeSelfEnd");
+ checkValues(justifySelfSafeSelfEnd, "justifySelf", "justify-self", "", "safe self-end");
+ var justifySelfSafeSelfStart = document.getElementById("justifySelfSafeSelfStart");
+ checkValues(justifySelfSafeSelfStart, "justifySelf", "justify-self", "", "safe self-start");
+ var justifySelfSafeRight = document.getElementById("justifySelfSafeRight");
+ checkValues(justifySelfSafeRight, "justifySelf", "justify-self", "", "safe right");
+ var justifySelfUnsafeLeft = document.getElementById("justifySelfUnsafeLeft");
+ checkValues(justifySelfUnsafeLeft, "justifySelf", "justify-self", "", "unsafe left");
+ var justifySelfUnsafeFlexStart = document.getElementById("justifySelfUnsafeFlexStart");
+ checkValues(justifySelfUnsafeFlexStart, "justifySelf", "justify-self", "", "unsafe flex-start");
+ var justifySelfSafeFlexEnd = document.getElementById("justifySelfSafeFlexEnd");
+ checkValues(justifySelfSafeFlexEnd, "justifySelf", "justify-self", "", "safe flex-end");
}, "Test getting justify-self set through CSS.");
test(function() {
@@ -179,10 +179,10 @@
checkValues(element, "justifySelf", "justify-self", "center", "center");
element.style.justifySelf = "unsafe start";
- checkValues(element, "justifySelf", "justify-self", "start unsafe", "start unsafe");
+ checkValues(element, "justifySelf", "justify-self", "unsafe start", "unsafe start");
- element.style.justifySelf = "flex-end safe";
- checkValues(element, "justifySelf", "justify-self", "flex-end safe", "flex-end safe");
+ element.style.justifySelf = "safe flex-end";
+ checkValues(element, "justifySelf", "justify-self", "safe flex-end", "safe flex-end");
element.style.justifySelf = "right";
checkValues(element, "justifySelf", "justify-self", "right", "right");
@@ -222,7 +222,6 @@
container.appendChild(element);
document.body.appendChild(container);
- checkBadValues(element, "justifySelf", "justify-self", "unsafe auto");
checkBadValues(element, "justifySelf", "justify-self", "auto safe");
checkBadValues(element, "justifySelf", "justify-self", "auto left");
checkBadValues(element, "justifySelf", "justify-self", "normal unsafe");
@@ -230,6 +229,10 @@
checkBadValues(element, "justifySelf", "justify-self", "baseline normal");
checkBadValues(element, "justifySelf", "justify-self", "baseline safe");
checkBadValues(element, "justifySelf", "justify-self", "baseline center");
+ checkBadValues(element, "justifySelf", "justify-self", "first baseline center");
+ checkBadValues(element, "justifySelf", "justify-self", "last baseline center");
+ checkBadValues(element, "justifySelf", "justify-self", "baseline last");
+ checkBadValues(element, "justifySelf", "justify-self", "baseline first");
checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe");
checkBadValues(element, "justifySelf", "justify-self", "stretch right");
checkBadValues(element, "justifySelf", "justify-self", "unsafe unsafe");
@@ -249,6 +252,8 @@
checkBadValues(element, "justifySelf", "justify-self", "legacy stretch");
checkBadValues(element, "justifySelf", "justify-self", "legacy");
checkBadValues(element, "justifySelf", "justify-self", "legacy left right");
+ checkBadValues(element, "justifySelf", "justify-self", "start safe");
+ checkBadValues(element, "justifySelf", "justify-self", "end unsafe");
}, "Test bad combinations of justify-self");
test(function() {
@@ -258,12 +263,12 @@
test(function() {
container.style.display = "grid";
- checkInitialValues(element, "justifySelf", "justify-self", "left safe", "auto");
+ checkInitialValues(element, "justifySelf", "justify-self", "safe left", "auto");
}, "Test the value 'initial' for grid containers");
test(function() {
container.style.display = "flex";
- checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "auto");
+ checkInitialValues(element, "justifySelf", "justify-self", "unsafe right", "auto");
}, "Test the value 'initial' for flex containers");
test(function() {
@@ -286,7 +291,7 @@
test(function() {
checkInheritValues("justifySelf", "justify-self", "end");
- checkInheritValues("justifySelf", "justify-self", "left safe");
- checkInheritValues("justifySelf", "justify-self", "center unsafe");
+ checkInheritValues("justifySelf", "justify-self", "safe left");
+ checkInheritValues("justifySelf", "justify-self", "unsafe center");
}, "Test the value 'inherit'");
</script>
Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css (227296 => 227297)
--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css 2018-01-22 17:01:51 UTC (rev 227297)
@@ -13,10 +13,10 @@
.alignSelfSelfStart { align-self: self-start; }
.alignSelfSelfEnd { align-self: self-end; }
-.alignSelfCenterSafe { align-self: center safe; }
-.alignSelfCenterUnsafe { align-self: center unsafe; }
-.alignSelfEndSafe { align-self: end safe; }
-.alignSelfEndUnsafe { align-self: end unsafe; }
+.alignSelfCenterSafe { align-self: safe center; }
+.alignSelfCenterUnsafe { align-self: unsafe center; }
+.alignSelfEndSafe { align-self: safe end; }
+.alignSelfEndUnsafe { align-self: unsafe end; }
.alignSelfBaseline { align-self: baseline; }
@@ -26,11 +26,12 @@
.alignItemsStart { align-items: start; }
.alignItemsCenter { align-items: center; }
.alignItemsEnd { align-items: end; }
+.alignItemsBaseline { align-items: baseline; }
-.alignItemsCenterSafe { align-items: center safe; }
-.alignItemsCenterUnsafe { align-items: center unsafe; }
-.alignItemsEndSafe { align-items: end safe; }
-.alignItemsEndUnsafe { align-items: end unsafe; }
+.alignItemsCenterSafe { align-items: safe center; }
+.alignItemsCenterUnsafe { align-items: unsafe center; }
+.alignItemsEndSafe { align-items: safe end; }
+.alignItemsEndUnsafe { align-items: unsafe end; }
/* align-content */
.alignContentBaseline { align-content: baseline; }
@@ -62,9 +63,11 @@
.justifySelfSelfStart { justify-self: self-start; }
.justifySelfSelfEnd { justify-self: self-end; }
-.justifySelfCenterSafe { justify-self: center safe; }
-.justifySelfCenterUnsafe { justify-self: center unsafe; }
+.justifySelfCenterSafe { justify-self: safe center; }
+.justifySelfCenterUnsafe { justify-self: unsafe center; }
+.justifySelfBaseline { justify-self: baseline; }
+
/* justify-items */
.justifyItemsAuto { justify-items: auto; }
.justifyItemsStretch { justify-items: stretch; }
@@ -72,11 +75,13 @@
.justifyItemsCenter { justify-items: center; }
.justifyItemsEnd { justify-items: end; }
-.justifyItemsCenterSafe { justify-items: center safe; }
-.justifyItemsCenterUnsafe { justify-items: center unsafe; }
-.justifyItemsEndSafe { justify-items: end safe; }
-.justifyItemsEndUnsafe { justify-items: end unsafe; }
+.justifyItemsCenterSafe { justify-items: safe center; }
+.justifyItemsCenterUnsafe { justify-items: unsafe center; }
+.justifyItemsEndSafe { justify-items: safe end; }
+.justifyItemsEndUnsafe { justify-items: unsafe end; }
+.justifyItemsBaseline { justify-items: baseline; }
+
/* justify-content */
.justifyContentBaseline { justify-content: baseline; }
.justifyContentLastBaseline { justify-content: last-baseline; }
@@ -93,6 +98,16 @@
.justifyContentStretch { justify-content: stretch; }
/* Both align-items and justify-items */
+.itemsNormal {
+ align-items: normal;
+ justify-items: normal;
+}
+
+.itemsStretch {
+ align-items: stretch;
+ justify-items: stretch;
+}
+
.itemsStart {
align-items: start;
justify-items: start;
@@ -127,10 +142,9 @@
align-items: self-end;
justify-items: self-end;
}
-
-.selfBaseline {
- align-self: baseline;
- justify-self: baseline;
+.itemsBaseline {
+ align-items: baseline;
+ justify-items: baseline;
}
/* Both align-self and justify-self */
@@ -166,6 +180,10 @@
align-self: self-end;
justify-self: self-end;
}
+.selfBaseline {
+ align-self: baseline;
+ justify-self: baseline;
+}
/* Both align-content and justify-content */
.contentStart {
@@ -182,23 +200,23 @@
}
.contentCenterSafe {
- align-content: center safe;
- justify-content: center safe;
+ align-content: safe center;
+ justify-content: safe center;
}
.contentCenterUnsafe {
- align-content: center unsafe;
- justify-content: center unsafe;
+ align-content: unsafe center;
+ justify-content: unsafe center;
}
.contentEndSafe {
- align-content: end safe;
- justify-content: end safe;
+ align-content: safe end;
+ justify-content: safe end;
}
.contentEndUnsafe {
- align-content: end unsafe;
- justify-content: end unsafe;
+ align-content: unsafe end;
+ justify-content: unsafe end;
}
.contentSpaceBetween {
Modified: trunk/LayoutTests/fast/repaint/align-items-overflow-change.html (227296 => 227297)
--- trunk/LayoutTests/fast/repaint/align-items-overflow-change.html 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/LayoutTests/fast/repaint/align-items-overflow-change.html 2018-01-22 17:01:51 UTC (rev 227297)
@@ -2,7 +2,7 @@
<script src=""
<script>
function repaintTest() {
- document.getElementById('container').style.alignItems = 'end safe';
+ document.getElementById('container').style.alignItems = 'safe end';
}
_onload_ = runRepaintTest;
</script>
@@ -13,7 +13,7 @@
#container {
display: grid;
grid: 150px 150px / 200px;
- align-items: end unsafe;
+ align-items: unsafe end;
width: 200px;
height: 300px;
background-color: red;
Modified: trunk/LayoutTests/fast/repaint/align-self-overflow-change.html (227296 => 227297)
--- trunk/LayoutTests/fast/repaint/align-self-overflow-change.html 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/LayoutTests/fast/repaint/align-self-overflow-change.html 2018-01-22 17:01:51 UTC (rev 227297)
@@ -2,8 +2,8 @@
<script src=""
<script>
function repaintTest() {
- document.getElementsByClassName('item1')[0].style.alignSelf = 'end safe';
- document.getElementsByClassName('item2')[0].style.alignSelf = 'end safe';
+ document.getElementsByClassName('item1')[0].style.alignSelf = 'safe end';
+ document.getElementsByClassName('item2')[0].style.alignSelf = 'safe end';
}
_onload_ = runRepaintTest;
</script>
@@ -21,13 +21,13 @@
.item1 {
grid-row: 1;
grid-column: 1;
- align-self: end unsafe;
+ align-self: unsafe end;
background-color: green;
}
.item2 {
grid-row: 2;
grid-column: 1;
- align-self: end unsafe;
+ align-self: unsafe end;
background-color: green;
</style>
<p style="height: 20px">Tests invalidation on align-self style change (just overflow). Passes if there is no red.</p>
Modified: trunk/LayoutTests/fast/repaint/justify-items-overflow-change.html (227296 => 227297)
--- trunk/LayoutTests/fast/repaint/justify-items-overflow-change.html 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/LayoutTests/fast/repaint/justify-items-overflow-change.html 2018-01-22 17:01:51 UTC (rev 227297)
@@ -2,7 +2,7 @@
<script src=""
<script>
function repaintTest() {
- document.getElementById('container').style.justifyItems = 'end safe';
+ document.getElementById('container').style.justifyItems = 'safe end';
}
_onload_ = runRepaintTest;
</script>
@@ -13,7 +13,7 @@
#container {
display: grid;
grid: 300px / 100px 100px;
- justify-items: end unsafe;
+ justify-items: unsafe end;
width: 200px;
height: 300px;
background-color: red;
Modified: trunk/LayoutTests/fast/repaint/justify-self-overflow-change.html (227296 => 227297)
--- trunk/LayoutTests/fast/repaint/justify-self-overflow-change.html 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/LayoutTests/fast/repaint/justify-self-overflow-change.html 2018-01-22 17:01:51 UTC (rev 227297)
@@ -2,8 +2,8 @@
<script src=""
<script>
function repaintTest() {
- document.getElementsByClassName('item1')[0].style.justifySelf = 'end safe';
- document.getElementsByClassName('item2')[0].style.justifySelf = 'end safe';
+ document.getElementsByClassName('item1')[0].style.justifySelf = 'safe end';
+ document.getElementsByClassName('item2')[0].style.justifySelf = 'safe end';
}
_onload_ = runRepaintTest;
</script>
@@ -21,7 +21,7 @@
.item1 {
grid-row: 1;
grid-column: 1;
- justify-self: end unsafe;
+ justify-self: unsafe end;
background-color: green;
width: 150px;
}
@@ -29,7 +29,7 @@
grid-row: 1;
grid-column: 2;
background-color: green;
- justify-self: end unsafe;
+ justify-self: unsafe end;
width: 50px;
</style>
<p style="height: 20px">Tests invalidation on justify-self style change. Passes if there is no red.</p>
Modified: trunk/Source/WebCore/ChangeLog (227296 => 227297)
--- trunk/Source/WebCore/ChangeLog 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/Source/WebCore/ChangeLog 2018-01-22 17:01:51 UTC (rev 227297)
@@ -1,3 +1,52 @@
+2018-01-22 Javier Fernandez <jfernan...@igalia.com>
+
+ [css-align] 'overflow' keyword must precede the self-position and content-position value
+ https://bugs.webkit.org/show_bug.cgi?id=181793
+
+ Reviewed by Antti Koivisto.
+
+ There were several discussions to avoid ambiguities with the complex
+ values, specially when it comes to define the place-xxx shorthands.
+
+ One of the sources of problems is the 'overflow-position' keyword. The
+ CSS WG has decided to change the syntax of all the CSS Box Alignment
+ properties so that the 'overflow-position' keyword always precede the
+ 'self-position' or the 'content-position' keywords.
+
+ https://github.com/w3c/csswg-drafts/issues/1446#event-1125715434
+
+ In order to apply this change to the Content Distribution properties'
+ (align-content and justify-content) syntax I had to completely
+ re-implement their parsing function. Thanks to this I addressed also
+ the issue with the content-distribution fallback, which cannot be
+ specified explicitly now.
+
+ https://github.com/w3c/csswg-drafts/issues/1002#ref-commit-c38cac4
+
+ No new tests, just rebaselined the expected results of the test cases affected.
+
+ Despite the so many layout tests affected by this change, it's
+ unlikely that it might break any content in current web
+ sites. This patch changes the new CSS syntax, obviously backward
+ compatible, defined by the new CSS Box Alignment. The
+ 'overflow-position' keyword is only used by the layout models
+ implementing the new spec, so far only CSS Grid Layout.
+ Considering that CSS Grid has been shipped last year, it's unlikely
+ that many sites are using the new CSS values.
+
+ * css/CSSComputedStyleDeclaration.cpp:
+ (WebCore::valueForItemPositionWithOverflowAlignment):
+ (WebCore::valueForContentPositionAndDistributionWithOverflowAlignment):
+ * css/CSSContentDistributionValue.cpp:
+ (WebCore::CSSContentDistributionValue::customCSSText const):
+ * css/StyleBuilderConverter.h:
+ (WebCore::StyleBuilderConverter::convertSelfOrDefaultAlignmentData):
+ * css/parser/CSSPropertyParser.cpp:
+ (WebCore::consumeOverflowPositionKeyword):
+ (WebCore::consumeContentPositionKeyword):
+ (WebCore::consumeContentDistributionOverflowPosition):
+ (WebCore::consumeSelfPositionOverflowPosition):
+
2018-01-22 Chris Nardi <csnar...@gmail.com>
Parse calc() in CSS media queries
Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (227296 => 227297)
--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2018-01-22 17:01:51 UTC (rev 227297)
@@ -2521,10 +2521,11 @@
else if (data.position() == ItemPositionLastBaseline) {
result->append(cssValuePool.createIdentifierValue(CSSValueLast));
result->append(cssValuePool.createIdentifierValue(CSSValueBaseline));
- } else
+ } else {
+ if (data.position() >= ItemPositionCenter && data.overflow() != OverflowAlignmentDefault)
+ result->append(cssValuePool.createValue(data.overflow()));
result->append(cssValuePool.createValue(data.position()));
- if (data.position() >= ItemPositionCenter && data.overflow() != OverflowAlignmentDefault)
- result->append(cssValuePool.createValue(data.overflow()));
+ }
ASSERT(result->length() <= 2);
return result;
}
@@ -2552,12 +2553,12 @@
result->append(cssValuePool.createIdentifierValue(CSSValueBaseline));
break;
default:
+ // 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()));
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);
ASSERT(result->length() <= 3);
return result;
Modified: trunk/Source/WebCore/css/CSSContentDistributionValue.cpp (227296 => 227297)
--- trunk/Source/WebCore/css/CSSContentDistributionValue.cpp 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/Source/WebCore/css/CSSContentDistributionValue.cpp 2018-01-22 17:01:51 UTC (rev 227297)
@@ -51,11 +51,12 @@
CSSValueID preference = m_position == CSSValueFirstBaseline ? CSSValueFirst : CSSValueLast;
list->append(cssValuePool.createIdentifierValue(preference));
list->append(cssValuePool.createIdentifierValue(CSSValueBaseline));
- } else
+ } else {
+ if (m_overflow != CSSValueInvalid)
+ list->append(overflow());
list->append(position());
+ }
}
- if (m_overflow != CSSValueInvalid)
- list->append(overflow());
return list->customCSSText();
}
Modified: trunk/Source/WebCore/css/StyleBuilderConverter.h (227296 => 227297)
--- trunk/Source/WebCore/css/StyleBuilderConverter.h 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/Source/WebCore/css/StyleBuilderConverter.h 2018-01-22 17:01:51 UTC (rev 227297)
@@ -1360,8 +1360,8 @@
} else if (pairValue->first()->valueID() == CSSValueLast) {
alignmentData.setPosition(ItemPositionLastBaseline);
} else {
- alignmentData.setPosition(*pairValue->first());
- alignmentData.setOverflow(*pairValue->second());
+ alignmentData.setOverflow(*pairValue->first());
+ alignmentData.setPosition(*pairValue->second());
}
} else
alignmentData.setPosition(primitiveValue);
Modified: trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp (227296 => 227297)
--- trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp 2018-01-22 17:01:07 UTC (rev 227296)
+++ trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp 2018-01-22 17:01:51 UTC (rev 227297)
@@ -2667,6 +2667,17 @@
return identMatches<CSSValueFirst, CSSValueLast, CSSValueBaseline>(id);
}
+static RefPtr<CSSPrimitiveValue> consumeOverflowPositionKeyword(CSSParserTokenRange& range)
+{
+ return isOverflowKeyword(range.peek().id()) ? consumeIdent(range) : nullptr;
+}
+
+static RefPtr<CSSPrimitiveValue> consumeContentPositionKeyword(CSSParserTokenRange& range)
+{
+ return isContentPositionKeyword(range.peek().id()) ? consumeIdent(range) : nullptr;
+}
+
+
static CSSValueID getBaselineKeyword(RefPtr<CSSValue> value)
{
auto& primitiveValue = downcast<CSSPrimitiveValue>(*value);
@@ -2707,38 +2718,19 @@
return CSSContentDistributionValue::create(CSSValueInvalid, getBaselineKeyword(baseline), CSSValueInvalid);
}
- CSSValueID distribution = CSSValueInvalid;
- CSSValueID position = CSSValueInvalid;
- CSSValueID overflow = CSSValueInvalid;
- do {
- CSSValueID id = range.peek().id();
- if (isContentDistributionKeyword(id)) {
- if (distribution != CSSValueInvalid)
- return nullptr;
- distribution = id;
- } else if (isContentPositionKeyword(id)) {
- if (position != CSSValueInvalid)
- return nullptr;
- position = id;
- } else if (isOverflowKeyword(id)) {
- if (overflow != CSSValueInvalid)
- return nullptr;
- overflow = id;
- } else {
- return nullptr;
- }
+ if (isContentDistributionKeyword(id)) {
range.consumeIncludingWhitespace();
- } while (!range.atEnd());
+ return CSSContentDistributionValue::create(id, CSSValueInvalid, CSSValueInvalid);
+ }
- // The grammar states that we should have at least <content-distribution> or <content-position>.
- if (position == CSSValueInvalid && distribution == CSSValueInvalid)
+ RefPtr<CSSPrimitiveValue> overflow = consumeOverflowPositionKeyword(range);
+ RefPtr<CSSPrimitiveValue> position = consumeContentPositionKeyword(range);
+ if (!position)
return nullptr;
- // The grammar states that <overflow-position> must be associated to <content-position>.
- if (overflow != CSSValueInvalid && position == CSSValueInvalid)
- return nullptr;
-
- return CSSContentDistributionValue::create(distribution, position, overflow);
+ CSSValueID overflowId = overflow ? overflow->valueID() : CSSValueInvalid;
+ CSSValueID positionId = position->valueID();
+ return CSSContentDistributionValue::create(CSSValueInvalid, positionId, overflowId);
}
static RefPtr<CSSPrimitiveValue> consumeBorderImageRepeatKeyword(CSSParserTokenRange& range)
@@ -3109,14 +3101,12 @@
if (isBaselineKeyword(id))
return consumeBaselineKeyword(range);
- RefPtr<CSSPrimitiveValue> overflowPosition = consumeIdent<CSSValueUnsafe, CSSValueSafe>(range);
+ RefPtr<CSSPrimitiveValue> overflowPosition = consumeOverflowPositionKeyword(range);
RefPtr<CSSPrimitiveValue> selfPosition = consumeSelfPositionKeyword(range);
if (!selfPosition)
return nullptr;
- if (!overflowPosition)
- overflowPosition = consumeIdent<CSSValueUnsafe, CSSValueSafe>(range);
if (overflowPosition)
- return createPrimitiveValuePair(selfPosition.releaseNonNull(), overflowPosition.releaseNonNull(), Pair::IdenticalValueEncoding::Coalesce);
+ return createPrimitiveValuePair(overflowPosition.releaseNonNull(), selfPosition.releaseNonNull(), Pair::IdenticalValueEncoding::Coalesce);
return selfPosition;
}
