| <!DOCTYPE html> |
| <style> |
| #alignItemsBaseline { |
| align-items: baseline; |
| } |
| |
| #alignItemsFirstBaseline { |
| align-items: first baseline; |
| } |
| |
| #alignItemsLastBaseline { |
| align-items: last baseline; |
| } |
| |
| #alignItemsStretch { |
| align-items: stretch; |
| } |
| |
| #alignItemsNormal { |
| align-items: normal; |
| } |
| |
| #alignItemsStart { |
| align-items: start; |
| } |
| |
| #alignItemsEnd { |
| align-items: end; |
| } |
| |
| #alignItemsCenter { |
| align-items: center; |
| } |
| |
| #alignItemsSelfStart { |
| align-items: self-start; |
| } |
| |
| #alignItemsSelfEnd { |
| align-items: self-end; |
| } |
| |
| #alignItemsFlexStart { |
| align-items: flex-start; |
| } |
| |
| #alignItemsFlexEnd { |
| align-items: flex-end; |
| } |
| |
| #alignItemsUnsafeEnd { |
| align-items: unsafe end ; |
| } |
| |
| #alignItemsUnsafeCenter { |
| align-items: unsafe center ; |
| } |
| |
| #alignItemsSafeSelfEnd { |
| align-items: safe self-end; |
| } |
| |
| #alignItemsSafeSelfStart { |
| align-items: safe self-start; |
| } |
| |
| #alignItemsUnsafeFlexStart { |
| align-items: unsafe flex-start; |
| } |
| |
| #alignItemsSafeFlexEnd { |
| align-items: safe flex-end; |
| } |
| </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="alignItemsNormal"></div> |
| <div id="alignItemsStart"></div> |
| <div id="alignItemsEnd"></div> |
| <div id="alignItemsCenter"></div> |
| <div id="alignItemsSelfStart"></div> |
| <div id="alignItemsSelfEnd"></div> |
| <div id="alignItemsFlexStart"></div> |
| <div id="alignItemsFlexEnd"></div> |
| |
| <div id="alignItemsUnsafeEnd"></div> |
| <div id="alignItemsUnsafeCenter"></div> |
| <div id="alignItemsSafeSelfEnd"></div> |
| <div id="alignItemsSafeSelfStart"></div> |
| <div id="alignItemsUnsafeFlexStart"></div> |
| <div id="alignItemsSafeFlexEnd"></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 alignItemsNormal = document.getElementById("alignItemsNormal"); |
| checkValues(alignItemsNormal, "alignItems", "align-items", "", "normal"); |
| 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 alignItemsFlexStart = document.getElementById("alignItemsFlexStart"); |
| checkValues(alignItemsFlexStart, "alignItems", "align-items", "", "flex-start"); |
| var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd"); |
| checkValues(alignItemsFlexEnd, "alignItems", "align-items", "", "flex-end"); |
| |
| var alignItemsUnsafeEnd = document.getElementById("alignItemsUnsafeEnd"); |
| checkValues(alignItemsUnsafeEnd, "alignItems", "align-items", "", "unsafe end"); |
| var alignItemsUnsafeCenter = document.getElementById("alignItemsUnsafeCenter"); |
| checkValues(alignItemsUnsafeCenter, "alignItems", "align-items", "", "unsafe center"); |
| var alignItemsSafeSelfEnd = document.getElementById("alignItemsSafeSelfEnd"); |
| checkValues(alignItemsSafeSelfEnd, "alignItems", "align-items", "", "safe self-end"); |
| var alignItemsSafeSelfStart = document.getElementById("alignItemsSafeSelfStart"); |
| checkValues(alignItemsSafeSelfStart, "alignItems", "align-items", "", "safe self-start"); |
| var alignItemsUnsafeFlexStart = document.getElementById("alignItemsUnsafeFlexStart"); |
| checkValues(alignItemsUnsafeFlexStart, "alignItems", "align-items", "", "unsafe flex-start"); |
| var alignItemsSafeFlexEnd = document.getElementById("alignItemsSafeFlexEnd"); |
| checkValues(alignItemsSafeFlexEnd, "alignItems", "align-items", "", "safe flex-end"); |
| }, "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", "unsafe start", "unsafe start"); |
| |
| element.style.alignItems = "safe flex-end"; |
| checkValues(element, "alignItems", "align-items", "safe flex-end", "safe flex-end"); |
| |
| 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"); |
| |
| element.style.alignItems = "normal"; |
| checkValues(element, "alignItems", "align-items", "normal", "normal"); |
| |
| // 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", "left"); |
| checkBadValues(element, "alignItems", "align-items", "right"); |
| 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", "safe left"); |
| checkBadValues(element, "alignItems", "align-items", "unsafe right"); |
| checkBadValues(element, "alignItems", "align-items", "unsafe normal"); |
| checkBadValues(element, "alignItems", "align-items", "normal stretch"); |
| checkBadValues(element, "alignItems", "align-items", "baseline normal"); |
| 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"); |
| checkBadValues(element, "alignItems", "align-items", "start safe"); |
| checkBadValues(element, "alignItems", "align-items", "end unsafe"); |
| }, "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", "safe start", "normal"); |
| }, "Test the value 'initial' for grid containers"); |
| |
| test(function() { |
| element.style.display = "flex"; |
| checkInitialValues(element, "alignItems", "align-items", "unsafe end", "normal"); |
| }, "Test the value 'initial' for flex containers"); |
| |
| test(function() { |
| checkInheritValues("alignItems", "align-items", "end"); |
| checkInheritValues("alignItems", "align-items", "safe start"); |
| checkInheritValues("alignItems", "align-items", "unsafe center"); |
| }, "Test the value 'inherit'"); |
| </script> |
