| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #alignContentAuto { |
| align-content: auto; |
| } |
| |
| #alignContentBaseline { |
| align-content: 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; |
| } |
| |
| #alignContentLeft { |
| align-content: left; |
| } |
| |
| #alignContentRight { |
| align-content: right; |
| } |
| |
| #alignContentFlexStart { |
| align-content: flex-start; |
| } |
| |
| #alignContentFlexEnd { |
| align-content: flex-end; |
| } |
| |
| #alignContentEndTrue { |
| align-content: end true; |
| } |
| |
| #alignContentCenterTrue { |
| align-content: center true; |
| } |
| |
| #alignContentRightSafe { |
| align-content: right safe; |
| } |
| |
| #alignContentLeftTrue { |
| align-content: left true; |
| } |
| |
| #alignContentFlexStartTrue { |
| align-content: flex-start true; |
| } |
| |
| #alignContentFlexEndSafe { |
| align-content: flex-end safe; |
| } |
| |
| #alignContentSpaceBetweenLeft { |
| align-content: space-between left; |
| } |
| |
| #alignContentSpaceAroundCenter { |
| align-content: space-around center; |
| } |
| |
| #alignContentSpaceEvenlyRight { |
| align-content: space-evenly right; |
| } |
| |
| #alignContentStretchStartSafe { |
| align-content: stretch start safe; |
| } |
| |
| #alignContentSpaceAroundEndTrue { |
| align-content: space-around end true; |
| } |
| |
| #alignContentSpaceEvenlyFlexStartSafe { |
| align-content: space-evenly flex-start safe; |
| } |
| |
| <!-- Invalid CSS cases --> |
| #alignContentSpaceBetweenSafe { |
| align-content: space-between safe; |
| } |
| |
| #alignContentSpaceBetweenStretch { |
| align-content: space-between stretch; |
| } |
| |
| #alignContentSafe { |
| align-content: safe; |
| } |
| |
| #alignContentRightSafeTrue { |
| align-content: right safe true; |
| } |
| |
| #alignContentCenterLeft { |
| align-content: center left; |
| } |
| </style> |
| <script src="../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div id="alignContentAuto"></div> |
| <div id="alignContentBaseline"></div> |
| <div id="alignContentLastBaseline"></div> |
| <div id="alignContentSpaceBetween"></div> |
| <div id="alignContentSpaceAround"></div> |
| <div id="alignContentSpaceEvenly"></div> |
| <div id="alignContentStretch"></div> |
| <div id="alignContentSpaceBetweenSafe"></div> |
| <div id="alignContentSpaceAroundTrue"></div> |
| <div id="alignContentStretchTrue"></div> |
| <div id="alignContentStretchrue"></div> |
| <div id="alignContentStart"></div> |
| <div id="alignContentEnd"></div> |
| <div id="alignContentCenter"></div> |
| <div id="alignContentLeft"></div> |
| <div id="alignContentRight"></div> |
| <div id="alignContentFlexStart"></div> |
| <div id="alignContentFlexEnd"></div> |
| <div id="alignContentEndTrue"></div> |
| <div id="alignContentCenterTrue"></div> |
| <div id="alignContentRightSafe"></div> |
| <div id="alignContentLeftTrue"></div> |
| <div id="alignContentFlexStartTrue"></div> |
| <div id="alignContentFlexEndSafe"></div> |
| <div id="alignContentSpaceBetweenLeft"></div> |
| <div id="alignContentSpaceAroundCenter"></div> |
| <div id="alignContentSpaceEvenlyRight"></div> |
| <div id="alignContentStretchStartSafe"></div> |
| <div id="alignContentSpaceAroundEndTrue"></div> |
| <div id="alignContentSpaceEvenlyFlexStartSafe"></div> |
| |
| <div id="alignContentSpaceBetweenSafe"></div> |
| <div id="alignContentSpaceBetweenStretch"></div> |
| <div id="alignContentSafe"></div> |
| <div id="alignContentRightSafeTrue"></div> |
| <div id="alignContentCenterLeft"></div> |
| |
| <script src="resources/alignment-parsing-utils.js"></script> |
| <script> |
| description('Test that setting and getting align-content works as expected'); |
| |
| debug("Test getting align-content set through CSS"); |
| var alignContentAuto = document.getElementById("alignContentAuto"); |
| shouldBeEqualToString("getComputedStyle(alignContentAuto, '').getPropertyValue('align-content')", "start"); |
| |
| var alignContentBaseline = document.getElementById("alignContentBaseline"); |
| shouldBeEqualToString("getComputedStyle(alignContentBaseline, '').getPropertyValue('align-content')", "baseline"); |
| |
| var alignContentLastBaseline = document.getElementById("alignContentLastBaseline"); |
| shouldBeEqualToString("getComputedStyle(alignContentLastBaseline, '').getPropertyValue('align-content')", "last-baseline"); |
| |
| var alignContentSpaceBetween = document.getElementById("alignContentSpaceBetween"); |
| shouldBeEqualToString("getComputedStyle(alignContentSpaceBetween, '').getPropertyValue('align-content')", "space-between"); |
| |
| var alignContentSpaceAround = document.getElementById("alignContentSpaceAround"); |
| shouldBeEqualToString("getComputedStyle(alignContentSpaceAround, '').getPropertyValue('align-content')", "space-around"); |
| |
| var alignContentSpaceEvenly = document.getElementById("alignContentSpaceEvenly"); |
| shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenly, '').getPropertyValue('align-content')", "space-evenly"); |
| |
| var alignContentStretch = document.getElementById("alignContentStretch"); |
| shouldBeEqualToString("getComputedStyle(alignContentStretch, '').getPropertyValue('align-content')", "stretch"); |
| |
| var alignContentStart = document.getElementById("alignContentStart"); |
| shouldBeEqualToString("getComputedStyle(alignContentStart, '').getPropertyValue('align-content')", "start"); |
| |
| var alignContentEnd = document.getElementById("alignContentEnd"); |
| shouldBeEqualToString("getComputedStyle(alignContentEnd, '').getPropertyValue('align-content')", "end"); |
| |
| var alignContentCenter = document.getElementById("alignContentCenter"); |
| shouldBeEqualToString("getComputedStyle(alignContentCenter, '').getPropertyValue('align-content')", "center"); |
| |
| var alignContentLeft = document.getElementById("alignContentLeft"); |
| shouldBeEqualToString("getComputedStyle(alignContentLeft, '').getPropertyValue('align-content')", "left"); |
| |
| var alignContentRight = document.getElementById("alignContentRight"); |
| shouldBeEqualToString("getComputedStyle(alignContentRight, '').getPropertyValue('align-content')", "right"); |
| |
| var alignContentFlexStart = document.getElementById("alignContentFlexStart"); |
| shouldBeEqualToString("getComputedStyle(alignContentFlexStart, '').getPropertyValue('align-content')", "flex-start"); |
| |
| var alignContentFlexEnd = document.getElementById("alignContentFlexEnd"); |
| shouldBeEqualToString("getComputedStyle(alignContentFlexEnd, '').getPropertyValue('align-content')", "flex-end"); |
| |
| var alignContentEndTrue = document.getElementById("alignContentEndTrue"); |
| shouldBeEqualToString("getComputedStyle(alignContentEndTrue, '').getPropertyValue('align-content')", "end true"); |
| |
| var alignContentCenterTrue = document.getElementById("alignContentCenterTrue"); |
| shouldBeEqualToString("getComputedStyle(alignContentCenterTrue, '').getPropertyValue('align-content')", "center true"); |
| |
| var alignContentRightSafe = document.getElementById("alignContentRightSafe"); |
| shouldBeEqualToString("getComputedStyle(alignContentRightSafe, '').getPropertyValue('align-content')", "right safe"); |
| |
| var alignContentLeftTrue = document.getElementById("alignContentLeftTrue"); |
| shouldBeEqualToString("getComputedStyle(alignContentLeftTrue, '').getPropertyValue('align-content')", "left true"); |
| |
| var alignContentFlexStartTrue = document.getElementById("alignContentFlexStartTrue"); |
| shouldBeEqualToString("getComputedStyle(alignContentFlexStartTrue, '').getPropertyValue('align-content')", "flex-start true"); |
| |
| var alignContentFlexEndSafe = document.getElementById("alignContentFlexEndSafe"); |
| shouldBeEqualToString("getComputedStyle(alignContentFlexEndSafe, '').getPropertyValue('align-content')", "flex-end safe"); |
| |
| var alignContentSpaceBetweenLeft = document.getElementById("alignContentSpaceBetweenLeft"); |
| shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenLeft, '').getPropertyValue('align-content')", "space-between left"); |
| |
| var alignContentSpaceAroundCenter = document.getElementById("alignContentSpaceAroundCenter"); |
| shouldBeEqualToString("getComputedStyle(alignContentSpaceAroundCenter, '').getPropertyValue('align-content')", "space-around center"); |
| |
| var alignContentSpaceEvenlyRight = document.getElementById("alignContentSpaceEvenlyRight"); |
| shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenlyRight, '').getPropertyValue('align-content')", "space-evenly right"); |
| |
| var alignContentStretchStartSafe = document.getElementById("alignContentStretchStartSafe"); |
| shouldBeEqualToString("getComputedStyle(alignContentStretchStartSafe, '').getPropertyValue('align-content')", "stretch start safe"); |
| |
| var alignContentSpaceAroundEndTrue = document.getElementById("alignContentSpaceAroundEndTrue"); |
| shouldBeEqualToString("getComputedStyle(alignContentSpaceAroundEndTrue, '').getPropertyValue('align-content')", "space-around end true"); |
| |
| var alignContentSpaceEvenlyFlexStartSafe = document.getElementById("alignContentSpaceEvenlyFlexStartSafe"); |
| shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('align-content')", "space-evenly flex-start safe"); |
| |
| var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBetweenSafe"); |
| shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenSafe, '').getPropertyValue('align-content')", "start"); |
| |
| var alignContentSpaceAroundTrue = document.getElementById("alignContentSpaceBetweenStretch"); |
| shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenStretch, '').getPropertyValue('align-content')", "start"); |
| |
| var alignContentSpaceAroundTrue = document.getElementById("alignContentSafe"); |
| shouldBeEqualToString("getComputedStyle(alignContentSafe, '').getPropertyValue('align-content')", "start"); |
| |
| var alignContentSpaceAroundTrue = document.getElementById("alignContentRightSafeTrue"); |
| shouldBeEqualToString("getComputedStyle(alignContentRightSafeTrue, '').getPropertyValue('align-content')", "start"); |
| |
| var alignContentSpaceAroundTrue = document.getElementById("alignContentCenterLeft"); |
| shouldBeEqualToString("getComputedStyle(alignContentCenterLeft, '').getPropertyValue('align-content')", "start"); |
| |
| debug(""); |
| debug("Test initial value of align-content through JS"); |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('align-content')", "start"); |
| |
| debug(""); |
| debug("Test getting and setting align-content through JS"); |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.alignContent = "center"; |
| checkValues(element, "alignContent", "align-content", "center", "center"); |
| |
| element.style.alignContent = "true start"; |
| checkValues(element, "alignContent", "align-content", "start true", "start true"); |
| |
| element.style.alignContent = "flex-end safe"; |
| checkValues(element, "alignContent", "align-content", "flex-end safe", "flex-end safe"); |
| |
| element.style.alignContent = "space-between right safe"; |
| checkValues(element, "alignContent", "align-content", "space-between right safe", "space-between right safe"); |
| |
| element.style.alignContent = "stretch center"; |
| checkValues(element, "alignContent", "align-content", "stretch center", "stretch center"); |
| |
| element.style.alignContent = "right true"; |
| checkValues(element, "alignContent", "align-content", "right true", "right true"); |
| |
| element.style.alignContent = "auto"; |
| checkValues(element, "alignContent", "align-content", "auto", "start"); |
| |
| element.style.display = "-webkit-flex"; |
| element.style.alignContent = "auto"; |
| checkValues(element, "alignContent", "align-content", "auto", "stretch"); |
| |
| element.style.display = "-webkit-grid"; |
| element.style.alignContent = "auto"; |
| checkValues(element, "alignContent", "align-content", "auto", "start"); |
| |
| element.style.alignContent = "flex-end"; |
| checkValues(element, "alignContent", "align-content", "flex-end", "flex-end"); |
| |
| debug(""); |
| debug("Test bad combinations of align-content"); |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| |
| checkBadValues(element, "alignContent", "align-content", ""); |
| checkBadValues(element, "alignContent", "align-content", "true auto"); |
| checkBadValues(element, "alignContent", "align-content", "auto safe"); |
| checkBadValues(element, "alignContent", "align-content", "auto left"); |
| checkBadValues(element, "alignContent", "align-content", "baseline safe"); |
| checkBadValues(element, "alignContent", "align-content", "last baseline center"); |
| checkBadValues(element, "alignContent", "align-content", "true true"); |
| checkBadValues(element, "alignContent", "align-content", "true safe"); |
| checkBadValues(element, "alignContent", "align-content", "center start"); |
| checkBadValues(element, "alignContent", "align-content", "baseline safe"); |
| checkBadValues(element, "alignContent", "align-content", "true baseline"); |
| checkBadValues(element, "alignContent", "align-content", "true safe left"); |
| checkBadValues(element, "alignContent", "align-content", "true left safe"); |
| checkBadValues(element, "alignContent", "align-content", "left safe true safe"); |
| checkBadValues(element, "alignContent", "align-content", "start right space-between"); |
| checkBadValues(element, "alignContent", "align-content", "safe stretch"); |
| 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", "true"); |
| checkBadValues(element, "alignContent", "align-content", "safe"); |
| |
| debug(""); |
| debug("Test the value 'initial'"); |
| element.style.display = ""; |
| checkInitialValues(element, "alignContent", "align-content", "stretch center", "start"); |
| |
| debug(""); |
| debug("Test the value 'initial' for grid containers"); |
| element.style.display = "-webkit-grid"; |
| checkInitialValues(element, "alignContent", "align-content", "space-between left", "start"); |
| |
| debug(""); |
| debug("Test the value 'initial' for flex containers"); |
| element.style.display = "-webkit-flex"; |
| checkInitialValues(element, "alignContent", "align-content", "right true", "stretch"); |
| |
| debug(""); |
| debug("Test the value 'inherit'"); |
| checkInheritValues("alignContent", "align-content", "end"); |
| checkInheritValues("alignContent", "align-content", "left safe"); |
| checkInheritValues("alignContent", "align-content", "stretch center"); |
| |
| </script> |
| </body> |
| </html> |
