| <!DOCTYPE html> |
| <style> |
| #alignItemsBaseline { |
| align-items: baseline; |
| } |
| |
| #alignItemsFirstBaseline { |
| align-items: first baseline; |
| } |
| |
| #alignItemsLastBaseline { |
| align-items: last baseline; |
| } |
| |
| #alignItemsStretch { |
| align-items: stretch; |
| } |
| |
| #alignItemsStart { |
| align-items: start; |
| } |
| |
| #alignItemsEnd { |
| align-items: end; |
| } |
| |
| #alignItemsCenter { |
| align-items: center; |
| } |
| |
| #alignItemsSelfStart { |
| align-items: self-start; |
| } |
| |
| #alignItemsSelfEnd { |
| align-items: self-end; |
| } |
| |
| #alignItemsLeft { |
| align-items: left; |
| } |
| |
| #alignItemsRight { |
| align-items: right; |
| } |
| |
| #alignItemsFlexStart { |
| align-items: flex-start; |
| } |
| |
| #alignItemsFlexEnd { |
| align-items: flex-end; |
| } |
| |
| #alignItemsEndUnsafe { |
| align-items: end unsafe; |
| } |
| |
| #alignItemsCenterUnsafe { |
| align-items: center unsafe; |
| } |
| |
| #alignItemsSelfEndSafe { |
| align-items: self-end safe; |
| } |
| |
| #alignItemsSelfStartSafe { |
| align-items: self-start safe; |
| } |
| |
| #alignItemsRightSafe { |
| align-items: right safe; |
| } |
| |
| #alignItemsLeftUnsafe { |
| align-items: left unsafe; |
| } |
| |
| #alignItemsFlexStartUnsafe { |
| align-items: flex-start unsafe; |
| } |
| |
| #alignItemsFlexEndSafe { |
| align-items: flex-end safe; |
| } |
| </style> |
| <p>Test that setting and getting align-items works as expected</p> |
| <div id="alignItemsBaseline"></div> |
| <div id="alignItemsFirstBaseline"></div> |
| <div id="alignItemsLastBaseline"></div> |
| <div id="alignItemsStretch"></div> |
| <div id="alignItemsStart"></div> |
| <div id="alignItemsEnd"></div> |
| <div id="alignItemsCenter"></div> |
| <div id="alignItemsSelfStart"></div> |
| <div id="alignItemsSelfEnd"></div> |
| <div id="alignItemsLeft"></div> |
| <div id="alignItemsRight"></div> |
| <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> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="resources/alignment-parsing-utils-th.js"></script> |
| <script> |
| test(function() { |
| var alignItemsBaseline = document.getElementById("alignItemsBaseline"); |
| checkValues(alignItemsBaseline, "alignItems", "align-items", "", "baseline"); |
| var alignItemsFirstBaseline = document.getElementById("alignItemsFirstBaseline"); |
| checkValues(alignItemsFirstBaseline, "alignItems", "align-items", "", "baseline"); |
| var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline"); |
| checkValues(alignItemsLastBaseline, "alignItems", "align-items", "", "last baseline"); |
| var alignItemsStretch = document.getElementById("alignItemsStretch"); |
| checkValues(alignItemsStretch, "alignItems", "align-items", "", "stretch"); |
| var alignItemsStart = document.getElementById("alignItemsStart"); |
| checkValues(alignItemsStart, "alignItems", "align-items", "", "start"); |
| var alignItemsEnd = document.getElementById("alignItemsEnd"); |
| checkValues(alignItemsEnd, "alignItems", "align-items", "", "end"); |
| var alignItemsCenter = document.getElementById("alignItemsCenter"); |
| checkValues(alignItemsCenter, "alignItems", "align-items", "", "center"); |
| var alignItemsSelfEnd = document.getElementById("alignItemsSelfEnd"); |
| checkValues(alignItemsSelfEnd, "alignItems", "align-items", "", "self-end"); |
| var alignItemsSelfStart = document.getElementById("alignItemsSelfStart"); |
| checkValues(alignItemsSelfStart, "alignItems", "align-items", "", "self-start"); |
| var alignItemsLeft = document.getElementById("alignItemsLeft"); |
| checkValues(alignItemsLeft, "alignItems", "align-items", "", "left"); |
| var alignItemsRight = document.getElementById("alignItemsRight"); |
| checkValues(alignItemsRight, "alignItems", "align-items", "", "right"); |
| var alignItemsFlexStart = document.getElementById("alignItemsFlexStart"); |
| checkValues(alignItemsFlexStart, "alignItems", "align-items", "", "flex-start"); |
| 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"); |
| }, "Test getting align-items set through CSS."); |
| |
| test(function() { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| checkValues(element, "alignItems", "align-items", "", "normal"); |
| }, "Test initial value of align-items through JS"); |
| |
| test(function() { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.alignItems = "center"; |
| checkValues(element, "alignItems", "align-items", "center", "center"); |
| |
| element.style.alignItems = "unsafe start"; |
| checkValues(element, "alignItems", "align-items", "start unsafe", "start unsafe"); |
| |
| element.style.alignItems = "flex-end safe"; |
| checkValues(element, "alignItems", "align-items", "flex-end safe", "flex-end safe"); |
| |
| element.style.alignItems = "right"; |
| checkValues(element, "alignItems", "align-items", "right", "right"); |
| |
| element.style.alignItems = "center"; |
| checkValues(element, "alignItems", "align-items", "center", "center"); |
| |
| element.style.alignItems = "self-start"; |
| checkValues(element, "alignItems", "align-items", "self-start", "self-start"); |
| |
| // The 'auto' value is not valid for the align-items property. |
| element.style.alignItems = ""; |
| element.style.alignItems = "auto"; |
| checkValues(element, "alignItems", "align-items", "", "normal"); |
| |
| element.style.display = "flex"; |
| element.style.alignItems = "auto"; |
| checkValues(element, "alignItems", "align-items", "", "normal"); |
| |
| element.style.display = "grid"; |
| element.style.alignItems = "auto"; |
| checkValues(element, "alignItems", "align-items", "", "normal"); |
| |
| element.style.alignItems = "self-end"; |
| checkValues(element, "alignItems", "align-items", "self-end", "self-end"); |
| }, "Test getting and setting align-items through JS"); |
| |
| test(function() { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| |
| checkBadValues(element, "alignItems", "align-items", "auto"); |
| 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", "baseline safe"); |
| checkBadValues(element, "alignItems", "align-items", "baseline center"); |
| checkBadValues(element, "alignItems", "align-items", "first baseline center"); |
| checkBadValues(element, "alignItems", "align-items", "last baseline center"); |
| checkBadValues(element, "alignItems", "align-items", "baseline last"); |
| checkBadValues(element, "alignItems", "align-items", "baseline first"); |
| checkBadValues(element, "alignItems", "align-items", "stretch unsafe"); |
| checkBadValues(element, "alignItems", "align-items", "stretch right"); |
| checkBadValues(element, "alignItems", "align-items", "unsafe unsafe"); |
| checkBadValues(element, "alignItems", "align-items", "unsafe safe"); |
| checkBadValues(element, "alignItems", "align-items", "center start"); |
| checkBadValues(element, "alignItems", "align-items", "stretch unsafe"); |
| checkBadValues(element, "alignItems", "align-items", "safe stretch"); |
| checkBadValues(element, "alignItems", "align-items", "baseline safe"); |
| checkBadValues(element, "alignItems", "align-items", "unsafe baseline"); |
| checkBadValues(element, "alignItems", "align-items", "unsafe safe left"); |
| checkBadValues(element, "alignItems", "align-items", "unsafe left safe"); |
| checkBadValues(element, "alignItems", "align-items", "left safe unsafe safe"); |
| checkBadValues(element, "alignItems", "align-items", "legacy start"); |
| checkBadValues(element, "alignItems", "align-items", "legacy end"); |
| checkBadValues(element, "alignItems", "align-items", "legacy right unsafe"); |
| checkBadValues(element, "alignItems", "align-items", "legacy auto"); |
| checkBadValues(element, "alignItems", "align-items", "legacy stretch"); |
| checkBadValues(element, "alignItems", "align-items", "legacy"); |
| checkBadValues(element, "alignItems", "align-items", "legacy left right"); |
| }, "Test bad combinations of align-items"); |
| |
| test(function() { |
| element.style.display = ""; |
| checkInitialValues(element, "alignItems", "align-items", "center", "normal"); |
| }, "Test the value 'initial'"); |
| |
| test(function() { |
| element.style.display = "grid"; |
| checkInitialValues(element, "alignItems", "align-items", "left safe", "normal"); |
| }, "Test the value 'initial' for grid containers"); |
| |
| test(function() { |
| element.style.display = "flex"; |
| checkInitialValues(element, "alignItems", "align-items", "right unsafe", "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"); |
| }, "Test the value 'inherit'"); |
| </script> |