| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #placeContentNormal { |
| place-content: normal; |
| } |
| #placeContentStart { |
| place-content: start; |
| } |
| #placeContentFlexStart { |
| place-content: flex-start; |
| } |
| #placeContentEnd { |
| place-content: end; |
| } |
| #placeContentSpaceBetween { |
| place-content: space-between; |
| } |
| #placeContentStretch { |
| place-content: stretch; |
| } |
| #placeContentStartEnd { |
| place-content: start end; |
| } |
| #placeContentStartSpaceEvenly { |
| place-content: start space-evenly; |
| } |
| #placeContentBaselineStart { |
| place-content: baseline start; |
| } |
| |
| <!-- Invalid CSS cases --> |
| #placeContentEmpty { |
| place-content:; |
| } |
| #placeContentAuto { |
| place-content: auto; |
| } |
| #placeContentNone { |
| place-content: none; |
| } |
| #placeContentSafe { |
| place-content: safe; |
| } |
| #placeContentStartSafe { |
| place-content: start safe; |
| } |
| #placeContentBaselineSafe { |
| place-content: baseline safe; |
| } |
| #placeContentStartEndLeft { |
| place-content: start end left; |
| } |
| #placeContentBaseline { |
| place-content: baseline; |
| } |
| #placeContentStartBaseline { |
| place-content: start baseline; |
| } |
| </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-content alignment shorthand is parsed as expected and correctly sets the longhand values.</p> |
| <div id="log"></div> |
| |
| <div id="placeContentNormal"></div> |
| <div id="placeContentStart"></div> |
| <div id="placeContentFlexStart"></div> |
| <div id="placeContentEnd"></div> |
| <div id="placeContentSpaceBetween"></div> |
| <div id="placeContentStretch"></div> |
| <div id="placeContentStartEnd"></div> |
| <div id="placeContentStartSpaceEvenly"></div> |
| <div id="placeContentBaselineStart"></div> |
| |
| <div id="placeContentEmpty"></div> |
| <div id="placeContentAuto"></div> |
| <div id="placeContentNone"></div> |
| <div id="placeContentSafe"></div> |
| <div id="placeContentStartSafe"></div> |
| <div id="placeContentBaselineSafe"></div> |
| <div id="placeContentStartEndLeft"></div> |
| <div id="placeContentBaseline"></div> |
| <div id="placeContentStartBaseline"></div> |
| <script> |
| function checkPlaceContentValues(element, value, alignValue, justifyValue) |
| { |
| var res = value.split(" "); |
| if (res.length < 2) |
| res[1] = res[0]; |
| checkValues(element, "alignContent", "align-content", res[0], alignValue); |
| checkValues(element, "justifyContent", "justify-content", res[1], justifyValue); |
| } |
| |
| function checkPlaceContentValuesJS(value, alignValue, justifyValue) |
| { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.placeContent = value; |
| checkValues(element, "placeContent", "place-content", value, alignValue + ' ' + justifyValue) |
| checkPlaceContentValues(element, value, alignValue, justifyValue) |
| } |
| |
| function checkPlaceContentValuesBadJS(value) |
| { |
| element.style.placeContent = ""; |
| element.style.placeContent = value; |
| checkPlaceContentValues(element, "", "normal", "normal") |
| } |
| |
| function checkPlaceContentInitialValue() |
| { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| checkValues(element, "placeContent", "place-content", "", "normal normal"); |
| element.style.placeContent = "center"; |
| checkPlaceContentValues(element, "center", "center", "center"); |
| element.style.placeContent = "initial"; |
| checkValues(element, "placeContent", "place-content", "initial", "normal normal"); |
| checkPlaceContentValues(element, "initial", "normal", "normal"); |
| } |
| |
| function checkPlaceContentInheritValue() |
| { |
| document.body.style.placeContent = "start"; |
| var anotherElement = document.createElement("div"); |
| document.body.appendChild(anotherElement); |
| checkPlaceContentValues(anotherElement, "", "normal", "normal"); |
| anotherElement.style.placeContent = "inherit"; |
| checkPlaceContentValues(anotherElement, "inherit", "start", "start"); |
| } |
| |
| |
| test(function() { |
| checkValues(placeContentNormal, "placeContent", "place-content", "", "normal normal"); |
| checkPlaceContentValues(placeContentNormal, "", "normal", "normal"); |
| }, "Test getting the Computed Value of place-content's longhand properties when setting 'normal' value through CSS."); |
| |
| test(function() { |
| checkValues(placeContentStart, "placeContent", "place-content", "", "start start"); |
| checkPlaceContentValues(placeContentStart, "", "start", "start"); |
| }, "Test getting the Computed Value of place-content's longhand properties when setting 'start' value through CSS."); |
| |
| test(function() { |
| checkValues(placeContentFlexStart, "placeContent", "place-content", "", "flex-start flex-start"); |
| checkPlaceContentValues(placeContentFlexStart, "", "flex-start", "flex-start"); |
| }, "Test getting the Computed Value of place-content's longhand properties when setting 'flex-start' value through CSS."); |
| |
| test(function() { |
| checkValues(placeContentEnd, "placeContent", "place-content", "", "end end"); |
| checkPlaceContentValues(placeContentEnd, "", "end", "end"); |
| }, "Test getting the Computed Value of place-content's longhand properties when setting 'end' value through CSS."); |
| |
| test(function() { |
| checkValues(placeContentSpaceBetween, "placeContent", "place-content", "", "space-between space-between"); |
| checkPlaceContentValues(placeContentSpaceBetween, "", "space-between", "space-between"); |
| }, "Test getting the Computed Value of place-content's longhand properties when setting 'space-between' value through CSS."); |
| |
| test(function() { |
| checkValues(placeContentStretch, "placeContent", "place-content", "", "stretch stretch"); |
| checkPlaceContentValues(placeContentStretch, "", "stretch", "stretch"); |
| }, "Test getting the Computed Value of place-content's longhand properties when setting 'stretch' value through CSS."); |
| |
| test(function() { |
| checkValues(placeContentStartEnd, "placeContent", "place-content", "", "start end"); |
| checkPlaceContentValues(placeContentStartEnd, "", "start", "end"); |
| }, "Test getting the Computed Value of place-content's longhand properties when setting 'start end' value through CSS."); |
| |
| test(function() { |
| checkValues(placeContentStartSpaceEvenly, "placeContent", "place-content", "", "start space-evenly"); |
| checkPlaceContentValues(placeContentStartSpaceEvenly, "", "start", "space-evenly"); |
| }, "Test getting the Computed Value of place-content's longhand properties when setting 'start space-evenly' value through CSS."); |
| |
| test(function() { |
| checkValues(placeContentBaselineStart, "placeContent", "place-content", "", "baseline start"); |
| checkPlaceContentValues(placeContentBaselineStart, "", "baseline", "start"); |
| }, "Test getting the Computed Value of place-content's longhand properties when setting 'baseline start' value through CSS."); |
| |
| test(function() { |
| checkValues(placeContentAuto, "placeContent", "place-content", "", "normal normal"); |
| checkPlaceContentValues(placeContentAuto, "", "normal", "normal"); |
| }, "Test setting '' as incorrect value through CSS."); |
| |
| test(function() { |
| checkValues(placeContentAuto, "placeContent", "place-content", "", "normal normal"); |
| checkPlaceContentValues(placeContentAuto, "", "normal", "normal"); |
| }, "Test setting 'auto' as incorrect value through CSS."); |
| |
| test(function() { |
| checkValues(placeContentNone, "placeContent", "place-content", "", "normal normal"); |
| checkPlaceContentValues(placeContentNone, "", "normal", "normal"); |
| }, "Test setting 'none' as incorrect value through CSS."); |
| |
| test(function() { |
| checkValues(placeContentSafe, "placeContent", "place-content", "", "normal normal"); |
| checkPlaceContentValues(placeContentSafe, "", "normal", "normal"); |
| }, "Test setting 'safe' as incorrect value through CSS."); |
| |
| test(function() { |
| checkValues(placeContentStartSafe, "placeContent", "place-content", "", "normal normal"); |
| checkPlaceContentValues(placeContentStartSafe, "", "normal", "normal"); |
| }, "Test setting 'start safe' as incorrect value through CSS."); |
| |
| test(function() { |
| checkValues(placeContentBaseline, "placeContent", "place-content", "", "normal normal"); |
| checkPlaceContentValues(placeContentBaseline, "", "normal", "normal"); |
| }, "Test setting 'baseline' as incorrect value through CSS."); |
| |
| test(function() { |
| checkValues(placeContentBaselineSafe, "placeContent", "place-content", "", "normal normal"); |
| checkPlaceContentValues(placeContentBaselineSafe, "", "normal", "normal"); |
| }, "Test setting 'baseline safe' as incorrect value through CSS."); |
| |
| test(function() { |
| checkValues(placeContentStartBaseline, "placeContent", "place-content", "", "normal normal"); |
| checkPlaceContentValues(placeContentStartBaseline, "", "normal", "normal"); |
| }, "Test setting 'start baseline' as incorrect value through CSS."); |
| |
| test(function() { |
| checkValues(placeContentStartEndLeft, "placeContent", "place-content", "", "normal normal"); |
| checkPlaceContentValues(placeContentStartEndLeft, "", "normal", "normal"); |
| }, "Test setting 'start end left' as incorrect value through CSS."); |
| |
| test(function() { |
| checkPlaceContentValuesJS("center", "center", "center"); |
| checkPlaceContentValuesJS("center start", "center", "start"); |
| checkPlaceContentValuesJS("space-between end", "space-between", "end"); |
| checkPlaceContentValuesJS("normal end", "normal", "end"); |
| }, "Test setting values through JS."); |
| |
| test(function() { |
| checkPlaceContentValuesBadJS("center safe", "normal", "normal"); |
| checkPlaceContentValuesBadJS("center space-between center", "normal", "normal"); |
| checkPlaceContentValuesBadJS("asrt", "normal", "normal"); |
| checkPlaceContentValuesBadJS("auto", "normal", "normal"); |
| checkPlaceContentValuesBadJS("10px", "normal", "normal"); |
| checkPlaceContentValuesBadJS("stretch safe", "normal", "normal"); |
| checkPlaceContentValuesBadJS("space-between start end", "normal", "normal"); |
| checkPlaceContentValuesBadJS("", "normal", "normal"); |
| }, "Test setting incorrect values through JS."); |
| |
| test(function() { |
| checkPlaceContentInitialValue(); |
| }, "Test the 'initial' value of the place-content shorthand and its longhand properties' Computed value"); |
| |
| test(function() { |
| checkPlaceContentInheritValue(); |
| }, "Test the 'inherit' value of the place-content shorthand and its longhand properties' Computed value"); |
| |
| |
| </script> |
| </body> |
| </html> |
