| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #placeItemsNormal { |
| place-items: normal; |
| } |
| #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; |
| } |
| #placeItemsCenterAuto { |
| place-items: center auto; |
| } |
| #placeItemsNone { |
| place-items: none; |
| } |
| #placeItemsSafe { |
| place-items: safe; |
| } |
| #placeItemsStartSafe { |
| place-items: start safe; |
| } |
| #placeItemsBaselineSafe { |
| place-items: baseline 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="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="placeItemsCenterAuto"></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(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 'auto' as incorrect value through CSS."); |
| |
| test(function() { |
| checkValues(placeItemsCenterAuto, "placeItems", "place-items", "", "normal normal"); |
| checkPlaceItemsValues(placeItemsCenterAuto, "", "normal", "normal"); |
| }, "Test setting 'center 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(placeItemsBaselineSafe, "placeItems", "place-items", "", "normal normal"); |
| checkPlaceItemsValues(placeItemsBaselineSafe, "", "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"); |
| checkPlaceItemsValuesBadJS("auto normal"); |
| checkPlaceItemsValuesBadJS("center auto"); |
| checkPlaceItemsValuesBadJS("legacy"); |
| checkPlaceItemsValuesBadJS("left legacy"); |
| checkPlaceItemsValuesBadJS("space-between"); |
| checkPlaceItemsValuesBadJS("center safe"); |
| checkPlaceItemsValuesBadJS("center self-start center"); |
| checkPlaceItemsValuesBadJS("asrt", "normal"); |
| checkPlaceItemsValuesBadJS("auto", "normal"); |
| checkPlaceItemsValuesBadJS("10px", "normal"); |
| checkPlaceItemsValuesBadJS("stretch safe"); |
| checkPlaceItemsValuesBadJS("self-start start end"); |
| checkPlaceItemsValuesBadJS(""); |
| }, "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> |
