| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #placeSelfNormal { |
| place-self: normal; |
| } |
| #placeSelfCenterAuto { |
| place-self: center auto; |
| } |
| #placeSelfBaseline { |
| place-self: baseline; |
| } |
| #placeSelfFirstBaseline { |
| place-self: first baseline; |
| } |
| #placeSelfLastBaseline { |
| place-self: last baseline; |
| } |
| #placeSelfStart { |
| place-self: start; |
| } |
| #placeSelfFlexStart { |
| place-self: flex-start; |
| } |
| #placeSelfEnd { |
| place-self: end; |
| } |
| #placeSelfSelfStart { |
| place-self: self-start; |
| } |
| #placeSelfStretch { |
| place-self: stretch; |
| } |
| #placeSelfStartEnd { |
| place-self: start end; |
| } |
| #placeSelfStartSelfEnd { |
| place-self: start self-end; |
| } |
| #placeSelfStartBaseline { |
| place-self: start baseline; |
| } |
| |
| <!-- Invalid CSS cases --> |
| #placeSelfEmpty { |
| place-self:; |
| } |
| #placeSelfAuto { |
| place-self: auto; |
| } |
| #placeSelfNone { |
| place-self: none; |
| } |
| #placeSelfSafe { |
| place-self: safe; |
| } |
| #placeSelfStartSafe { |
| place-self: start safe; |
| } |
| #placeSelfBaselineSafe { |
| place-self: baseline safe; |
| } |
| #placeSelfStartEndLeft { |
| place-self: 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-self alignment shorthand is parsed as expected and correctly sets the longhand values.</p> |
| <div id="log"></div> |
| |
| <div id="placeSelfNormal"></div> |
| <div id="placeSelfCenterAuto"></div> |
| <div id="placeSelfBaseline"></div> |
| <div id="placeSelfFirstBaseline"></div> |
| <div id="placeSelfLastBaseline"></div> |
| <div id="placeSelfStart"></div> |
| <div id="placeSelfFlexStart"></div> |
| <div id="placeSelfEnd"></div> |
| <div id="placeSelfSelfStart"></div> |
| <div id="placeSelfStretch"></div> |
| <div id="placeSelfStartEnd"></div> |
| <div id="placeSelfStartSelfEnd"></div> |
| <div id="placeSelfStartBaseline"></div> |
| |
| <div id="placeSelfEmpty"></div> |
| <div id="placeSelfAuto"></div> |
| <div id="placeSelfNone"></div> |
| <div id="placeSelfSafe"></div> |
| <div id="placeSelfStartSafe"></div> |
| <div id="placeSelfBaselineSafe"></div> |
| <div id="placeSelfStartEndLeft"></div> |
| <script> |
| function checkPlaceSelfValues(element, value, alignValue, justifyValue) { |
| var res = value.split(" "); |
| if (res.length < 2) |
| res[1] = res[0]; |
| checkValues(element, "alignSelf", "align-self", res[0], alignValue); |
| checkValues(element, "justifySelf", "justify-self", res[1], justifyValue); |
| } |
| |
| function checkPlaceSelfValuesJS(value, alignValue, justifyValue) |
| { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.placeSelf = value; |
| checkValues(element, "placeSelf", "place-self", value, alignValue + ' ' + justifyValue) |
| checkPlaceSelfValues(element, value, alignValue, justifyValue) |
| } |
| |
| function checkPlaceSelfValuesBadJS(value) |
| { |
| element.style.placeSelf = ""; |
| element.style.placeSelf = value; |
| checkPlaceSelfValues(element, "", "auto", "auto") |
| } |
| |
| test(function() { |
| checkValues(placeSelfNormal, "placeSelf", "place-self", "", "normal normal"); |
| checkPlaceSelfValues(placeSelfNormal, "", "normal", "normal"); |
| }, "Test getting the Computed Value of place-self's longhand properties when setting 'normal' value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfCenterAuto, "placeSelf", "place-self", "", "center auto"); |
| checkPlaceSelfValues(placeSelfCenterAuto, "", "center", "auto"); |
| }, "Test getting the Computed Value of place-self's longhand properties when setting 'center auto' value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfBaseline, "placeSelf", "place-self", "", "baseline baseline"); |
| checkPlaceSelfValues(placeSelfBaseline, "", "baseline", "baseline"); |
| }, "Test getting the Computed Value of place-self's longhand properties when setting 'baseline' value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfFirstBaseline, "placeSelf", "place-self", "", "baseline baseline"); |
| checkPlaceSelfValues(placeSelfFirstBaseline, "", "baseline", "baseline"); |
| }, "Test getting the Computed Value of place-self's longhand properties when setting 'first baseline' value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfLastBaseline, "placeSelf", "place-self", "", "last baseline last baseline"); |
| checkPlaceSelfValues(placeSelfLastBaseline, "", "last baseline", "last baseline"); |
| }, "Test getting the Computed Value of place-self's longhand properties when setting 'last baseline' value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfStart, "placeSelf", "place-self", "", "start start"); |
| checkPlaceSelfValues(placeSelfStart, "", "start", "start"); |
| }, "Test getting the Computed Value of place-self's longhand properties when setting 'start' value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfFlexStart, "placeSelf", "place-self", "", "flex-start flex-start"); |
| checkPlaceSelfValues(placeSelfFlexStart, "", "flex-start", "flex-start"); |
| }, "Test getting the Computed Value of place-self's longhand properties when setting 'flex-start' value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfEnd, "placeSelf", "place-self", "", "end end"); |
| checkPlaceSelfValues(placeSelfEnd, "", "end", "end"); |
| }, "Test getting the Computed Value of place-self's longhand properties when setting 'end' value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfSelfStart, "placeSelf", "place-self", "", "self-start self-start"); |
| checkPlaceSelfValues(placeSelfSelfStart, "", "self-start", "self-start"); |
| }, "Test getting the Computed Value of place-self's longhand properties when setting 'self-start' value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfStretch, "placeSelf", "place-self", "", "stretch stretch"); |
| checkPlaceSelfValues(placeSelfStretch, "", "stretch", "stretch"); |
| }, "Test getting the Computed Value of place-self's longhand properties when setting 'stretch' value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfStartEnd, "placeSelf", "place-self", "", "start end"); |
| checkPlaceSelfValues(placeSelfStartEnd, "", "start", "end"); |
| }, "Test getting the Computed Value of place-self's longhand properties when setting 'start end' value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfStartSelfEnd, "placeSelf", "place-self", "", "start self-end"); |
| checkPlaceSelfValues(placeSelfStartSelfEnd, "", "start", "self-end"); |
| }, "Test getting the Computed Value of place-self's longhand properties when setting 'start self-end' value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfStartBaseline, "placeSelf", "place-self", "", "start baseline"); |
| checkPlaceSelfValues(placeSelfStartBaseline, "", "start", "baseline"); |
| }, "Test getting the Computed Value of place-self's longhand properties when setting 'start baseline' value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfEmpty, "placeSelf", "place-self", "", "auto auto"); |
| checkPlaceSelfValues(placeSelfEmpty, "", "auto", "auto"); |
| }, "Test setting '' as incorrect value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfAuto, "placeSelf", "place-self", "", "auto auto"); |
| checkPlaceSelfValues(placeSelfAuto, "", "auto", "auto"); |
| }, "Test setting 'auto' as incorrect value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfNone, "placeSelf", "place-self", "", "auto auto"); |
| checkPlaceSelfValues(placeSelfNone, "", "auto", "auto"); |
| }, "Test setting 'none' as incorrect value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfSafe, "placeSelf", "place-self", "", "auto auto"); |
| checkPlaceSelfValues(placeSelfSafe, "", "auto", "auto"); |
| }, "Test setting 'safe' as incorrect value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfStartSafe, "placeSelf", "place-self", "", "auto auto"); |
| checkPlaceSelfValues(placeSelfStartSafe, "", "auto", "auto"); |
| }, "Test setting 'start safe' as incorrect value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfBaselineSafe, "placeSelf", "place-self", "", "auto auto"); |
| checkPlaceSelfValues(placeSelfBaselineSafe, "", "auto", "auto"); |
| }, "Test setting 'baseline safe' as incorrect value through CSS."); |
| |
| test(function() { |
| checkValues(placeSelfStartEndLeft, "placeSelf", "place-self", "", "auto auto"); |
| checkPlaceSelfValues(placeSelfStartEndLeft, "", "auto", "auto"); |
| }, "Test setting 'start end left' as incorrect value through CSS."); |
| |
| test(function() { |
| checkPlaceSelfValuesJS("center", "center", "center"); |
| checkPlaceSelfValuesJS("center start", "center", "start"); |
| checkPlaceSelfValuesJS("self-start end", "self-start", "end"); |
| checkPlaceSelfValuesJS("normal end", "normal", "end"); |
| checkPlaceSelfValuesJS("auto right", "auto", "right"); |
| }, "Test setting values through JS."); |
| |
| test(function() { |
| checkPlaceSelfValuesBadJS("space-between"); |
| checkPlaceSelfValuesBadJS("center safe"); |
| checkPlaceSelfValuesBadJS("center self-start center"); |
| checkPlaceSelfValuesBadJS("asrt"); |
| checkPlaceSelfValuesBadJS("10px"); |
| checkPlaceSelfValuesBadJS("stretch safe"); |
| checkPlaceSelfValuesBadJS("self-start start end"); |
| checkPlaceSelfValuesBadJS(""); |
| }, "Test setting incorrect values through JS."); |
| |
| test(function() { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| checkValues(element, "placeSelf", "place-self", "", "auto auto"); |
| element.style.placeSelf = "center"; |
| checkPlaceSelfValues(element, "center", "center", "center"); |
| element.style.placeSelf = "initial"; |
| checkValues(element, "placeSelf", "place-self", "initial", "auto auto"); |
| checkPlaceSelfValues(element, "initial", "auto", "auto"); |
| }, "Test the 'initial' value of the place-self shorthand and its longhand properties' Computed value"); |
| |
| test(function() { |
| document.body.style.placeSelf = "start"; |
| var anotherElement = document.createElement("div"); |
| document.body.appendChild(anotherElement); |
| checkPlaceSelfValues(anotherElement, "", "auto", "auto"); |
| anotherElement.style.placeSelf = "inherit"; |
| checkPlaceSelfValues(anotherElement, "inherit", "start", "start"); |
| }, "Test the 'inherit' value of the place-self shorthand and its longhand properties' Computed value"); |
| </script> |
| </body> |
| </html> |
