| <!DOCTYPE html> |
| <style> |
| #alignContentAuto { |
| align-content: auto; |
| } |
| |
| #alignContentBaseline { |
| align-content: baseline; |
| } |
| |
| #alignContentFirstBaseline { |
| align-content: first baseline; |
| } |
| |
| #alignContentLastBaseline { |
| align-content: last baseline; |
| } |
| |
| #alignContentSpaceBetween { |
| align-content: space-between; |
| } |
| |
| #alignContentSpaceAround { |
| align-content: space-around; |
| } |
| |
| #alignContentSpaceEvenly { |
| align-content: space-evenly; |
| } |
| |
| #alignContentStretch { |
| align-content: stretch; |
| } |
| |
| #alignContentStart { |
| align-content: start; |
| } |
| |
| #alignContentEnd { |
| align-content: end; |
| } |
| |
| #alignContentCenter { |
| align-content: center; |
| } |
| |
| |
| #alignContentFlexStart { |
| align-content: flex-start; |
| } |
| |
| #alignContentFlexEnd { |
| align-content: flex-end; |
| } |
| |
| #alignContentUnsafeEnd { |
| align-content: unsafe end ; |
| } |
| |
| #alignContentUnsafeCenter { |
| align-content: unsafe center ; |
| } |
| |
| #alignContentUnsafeFlexStart { |
| align-content: unsafe flex-start; |
| } |
| |
| #alignContentSafeFlexEnd { |
| align-content: safe flex-end; |
| } |
| |
| <!-- Invalid CSS cases --> |
| #alignContentSpaceBetweenLeft { |
| align-content: space-between left; |
| } |
| |
| #alignContentSpaceAroundCenter { |
| align-content: space-around center; |
| } |
| |
| #alignContentSpaceEvenlyRight { |
| align-content: space-evenly right; |
| } |
| |
| #alignContentStretchStartSafe { |
| align-content: stretch start safe; |
| } |
| |
| #alignContentSpaceAroundEndUnsafe { |
| align-content: space-around end unsafe; |
| } |
| |
| #alignContentSpaceEvenlyFlexStartSafe { |
| align-content: space-evenly flex-start safe; |
| } |
| |
| #alignContentSpaceBetweenSafe { |
| align-content: space-between safe; |
| } |
| |
| #alignContentSpaceBetweenStretch { |
| align-content: space-between stretch; |
| } |
| |
| #alignContentSafe { |
| align-content: safe; |
| } |
| |
| #alignContentRightSafeUnsafe { |
| align-content: right safe unsafe; |
| } |
| |
| #alignContentCenterLeft { |
| align-content: center left; |
| } |
| </style> |
| <p>Test that setting and getting align-content works as expected</p> |
| <div id="alignContentAuto"></div> |
| <div id="alignContentBaseline"></div> |
| <div id="alignContentFirstBaseline"></div> |
| <div id="alignContentLastBaseline"></div> |
| <div id="alignContentSpaceBetween"></div> |
| <div id="alignContentSpaceAround"></div> |
| <div id="alignContentSpaceEvenly"></div> |
| <div id="alignContentStretch"></div> |
| <div id="alignContentStart"></div> |
| <div id="alignContentEnd"></div> |
| <div id="alignContentCenter"></div> |
| <div id="alignContentFlexStart"></div> |
| <div id="alignContentFlexEnd"></div> |
| <div id="alignContentUnsafeEnd"></div> |
| <div id="alignContentUnsafeCenter"></div> |
| <div id="alignContentSafeSelfEnd"></div> |
| <div id="alignContentSafeSelfStart"></div> |
| <div id="alignContentUnsafeFlexStart"></div> |
| <div id="alignContentSafeFlexEnd"></div> |
| <div id="alignContentEndUnsafe"></div> |
| <div id="alignContentCenterUnsafe"></div> |
| <div id="alignContentFlexStartUnsafe"></div> |
| <div id="alignContentFlexEndSafe"></div> |
| |
| <div id="alignContentSpaceBetweenLeft"></div> |
| <div id="alignContentSpaceAroundCenter"></div> |
| <div id="alignContentSpaceEvenlyRight"></div> |
| <div id="alignContentStretchStartSafe"></div> |
| <div id="alignContentSpaceAroundEndUnsafe"></div> |
| <div id="alignContentSpaceEvenlyFlexStartSafe"></div> |
| <div id="alignContentSpaceBetweenSafe"></div> |
| <div id="alignContentSpaceBetweenStretch"></div> |
| <div id="alignContentSafe"></div> |
| <div id="alignContentRightSafeUnsafe"></div> |
| <div id="alignContentCenterLeft"></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 alignContentAuto = document.getElementById("alignContentAuto"); |
| checkValues(alignContentAuto, "alignContent", "align-content", "", "normal"); |
| var alignContentBaseline = document.getElementById("alignContentBaseline"); |
| checkValues(alignContentBaseline, "alignContent", "align-content", "", "baseline"); |
| var alignContentLastBaseline = document.getElementById("alignContentFirstBaseline"); |
| checkValues(alignContentLastBaseline, "alignContent", "align-content", "", "baseline"); |
| var alignContentLastBaseline = document.getElementById("alignContentLastBaseline"); |
| checkValues(alignContentLastBaseline, "alignContent", "align-content", "", "last baseline"); |
| var alignContentSpaceBetween = document.getElementById("alignContentSpaceBetween"); |
| checkValues(alignContentSpaceBetween, "alignContent", "align-content", "", "space-between"); |
| var alignContentSpaceAround = document.getElementById("alignContentSpaceAround"); |
| checkValues(alignContentSpaceAround, "alignContent", "align-content", "", "space-around"); |
| var alignContentSpaceEvenly = document.getElementById("alignContentSpaceEvenly"); |
| checkValues(alignContentSpaceEvenly, "alignContent", "align-content", "", "space-evenly"); |
| var alignContentStretch = document.getElementById("alignContentStretch"); |
| checkValues(alignContentStretch, "alignContent", "align-content", "", "stretch"); |
| var alignContentStart = document.getElementById("alignContentStart"); |
| checkValues(alignContentStart, "alignContent", "align-content", "", "start"); |
| var alignContentEnd = document.getElementById("alignContentEnd"); |
| checkValues(alignContentEnd, "alignContent", "align-content", "", "end"); |
| var alignContentCenter = document.getElementById("alignContentCenter"); |
| checkValues(alignContentCenter, "alignContent", "align-content", "", "center"); |
| var alignContentFlexStart = document.getElementById("alignContentFlexStart"); |
| checkValues(alignContentFlexStart, "alignContent", "align-content", "", "flex-start"); |
| var alignContentFlexEnd = document.getElementById("alignContentFlexEnd"); |
| checkValues(alignContentFlexEnd, "alignContent", "align-content", "", "flex-end"); |
| var alignContentUnsafeEnd = document.getElementById("alignContentUnsafeEnd"); |
| checkValues(alignContentUnsafeEnd, "alignContent", "align-content", "", "unsafe end"); |
| var alignContentUnsafeCenter = document.getElementById("alignContentUnsafeCenter"); |
| checkValues(alignContentUnsafeCenter, "alignContent", "align-content", "", "unsafe center"); |
| var alignContentUnsafeFlexStart = document.getElementById("alignContentUnsafeFlexStart"); |
| checkValues(alignContentUnsafeFlexStart, "alignContent", "align-content", "", "unsafe flex-start"); |
| var alignContentSafeFlexEnd = document.getElementById("alignContentSafeFlexEnd"); |
| checkValues(alignContentSafeFlexEnd, "alignContent", "align-content", "", "safe flex-end"); |
| }, "Test getting align-content values previously set through CSS."); |
| |
| test(function() { |
| var alignContentEndUnsafe = document.getElementById("alignContentEndUnsafe"); |
| checkValues(alignContentEndUnsafe, "alignContent", "align-content", "", "normal"); |
| var alignContentCenterUnsafe = document.getElementById("alignContentCenterUnsafe"); |
| checkValues(alignContentCenterUnsafe, "alignContent", "align-content", "", "normal"); |
| var alignContentFlexStartUnsafe = document.getElementById("alignContentFlexStartUnsafe"); |
| checkValues(alignContentFlexStartUnsafe, "alignContent", "align-content", "", "normal"); |
| var alignContentFlexEndSafe = document.getElementById("alignContentFlexEndSafe"); |
| checkValues(alignContentFlexEndSafe, "alignContent", "align-content", "", "normal"); |
| var alignContentSpaceBetweenLeft = document.getElementById("alignContentSpaceBetweenLeft"); |
| checkValues(alignContentSpaceBetweenLeft, "alignContent", "align-content", "", "normal"); |
| var alignContentSpaceAroundCenter = document.getElementById("alignContentSpaceAroundCenter"); |
| checkValues(alignContentSpaceAroundCenter, "alignContent", "align-content", "", "normal"); |
| var alignContentSpaceEvenlyRight = document.getElementById("alignContentSpaceEvenlyRight"); |
| checkValues(alignContentSpaceEvenlyRight, "alignContent", "align-content", "", "normal"); |
| var alignContentStretchStartSafe = document.getElementById("alignContentStretchStartSafe"); |
| checkValues(alignContentStretchStartSafe, "alignContent", "align-content", "", "normal"); |
| var alignContentSpaceAroundEndUnsafe = document.getElementById("alignContentSpaceAroundEndUnsafe"); |
| checkValues(alignContentSpaceAroundEndUnsafe, "alignContent", "align-content", "", "normal"); |
| var alignContentSpaceEvenlyFlexStartSafe = document.getElementById("alignContentSpaceEvenlyFlexStartSafe"); |
| checkValues(alignContentSpaceEvenlyFlexStartSafe, "alignContent", "align-content", "", "normal"); |
| var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBetweenSafe"); |
| checkValues(alignContentSpaceBetweenSafe, "alignContent", "align-content", "", "normal"); |
| var alignContentSpaceBetweenStretch = document.getElementById("alignContentSpaceBetweenStretch"); |
| checkValues(alignContentSpaceBetweenStretch, "alignContent", "align-content", "", "normal"); |
| var alignContentSafe = document.getElementById("alignContentSafe"); |
| checkValues(alignContentSafe, "alignContent", "align-content", "", "normal"); |
| var alignContentRightSafeUnsafe = document.getElementById("alignContentRightSafeUnsafe"); |
| checkValues(alignContentRightSafeUnsafe, "alignContent", "align-content", "", "normal"); |
| var alignContentCenterLeft = document.getElementById("alignContentCenterLeft"); |
| checkValues(alignContentCenterLeft, "alignContent", "align-content", "", "normal"); |
| }, "Test setting invalid values to align-content through CSS."); |
| |
| test(function() { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| checkValues(element, "alignContent", "align-content", "", "normal"); |
| }, "Test initial value of align-content through JS"); |
| |
| test(function() { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.alignContent = "center"; |
| checkValues(element, "alignContent", "align-content", "center", "center"); |
| |
| element.style.alignContent = "unsafe start"; |
| checkValues(element, "alignContent", "align-content", "unsafe start", "unsafe start"); |
| |
| element.style.alignContent = "safe flex-end"; |
| checkValues(element, "alignContent", "align-content", "safe flex-end", "safe flex-end"); |
| |
| element.style.alignContent = "unsafe end"; |
| checkValues(element, "alignContent", "align-content", "unsafe end", "unsafe end"); |
| |
| element.style.alignContent = "first baseline"; |
| checkValues(element, "alignContent", "align-content", "baseline", "baseline"); |
| |
| element.style.alignContent = "last baseline"; |
| checkValues(element, "alignContent", "align-content", "last baseline", "last baseline"); |
| |
| element.style.alignContent = "normal"; |
| checkValues(element, "alignContent", "align-content", "normal", "normal"); |
| |
| element.style.display = "flex"; |
| element.style.alignContent = "normal"; |
| checkValues(element, "alignContent", "align-content", "normal", "normal"); |
| |
| element.style.display = "grid"; |
| element.style.alignContent = "normal"; |
| checkValues(element, "alignContent", "align-content", "normal", "normal"); |
| |
| element.style.alignContent = "flex-end"; |
| checkValues(element, "alignContent", "align-content", "flex-end", "flex-end"); |
| }, "Test getting and setting align-content through JS"); |
| |
| test(function() { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| |
| checkBadValues(element, "alignContent", "align-content", "left"); |
| checkBadValues(element, "alignContent", "align-content", "right"); |
| checkBadValues(element, "alignContent", "align-content", "auto"); |
| checkBadValues(element, "alignContent", "align-content", "unsafe auto"); |
| checkBadValues(element, "alignContent", "align-content", "auto safe"); |
| checkBadValues(element, "alignContent", "align-content", "auto left"); |
| checkBadValues(element, "alignContent", "align-content", "safe left"); |
| checkBadValues(element, "alignContent", "align-content", "unsafe right"); |
| checkBadValues(element, "alignContent", "align-content", "baseline safe"); |
| checkBadValues(element, "alignContent", "align-content", "last-baseline center"); |
| checkBadValues(element, "alignContent", "align-content", "unsafe unsafe"); |
| checkBadValues(element, "alignContent", "align-content", "unsafe safe"); |
| checkBadValues(element, "alignContent", "align-content", "center start"); |
| checkBadValues(element, "alignContent", "align-content", "baseline safe"); |
| checkBadValues(element, "alignContent", "align-content", "unsafe baseline"); |
| checkBadValues(element, "alignContent", "align-content", "unsafe safe left"); |
| checkBadValues(element, "alignContent", "align-content", "unsafe left safe"); |
| checkBadValues(element, "alignContent", "align-content", "left safe unsafe safe"); |
| checkBadValues(element, "alignContent", "align-content", "start right space-between"); |
| checkBadValues(element, "alignContent", "align-content", "safe stretch"); |
| checkBadValues(element, "alignContent", "align-content", "normal space-between"); |
| checkBadValues(element, "alignContent", "align-content", "stretch normal"); |
| checkBadValues(element, "alignContent", "align-content", "stretch center"); |
| checkBadValues(element, "alignContent", "align-content", "space-between right safe"); |
| checkBadValues(element, "alignContent", "align-content", "normal safe"); |
| checkBadValues(element, "alignContent", "align-content", "space-around stretch"); |
| checkBadValues(element, "alignContent", "align-content", "end space-between start"); |
| checkBadValues(element, "alignContent", "align-content", "right safe left"); |
| checkBadValues(element, "alignContent", "align-content", "unsafe"); |
| checkBadValues(element, "alignContent", "align-content", "safe"); |
| checkBadValues(element, "alignContent", "align-content", "start safe"); |
| checkBadValues(element, "alignContent", "align-content", "end unsafe"); |
| }, "Test bad combinations of align-content"); |
| |
| test(function() { |
| element.style.display = ""; |
| checkInitialValues(element, "alignContent", "align-content", "center", "normal"); |
| }, "Test the value 'initial'"); |
| |
| test(function() { |
| element.style.display = "grid"; |
| checkInitialValues(element, "alignContent", "align-content", "safe start", "normal"); |
| }, "Test the value 'initial' for grid containers"); |
| |
| test(function() { |
| element.style.display = "flex"; |
| checkInitialValues(element, "alignContent", "align-content", "unsafe end", "normal"); |
| }, "Test the value 'initial' for flex containers"); |
| |
| test(function() { |
| checkInheritValues("alignContent", "align-content", "end"); |
| checkInheritValues("alignContent", "align-content", "safe start"); |
| checkInheritValues("alignContent", "align-content", "unsafe center"); |
| }, "Test the value 'inherit'"); |
| </script> |
