| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #justifyContentAuto { |
| justify-content: auto; |
| } |
| |
| #justifyContentBaseline { |
| justify-content: baseline; |
| } |
| |
| #justifyContentLastBaseline { |
| justify-content: last-baseline; |
| } |
| |
| #justifyContentSpaceBetween { |
| justify-content: space-between; |
| } |
| |
| #justifyContentSpaceAround { |
| justify-content: space-around; |
| } |
| |
| #justifyContentSpaceEvenly { |
| justify-content: space-evenly; |
| } |
| |
| #justifyContentStretch { |
| justify-content: stretch; |
| } |
| |
| #justifyContentStart { |
| justify-content: start; |
| } |
| |
| #justifyContentEnd { |
| justify-content: end; |
| } |
| |
| #justifyContentCenter { |
| justify-content: center; |
| } |
| |
| #justifyContentLeft { |
| justify-content: left; |
| } |
| |
| #justifyContentRight { |
| justify-content: right; |
| } |
| |
| #justifyContentFlexStart { |
| justify-content: flex-start; |
| } |
| |
| #justifyContentFlexEnd { |
| justify-content: flex-end; |
| } |
| |
| #justifyContentEndTrue { |
| justify-content: end true; |
| } |
| |
| #justifyContentCenterTrue { |
| justify-content: center true; |
| } |
| |
| #justifyContentRightSafe { |
| justify-content: right safe; |
| } |
| |
| #justifyContentLeftTrue { |
| justify-content: left true; |
| } |
| |
| #justifyContentFlexStartTrue { |
| justify-content: flex-start true; |
| } |
| |
| #justifyContentFlexEndSafe { |
| justify-content: flex-end safe; |
| } |
| |
| #justifyContentSpaceBetweenLeft { |
| justify-content: space-between left; |
| } |
| |
| #justifyContentSpaceAroundCenter { |
| justify-content: space-around center; |
| } |
| |
| #justifyContentSpaceEvenlyRight { |
| justify-content: space-evenly right; |
| } |
| |
| #justifyContentStretchStartSafe { |
| justify-content: stretch start safe; |
| } |
| |
| #justifyContentSpaceAroundEndTrue { |
| justify-content: space-around end true; |
| } |
| |
| #justifyContentSpaceEvenlyFlexStartSafe { |
| justify-content: space-evenly flex-start safe; |
| } |
| |
| <!-- Invalid CSS cases --> |
| #justifyContentSpaceBetweenSafe { |
| justify-content: space-between safe; |
| } |
| |
| #justifyContentSpaceBetweenStretch { |
| justify-content: space-between stretch; |
| } |
| |
| #justifyContentSafe { |
| justify-content: safe; |
| } |
| |
| #justifyContentRightSafeTrue { |
| justify-content: right safe true; |
| } |
| |
| #justifyContentCenterLeft { |
| justify-content: center left; |
| } |
| </style> |
| <script src="../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div id="justifyContentAuto"></div> |
| <div id="justifyContentBaseline"></div> |
| <div id="justifyContentLastBaseline"></div> |
| <div id="justifyContentSpaceBetween"></div> |
| <div id="justifyContentSpaceAround"></div> |
| <div id="justifyContentSpaceEvenly"></div> |
| <div id="justifyContentStretch"></div> |
| <div id="justifyContentStart"></div> |
| <div id="justifyContentEnd"></div> |
| <div id="justifyContentCenter"></div> |
| <div id="justifyContentLeft"></div> |
| <div id="justifyContentRight"></div> |
| <div id="justifyContentFlexStart"></div> |
| <div id="justifyContentFlexEnd"></div> |
| <div id="justifyContentEndTrue"></div> |
| <div id="justifyContentCenterTrue"></div> |
| <div id="justifyContentRightSafe"></div> |
| <div id="justifyContentLeftTrue"></div> |
| <div id="justifyContentFlexStartTrue"></div> |
| <div id="justifyContentFlexEndSafe"></div> |
| <div id="justifyContentSpaceBetweenLeft"></div> |
| <div id="justifyContentSpaceAroundCenter"></div> |
| <div id="justifyContentSpaceEvenlyRight"></div> |
| <div id="justifyContentStretchStartSafe"></div> |
| <div id="justifyContentSpaceAroundEndTrue"></div> |
| <div id="justifyContentSpaceEvenlyFlexStartSafe"></div> |
| |
| <div id="justifyContentSpaceBetweenSafe"></div> |
| <div id="justifyContentSpaceBetweenStretch"></div> |
| <div id="justifyContentSafe"></div> |
| <div id="justifyContentRightSafeTrue"></div> |
| <div id="justifyContentCenterLeft"></div> |
| |
| <script src="resources/alignment-parsing-utils.js"></script> |
| <script> |
| description('Test that setting and getting justify-content works as expected'); |
| |
| debug("Test getting justify-content set through CSS"); |
| var justifyContentAuto = document.getElementById("justifyContentAuto"); |
| shouldBeEqualToString("getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content')", "start"); |
| |
| var justifyContentBaseline = document.getElementById("justifyContentBaseline"); |
| shouldBeEqualToString("getComputedStyle(justifyContentBaseline, '').getPropertyValue('justify-content')", "baseline"); |
| |
| var justifyContentLastBaseline = document.getElementById("justifyContentLastBaseline"); |
| shouldBeEqualToString("getComputedStyle(justifyContentLastBaseline, '').getPropertyValue('justify-content')", "last-baseline"); |
| |
| var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBetween"); |
| shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetween, '').getPropertyValue('justify-content')", "space-between"); |
| |
| var justifyContentSpaceAround = document.getElementById("justifyContentSpaceAround"); |
| shouldBeEqualToString("getComputedStyle(justifyContentSpaceAround, '').getPropertyValue('justify-content')", "space-around"); |
| |
| var justifyContentSpaceEvenly = document.getElementById("justifyContentSpaceEvenly"); |
| shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenly, '').getPropertyValue('justify-content')", "space-evenly"); |
| |
| var justifyContentStretch = document.getElementById("justifyContentStretch"); |
| shouldBeEqualToString("getComputedStyle(justifyContentStretch, '').getPropertyValue('justify-content')", "stretch"); |
| |
| var justifyContentStart = document.getElementById("justifyContentStart"); |
| shouldBeEqualToString("getComputedStyle(justifyContentStart, '').getPropertyValue('justify-content')", "start"); |
| |
| var justifyContentEnd = document.getElementById("justifyContentEnd"); |
| shouldBeEqualToString("getComputedStyle(justifyContentEnd, '').getPropertyValue('justify-content')", "end"); |
| |
| var justifyContentCenter = document.getElementById("justifyContentCenter"); |
| shouldBeEqualToString("getComputedStyle(justifyContentCenter, '').getPropertyValue('justify-content')", "center"); |
| |
| var justifyContentLeft = document.getElementById("justifyContentLeft"); |
| shouldBeEqualToString("getComputedStyle(justifyContentLeft, '').getPropertyValue('justify-content')", "left"); |
| |
| var justifyContentRight = document.getElementById("justifyContentRight"); |
| shouldBeEqualToString("getComputedStyle(justifyContentRight, '').getPropertyValue('justify-content')", "right"); |
| |
| var justifyContentFlexStart = document.getElementById("justifyContentFlexStart"); |
| shouldBeEqualToString("getComputedStyle(justifyContentFlexStart, '').getPropertyValue('justify-content')", "flex-start"); |
| |
| var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd"); |
| shouldBeEqualToString("getComputedStyle(justifyContentFlexEnd, '').getPropertyValue('justify-content')", "flex-end"); |
| |
| var justifyContentEndTrue = document.getElementById("justifyContentEndTrue"); |
| shouldBeEqualToString("getComputedStyle(justifyContentEndTrue, '').getPropertyValue('justify-content')", "end true"); |
| |
| var justifyContentCenterTrue = document.getElementById("justifyContentCenterTrue"); |
| shouldBeEqualToString("getComputedStyle(justifyContentCenterTrue, '').getPropertyValue('justify-content')", "center true"); |
| |
| var justifyContentRightSafe = document.getElementById("justifyContentRightSafe"); |
| shouldBeEqualToString("getComputedStyle(justifyContentRightSafe, '').getPropertyValue('justify-content')", "right safe"); |
| |
| var justifyContentLeftTrue = document.getElementById("justifyContentLeftTrue"); |
| shouldBeEqualToString("getComputedStyle(justifyContentLeftTrue, '').getPropertyValue('justify-content')", "left true"); |
| |
| var justifyContentFlexStartTrue = document.getElementById("justifyContentFlexStartTrue"); |
| shouldBeEqualToString("getComputedStyle(justifyContentFlexStartTrue, '').getPropertyValue('justify-content')", "flex-start true"); |
| |
| var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSafe"); |
| shouldBeEqualToString("getComputedStyle(justifyContentFlexEndSafe, '').getPropertyValue('justify-content')", "flex-end safe"); |
| |
| var justifyContentSpaceBetweenLeft = document.getElementById("justifyContentSpaceBetweenLeft"); |
| shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenLeft, '').getPropertyValue('justify-content')", "space-between left"); |
| |
| var justifyContentSpaceAroundCenter = document.getElementById("justifyContentSpaceAroundCenter"); |
| shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundCenter, '').getPropertyValue('justify-content')", "space-around center"); |
| |
| var justifyContentSpaceEvenlyRight = document.getElementById("justifyContentSpaceEvenlyRight"); |
| shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyRight, '').getPropertyValue('justify-content')", "space-evenly right"); |
| |
| var justifyContentStretchStartSafe = document.getElementById("justifyContentStretchStartSafe"); |
| shouldBeEqualToString("getComputedStyle(justifyContentStretchStartSafe, '').getPropertyValue('justify-content')", "stretch start safe"); |
| |
| var justifyContentSpaceAroundEndTrue = document.getElementById("justifyContentSpaceAroundEndTrue"); |
| shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundEndTrue, '').getPropertyValue('justify-content')", "space-around end true"); |
| |
| var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyContentSpaceEvenlyFlexStartSafe"); |
| shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('justify-content')", "space-evenly flex-start safe"); |
| |
| var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpaceBetweenSafe"); |
| shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content')", "start"); |
| |
| var justifyContentSpaceAroundTrue = document.getElementById("justifyContentSpaceBetweenStretch"); |
| shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenStretch, '').getPropertyValue('justify-content')", "start"); |
| |
| var justifyContentSpaceAroundTrue = document.getElementById("justifyContentSafe"); |
| shouldBeEqualToString("getComputedStyle(justifyContentSafe, '').getPropertyValue('justify-content')", "start"); |
| |
| var justifyContentSpaceAroundTrue = document.getElementById("justifyContentRightSafeTrue"); |
| shouldBeEqualToString("getComputedStyle(justifyContentRightSafeTrue, '').getPropertyValue('justify-content')", "start"); |
| |
| var justifyContentSpaceAroundTrue = document.getElementById("justifyContentCenterLeft"); |
| shouldBeEqualToString("getComputedStyle(justifyContentCenterLeft, '').getPropertyValue('justify-content')", "start"); |
| |
| debug(""); |
| debug("Test initial value of justify-content through JS"); |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('justify-content')", "start"); |
| |
| debug(""); |
| debug("Test getting and setting justify-content through JS"); |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.justifyContent = "center"; |
| checkValues(element, "justifyContent", "justify-content", "center", "center"); |
| |
| element.style.justifyContent = "true start"; |
| checkValues(element, "justifyContent", "justify-content", "start true", "start true"); |
| |
| element.style.justifyContent = "flex-end safe"; |
| checkValues(element, "justifyContent", "justify-content", "flex-end safe", "flex-end safe"); |
| |
| element.style.justifyContent = "space-between right safe"; |
| checkValues(element, "justifyContent", "justify-content", "space-between right safe", "space-between right safe"); |
| |
| element.style.justifyContent = "center stretch"; |
| checkValues(element, "justifyContent", "justify-content", "stretch center", "stretch center"); |
| |
| element.style.justifyContent = "right true"; |
| checkValues(element, "justifyContent", "justify-content", "right true", "right true"); |
| |
| element.style.justifyContent = "auto"; |
| checkValues(element, "justifyContent", "justify-content", "auto", "start"); |
| |
| element.style.display = "-webkit-flex"; |
| element.style.justifyContent = "auto"; |
| checkValues(element, "justifyContent", "justify-content", "auto", "stretch"); |
| |
| element.style.display = "-webkit-grid"; |
| element.style.justifyContent = "auto"; |
| checkValues(element, "justifyContent", "justify-content", "auto", "start"); |
| |
| element.style.justifyContent = "flex-end"; |
| checkValues(element, "justifyContent", "justify-content", "flex-end", "flex-end"); |
| |
| debug(""); |
| debug("Test bad combinations of justify-content"); |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| |
| checkBadValues(element, "justifyContent", "justify-content", ""); |
| checkBadValues(element, "justifyContent", "justify-content", "true auto"); |
| checkBadValues(element, "justifyContent", "justify-content", "auto safe"); |
| checkBadValues(element, "justifyContent", "justify-content", "auto left"); |
| checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); |
| checkBadValues(element, "justifyContent", "justify-content", "last baseline center"); |
| checkBadValues(element, "justifyContent", "justify-content", "true true"); |
| checkBadValues(element, "justifyContent", "justify-content", "true safe"); |
| checkBadValues(element, "justifyContent", "justify-content", "center start"); |
| checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); |
| checkBadValues(element, "justifyContent", "justify-content", "true baseline"); |
| checkBadValues(element, "justifyContent", "justify-content", "true safe left"); |
| checkBadValues(element, "justifyContent", "justify-content", "true left safe"); |
| checkBadValues(element, "justifyContent", "justify-content", "left safe true safe"); |
| checkBadValues(element, "justifyContent", "justify-content", "start right space-between"); |
| checkBadValues(element, "justifyContent", "justify-content", "safe stretch"); |
| checkBadValues(element, "justifyContent", "justify-content", "space-around stretch"); |
| checkBadValues(element, "justifyContent", "justify-content", "end space-between start"); |
| checkBadValues(element, "justifyContent", "justify-content", "right safe left"); |
| checkBadValues(element, "justifyContent", "justify-content", "true"); |
| checkBadValues(element, "justifyContent", "justify-content", "safe"); |
| |
| debug(""); |
| debug("Test the value 'initial'"); |
| element.style.display = ""; |
| checkInitialValues(element, "justifyContent", "justify-content", "stretch center", "start"); |
| |
| debug(""); |
| debug("Test the value 'initial' for grid containers"); |
| element.style.display = "-webkit-grid"; |
| checkInitialValues(element, "justifyContent", "justify-content", "space-between left", "start"); |
| |
| debug(""); |
| debug("Test the value 'initial' for flex containers"); |
| element.style.display = "-webkit-flex"; |
| checkInitialValues(element, "justifyContent", "justify-content", "right true", "stretch"); |
| |
| debug(""); |
| debug("Test the value 'inherit'"); |
| checkInheritValues("justifyContent", "justify-content", "end"); |
| checkInheritValues("justifyContent", "justify-content", "left safe"); |
| checkInheritValues("justifyContent", "justify-content", "stretch center"); |
| |
| </script> |
| </body> |
| </html> |
