Index: third_party/WebKit/LayoutTests/fast/alignment/parse-place-items.html |
diff --git a/third_party/WebKit/LayoutTests/fast/alignment/parse-place-items.html b/third_party/WebKit/LayoutTests/fast/alignment/parse-place-items.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..407da5cc19f7f58c5d8e437f41e17b36e2720674 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/alignment/parse-place-items.html |
@@ -0,0 +1,260 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+<style> |
+#placeItemsNormal { |
+ place-items: normal; |
+} |
+#placeItemsCenterAuto { |
+ place-items: center auto; |
+} |
+#placeItemsBaseline { |
+ place-items: baseline; |
+} |
+#placeItemsFirstBaseline { |
+ place-items: first baseline; |
+} |
+#placeItemsLastBaseline { |
+ place-items: last baseline; |
+} |
+#placeItemsStart { |
+ place-items: start; |
+} |
+#placeItemsFlexStart { |
+ place-items: flex-start; |
+} |
+#placeItemsEnd { |
+ place-items: end; |
+} |
+#placeItemsSelfStart { |
+ place-items: self-start; |
+} |
+#placeItemsStretch { |
+ place-items: stretch; |
+} |
+#placeItemsStartEnd { |
+ place-items: start end; |
+} |
+#placeItemsStartSelfEnd { |
+ place-items: start self-end; |
+} |
+#placeItemsStartBaseline { |
+ place-items: start baseline; |
+} |
+ |
+<!-- Invalid CSS cases --> |
+#placeItemsEmpty { |
+ place-items:; |
+} |
+#placeItemsAuto { |
+ place-items: auto; |
+} |
+#placeItemsNone { |
+ place-items: none; |
+} |
+#placeItemsSafe { |
+ place-items: safe; |
+} |
+#placeItemsStartSafe { |
+ place-items: start safe; |
+} |
+#placeItemsStartEndLeft { |
+ place-items: start end left; |
+} |
+</style> |
+<script src="../../resources/testharness.js"></script> |
+<script src="../../resources/testharnessreport.js"></script> |
+<script src="resources/alignment-parsing-utils-th.js"></script> |
+</head> |
+<body> |
+ <p>Test to verify that the new place-items alignment shorthand is parsed as expected and correctly sets the longhand values.</p> |
+ <div id="log"></div> |
+ |
+ <div id="placeItemsNormal"></div> |
+ <div id="placeItemsCenterAuto"></div> |
+ <div id="placeItemsBaseline"></div> |
+ <div id="placeItemsFirstBaseline"></div> |
+ <div id="placeItemsLastBaseline"></div> |
+ <div id="placeItemsStart"></div> |
+ <div id="placeItemsFlexStart"></div> |
+ <div id="placeItemsEnd"></div> |
+ <div id="placeItemsSelfStart"></div> |
+ <div id="placeItemsStretch"></div> |
+ <div id="placeItemsStartEnd"></div> |
+ <div id="placeItemsStartSelfEnd"></div> |
+ <div id="placeItemsStartBaseline"></div> |
+ |
+ <div id="placeItemsEmpty"></div> |
+ <div id="placeItemsAuto"></div> |
+ <div id="placeItemsNone"></div> |
+ <div id="placeItemsSafe"></div> |
+ <div id="placeItemsStartSafe"></div> |
+ <div id="placeItemsBaselineSafe"></div> |
+ <div id="placeItemsStartEndLeft"></div> |
+<script> |
+function checkPlaceItemsValues(element, value, alignValue, justifyValue) { |
+ var res = value.split(" "); |
+ if (res.length < 2) |
+ res[1] = res[0]; |
+ checkValues(element, "alignItems", "align-items", res[0], alignValue); |
+ checkValues(element, "justifyItems", "justify-items", res[1], justifyValue); |
+} |
+ |
+function checkPlaceItemsValuesJS(value, alignValue, justifyValue) |
+{ |
+ element = document.createElement("div"); |
+ document.body.appendChild(element); |
+ element.style.placeItems = value; |
+ checkValues(element, "placeItems", "place-items", value, alignValue + ' ' + justifyValue) |
+ checkPlaceItemsValues(element, value, alignValue, justifyValue) |
+} |
+ |
+function checkPlaceItemsValuesBadJS(value) |
+{ |
+ element.style.placeItems = ""; |
+ element.style.placeItems = value; |
+ checkPlaceItemsValues(element, "", "normal", "normal") |
+} |
+ |
+test(function() { |
+ checkValues(placeItemsNormal, "placeItems", "place-items", "", "normal normal"); |
+ checkPlaceItemsValues(placeItemsNormal, "", "normal", "normal"); |
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'normal' value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsCenterAuto, "placeItems", "place-items", "", "center normal"); |
+ checkPlaceItemsValues(placeItemsCenterAuto, "", "center", "normal"); |
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'center auto' value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsBaseline, "placeItems", "place-items", "", "baseline baseline"); |
+ checkPlaceItemsValues(placeItemsBaseline, "", "baseline", "baseline"); |
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'baseline' value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsFirstBaseline, "placeItems", "place-items", "", "baseline baseline"); |
+ checkPlaceItemsValues(placeItemsFirstBaseline, "", "baseline", "baseline"); |
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'first baseline' value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsLastBaseline, "placeItems", "place-items", "", "last baseline last baseline"); |
+ checkPlaceItemsValues(placeItemsLastBaseline, "", "last baseline", "last baseline"); |
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'last baseline' value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsStart, "placeItems", "place-items", "", "start start"); |
+ checkPlaceItemsValues(placeItemsStart, "", "start", "start"); |
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'start' value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsFlexStart, "placeItems", "place-items", "", "flex-start flex-start"); |
+ checkPlaceItemsValues(placeItemsFlexStart, "", "flex-start", "flex-start"); |
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'flex-start' value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsEnd, "placeItems", "place-items", "", "end end"); |
+ checkPlaceItemsValues(placeItemsEnd, "", "end", "end"); |
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'end' value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsSelfStart, "placeItems", "place-items", "", "self-start self-start"); |
+ checkPlaceItemsValues(placeItemsSelfStart, "", "self-start", "self-start"); |
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'self-start' value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsStretch, "placeItems", "place-items", "", "stretch stretch"); |
+ checkPlaceItemsValues(placeItemsStretch, "", "stretch", "stretch"); |
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'stretch' value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsStartEnd, "placeItems", "place-items", "", "start end"); |
+ checkPlaceItemsValues(placeItemsStartEnd, "", "start", "end"); |
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'start end' value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsStartSelfEnd, "placeItems", "place-items", "", "start self-end"); |
+ checkPlaceItemsValues(placeItemsStartSelfEnd, "", "start", "self-end"); |
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'start self-end' value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsStartBaseline, "placeItems", "place-items", "", "start baseline"); |
+ checkPlaceItemsValues(placeItemsStartBaseline, "", "start", "baseline"); |
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'start baseline' value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsAuto, "placeItems", "place-items", "", "normal normal"); |
+ checkPlaceItemsValues(placeItemsAuto, "", "normal", "normal"); |
+}, "Test setting '' as incorrect value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsAuto, "placeItems", "place-items", "", "normal normal"); |
+ checkPlaceItemsValues(placeItemsAuto, "", "normal", "normal"); |
+}, "Test setting 'auto' as incorrect value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsNone, "placeItems", "place-items", "", "normal normal"); |
+ checkPlaceItemsValues(placeItemsNone, "", "normal", "normal"); |
+}, "Test setting 'none' as incorrect value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsSafe, "placeItems", "place-items", "", "normal normal"); |
+ checkPlaceItemsValues(placeItemsSafe, "", "normal", "normal"); |
+}, "Test setting 'safe' as incorrect value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsStartSafe, "placeItems", "place-items", "", "normal normal"); |
+ checkPlaceItemsValues(placeItemsStartSafe, "", "normal", "normal"); |
+}, "Test setting 'start safe' as incorrect value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsStartSafe, "placeItems", "place-items", "", "normal normal"); |
+ checkPlaceItemsValues(placeItemsStartSafe, "", "normal", "normal"); |
+}, "Test setting 'baseline safe' as incorrect value through CSS."); |
+ |
+test(function() { |
+ checkValues(placeItemsStartEndLeft, "placeItems", "place-items", "", "normal normal"); |
+ checkPlaceItemsValues(placeItemsStartEndLeft, "", "normal", "normal"); |
+}, "Test setting 'start end left' as incorrect value through CSS."); |
+ |
+test(function() { |
+ checkPlaceItemsValuesJS("center", "center", "center"); |
+ checkPlaceItemsValuesJS("center start", "center", "start"); |
+ checkPlaceItemsValuesJS("self-start end", "self-start", "end"); |
+ checkPlaceItemsValuesJS("normal end", "normal", "end"); |
+}, "Test setting values through JS."); |
+ |
+test(function() { |
+ checkPlaceItemsValuesBadJS("auto normal", "normal", "normal"); |
+ checkPlaceItemsValuesBadJS("space-between", "normal", "normal"); |
+ checkPlaceItemsValuesBadJS("center safe", "normal", "normal"); |
+ checkPlaceItemsValuesBadJS("center self-start center", "normal", "normal"); |
+ checkPlaceItemsValuesBadJS("asrt", "normal", "normal"); |
+ checkPlaceItemsValuesBadJS("auto", "normal", "normal"); |
+ checkPlaceItemsValuesBadJS("10px", "normal", "normal"); |
+ checkPlaceItemsValuesBadJS("stretch safe", "normal", "normal"); |
+ checkPlaceItemsValuesBadJS("self-start start end", "normal", "normal"); |
+ checkPlaceItemsValuesBadJS("", "normal", "normal"); |
+}, "Test setting incorrect values through JS."); |
+ |
+test(function() { |
+ element = document.createElement("div"); |
+ document.body.appendChild(element); |
+ checkValues(element, "placeItems", "place-items", "", "normal normal"); |
+ element.style.placeItems = "center"; |
+ checkPlaceItemsValues(element, "center", "center", "center"); |
+ element.style.placeItems = "initial"; |
+ checkValues(element, "placeItems", "place-items", "initial", "normal normal"); |
+ checkPlaceItemsValues(element, "initial", "normal", "normal"); |
+}, "Test the 'initial' value of the place-items shorthand and its longhand properties' Computed value"); |
+ |
+test(function() { |
+ document.body.style.placeItems = "start"; |
+ var anotherElement = document.createElement("div"); |
+ document.body.appendChild(anotherElement); |
+ checkPlaceItemsValues(anotherElement, "", "normal", "normal"); |
+ anotherElement.style.placeItems = "inherit"; |
+ checkPlaceItemsValues(anotherElement, "inherit", "start", "start"); |
+}, "Test the 'inherit' value of the place-items shorthand and its longhand properties' Computed value"); |
+</script> |
+</body> |
+</html> |